How moodboards can save time, money and your sanity!

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.

An example mood board

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.

A mood board that looks like a final 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.

  • Andy

    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.

  • http://www.d-lists.co.uk Michael Wilson

    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

  • http://www.harun.it Haligali

    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.

  • Robert

    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.

  • http://twitter/tom_h tom

    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

  • http://www.mariewilkins.co.uk marie

    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.

  • http://www.recommended.fi Miika Puputti

    It can throw some clients off a bit but it can also save alot of time as well. Great post Paul!

  • Andy

    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.

  • http://www.fogofeternity.com Robin Cannon

    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.

  • http://www.twitter.com/GrantMc Grant McAllister

    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 :-)

  • Bryan G. C.

    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.

  • http://www.darrenmcpherson.co.uk/ Darren McPherson

    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.

  • Jeremy

    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!

  • jj

    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…

  • http://www.searchtosales.co.uk Debbie Stocker

    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?

  • http://www.superuserstudio.com Stu Collett

    Great post! Totally agree with creating moodboards over actual mockups. It’s time consuming to edit Photoshop psds and can often stunt a designer’s creativity by mixing 3 differing web design mock ups into one.

  • Gary

    Would you mind posting more examples, of ones you have used in the past?

  • http://www.channelship.ie/blog/ Facundo

    Hi Paul, I’m new to moodboards, we generally work on wireframes and then move on to the design comps as many people comment above. This works fine for clients who are not very demanding (or the ones who really know what they need). There are others who are very uncertain and even if they approve wireframes, then they tend to request changes at the design stage. I think those are the ones with which I want to start trying the moodboards very early and see if it makes the wireframing-design stage smoother. Thanks for a great post

  • Carlo Rizzante

    Guys, you’re illuminating. I’m changing my design process progressively getting inspiration mainly from articles such this one about Mood Boards, and it works fine. It takes a bit of tuning and experience in using new tools, but it does pay off. So, thanks!

  • Bo Vittrup

    Great article :) and a somewhat delayed comment from here.

    I believe that this is a very strong tool – as long as you start out with an idea of the theme / direction, you’re moving in. Otherwise it will just be a bunch of clippings of pretty things but with no real direction or shared theme(s). 

    The version with a graph where you plot e.g. two by two extremes and arrange your clippings in a matrix would probably work very well for trying out different directions in one board? (like the example from the Microsoft tablet video also posted here on Boagworld).

  • http://www.facebook.com/beethedesigner Billie Bryan

    I’ve been

  • http://twitter.com/pk_creative Paul Kent

    In my experience of working in print advertising mood boards were always an internal process and standard practice, pinning stuff to the wall, but client’s would never see them. Also if you were doing a pitch then in a way you would create loose mock-ups that were similar to mood boards. Clients would then see them during a presentation. So mood boards are nothing new in the creative industry. The approach to web site design shouldn’t be any different. Like thinking outside the box we should think outside the computer screen.

  • Mrladoo

    Seems like there is a bit of a fine line between design comp and mood boards. My clients are usually pretty literal so if I show them something thats rough or just an idea they think its final or they don’t get it especially when you are emailing pdfs back and forth but the idea of spending less time doing PSD comps is very appealing. I guess you gotta know which clients will be good with it and which ones will not 

    • http://boagworld.com/ Paul Boag

      The trick is to very carefully explain what they will see before you do the moodboard and then provide them specific guidance about the type of things they should be looking for. Typically I tell a client that when they are looking at a moodboard they should be asking themselves the following questions…
      – Are the colours, typography, styling, textures and imagery inline with the branding and personality previously discussed. – Will the target audience respond well to those same elements in the moodoard.
      In other words you are getting them to focus on the colour, typography, styling, texture and imagery rather than the overall design.
      Does that make sense?

      • Mrladoo

        Absolutely. Client education is always (almost always) an unsaid skill designers need to develop. I do a lot of fed govt work and my client is a sub to the govt client so a lot of times I’ll send some ideas along and my client decides that the govt client won’t get it and doesn’t even show them something I sent. Then I have some folks who, if they see a color or something they don’t like, they can’t get past it and any amount of explaining and trying to get them to focus won’t fix it. But I think I’m going to work harder at doing this. Obviously it makes a lot of sense to us (designers). I guess getting clients on board with the idea they are saving tine and money is key. Thanks for your response 

        • http://boagworld.com/ Paul Boag

          A couple of things that might help.

          First, you HAVE to get access to the end client. You are never going to get anywhere if you cannot build your own relationship with that end client and convince them you are an expert.
          Second, I tend to pre-empt common issues and one of those issues is colour. Before showing the client a design I explain that colour is one of the most subjective elements about design. It creates a strong and very personal reaction so be careful not to allow personal opinion to effect their comments. Suggest that if they do not like the colour they shouldnt dismiss it but instead test it. By pre-empting the issue it will significantly reduce the chance of the user responding to the colour in a negative way. If you want to know why you will have to buy my book “Client Centric Web Design” ;-)

          • Mrladoo

            Yes that access to the end client is very elusive with the ol fed govt. Regardless I have a couple of things coming up – we’ll see how it goes. Thanks again for your comments 

  • http://www.facebook.com/profile.php?id=100000119151906 Paul Kent

    I did some mood boards recently for a client and it worked really well. I created three alternative moods based on the subject matter (in this case mental health). I used very generic elements so as to steer the client away from it being an actual mock-up of the final site – I did have to keep reminding them that it was only mood, as they did start getting bogged down with content. The layouts were pretty lose and resembled a collage rather than a web site. My overall conclusion was very successful in the end. The creative meetings were much less formal and open to ideas and it felt a very inclusive process and I highly recommend it. Admittedly the client are a bit of a dream and easy to deal with which is not always the case. I think you need to compromise to a certain extent and just look at the bigger picture rather than smaller details.

  • bgrggfe

    According to the survey, France has about 2.6 million millionaires,that is most in European countries .After the Outlander win the presidential election , Maybe the rich will fear the outbreak of the exodus. In fact, many multinational corporations before the election, one after another continued to headquarters out of Paris, the transfer tax rate is relatively low, Luxembourg, Hong Kong, even the United Kingdom. ”
    Well-known French brand Louis Vuitton Handbags On Sale boutique group LVMH , also reported to consider To the headquarters moved to London from Paris, it is necessary to avoid heavy taxes, and increased high tax rates make LV headquarters in Paris, it is difficult to find the Senior Management .

  • Steve S

    If you look at what a mood board is in other areas of design it has little to do with the end product and more to do with ‘lifestyle’, ‘product positioning’ and capturing an ‘ethos’. Usually entirely made up of imagery ripped from mags and the web and presented in such a way as to convey a style or direction. Quite often the imagery will be to evoke feelings or senses and have no reference to the actual end product.

Headscape

Boagworld