profile pic

by Eric Sharp on October 17, 2013

Topics: User Experience (UX), Visual Design

web-design-mood-board

While designing your website’s user experience, mood boards can be an essential tool for helping everyone involved gain understanding of your organization’s branding guideline, communication style, and personality.

This creative process also provides designers with a golden opportunity to experiment with the articulation of your value proposition and positioning statement — critical elements to ensuring your message resonates with your audience.

Furthermore, when mood boards solicit the proper feedback and are presented in parallel with a clickable prototype, we believe they can erase that inescapable anxiety that the creative process can evoke.

What is a Mood Board?

Though mood boards are heavily used by web professionals, they are not exclusive to our industry nor did they originate from it. Mood boards have a long history in helping people communicate creative ideas and can take on many forms (actual or virtual) in various industries (e.g. fashion, interior design).

mood-board-interior-decor
A generic mood board (above) designed to help an interior decorator communicate

Wikipedia describes a mood board as:

“A type of collage that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use mood boards to develop their design concepts and to communicate to other members of the design team.”

What is a “Web Design Mood Board”?

Mood boards for web design will focus on a specific set of elements to help communicate how the website’s content and overall user interface would be impacted.

At ProtoFuse, our mood boards will experiment with:

  1. color palette
  2. fonts (1 to 3 per mood board)
  3. photography/illustration style
  4. iconography (if needed)
  5. navigation style
  6. spatial awareness (or, white space usage)
  7. overall contrast (helps emphasize hierarchy & structure)

What Web Design Mood Boards do not Communicate

To understand their intent, it’s just as important to understand what they do not represent.

  • the design of a specific page template (e.g. Homepage, About Us, Products) — mood boards are page template agnostic
  • final content (headlines, body text, image selections)
  • final site hierarchy & user interactivity (that’s why we prototype)

Communication style and personality help craft the overall experience your users will encounter throughout your website, and mood boards are the vehicle your organization can use to define those characteristics.

Mood boarding Impacts your Company’s Personality

After your organization selects a mood board (we’ve found delivering clients two or three is best), it’s important to not overlook the significance of the decision.

Though you may have rationalized that you’re simply choosing a mood board that best adheres to your branding guideline and resonates more adequately with your audience, you’re actually defining the personality and communication style of your website — which should mirror your organization’s.

Moodboarding is so much more than “choosing some fonts and colors”.

In his co-authored book Smashing Book #3, Aaron Walter, Director of UX at MailChimp, suggests that expressing your company’s personality in your design can:

  1. Help you distinguish yourself from your competitors
  2. Elicit an emotional response that encourages long-term memory of your brand

Communication style and personality help craft the overall experience your users will encounter throughout your website, and mood boards are the vehicle your organization can use to define those characteristics.


A Golden Opportunity: Value Proposition & Positioning Statement

In a medium full of noise and distraction, it’s becoming progressively harder to communicate what you do, who you do it for, and why you do it better than your competition. Before a designer can begin experimenting with how exactly your value proposition and positioning statement is woven into your website — you need to define them.

“You have to present your value proposition as the first thing the visitors see on your home page, but should be visible in all major entry points of the site“, states Peep Laja of ConversionXL.

You might like:

The #1 Most Important Element to Your Home Page Design

Your company’s value proposition should be the front and center element to your homepage. Learn what one is and why it’s critical for your homepage.


Mood boards provide an excellent opportunity to experiment with the layout and styling of these two vital elements.

web-design-mood-board-marketing-message-2
An example of how a mood board can experiment with the styling of a company’s positioning statement
web-design-mood-board-marketing-message-1
Same verbiage, different personality. Color, fonts, imagery and overall styling can have a dramatic impact on how your positioning statement is conveyed

There’s also a case to be made that designers — by nature being creative and by proximity not being too close to your organization — can help you think differently in how these elements are conveyed. Many times we’ve helped our clients find the right “voice” via our moodboarding phase.

Mood boards make the uncomfortable, comfortable

What is it about the creative profession that can spawn anxiety and put everyone on edge before or during a presentation? Is it the subjective nature of “design”? Is it the fear that the designer might miss the mark?

We better like it!”, your inner voice screams.

I’ve talked extensively on how mood boards can impact your website’s user experience, but what about you? And your organization’s experience with the creative process? Can mood boards ease this anxiety that you may experience with a web designer? We think so. In fact, we see it time and time again in our engagements.

Design isn’t just a particular phase or step to building a website, design encompasses everything. Your website strategy is design. Your prototype is design. How you’ll market your website to your ideal customer is (you guessed it), design.

Mood boards help aid in the overall user experience design process, but they’re not the design. Once this is understood, it’s much easier to review creative deliverables, provide feedback, and move towards launching your website.

Conclusion

The success of your website hinges on much more than just choosing the right mood board. However, mood boards are a powerful tool that can help your website:

  1. follow established branding guidelines
  2. set the right tone, communication style and personality
  3. experiment with the styling of your value proposition & positioning statement
  4. silence your organization’s inner voice before that creative anxiety rears its ugly head

Author Info

profile pic
Hey there, thanks for reading! My name is Eric Sharp and I’m the Founder of ProtoFuse. Learn more about me, follow me on Twitter or find me on Google+. Oh, and I’ll call you family if you’re a Chicago Bears fan. Daaa Bearsss.
  • More great resources on using web design moodboards:

    Moodboard Methods for Web Designers:
    http://www.fuelyourcreativity.com/moodboarding-methods-for-web-designers/

    Why Moodboards Matter:
    http://www.webdesignerdepot.com/2008/12/why-mood-boards-matter/

  • Great stuff, Eric. Never heard the term Mood Boards before – very aware of Empathy Boards which has been blogged about over at Copyblogger.

    I would go so far as to suggest this concept should be shared with every CEO who may be veering away from their avatar (core customer). The one word that jumps out to me in Mood Boards is focus, focus, focus. Sorry, that was three words.

    Thanks from a fellow Missourian (up in the Columbia area).

    • Hey Mark! Thanks for the comments. Regarding Copyblogger, did you mean Empathy “map”? Found some stuff related to that but not Empathy Boards.

      You know, it’s interesting. I certainly think Mood Boards are an excellent design tool with C-Level. It gives the presenter just enough margin to keep the conversation loose and iterative, rather than this big “ta-da!” presentation.

      Also, though I grew up cheering the Cardinals, I’m an Illinois guy. :) But, I’ll take a Midwest shout out anytime.

      Thanks again for reading!

      • Sorry, Eric … embarrassed on two counts. Yes, it should be Empathy Maps. Demian Farnworth did a blog entry some time back on Copyblogger about Empathy Maps … good catch.

        And now, I’m super embarrassed thinking you were in Springfield, MO … many apologies. Illinois is a beautiful state as I drive to Chicago quarterly for meetings.

        • No worries! Empathy Maps, gotta check it out.

          And no worries x2. Illinois is beautiful…once you get to Chicago. Ha. :)

          Thanks again for the follow up.