Using my research as a staging point, I will begin to cycle through vast amounts of notebook paper with a Pilot G2. If not already determined, I will decide what information your website needs to include and how it should be structured. After playing with the layout and structure until it cannot be further optimized, I will settle on a layout and put together a series of wireframe diagrams to show you what it will look like. You will be afforded the opportunity to suggest any changes you’d like to see. Your hand-drawn wireframes will be scanned and delivered to you as a PDF.
Depending on the scope of work and the size of the project, hi-fi wireframes may be designed for presentation to stakeholders. These wireframes will be identical to the hand-drawn wireframes, but will be more polished and presentable. Using Adobe XD, the lo-fi wireframes will be rendered as a digital wireframe and delivered both as a PDF and an online, interactive demo.
At this point, I will put together a style sheet that will serve to guide me throughout the rest of the design process. The purpose of the style guide is to ensure visual and stylistic consistency throughout your website. Buttons that do the same thing should be identical throughout all the different pages, and graphics should use the same set of aspect ratios to ensure that everything looks harmonious. Creating and adhering to a style guide is the number one factor that contributes to a professional, attractive website. Depending on the stage of your brand’s life cycle, some of this information may have already been determined, but the style guide will always include the following:
- Your logo and its variations (color, inverse, black and white, etcetera)
- Your color scheme
- Your typography
- Specialty icons
- A small moodboard of photography (used to guide photo selection in the future)
You or your creative team will be intimately involved with the development of the style guide. It will be delivered to you as an Adobe Illustrator file as well as a PDF.
With wireframes and a style guide in hand, the website itself can now be mocked up. I will use Adobe XD to create a finished version of what your website will look like when it is developed. As a rule, I do not use placeholder text or images in this phase. By creating a polished and complete mockup of the website, the timeline for development is shortened considerably, as all materials that will be required will be available from the onset. All copy will be provided by the client.
Following completion of the design, basic prototyping will be applied to the design. This means that the online demo will feature clickable links throughout the design that will serve to give stakeholders an idea of the way the site will function. Typically, all major user actions will be prototyped (e.g., purchasing a product, signing up for a subscription, filling out a form).
Your finished prototypes will be delivered as a series of PDFs and an interactive online demo.
User Testing 1
During this phase, I will have three people from your target demographic view the mockup and try to accomplish various tasks. Using their feedback, I will make changes to the structure and style as needed.
Design Phase Deliverables:
- Low-Fidelity Wireframes (PDF)
- Style Guide (PDF & .ai)
- High-Fidelity Wireframes (Optional. PDF & Online)
- Interactive Prototype (PDF & Online)