Newfangled works with independent agencies to create lead development web platforms for their clients.

Newfangled works with independent agencies to create lead development web platforms for their clients.

Evolution of the Mood Board

at 2:21 PM

Life Before Mood Boards

Prior to integrating mood boards into our design process, we would begin by showing the client 2-3 versions of a fully realized page layout, usually the home page. 

This was a flawed model for several reasons.

1) Starting with fully developed page layouts forces the client to focus on more than just the visual design. It's too soon in the design process to be addressing information architecture, specific user interface issues or site functionality. 

2) Secondly, a website's home page is usually too unique from the rest of page templates to truly represent the site. A more general template such as a product detail page or newsletter detail page will contain more of the common elements of a site and is a better choice to begin the page layout phase.

3) When you start with page layouts, a lot of time is spent up front working out small details of the site's form and structure when that time could be spent exploring different looks based on client input collected in the discovery phase. 

page layoutsThe Benefit of Mood Boards

Mood boards are visual "sketches" that contain elements of the site (type, color, textures, imagery). A board may contain some elements from the site, such as an email call out box or bio abstract, but no single page template from the site is represented. This allows the client to focus just on the look and feel of the site, quickly form a first impression and ask themselves, "Is this how we want to represent ourselves on the web?" Mood boards can be put together quickly and it's easier to eliminate ideas that don't match the client's taste or personality and develop the ones that do. Since mood boards don't rely on a site's structure, I don't have to wait for a prototype or wireframe to be completed before I can start the design phase.

Mood Board Evolution

mood board examplesWhen we first starting creating mood boards in 2009, I used a template that had been developed by viget.com and made available for download. The template was very structured, with clearly defined areas for type treatments, a color palette, source imagery and a keyhole sketch where some of the elements from the board would be combined. 

It took a while to convince our clients that the mood boards didn't represent a particular page of their site but were more like swatch boards that an interior designer would use to gather ideas and inspiration before redecorating a room.

About a year later, I decided to change the format of our mood boards. I had been using a separate Photoshop document as a visual "sandbox" to collect bits and pieces and experiment with different textures, colors and imagery. It was much larger (about 1200 x 900 pixels) than the mood board template I was presenting to the client. I would take the portions that I liked from the sandbox document and shoehorn them into the smaller mood board template. I realized that I preferred the loose and more conceptual nature of the sandbox documents and decided to clean them up a bit and present them as the final mood boards. The focal point of these new boards was the large collage of inspirational images; they also included more detailed page thumbnails below the collage.

Although I was pleased with the more conceptual nature of these boards, the image collage was causing some confusion with our clients. "Where will this collage be on our website?" "Why is there a picture of a violin in the collage? We manufacture servers." The 2.0 versions of our mood boards lasted through a handful of projects before I realized I needed to rethink the format again. I still liked the loose layout, but the collage had to go and the keyhole sketch was too close to a page layout and defeated the idea of a mood board somewhat.

The third generation of our mood boards takes some cues from its predecessor but the entire board is a collage of visual elements. These new boards provide a more unified composition with content from the client's current site (or prototype) helping the client visualize things like contrast, juxtaposition and scale. I retained the larger board format because it allows me to create a "living space" for all the elements. Instead of a board made up of many little windows (like the first generation), the entire board is one large display window.

I'm sure our mood boards will continue to evolve as we continue to develop the process of guiding our clients through the design phase. 

If you have a mood board story, I'd love to hear it.





Comments

Great Stuff - Thanks! | September 21, 2012 10:00 AM
Thanks so much for sharing. Hadn't seen your blog before, in fact - I don't know where "Newfangled" came from, but since yours
Tina | September 21, 2012 10:16 AM
(cont.) was the first entry, I read on.

(this counts as 2 comments.)

Tina
Justin | September 21, 2012 11:31 AM
@Tina,
You're welcome. Glad you've discovered our blog; make sure you sign up for the weekly digest! Also, I like the way you parsed your comments. :)
Debbie Shephard | September 24, 2012 9:41 AM
We struggle with how much is enough to show without committing everything to paper. I would like to try this with some clients and see if they "get it".
Justin | September 24, 2012 10:42 AM
@Debbie,
I hear you. We've wrestled with the same issue of how much to develop in the mood board phase. It's easy for the client to focus too much on the details instead of looking at the big picture.

I think the answer to "how much to show" in a mood board depends as much on your relationship with the client and good communication as you walk them through the design process as it does on the content of the mood board.

We usually customize the boards depending on how much previous experience the client has with the design process and whether the working relationship leans more towards micro-mananging or more towards a hands-off approach.

Hope this helps.
Rayna Diane Hennen | September 25, 2012 12:54 PM
I've started using mood boards more for myself than anything but have thought about integrating them into my process with the client. How much time have you added to your process for the mood board phase when creating a design and do you usually show only one board?

Thank you! I love your newsletters and posts - well-written and thought-out!
Justin | September 27, 2012 10:49 AM
@Rayna,
Thanks for the compliment, and a great question about our mood board process.

Even though we've added an extra step to our design process with mood boards, it hasn't added that much time to the overall site development. One reason is that mood boards help the client focus better on look and feel in the early stages so, once a mood board is approved, designing the page templates goes quicker. Establishing a design "language" through mood boards eliminates a lot of the second-guessing and uncertainty that can happen by starting the design phase with fully developed page layouts.

Initially, we present 2-3 mood boards to the client for review. One board wouldn't be enough information for the client to respond to. With three boards, there's plenty of directions to either move towards or away from. Sometimes it's as important to know what the client doesn't want as it is what what they don't. Occasionally, we end up producing a second round, but it's usually selecting one mood board to modify it rather than coming up with a new direction.
Rayna Diane Hennen | September 30, 2012 7:04 PM
I agree - it can be just as important to know what clients don't want. Getting at that part can go a long way to getting the design 'right' with fewer steps in between. It sounds like mood boards seem like a good addition to the design process. I think I'll give it a shot! :)

Thank you so much for sharing this part of your process! I love process, the behind-the-scenes stuff, so it's always neat to see how other people think and go about their business.

↑ top