Mood Boards - An Evolution

March 26, 2013

Any design process involves a lot of creativity, a big chunk of research, and a tiny bit of guessing. Wait, what? Guessing? Guessing may not be the right word for it. Perhaps, "exploration?" Whatever you call it, there's a part of the process that involves uncertainty. Eliminating that uncertainty can make the design process more efficient and more successful.

Communication

Talking with clients is a fantastic way to learn a lot about their organization and their goals for the project. The challenge in this comes when trying to learn about their goals for the design of the project. At Aten we begin the design process with a design kick-off call. This is our chance to learn as much as we can about the client's brand, their thoughts on their existing website, and their goals for the new website. These meetings usually last an hour and result in a lot of information that's critical to the project. We also use this time to set expectations on what materials, vital to the design process, the client must provide.

The Next Step

Following the design kick-off call, a natural next step could be to jump right into designing. But wait! Did you really learn all you could from the kick-off call? How do you catch red flags that could derail your process? For a long time now we've been using mood boards to continue the conversation started in the kick-off call. We blogged about them way back in 2010. Still a part of our process, mood boards have a slightly different role than they did a few years ago.

The Mood Board's Purpose

Before we dive in to how our mood board looks, let's first take a step back and talk about what our mood board is trying to accomplish. In the past we used mood boards to explore different design directions in a similar, but much more simplified way, to Style Tiles. They were somewhat effective but, unlike style tiles, mood boards didn't go far enough to establish a design direction. We also felt that style tiles were great for developing a design aesthetic but didn't quite figure out enough for us when it came to layout and weight of content. So, knowing that we wanted a step between information architecture and the design concept, we started reevaluating what we were trying to accomplish with mood boards.
In our current process, mood boards have a whole different purpose. What we really want to know, after the design kick-off call, is that we have a good understanding of the design direction the client is looking for. We talk a lot with clients about sites they like and how that applies to their project. Using that information, and the content structure we're establishing in our information architecture process, we create a mood board that serves a whole new purpose.

Mood boards are collections of images, grouped into categories relevant to the project. They're a great way to continue the conversation started in the design kick-off call. Mood boards give clients concrete examples to discuss, often revealing key pieces of feedback that are challenging to discover otherwise. The feedback a designer gets on a mood board can be some of the most useful feedback received.

Building the Mood Board

Our mood boards typically involve images grouped into two types of categories; project-specific and general aesthetic. By the time we create a mood board, we've already wrapped up most of the information architecture process and have content maps and a site map to work from. Taking a look at the content maps you can quickly identify elements of the site that would be useful to show in the mood board. The general aesthetic elements we include aren't necessarily specific to the project. Some examples:
Project-specific:

  • Landing Pages
  • Carousels (wait, didn't these die with Photoshop?)
  • Mapping
  • Events
  • Data/Statistics
  • People

General Aesthetic:

  • Typography
  • UI Elements
  • Content Streams
  • Form Elements
  • Skeuomorphism (just kidding)

These are just a few ideas. Some sections from general aesthetic may be more important in certain projects. What's important here is that you're including enough information to gather feedback relevant to the project.

Inspiration Sources/Overload

A quick note: One thing we make very clear is that these are not our designs. Clients need to understand that anything shown in this step is purely for discussion, not to show a specific design direction.
So, you may be asking, "where do you find these types of images?" To that I would say, "Have you seen the internet? It's pretty cool." Ok, that's not helpful. Really though, I gather inspiration pretty randomly but also have a few specific places that are always useful. Here's another list:

For Dribbble I subscribe to the Popular feed with Google Reader. Niice is a new site that allows searching both Behance and Dribble in the same place. Designspiration is a great source for non-web inspiration. The other three sites listed are high-quality galleries. Most sites showcased are of a certain level and are often doing things that push the medium forward.
A word of warning: Don't get sucked into collecting inspiration indefinitely. It's easy to get in the mindset where you're constantly visiting sites for inspiration. I like to put a time limit on browsing and just let it go if I haven't seen everything I planned on seeing. It'll be ok. There will be more inspiration another day. Go create something!

In Closing

Give mood boards a try and let me know how they work for you. I would love to hear your feedback. Also, feel free to share other tools you use when starting your design process.

You can download a mood board template here:

Design Process

Read This Next

Comments