Introduction to Mood Boarding and How to Use it Properly

Posted in Blogging, Tips, Web Design2 years ago • Written by 5 Comments

Mood boarding is a technique often used in web and graphic design, but its use is even broader than this. Painting, photography, game design, interior design, movies, marketing, fashion, music, advertising and even architecture are domains where mood boarding is used to develop concepts and to intercommunicate with other members of the design team. A mood board is a type of poster design containing text, images and samples of objects used in a composition of the choice of the mood board creator. It enables a person to illustrate the direction and general style which the final product is pursuing.

Mood boards are not limited to visual objects and can also be used to visually explain a specific style of writing or a setting for a storyline. Mood boards serve as visual tools and inform the others about the general “feel” that a designer tries to achieve. Mood boards are usually created digitally, as it is much easier, but physical objects tend to have a higher impact on people. In some countries graphic design students study mood boarding as a semester-long course.

Image by Christian Vasile.

Why and where?

Mood boards are useful when trying to establish the aesthetic flow of a site. In most cases it doesn’t give a tremendous amount of inspiration, but you can get from it something you can use further. It is also very good time saver in the creative process. Many issues can be solved right away (or at least easier) if you go for a mood board – which, by the way, also solves some problems you would normally encounter later on during the development phase.

The first time you can use a mood board in a design project would be submitting it to the client. If he likes the feel of it, you can move on and create a layout. If he doesn’t like it, you create another one. The advantage is that you don’t always spend time on creating a new layout which takes hours to finish – the risk of losing time with something that will never be used is minimal.

Mood boards also set a general direction for your layouts and project in general. It cuts the time spent on a project which has a bad planning phase behind. By submitting one of those to a client you might help him understand some of the research you do before starting to design. We say that an image is better than a thousand words. Imagine how much a mood board with ten images can do. You will understand this better if you’ve had a situation when a client that couldn’t understand anything about a concept, but got the idea immediately when shown a picture or an example. A mood board works in a similar way. It creates a picture in the clients’ minds and makes sure the drafts you come up with will not shock them, as they are already used to the flow and expect something like that.

Image by Board Shanty.

Elements

The first thing you need to do is to choose the best elements that can help you. Start thinking about the general direction you want your project to take and also about the client and what would he be interested in. Mood boarding can also be done in a different way than most do it: this is where you can already start designing your layout, only just on paper. You will only draw it in grayscale and will only draw the homepage and two other subsequent pages – with not very much details besides the containers and menu. I think that this overlaps with the creative process and don’t usually like starting designing before the mood board is accepted.

Designers who use mood boards to set up an environment or a general feeling do not start designing already. They include few examples of websites they like, color schemes (Adobe Kuler is probably the best help you can get), textures or photography. All these come in a style which will be further developed into a website. Words that can describe a mood board could be: dark, slick, glossy, modern, soft, round, elegant, realistic, rough, bright, sketchy, colorful and so on. As you can see, these are words that can also describe a web site or a poster. The transition from a mood board to the final product should be easy to notice.

How?

Mood boarding is not a difficult process and doesn’t need to much explanation. The most asked question is if it should be done on paper or on the computer. As mentioned earlier, I am a fan of doing it on the computer. Photoshop works just fine for me. However, there are some other online solutions you could use, so I will review some of them for you today.

Sampleboard

Sampleboard is one of my favorites. It allows you to upload images and organize them into projects. You can also store them online and use the integrated web editor to pull together trends and color schemes. You have the option of sharing your mood boards with others on social media and even turn them into documents or presentations thanks to the exporting options.

Evernote

Evernote is a virtual mood boarding tool useful for clipping and pasting collected inspiration. You can do it online, use their desktop program or the mobile application – so Evernote is simply everywhere. You can even integrate handwritten notes or images captured from web pages or your camera device.

Polvore

You can’t create mood boards here, but you can get a lot of inspiration from Polvore. It is a community with 6.5 million monthly visitors and you can find many styles and trends from around the world and get inspired from them.

Image by BMerry.

Bottom line

If you find yourself often in the middle of the creative process and don’t know where to head, think of using a mood board next time. Many us of use mood boards and, in the least, they will help you set up  the mood of the project. I am not saying mood boards will solve all your problems – they will obviously not, but they will help you along the way. They are not very difficult to create and are a solid base for your projects, so at least give it a try. You will fall in love with them and will never start another project without one.

Until next time… what do you think about mood boarding? Have you ever used one or do you plan on doing it? If you have used a mood board before, how useful was it as a whole?

Further reading

Why Mood Boards Matter? on Web Designer Depot

A Great Example of Mood Boards In Action on BoagWorld

17 Inspiring Mood Boards on Inspiredology

Inspiring Mood Boards on Flickr

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

5 Comments Best Comments First
  • Scott

    Friday, March 16th, 2012 23:20

    1

    Really good article Christian,

    I find moodboards a really useful tool for giving clients a feel for your proposed design approach before getting too far down the line. I totally believe that including clients at an early stage helps get buy in and ensures they feel its an open consultative process that they have a role in.

    I’ve been searching for a while for the ideal moodboarding platform but haven’t quite found it. Imagespark is about the best I’ve found but I’m definitely going to give sampleboard a look.

    On another note I’ve never been totally comfortable with the term ‘moodboard’ it somehow seems a bit too airy fairy and more closely associated with interior design although I haven’t quite managed to come up with one that fits better with web design. ‘Conceptboard’ perhaps!?

    Scott

    0
  • umesh ramidi

    Saturday, March 17th, 2012 07:47

    2

    fantastic article Christian i like it.

    0
  • Deano

    Sunday, March 18th, 2012 10:13

    3

    Nice write up. Especially how you mention it shows the client the design research time that’s been done… as usually these would be hours spent with no visible output.

    I’ve been an interactive producer for a long time. The design team doesn’t often use moodboards, generally they do when: it’s a rebrand or new branding project, it helps shape the digital visuals; we have a known tricky client who is pedantic on design changes.

    I’ve found it can, at times, be useful in the briefing stage to get the client to send you references of images/screenshots etc that inspire them – including these in the moodboards gives them a sense of belonging and like they’ve “had their say”.

    From a long-time-reader-first-time-commenter. Keep up the goodness!

    0
  • Sebastian

    Monday, March 19th, 2012 15:05

    4

    Great… I love working with Moodboards. We are just about to launch an easy way to create Moodboards online and character pack, in order to make 1-minute-splainers.

    0
  • Khyali

    Monday, March 26th, 2012 10:43

    5

    After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it.

    0
  • Khyali

    Monday, March 26th, 2012 10:43

    5

    After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it.

    0
  • Sebastian

    Monday, March 19th, 2012 15:05

    4

    Great… I love working with Moodboards. We are just about to launch an easy way to create Moodboards online and character pack, in order to make 1-minute-splainers.

    0
  • Deano

    Sunday, March 18th, 2012 10:13

    3

    Nice write up. Especially how you mention it shows the client the design research time that’s been done… as usually these would be hours spent with no visible output.

    I’ve been an interactive producer for a long time. The design team doesn’t often use moodboards, generally they do when: it’s a rebrand or new branding project, it helps shape the digital visuals; we have a known tricky client who is pedantic on design changes.

    I’ve found it can, at times, be useful in the briefing stage to get the client to send you references of images/screenshots etc that inspire them – including these in the moodboards gives them a sense of belonging and like they’ve “had their say”.

    From a long-time-reader-first-time-commenter. Keep up the goodness!

    0
  • umesh ramidi

    Saturday, March 17th, 2012 07:47

    2

    fantastic article Christian i like it.

    0
  • Scott

    Friday, March 16th, 2012 23:20

    1

    Really good article Christian,

    I find moodboards a really useful tool for giving clients a feel for your proposed design approach before getting too far down the line. I totally believe that including clients at an early stage helps get buy in and ensures they feel its an open consultative process that they have a role in.

    I’ve been searching for a while for the ideal moodboarding platform but haven’t quite found it. Imagespark is about the best I’ve found but I’m definitely going to give sampleboard a look.

    On another note I’ve never been totally comfortable with the term ‘moodboard’ it somehow seems a bit too airy fairy and more closely associated with interior design although I haven’t quite managed to come up with one that fits better with web design. ‘Conceptboard’ perhaps!?

    Scott

    0

Comments are closed.

54.196.167.69 - unknown - unknown - US