updated: August 26th, 2009 / Ross Johnson / 6 Comments

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.

6 thoughts Mood boards are an Essential Step in Design

  1. The concept of the mood board sounds like a great idea, but how do you manage to get a mood board past a client who is incapable of separating the skeleton plane from the surface plane? It seems a piece of art simply defining look and feel would be even harder for such a client to grasp. Would you mind posting an example of a mood board you’ve used with success?

    Jier-Shu Chen
  2. Hi Jier-Shu,

    As long as you explain the use and function up front I have not had a problem yet. I think the trick with clients who don’t seem to get it is to make it a bit more abstract so it doesn’t feel so much like a website. Show it to them and say “Does this feel like it represents your company visually?”

    I haven’t had a client thus far who hasn’t understood the process after explaining before hand how we go about it. Great question though!

    The two thumbnails in the post are mood boards that I have created that are successful.

    Ross Johnson
  3. I’ve used mood boards for website projects for a couple of years now. The key is explaining your vision to the client and walking them through the samples.. not just presenting the mood board and hoping they’ll understand it’s purpose.

    I posted my thoughts and experiences a while back on my blog and have an example photoshop mood board template that you can download for free to get you started.


    If you use it, I’d love to hear how it turned out.

  4. Pingback: Design 101 « Kooljoy.com Blog

  5. I haven’t had a client thus far who hasn’t understood the process after explaining before hand how we go about it. Great question though! mywebsite http://www.marscn.com/

  6. Hi everyone. I’m making my first web site and I want to put some flash videos. I searched Google and I found some services but none of them is friendly enough for a newbie like me… I can’t understand anything since I don’t have any experience with html/php coding… so if any of you knows a good place with information for newbies please share! Thanks.

Comments are closed.

Free WebinarOur proven method of increasing website leads by 400% or more using design psychology

That anyone can implement, even if you're not a designer or developer.

Join me on April 8th at 11:00am EST time and you'll learn:

  1. How to understand your target audience so you can excite them and drive them towards action
  2. How to capture prospects before they’re ready to reach out, so you can build a relationship and nurture them towards a sale
  3. How to avoid the #1 mistake on websites that causes lackluster results
  4. A step by step process to realign your website around your target audience’s psychology

Plus we'll provide downloadable templates and checklists so you can implement what you learn on your own!