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.

This entry was posted in Design, Web Development and tagged , , , , . Bookmark the permalink.

27 Responses to Website Mood Boards: A Successful Precursor to Visual Prototyping

  1. KenMarshall says:

    Thanks for helping.

  2. Pingback: prototyping » Blog Archive » Prototyping Overview

  3. Pingback: prototyping » Blog Archive » Website Mood Boards: A Successful Precursor to Visual Prototyping

  4. updated the post with a few more samples from additional projects.

  5. Tom Osborne at Viget Labs elaborates on the whole mood board concept in a really well-written piece that you can find here. If you’re interested in this idea at all, you’ll want to take a few minutes to read Tom’s post.

  6. Roman Bercot says:

    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!

  7. Pingback: Inspiration/Mood Boards : unquiet.heart

  8. @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.

  9. Pingback: Design with Mood-boards - a visual direction in the early stages of your project | Peakflow Design

  10. Roman Bercot says:

    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.

    Thanks!

  11. @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.

  12. Web Designer Depot posted another interesting article on using mood boards for web projects.. very much in keeping with what I’ve detailed here. Some other nice ideas and good comments on the post as well.

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

  13. Mike Metcalf says:

    I did my first mood board using your template. I think this is the beginning of something great. Thank you!

  14. Olea says:

    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.

  15. ChrisR says:

    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.

  16. @ChrisR… thanks for the comment and the spell check. That’s one of those words my brain can never decide on.. right or not.

  17. Pingback: lukelarsen » Blog Archive » Website Mood Boards

  18. Suzette says:

    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!

  19. Pingback: Getting in the Mood: Effective Design Communication - Phoenix, Scottsdale Web Design, Development - Fasturtle Interactive

  20. Pingback: HI-FIBRE cursussen» Blog Archive » Een moodbord maken

  21. great examples. We will now be using mood boards for all of our new projects to save on design time. thanks

  22. Pingback: Moodboards - das Design vor dem Design | Dr. Web Magazin

  23. 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!

  24. Pingback: Website Mood Boards: A Successful Precursor to Visual Prototyping | 404 Creative | Squico

  25. Valencio says:

    Thanks so much for this. Mood boards are a great way of communicating direction without getting too involved in the design process.

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

  27. Eric Downs says:

    Awesome! thanks for the great article and resource.