B2B Marketing Agency for Technology Companies

How a Web Design Mood Board impacts User Experience Design

What is a web design mood board? How can they be effective in planning and designing your website? Tip: it’s more than just choosing colors and fonts.

Comments 0
by Eric Sharp

While designing your website’s user experience, mood boards can be an essential tool for helping everyone understand your organization's:

  • branding guideline
  • communication style
  • 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.

How a web design mood board impacts user experience design

What is a Mood Board?

Mood Board Example for Interior Decorater

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

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).

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)
Web Design Mood Board Example

An example of two mood boards for our client Vamoose Tattoo Removal. Each mood board explored a different visual design direction.

What Web Design Mood Boards DO NOT Communicate

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

  1. the design of a specific page template (e.g. Homepage, About Us, Products) — mood boards are page template agnostic
  2. final content (headlines, body text, image selections)
  3. 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.

Moodboarding 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.

Mood boards provide a formal creative exercise to experiment with typography, color, and UI elements — major pieces to establishing a website's personality.

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:

  • Help you distinguish yourself from your competitors
  • 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
  • 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.

More about designing a great Value Proposition

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


An example of how a mood board can experiment with the styling of a company’s positioning statement


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

Mood Boards can free the visual design phase of anxiety and tension

I’ve talked extensively on how mood boards can impact your website’s user experience, but what about you?

Does your organization have experience with the creative website 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.

Remember, Mood Boards aid in the UX Design process, but they’re not the design.

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.

Once this is understood, it’s much easier to review creative deliverables, provide feedback, and move towards launching your website.

Learn more about UX Design

The success of your website hinges on much more than just choosing the right mood board.

With that said, 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

Happy Moodboarding!

We'll Improve your Website in 48 Hours for just $499

Stick your website under a microscope and receive 10 actionable ways to make it better. Includes:

✔ 60 Minute Virtual Meeting
✔ Detailed PDF Document
✔ Recorded YouTube Video

More Information

Worth every penny!

Ferit R. PinnerTest

We believe a conversion-focused website — paired with the proper traffic, content, automation, and end-to-end ROI measurement — equips B2B technology companies with a real asset to scale their business.


Years in business


Minimum growth in quality leads our clients see after an engagement


Websites we've created, supported, or consulted over the last decade


The jargon we speak (we'll approach conversation like a layperson)