Perspectives: Mood Boards, Love ‘em or Hate ‘em (plus a panel)
2009 10
Sample mood board from Viget Labs. Embiggen
To mood board or not to mood board. Is that the question? Yes. At least amongst those of us that have ever used them as a means to jump start the design process. Personally, I've come to love mood boards as a tool in the web designer's design process tool kit. Are they always necessary? Not in my opinion. But I have found them to be quite useful when it comes to starting a project quickly and offering some stylistic options from which to pull from as goals and structure are being clarified. We use them quite often at Viget Labs and I'm seeing an increasing interest (or sometimes disgust) with their utility. With this post I wanted to share some thoughts on mood boards both for and against them.
Here are some favorable perspectives on mood boards from some industry notables:
Jenna Marino, Hunt & Gather
Sample mood board from Hunt & Gather. Embiggen
SBR: An established brand with a dated appearance, the look needed to be elegant and sophisticated, easy to navigate through and enthusiastic and passionate for the user. All being very diverse concepts, our 4 styles helped the client narrow their vision and focus on a new direction. The site was complex and to have designed a prototype to soon would have wasted a lot of time and effort.
On Mood boards: The purpose of a mood board is to set the tone & style of a design effort, without the distraction of flow and architecture. Design mood boards include color, pattern, photography style, typography and illustrative & graphic design elements to inspire and to build on the brand and establish a vision for the final site design. It is void of form & function intentionally, with a goal of circumventing issues late in the design process that may alter "skeletal elements due to a surface issue". They are solely to create an emotional impact and an environment in which to convey and relay information. In the end you have a visual toolkit or resource in which to build a foundation for a mockup in which you apply the elements to the framework created in the wireframes. Mood boards visually communicate where words fail, facilitate a faster design mockup delivery, & reinforce the client input and assist in their ultimate approval.
David Perel, Obox / From the Couch
Sample mood board from Obox. Embiggen
David and his colleagues from Obox went as far as screen casting a mood board process on their regularly updated From the Couch video blog. David also had this to say:
“It saves you time and your client money. It also helps with your sanity when it comes to revisions because in the mood board phase your mental state is geared towards revising.”
Kevin Flahaut, Rocket Genius
Sample mood board from Rocket Genius. Embiggen
“I started incorporating mood/inspiration boards in my web design process in early 2007. Since that time, they've been an invaluable, saving me uncounted hours of design revisions and countless headaches. Mood boards are much easier to create and revise than full page compositions and really help the client to stay focused on the visual elements rather than being distracted by layout at that phase. In my experience, once the mood board has been approved, the client has some idea of what to expect in the next stage and the actual prototyping process goes much more smoothly with decidedly fewer revisions.
My personal approach to mood boards for web projects is a little different than that of some designers. I prefer a more structured approach to presenting the information over the more loosely arranged collage style. I've found that the consistency in presentation helps avoid confusion when presenting the client with several different mood board options.
While some designers like to include wireframes or page layouts in with their mood board presentation, I prefer to keep the structural portion separated completely and to focus solely on the visual elements and building blocks of the design. I do, on occasion like to take some of the proposed colors, typography and styling elements from the mood board and compose a "vignette" of sorts to illustrate how the elements could work together in a composition. This is usually just a small detail or two that doesn't commit to any particular layout, but helps to make the whole concept a little less abstract for the client.
I think that whatever approach you might take (none is really right or wrong) the key to success with mood boards is communication. Let the client know that your choices were deliberate and well thought out. Take the time to engage the client and explain the reasoning and psychology behind the colors and elements you're proposing and how they relate to the project's goals.”
In all fairness, mood boards aren't for everyone. Here's another viewpoint:
Milissa Tarquini, AOL / Mediaglow
“I don’t use mood boards and I cringe when I see them. Why? Because they are static and are the complete opposite of what an interactive experience should be. You can’t clip out a beautiful interaction, an elegant transition, or animation that supports the user goals and business strategy of an experience. You can’t pin on a board how a kick-ass data set and a laser-focused search product will elevate a mundane task into the sublime. All you can put on a board are pictures, or samples of textures and color. Which is fantastic if that is what your medium dictates. Interactive design demands more.
The boards themselves should be interactive, and therefore no longer boards. What would make more sense for a design team to use would be a little multimedia piece that can show pictures and interactions, transitions, etc. Things cut out and pinned to a board cannot describe interaction.
I’m not saying low-fi is wrong—low-fi is critical. For example, sketching is imperative to designing interactive experiences. But mood boards are meant to invoke “mood” and they don’t allow us to use the most powerful tools at our disposal to describe mood. Movement, sound, interaction clips, etc.
Now I’m wondering—what would a mood board for Google look like? Twitter? Ugh.”
To explore this a little further, I've been working closely with Jenna Marino, David Perel, Kevin Flahaut and Jayna Wallace to try and assemble a SXSW 2010 panel to discuss this topic. If you find yourself intrigued, please vote for our panel in the SXSW 2010 Panel Picker.
Another great article guys. We have been trying to incorporate mood boards here at our little website design shop in Jackson, TN.
Just curious if you guys use pencil sketches on your projects as a step before (or in tandem to) mood boards? We have used them for a few years now and even show them to clients (gasp).
They seem to be a great way to not worry about colors, fonts, images (all things the mood boards do well) and concentrate more on the layout itself.
Thanks for the inspiration,
William Donnell
Lead Designtist
www.SodiumHalogen.com
Tom, I’m really digging this post. Moodboards are something that I personally love to make regardless of whether I share them with clients. Great writeup with examples, thanks!
@William: I can’t speak for everyone but at Viget we love using pencil sketches as a means to jump start conversation in the same way that mood boards to. We typically present them separately but the goals are similar. Just that one talks about the structural/behavioral design vs. stylistic/emotional/aesthetic design. Eventually they merge into compositional design.
@Zac: Thanks for the love. Great to hear that you’ve found usefulness regardless of whether or not a client ever sees your mood boards.
I’m not a big fan of mood boards and agree with what Milissa Tarquini said about you not being able to create an interactive experience with them.
I think moodboards are great, especially from the designers perspective. We use them for print jobs. I haven’t really used one for a site but it could be adapted that way. I like them because it helps you to think more like you are the clients company and actually get into their head which proves vital when trying to embody what they want to bring across. Awesome article.
We do not use moodboards currently, but I could see their potential value in focusing the look and feel of a design quickly.
My main concern with using moodboards is that we often find some of our strongest visual ideas come during the actual interface design process, when we have a clearer understanding of all how the various parts will come together.
In your experience, does getting an early signoff on a moodboard compromise your ability to adjust and innovate creatively over time?
@Malissa - The interactive experience all depends on what kind of site you are creating. I consider the interactive experience as a completely different stage when doing HTML sites.
Sure with flash it is a totally different story but with HTML, sorting out the UI design with wireframes and determining what kind of textures you need are a critical part of creating a site. These facets can be decided early on and can definitely cut our headaches which occur when dealing with clients (we only use moodboards for client work).
So I suppose it depends on your medium and who you are dealing with.
Out of interest, how do you determine colors, font, textures etc when developing a site?
I agree that mood boards are less important for more web app like interactive experiences but they can complement any design when used properly. They are just a tool in the toolbox to help thinking about style, voice, and brand without getting in the way of crafting a proper interactive experience. The interactive experience begins with different levels of fidelity also from sketches, to wireframes, to HTML all are meant to be a means to an end.
@Dharma: My suggestion is to set an expectation that the mood board is merely a sketch of what is to come. Things will evolve as you get further along. The mood board is intended to jump start things like color palettes, design elements, typography, language/voice, etc. If you don’t allow yourself to adjust as the details get flushed out then mood boards don’t serve their purpose properly.
Great post. We’ve had our first few experiences with mood boards at Newfangled. Pros and Cons. Read more here: http://www.newfangled.com/mood_board_observations
Without a doubt, two cool follow-ups that have come out of this conversation:
Mood Board Observations [Newfangled]
-and-
Mood boards in web design [Sweet Anthem]
Next entry: Git: A Designer's Perspective
Previous entry: Can a Website Design Be Inspired by a Chair? This One Was





Recent Comments
We use it a lot at Hashrocket now. It’s made life a lot easier when coding large-scale applications.
The hardest part of SASS is going back to coding regular CSS after you’ve been in it...
- Dennis on 'Sass: A Designer's Perspective'.
- RORY on 'The Juices and The Flows Have Been Diminished'.
- Linette on 'Design For Efficiency: Photoshop Techniques & Templates'.
Subscribe to Comments RSS