How moodboards can save time, money and your sanity!
Posted in Design on: Thursday, October 22, 2009 by Paul Boag
Mood boards are a traditional design tool. However, few web designers use them. This post looks at how they can transform your process, increase profitability and reduce the stress associated with design sign off.
Headscape has been using mood boards as part of our design methodology for some time. We believe they are an invaluable tool that helps both the client and the designer.
However, before you can understand the benefits of mood boards, it is important to acknowledge where the traditional design process falls down.
Where the traditional web design process fails
Obviously everybody approaches the design process slightly differently so it is unfair to refer to a traditional approach. However it would appear that many agencies and freelancers follow roughly this process:
- Ask the client a bit about what they want from the design
- Ask the client to identify some websites they like.
- Produce 3 design comps in Fireworks or Photoshop.
- Ask the client to choose a design from the comps presented.
- Iterate until the client is happy.
This was certainly the approach we used until we realised it was not working.
We identified the following problems:
- When asked what they wanted from their design, most clients focused on personal preference rather than business or user needs.
- Clients often referred to sites that were either inappropriate for their audience or were selected based on content rather than design.
- Producing multiple design concepts was time consuming for the designer and expensive for the client.
- Multiple concepts led to frankenstein design, where the client would try to combine the ‘best bits’ from each comp.
- The designs went through a lot of iterations because the designer did not have a full understanding of the clients requirements.
We utilised several approaches to overcome these problems. However, the most successful component was mood boards.
What is a mood board?
A mood board is basically a collection of graphical elements that set the tone for your design. Typically these include examples of:
- Typography
- Imagery
- Colour
- Layout
- Style
Often these elements are lifted from other sites or even from sources such as magazines.
They are not meant to represent the final design, but rather provide an indication of how the site may feel.
When you first start producing mood boards it is difficult. You may have a strong sense of how the site should look, and so it can be hard producing alternative approaches.
Increasingly we produce four mood boards:
- One that is our initial gut reaction.
- One that is a more conservative version of the initial board.
- One that is more extreme.
- One completely ‘out there’ approach that is probably inappropriate.
Admittedly you could get away with the first three, but the fourth enables the designer to be more creative and potentially discover a completely different approach.
How mood boards can help
The reason mood boards made such a difference to our process was three fold:
- They put us in control - Previously it was the client who was making design suggestions and selecting inspirational sites. By using mood boards we were the ones setting the tone and suggesting the direction. After all that is what the client is paying us for!
- They are quick and easy to create – Developing design comps is time consuming and expensive, especially for something that may ultimately be discarded. Mood boards can be produced relatively easily, which means they are viewed as disposable. As a result the designer is not overly committed to a particular path and the client can see multiple revisions.
- The client focuses on design, not content – We found that when clients looked at a design comp they were more concerned with the content than the design. Because mood boards do not contain real content, this problem is avoided and the client can focus on typography, imagery and colour.
The introduction of mood boards made an enormous difference to the running of our design projects. However, over time we have made some mistakes that have reduced the effectiveness of mood boards.
Mistakes when designing with mood boards
If used correctly mood boards are an extremely powerful tool. However, it is also easy to fallback into old habits. If you are going to use mood boards, be careful to avoid the following mistakes:
Designing a website and not a mood board
One problem we encountered was that we were so conditioned to build websites that it was hard not to. Every time we produced a mood board it ended up looking like an actual site.
The solution
The way we are resolving this issue is by changing the format. Instead of designing on a 1024 by 768 canvas, we have switched to creating A4 mood boards. In fact we also try to minimise web elements such as navigation or search boxes.
Making them too finished
An associated problem was that clients were getting confused. The mood boards were looking so polished that they were no longer sure what they were looking at. Was this a mood board or a design comp? What were they supposed to be providing feedback on?
The solution
We are still battling this problem. However, one approach I have adopted is setting constraints on the designer. Typically this involves limiting what Photoshop tools they can use.
When all the designer can do is copy and paste elements they have found elsewhere, the mood boards cannot become overly designed. The emphasis shifts from designing detail to looking for inspiration and setting the mood.
Spending too long on a mood board
Of course, the final problem relating to overworked mood boards is time. As our mood boards started to become more and more like design comps, they took longer to produce.
This had two consequences. Firstly it cut into our profit margins. Secondly, the designer became increasingly attached to the mood boards and find it hard when the client don’t like them.
The solution
The solution to this one is simple. We are beginning to set time limits on mood board production. We are now asking designers to spend no more than one hour on a single mood board. Most of that time is spent sourcing elements rather than doing design work.
By taking this approach we can afford to produce multiple iterations of mood boards and experiment with many different directions.
Conclusions
I am aware that we are in a minority by using mood boards. However, I would suggest that every designer should consider them as a tool.
If you design multiple comps then this could be a real cost saver.
If you pursue a single approach, this will enable you to explore other avenues with minimal effort.
So, what do you think? Do you use mood boards already, or do you think it is an outdated tool that has no place on the web? Whatever your thoughts I would love to hear them in the comments below.
15 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
I used to work with designers who would plaster their surrounding work area with magazine fonts, cutouts, sketches colour swatches, basically anything which conveys the style of the thing they’re designing. In this way, they are permenanlty immersed in a kind of moodboard which is always there for reference when they’re working. I think its a great idea to make it portable and collaborate on its creation with the client.
I’ve tried a few times to use mood boards but it’s never been something we’ve presented to a client. It’s been more of a guide when producing mock ups.
I’d be interested to see how our clients would react to a mood board. I suppose it depends on how well you educate them about what to expect from them.
I’m currently at the start of a design process so I may well give moodboards another go after reading this.
If I remember I’ll let you know how the process goes.
Thanks Paul
Moodboards can be great for diferent design processes and goals. I have used it mostly while branding or defining a campaign guideline with the internal creative team. It was a huge wooden panel and we would attach paper cutouts from magazines or print down something from web and then combine. For colors we used pantone-like color samples.
I have never thought of using it for laying out web design and presenting it to the client. I have to try and if I remember I’ll give you a feedback. Cheers.
Great post, Paul. I love the idea of mood boards, but I’m still trying to make the leap. I’ve always shown clients somewhat unpolished comps to get early feedback in the design process. But that does sometimes fail for the reasons you mention. I’ve found that, like Andy mentioned, having my otherwise drab and gray cubicle wallpapered with design ideas, my own sketches, etc. certainly helps – it’s like having a LittleSnapper decor.
I’ve tried the them a few times. Generally they work pretty well, although the last time I used them, they backfired. The project was for a restaurant website. They loved one of the boards so I proceeded to apply the insight to the design. When I presented the design they were underwhelmed.
Digging deeper, it turned out they loved the chaotic energy of the board, but translated to a structured and restrictive website grid, a lot of the energy had been lost.
A further revision brought the project back on track so ultimately they proved their worth in establishing a direction quickly although with an unexpected pitfall.
love the A4 tip BTW.
cheers
Tom
Great post… it’s really interesting to see examples of other peoples workflows and the moodboards. I’d like to hear how clients have reacted to them, too.
It can throw some clients off a bit but it can also save alot of time as well. Great post Paul!
Just a thought, Paul. To avoid moodboards ending up looking like web pages, it could be an idea to disallow your designers from putting them together in photoshop. Instead resources could be assembled in the physical realm, ie: sticking bits of paper to a board. This would discourage ideas being too heavily lifted from the web and instead encourage designers to use resources such as photographs they’ve taken, magazines clippings, wallpaper and such like. Of course digital resources could still be used, but having to print stuff out to stick on the board would hopefully protect it from overuse.
From the scrapbook appearance, the client would be less likely to misinterpret it as a mockup.
I love Andy’s idea of forcing mood board creation away from the computer and into the physical realm. I think that would achieve a much more natural result, and probably act as a minor release for web designers when they can spend an hour acting like five year olds making a scrapbook page, rather than glued to a computer.
One of the most important design resources I have is a scrapbook. I have a big (A3) size scrapbook and I keep, cut out or save anything that provokes a gut reaction. There’s no rhyme or reason to the book, but whenever I start a project I spend half an hour or so flicking through it. Someimtes I find something that’s specifically relevant to the project, a creative hook to hang the rest of the design from. Even if I don’t, it gets the creativity going.
I think the point here is that as web designers we too often neglect physical media. If you make mood boards, creative scrapbooks etc, into physical things then it forces you away from the computer and makes you think about design in a non-technical way.
What a great article, one of the best I have read on Boagworld in a while.
I’m going to try this tomorrow as I’m designing my own portfolio site, It’s really hard to get something together I like, so a few mood boards hopefully will let me see if they are for me and hopefully get me started on my own site.
Thanks paul :-)
I’ve never used mood boards and I’m not used to see them. Actually, it’s a pretty new subject to me. Love the idea, but have a dumb question: the first image (komika axis, the guy jumping with the brick wall behind him and all) is a mood for real, or just a didadic, concept image?
Thank you, anyway.
My college/uni have always encouraged using moodboards when designing a website/application. I haven’t seen it used in real life. I’ve tried to use them in an inhouse team and was shot down. That’s another story.
But I feel that moodboards are a great way of conveying what emotion the client is looking for. Like anything in the web, it’s a young process and will need to be refined.
Thanks for letting me know it’s used in a real working environment.
I’ve never created a mood board, but I think producing some would be a great idea before I start working on my new website. Thanks Paul!
None of these methods work when you have a client who is unable of abstract thinking and/or does not understand or see the point of why you are wasting his time making a scrap board out of cut-out pictures. He doesn’t need that. He just wants you build what he’s telling you to build.
So frustrating…
What do you think of the idea of a client coming to you with a mood board? Having spent recent months working on my own branding and design, I was aware that I already had very clear ideas about what I was looking for in a design. Also, my role in the web somewhat sits between the client and the designer, and it has been my experience that often clients already know a lot of how they would like their website design to feel; for example, they have already produced their own ‘offline’ brand and marketing collateral and know that they would like the website to fit with this brand image and design ideology. How would you feel if a client approached you with a mood board that reflected their brand and some of the design ideas they already have for how they would like their website to feel? Do you think this would help the process also?