Mood Boards? Welcome Aboard!

Taking a step back to review methodology every so often is a great way of keeping work fresh, as it means you don't slip into a routine. Lately here at PINGV, we have been looking for ways to streamline projects and enhance how we communicate conceptual ideas to our clients.

At one point in the discussions, thinking about how we create and present visual design comps, we all remembered Mood Boards. Oh, wonderous Mood Boards....such utility! such style! the way you perk up the grayscale sketchiness of wireframing with a burst of ideas and colors....where have you been all our lives? Actually, we had each used them before, but they had not been part of our PINGV team process. Until recently! And now, we can happily report that their integration has been a smashing success.

First Off: What Is a Mood Board?

Everyone needs inspiration to make and communicate design proposals. Architects use a process called Charrette, in which they gather up and throw around ideas, obstacles and solutions to the project at hand. Interior and Fashion Designers create Swatch Panels to visualize solutions and work through possibilities. In Web Design, the Mood Board (sometimes called Inspiration Board) is our tool of choice.

Mood Boards allow one to create broad stroke representations of look and feel, free from structural distractions, similar to the way that wireframes allow one to sketch out page architecture without broaching visual design. The Boards are collages or templated representations which can indicate typography, imagery/photography style, color palette, use of space and iconography.

Here are two examples, one collage-style and one template-style.

A Mood Board in collage styleA Mood Board in collage style

A Mood Board in template styleA Mood Board in template style

Our process now is this: as wireframing begins to wind down and most structural elements are falling into their general places, we take our first foray into the visual elements of the site. Generally, we have been snipping images from websites and magazines, gathering elements and inspiration ever since the project started. We now gather those files and clippings into 3 directions (more or less).

The Directions

  1. The look we feel instinctually is best
  2. A more conservative or more formal approach
  3. A more extreme or more casual approach

(At the Boagworld blog Paul Boag writes that his shop creates a 4th Board which is way out in left field and intended as a creative, idea-generating activity. The formal inclusion of a push-the-boundaries Board makes a lot of sense, and we will definitely be giving this a whirl for our next site.)

How to Create a Mood Board

Template versus Collage

Now that we have our buckets of styles, we need to choose whether we need to present them in a loose or structured format. Depending on the temperament of the designer and the type of client you are working with, this is usually a simple decision. Some clients are very adept at looking at a collection of images grouped and scattered across a page, while others will really need to have a Board in which different items are clearly labelled (Palette, Icons, etc). By now, you probably have a good feeling as to what sort of client you are working with ;)

At PINGV Creative, we tend towards collage style, as the layout of the Board itself gives you an additional tool to indicate mood. For example, you can create an open collage with a lot of white space or a densely layered one with patterned backgrounds. As you are talking your client through the Boards, these details open points of discussion which can illuminate future decisions.

Things to Watch Out For

Be sure you don't make your Boards look too much like a web page. This defeats the whole purpose and can actually confuse the client. To avoid this, there are a number of strategies:

  1. Spend less time on the individual Boards. It's easy to get fussy and what we are wanting is fresh and fast. The longer you push pixels around in this particular process, the more likely you are to create a DESIGN, rather than a collage of inspirational images.
  2. Make a physical Board...get out the scissors and the glue stick and print out those digital images, snip snip the magazine pages. Not only can this be a truly satisfying way to spend a few hours, but you are very unlikely to glue together a web site ;)
  3. Use a different aspect ratio or size. Make them square or tall or long and narrow.

How to Present a Mood Board

If you have done your job and your Board does not look like a web page, you will most likely have few problems talking through the Boards with your client. Many designers attach a few adjectives to each Board, almost as talking points. Or you can title them. You will want to point out regardless that these are NOT comps, but rather conversation starters. Welcome their first impressions, listening for what they like and what they dislike, as both pieces of information are important. At the end of the session, ask your client to look at the Boards again the next day and report any additional thoughts.

Why Have We Found Mood Boards Invaluable?

Mood Boards Focus the Approach

With a Mood Board, we are focusing on site aesthetics not structure or content. Breaking the process up into these chunks, just as we do with Wireframes, unmuddles the decision-making and discussion.

Mood Boards are Quick and Disposable

The process allows for rapid prototyping in the visual design process. Mood Boards can (and should be) quick to produce, somewhere between and hour and 3 hours, depending on the style you are using. Moreover, if after you have gathered and grouped your inspirational elements, it becomes apparent you are barking up a barren tree, you can file the ideas away without tears.

Mood Boards Enhance Creativity

The process allows you to work through ideas in an unstructured way that encourages experimentation and does not punish trying to push the envelope here and there. Even if all your Mood Boards are rejected, its totally ok! You have gained a better idea of the look and feel directions your client is NOT looking for, and you have lost only a few hours...much better than discovering the same information after several days of design work.

Here at PINGV Creative we are happily embracing our long lost friend the Mood Board. We love how it has opened up our creative process and stream-lined the acceptance of design comps. Designers, if you are looking for a new approach, give Mood Boards a try. We think you'll like 'em.

We want to work with you!