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.

webiste mockup image

Website

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.

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

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.

Current Live (Home)

home page and interior pages of the website examples image

New Home (Launching soon!)

home page and interior pages of the website examples image

Current Live (Resources)

home page and interior pages of the website examples image

New Resources (Launching soon!)

home page and interior pages of the website examples image

Current Live (About)

home page and interior pages of the website examples image

New About (Launching soon!)

home page and interior pages of the website examples image
Web Designer
UI/UX
FrontEnd Developer
Graphic Designer
Wordpress
Product Design
Social Media
CMS
App Designer
Mockcups
Webflow
Wireframes