Website Mood Boards: A Successful Precursor to Visual Prototyping

A few weeks ago, my company took a project to redesign a major charity’s website. After the initial documentation and planning stages was completed, we were ready to move into the visual design phase of the project. We decided to try a new approach, at least for website design, and show the client a series of mood boards to establish the overall atmosphere and emotional impact of the site before we plunged into the actual layout phase of the design.

The idea was to show the client a variety of color schemes, patterns, photography, typography and illustrative elements to see what their responses were and to ultimately establish a visual tool set on which we would eventually develop our visual prototypes. We decided that it was important to establish a “mood board template” to standardize the way we presented the information to the client. The purpose behind the template was to allow the client to focus on the desired elements rather than getting distracted by a variety of different layouts.

A mood board helps establish the branding, design components, typography, imagery, and color palettes that will be incorporated in the design. Much the way an interior designer will initially put together a swatch panel showing the fabrics and colors that will be used in designing a room, the mood board establishes the aesthetic direction of the site up front without negatively impacting the flow or structure of the site.

After a short period, we received all of the designs (12 in all) from the various designers and when we met for an internal review session, we were all extremely satisfied with the results of the exercise. As part of the template, the designers were given an area in which to write a couple of small paragraphs describing their vision and choices for the mood board. We found this to be extremely helpful in understanding and appreciating the designer’s choices.

While very difficult, we pared the choices down to 3 versions we wanted to present to the client.

After just a short meeting with the client’s representatives, we realized just how valuable the mood boards were going to be in the design process. They took just a short time to decide on the overall look and feel without a lot of the distractions that usually come when presented with the first round of visual prototypes or “comps”. Everything was clear, well presented and easy for the client to get the overall “mood” of the site with just a glance. Again, a great success for us all the way around.

Now that we have the visual toolkit for the site, the colors, type styles, photo and illustration styles established, it’s much easier to begin the visual prototype process with those in hand. We’re free to focus on layout and other details now that these other elements have been established.

Just a few thoughts here on the value of mood boards.

1. Mood boards don’t only have to apply to the web. If the client hasn’t already established branding and identity, these same elements could easily translate into print or multimedia design as well as for the web. In fact, mood boards can even be used to indicate writing styles if so desired.

2. Mood boards help clients narrow their focus to specific elements. By separating these visual elements from presentation, it helps guide the client through each step of the process without any additional confusion. After all, most of us developers have been through the full prototype process just to have the client tell us at the end that they don’t like the colors or other visual styles we’ve selected. By using mood boards, we seek to minimize the chances of this happening.

3. Mood boards facilitate more rapid visual prototyping. As mentioned earlier in this post, by having already established many of the visual styles, more attention can be focused on layout and presentation and can ultimately streamline the entire visual “comp” process.

One final note on our mood boards. This exercise gave us some incredible insight into the different designer’s styles and thought processes. As mentioned, each designer offered a brief explanation of their choices and by doing so, really enhanced our understanding of the designers skills and vision and ultimately the client’s understanding of the emotions and mood they were trying to create. While mood boards may not be necessary for every job, I can see them becoming a part of our processes for many in the future.

Mood Board Samples : updated 07.18.08

  • View Mood Board Sample
  • View Mood Board Sample
  • View Mood Board Sample
  • View Mood Board Sample
  • View Mood Board Sample
  • View Mood Board Sample

note: all mood board designs by Kevin Flahaut.

11/03/08: mood board template added for download. Thanks to Roman Bercot for the reminder.

27 thoughts on “Website Mood Boards: A Successful Precursor to Visual Prototyping”

  1. Great article and great samples. I came here hoping to find templates for web mood boards, as I haven’t done them before. Can you give me some tips on this?

    Thanks again!

  2. @Roman – I might put a sample PSD file or two up here soon for download. It seems like there might be some renewed interest, so I’ll get to it as soon as possible. Thanks for the note.

  3. Kevin,

    I was just checking back to see if you had uploaded any sample PSDs. We’re kicking off a branding project, and I’d love to use your layout as a starting point.


  4. @Roman. I added a download widget so you and others can grab the mood board template to get you started.

    If anyone uses it and wants to comment on their experiences, any improvments they made, etc. I would love to hear about it.

    Happy designing.

  5. Great template-thanks for sharing. Many times I’ve run across the client that knew what they wanted but not how to let me know so this should help break down the communication wall.

  6. Really great piece and thanks for the template. One note from my internal editor; the correct term is palette, not pallette. Thought you’d want to know the correct spelling.

  7. Thank you for sharing, I’m teaching a course in webdesign en I told my students (who have to make their own moodboards) to take a look here for inspiration!

  8. Again like many others I have never used moodboards & never thought for them to be useful but having explained your article so well I will certainly consider using them in the future!

  9. Thank you so much for this. Mood boards have so much practicality. With this and Balsamiq I am working with others on my team to help with more facilitating of the design and speeding things up. Your samples are also greatly appreciated.

Comments are closed.