After establishing the sitemap with the client, my first step is to build wireframes as high fidelity as possible. This allows me to take a holistic approach of organizing the content in a user-friendly way without completely ignoring the visual structure.
Once I complete the wireframes, I create a working prototype of a user-flow in Figma. I then walk the client through the prototype step by step, explaining the design decisions along the way. Once this process is complete and I have feedback from the client, I then refine the prototype to provide clarity to the developer later in the process. (The image below reflects the prototype after the visual design was completed and refined.)
The client provided only a logo and photography to begin the project. I selected the typography, color palette, and sprinkled in some vectors that enhanced the ethos of the brand. Freight Display Pro was the choice for headings, while GT America Mono was selected to contrast the serif letter forms but keep a consistent X-height among the pair. These four colors below act as the primary color palette for the brand, though the design system for the site consists of several variations of these values.
