Your site-architecture & layout is in order, but you need to give your client a few options on the style of their website. Use mood-boards to simplify the process & further define your style…

Following on from last week’s article on designing with wire-frames, we’ve decided to write on the pro’s of designing with mood-boards, explaining a little about them and just what they can do for your project.

“A mood board is a type of poster design that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use mood-boards to develop their design concepts and to communicate to other members of the design team. The mood board may be used as a frame of reference during the design process in a variety of abstract disciplines”
Mood board - Wikipedia, the free encyclopedia

In these early stages of a website project, we can use mood-boards to show our client some different ideas & takes on their website. Each mood-board will show a “mood” or “feeling” we wish to create from the site. Once we have created several mood-boards, we can then compare them and make a clear decision on the direction we wish to take our design in.

An example Mood-board for fictional website “Midnight Sky”

There are some specific elements we include on our mood board, that when added together can show us the “atmosphere” or “mood” we would generate from our website. We include the following elements in ours:

• Designer Notes
• Typography
• Colours
• Icon Sets
• Illustrations - Vector Art, etc
• Photography / Stock Photos
• Patterns & Textures

Sometimes not all of these are required, but as standard they are the ones we look over when creating each board. They allows us to take in all the visual aspects of a design, lettings us consider why they would be good for the website - or in some case’s why they would not.

Mood boards are a great technique to embody, because:

1) Nothing is set in stone

Just like with our wire-frames in the previous article, mood-boards are not set in stone; they simply provide an insight to a particular design style. Once a range of these are laid out next to each other it makes it very easy to explain to a client your ideas & the reasoning behind each.

2) They help make you question “why?”

Many designers decide to use sIFR to allow creative fonts in headings. Some client’s may put forward having the website colour-scheme “purple” as it’s their favourite colour. Mood-boards help you to actually consider why you have made these decisions, and how they effect the website’s atmosphere.

3) They allow clarity of your website’s design direction

It is not enough to design without reason - simply saying “a Georgia font would make the website look jazzy”. Mood-boards allow us to consider what “mood” we want the user to get when arriving at our website. From this we can decide on design elements & techniques that will aid the design, not just push it along.

Summary

At Peakflow Design we use mood-boards because in the preliminary stages of a website we need something that can allow us to consider different design styles to take the website in. We can show these mood-boards to our clients, and also keep them on record in case we wish to consult them further into the project.

Try creating a mood-board today and see how clear it allows you to make design decisions for a project.

Further reading

• 404 Weblog - Website Mood-Boards: A Successful Precursor to Visual Prototyping
  This article shows you first hand what a difference mood-boards made to one design firms website design decisions.
• LifeClever - 5 Reasons to Design with Mood-boards
• FlickR Inspiration Boards Group Pool (Found from LifeClever)
  Taken from the LifeClever article, the Inspiration Boards pool at FlickR shows you a great range of user submitted mood-boards