Mood boards matter in the boardman, argues Jerry Cao of UXPin, and offers tips on making best use of them.
Brightening things with mood boards
Want a way to unify your team that's a lot more fun and creative than an uncomfortable meeting?
We go into details about mood boards in Web UI Best Practices, but we'll discuss their significance again here. Mood boards are ideal for encouraging — but not forcing — input from your team, quite a different strategy than the committee mindset.
Popularized by industries such as fashion and interior design, these stylistic collages have been proven effective across many visual industries, including web UI design.
Visex mood board by Clearleft
Mood boards give designers more creative control because the context is easily understood: since everyone's looking at an early stage design, the feedback is mostly conceptual. That helps prevent stakeholders from getting too prescriptive like when they pick apart the navigation or font size of a mid or high fidelity mockup. Even if they feel strongly about certain visual themes, the designer still has control over creative execution.
Take a look at the above mood board above, made by UX agency Clearleft. This mood board is more than just a Pinterest-style collage — its a canvas that shows (rather than tells) the typography, colours, and overall feel for the site. Web Designer Depot explains that mood boards show clearly the aesthetic feel of a site, and act as a quick reference guide for the design's visual elements.
You can think of mood boards as a succinct and abridged style guide, in poster form for easy reference. As to what you include on your mood board, make sure you cover brand guidelines, communication style, and the personality of the website. Web design mood boards should focus on a specific set of elements:
Colour palette — your site's colour scheme and primary colours.
Typography — any useful information about fonts, sizes, heading preferences, etc.
Graphic style — what kind of photos or illustrations you prefer, with examples.
Iconography — if your site uses icons or symbols, this is a good place to keep them straight.
Navigation style — the basics of how users get around your site.
Spacing — where and how much white space is used.
Overall contrast — this helps to emphasize the overall visual hierarchy and structure
Mood boards are meant to be creative, so don't get pigeon-holed by the technical details of the board itself. They generally they fall into two styles, Loose and Refined. Compare the two different styles of mood boards for the same site, ModBaby.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
Loose mood boards
Mood board by ModBaby: www.etsy.com/people/ModBabyDesigns
This style is more about capturing a snapshot of the site's look and feel. In fact, the first moodboard by Clearleft is done in this looser style. All that's required is few quick adjectives to describe the brand, an overall colour scheme, and images and elements to show how everything "feels". In this case, feedback on the mood board would be mostly conceptual.
Refined mood board
Mood board by ModBaby: www.etsy.com/people/ModBabyDesigns
The refined style is more streamlined, showing the brown and blue colour scheme but dropping handmade elements in favor of more explicit patterns, typography, and photos.
In general, mood boards help avoid design by committee in two ways. First, all team members have a clear visual representation of the their target (as opposed to relying on their own interpretations of verbal descriptions). Secondly, a visual asset in the beginning phases can help alleviate "empty canvas" syndrome, in which people provide feedback simply because it feels better than waiting for the first draft.
While some people would rather take a "hands-on" approach to their mood boards by cutting magazine clippings and pasted them to a board, there are some digital tools such as ImagePacker, Vhue, and Niice that can add a nice touch of refinement. Regardless of your methods, we've found Dribbble, Behance, Pinterest, and Flickr’s Inspiration Boards are great resources for mood board inspiration.
The anti-committee
If you want to create a successful web UI design, you'll probably need a little help. But that's a good thing — when done right, collaboration can enhance the final product in ways not otherwise possible. Just make sure that collaboration is complementary, and not supplementary, to the design process.
Like sketching, moodboards help you see the visual ingredients of the website while getting you over the groan zone faster. And if nothing else, they're a less labor intensive way of treating those afflicted with I'll-know-it-when-I-see-it syndrome.
To learn more about building successful web interfaces based on examples from 33 top companies like AirBnB, Wufoo, and Linkedin, check out the free e-book Interaction Design Best Practices.
Words: Jerry Cao
Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content for the wireframing and prototyping platform. To learn how to use mockups of all types and fidelities, check out The Guide to Mockups.
