Note: This is the tenth in a series of posts about the Nonprofit Web Design Process. See the end of this post for a linked index of other posts in the series.
The visual design details the final look and feel of the website. It defines the colors, graphics, fonts and photography that make the site beautiful.
Purposes for the Visual Design phase include:
- Agreeing on a creative vision and personality for the web presence
- Taking the functionality detailed in the wireframes and making it visually appealing
- Defining styles for different elements of the website including headlines, links, buttons, photos, form fields, promo items, etc.
The visual design really begins with the brand of the organization. Some organizations come to us with a very clearly articulated brand that has accompanying logos, fonts, colors, photography, copywriting and more. Some come to us and want to create a completely new brand. Most organizations are somewhere in between: they have a logo and color scheme but they want to explore new ways of expressing their brand in their visual design.
Mood boards are a deliverable we often use to help pinpoint the brand aesthetic when it’s not already defined. To create a mood board, we’ll collect branding assets from the organization and meet with key stakeholders to discuss the personality of their brand. We’ll then develop 2-3 very different mood boards depicting some sample imagery, graphics, fonts and styles that might appear in a visual design that reflects said personality. We like to work on mood boards in parallel with the User Research and Information Architecture phases so that the aesthetic is already defined by the time the Wireframes are complete.
Once a mood board is chosen and revised, we apply the new mood to the approved wireframes to fully design the homepage and sub-pages for the website. We like to be sure that we have a design for each level of navigation for a site and also for each responsive breakpoint so the team can see a clear picture of the entire user experience.
Typically we create visual designs in Adobe Photoshop or Adobe Illustrator. We like to post the final images online so the team can see how the pages will look in the context of a web browser. The final, approved Photoshop or Illustrator files will be sliced and coded as HTML.
The visual design depicts the user experience of the website. The final step in our process is the Solution Design phase, where we detail the administrator experience for the site. Stay tuned for the last post in our series where we discuss website configuration, content modeling and authoring forms!