A Single Project Spotlight

This illustrates my step-by-step approach for a project through the stages of wire-framing, mockup creation, and final design View Process

Role

Web Designer

Date

2023

Tools

Creative Cloud, Wordpress, JIRA, Figma, Html5, Css3, ADA, and more.

Wbsite mockcup image

Process

1. Content Review:

I read and understand the information provided by the content team in a Word document. This step allows me to grasp the project's requirements and goals.


2. Wireframe & Mockup:

After understanding the content, I create wireframes and mockups. This step involves creating visual representations of the project, outlining the layout, design, and user interface. Wireframes can be basic sketches, while mockups are more detailed and close to the final design.

Wireframe

home page and interior pages of the website examples image

home page and interior pages of the website examples image

Mockup

home page and interior pages of the website examples image

3. Coding:

To bring the design to life, I used industry-standard tools such as Sketch and Figma to create wireframes and prototypes. I collaborated closely with the development team to ensure that the design was implemented accurately and effectively. Through rigorous testing and iterations, we fine-tuned the design to ensure that it was optimized for usability and user satisfaction.

Before (original site)

home page and interior pages of the website examples image

After (my creation)

home page and interior pages of the website examples image