• Home
• Sitemap
• Contact
• Subscribe to Email
• RSS 

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

note: all mood board designs by Kevin Flahaut.

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

          

Comments