Mood boards are an Essential Step in Design

As of late I have found that creating and using mood boards to be an essential step in both the design and the approval process. The classic case for mood boards is that they help stimulate your creative mindset and allow you to start thinking about color, texture, typography, etc… with out being limited to the constrains of your design brief. This allows you to really think about how the site should look and feel rather than how any element could be stylized in a “cool way” (which is not the purpose of design.)

I have now learned and realized that it is also a great tool for client approvals. As designers we know that a web page is not pure aesthetics, there is both form and function. However this is a difficult concept to grasp and separate for the average person. It is very easy to get hung up on little details that may or may not be important or relevant to a finished design concept at hand.

The Problem

If you have ever been in a design review session you have no doubt experienced this in one form or another. At some point or another someone will get hung up on an element of a concept that is not the look, feel and mood of the site. A full photoshop comp is actually looking at two separate aspects of a site. The book “The Elements of User Experience” describes this well by stating there is the skeleton plane and the surface plane. The skeleton plane is what needs to be on a given page, how important it is and how it should be organized. The surface plane looks at aesthetics, proportion, texture, color, typography, rhythm, etc…

The final design composition combines them both in way that maximizes the visual communication with the functional needs of the skeleton plane. However to an untrained person it is difficult to separate these two concepts, and often times it can lead to the altering of an important skeletal element because of a surface issue.

The Solution

To prevent this from happening, thus leading to a smooth design approval process we recommend looking at both planes separately. This is done with wireframes and mood boards. I won’t go into wireframes in this post, I will just say they are rough outlines of a page with out looking at or considering visual design.

Mood boards are just a mock up of how the site should “feel” with out considering what will be on the exact page. What should the design communicate and how should it be communicated? They can be created by scrap booking, through collages, painting, drawing or most commonly in photoshop. The idea is to find and combine colors, photos, textures and work with typography to develop a defined visual feel. This is often driven or part of a brands “identity” (or the common look and feel that allows you to identify the brand even if it is not outright mentioned). You can make it look somewhat like a web page or it can simply be more artistic in nature.

By showing the client the mood board first you get buy in on the aesthetics with out having to work through the separate issue of the skeleton plane.