Nonprofit Web Design Process Part 5: Visual Design

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.

Purposes

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.

Methodology

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.

Deliverables

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.

What’s Next

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!

Other Posts in this Series

1. Introduction
2. Stakeholder Discovery
3. User Research
   • Analytics
   • Surveys and Interviews
   • Card Sorts
   • Usability Tests
   • Personas
4. Content Strategy
5. Information Architecture
   • Sitemaps
   • Wireframes
6. Visual Design [this post]
7. Solution Design

ABOUT THE AUTHOR

Lacey Kruger

Lacey Kruger, principal information architect for Blackbaud, designs online properties for nonprofits that delight and inspire. Whether a full scale website, a campaign site or a peer to peer fundraising site, Lacey guides clients through a research-based and user-centered approach to design. In her 12+ years at Blackbaud, she has developed a deep understanding of nonprofit web presences. That knowledge, along with her years of experience in information design, have established her as an industry expert.

Lacey has written a Blackbaud eBook, “A Guide to the Nonprofit Web Design Process” and her article, “Designing Nonprofit Experiences: Building a UX Toolkit” was published in User Experience magazine. She has presented at industry conferences including bbcon, IA Summit and BIG Design.