Mood Boards

You may have the experience of diving headfirst into a web design project, only to get overwhelmed by the design possibilities. There are steps in the design process to implement to cut down on the unknown and this is usually in the form of a mood board.

You may have already heard of a mood board, but aren’t too sure how it could truly benefit you or cut down on the overall time spent designing – after all, mood boards take time to complete, themselves.

In this article I will discuss the benefits of using a mood board for a web design project as well as the methods commonly used in creating them.

Image credit: applesandorange

Why Mood Board?

It’s extremely useful in establishing the visual and aesthetic feel of a site. A mood board not only gives you inspiration in going forward with a project, but also is an effective time-saver and necessary component in the creative process. By creating one, you can tackle many issues early on that you would otherwise encounter later on in the creative process.

Imagine spending hours in Photoshop creating a layout filled with a lot of texture and style, only to have the client not prefer that design solution.

Mood boards can prevent unnecessary frustrations as the result of not having a clear creative direction and may cut the overall time spent on a project in half as a result of careful planning. They also give the client tangible evidence of a ‘research phase’ that they may not understand otherwise, and gets them involved early on.

A mood board helps:

• Translate a concept where words may fail
• Create a picture in the clients head early on and let them see exactly what you’re planning and how their site is shaping up before you even start properly designing.
• Cut down on time spent revising due to miscommunication
• Establish the theme of the website (i.e. Soft or hard? Clean or grungy?)

Image credit: align

What Should I Include?

The first step in realizing what needs to go on your mood board is choosing the style that fits the project best. While there are many different ways to present a mood board, the direction you choose will be based on the time allotted, personal work habits and most importantly your client’s personality. The following are just a few elements that generally should be on a mood board.

Image credit: Maquina

Layout

• Wireframes
• Not too much detail
• Black/White/Grayscale only
• Homepage
• One or two subsequent pages

Colors

Create a couple of color schemes based on client preferences or your own. A great site for creating color schemes based on themes is Kuler.

Image credit: Kuler

Inspiration

Include notes on why you like a particular website and how you feel it can be best integrated into the design of their website. Include reasons why the look will suit them.

Image credit: Obox-design

Textures

Find some textures, real or hand-drawn, that you feel fit in with the overall theme of the site.

Image credit: Rocketgenius

Photography

At this stage you can either use photography the client has supplied, or use stock photography to portray the overall theme of the site.

Style

Depending on the time you have and the scope of the work, it may be beneficial to make more than one mood board, focusing on one style for each. Before you start, come up with a list of adjectives to describe a particular board. A certain mood board can be designed around various adjectives such as:

• Dark, glossy, slick, modern, edgy, hard, aggressive
• Soft, muted, round, layered, elegant, realistic
• Colorful, rough, sketchy, bright, illustration

In doing so, you create a wide variety of styles for the client to chose from.

Physical or Digital?

Mood boards can be created in both digital and physical spaces and there are advantages to both. For instance, a digital mood board can be created quicker, however, physical objects tend to have a higher impact on people because of the more complete palette of sensations physical mood boards offer, in contrast with the black & white or color-prints of a digital mood board.

Mood boards 2.0

Evernote
This virtual mood boarding tool is useful for collecting inspiration by clipping and pasting. It’s a website, desktop, and mobile app that allows you to gather your thoughts through note-taking, capturing images from webpages and your camera, and even writing handwritten notes.

Sampleboard
Another useful virtual mood boarding site is Sampleboard. Simply upload images and organize them into project files to be stored online and use the web editor to easily pull together design trends and color schemes. Mood boards can be shared on Twitter and Facebook, or integrated into your own documents and presentations in one easy click.

Oliaboard
Geared towards Interior Designers, Olioboard is an easy and intuitive application for creating digital mood boards. It is also a community of creative thinkers coming together to share inspiration and offer feedback.

Polvore
Discover style and trends around the world at Polyvore. It’s one of the web’s largest tastemaker communities with 6.5 million monthly visitors.

iPad Moodboard Creator
Moodboard is the bestselling app for creating mood and inspiration boards on your iPad. Each board is a blank canvas for organizing the things that inspire you. Add photos, text, color swatches, and special elements to your boards, then share them with friends and colleagues, anywhere, anytime.

Benefits:

• Can be synced with desktop, iPhone, and iPad apps for collecting inspiration wherever you are.
• Ideal for the designer who has a loose deadline and the time to collect images on the go.

Template
If you prefer a more formal approach that captures all the details that will go into the design, a refined template may be the best bet. It’s here where you can delve deeper into the design details, incorporating color palettes, font treatments, button styles, and photography.

Benefits:

• Helps your client focus on the details and featured elements.
• Multiple templates can be developed, each focusing on a separate theme to get the most out of the process.
• It’s best to start the creation of a template-based mood board by choosing adjectives to describe each one. These words can be referred to as you pull items together. For instance:
  • Dark, glossy, slick, modern, edgy, hard, aggressive
  • Soft, muted, round, layered, elegant, realistic
  • Colorful, rough, sketchy, bright, illustration

Loose Collage
A loose collage is beneficial for those who aren’t too obsessed with details and wish to create the overall impression of the site in as free a way as possible. If you’re a big picture thinker this mood boarding method may be for you.

Benefits:

• Can be thrown together relatively quickly and doesn’t force you to make decisions about smaller details like colors and fonts.
• Grab inspiration from wherever – whether it’s a book or images found online.

Moleskine
Moleskines are another practical way of showing your intent. In addition to doodling and note taking you can also use them for collecting various scraps, images, doodles, and notes.

Benefits:

• Like a loose collage, they can be as free flowing or organic as you want them to be.
• Multiple pages allow for a convenient way to keep your inspiration all in one book.
• The portability (and reasonable size) allows you to take your inspiration on the go.

Resources

• Flickr Inspiration Boards – contain a great collection of inspiration boards from a variety of designers.
• 17 Inspiring Moodboards
• Design: A great example of moodboards in action
• Why Mood Boards Matter

Conclusion

If you often have a hard time initially in the design process, creating a mood board through any of the methods mentioned here can take some of that initial frustration away. It’s through creating these mood boards that experimentation is delegated to the beginning to the process, laying a solid foundation for the rest of the web design process.