Web Design Mood Board

[toolman]

Hi there,

I am applying for a web designer job and have been asked to put together a mood board of my design influences. I’ve not really made a mood board before, so I wanted to ask for advice on what sort of things I should put on it? Also, do I annotate the items on there?

Any advice would be appreciated.

Thanks!

[eoadams08]

Hey toolman,

First, congrats on taking that important first step and actually applying.

What is a mood board?

A mood board is a collage of ideas that all relate in some way to your preferred style, or mood.

There’s a thousand different ways you can arrange a mood board and it has other names like ‘vision board’, ‘stylescape’, etc. So in other words, there’s no one way to do it really.

But, even so, all mood boards should follow the one principle, which is that all of the images, graphics and photos should all relate to the same style / topic / or idea.

---

Every mood board first starts with an idea.

For example if you’re the type of person who’s inspired by minimalism, everything you put on your mood board would be minimal (of course), have a lot of white space and would be well organized.

A mood board is not literally a physical board, it’s similar to a Pinterest board where you can combine images from different places around the web.

Things to put on your mood board

Mood boards are used for all kinds of different things like event planning, interior design, fashion design, etc. What you put on your mood board really depends on whatever you’re designing for.

An interior designer, for example, would put things on their mood board like paint swatches, cloth material, carpet and tile samples, etc; because those are the things that they would need to complete their project.

Of course you wouldn’t need those things on your mood board as a web designer.

What you should put on your mood board are things like:

• Typography / Font Pairings

• Logos

• Color palettes

• UI elements

• Illustrations and vector graphics

• Iconography

• Screenshots of related websites

• Photography that relates to your idea

• Stationary (Document design)

…and you could even include product design like bottle labels, packaging and so on.

Since we’re using minimalism as an example of a design influence:

• You could use a more muted color scheme and images with neutral colors

(/i.imgur.com/7QwY5wz.jpg)

• You can use pictures of things that have a lot of white space. Like minimal book covers, interior design rooms with a lot of space, photography that only has one or two objects in focus, etc.

(/i.imgur.com/kPZckZp.jpg)

• You can also use other graphic design examples of minimalism like in banner ads, flyers, pamphlets, business cards, etc.

(/i.imgur.com/HbU4i3w.jpg)

How to layout your mood board

Once again there’s really no one way to ‘properly’ organize a mood board. That’s because it’s a collage. Honestly, you can just copy/paste images in a Word document and that would technically be a mood board.

But there are layout templates that you can use to make your mood board look organized. And you’ll definitely want it to look professional if you you’re presenting this at an interview or to a client.

You could use a layout guide that uses a mosaic type layout with different size images and places where you can add color to bring the whole thing together.

(/i.imgur.com/SF8lJIk.jpg)

Or you could mask the images into different shapes like hexagons and circles. All these layouts are similar in that all the images and colors fit together nicely around the edges.

It doesn’t always have end up being a big square or rectangle. But designing a nice looking collage, there is some method to the madness.

(/i.imgur.com/XrjcxtR.jpg)

How your mood board should look

The quality of your finished mood board is not so much about the layout you choose. It’s much more important to choose the right content so that whoever is looking at it can immediately understand what influences your style.

Here’s an example of minimalist design without any particular layout:

(/i.imgur.com/UCpABRE.png)

It has all the different things that inspires someone who like minimalism, such as the book cover with lots of white space, the neat and organized room, the photographs that focus on only one object, and the muted / neutral color scheme.

All the images you choose should match each other and the overall color scheme so it will look unified.

This is another example of a minimalist mood board:

(/i.imgur.com/sCcIg6r.jpg)

This one’s a little different because it has a little bit brighter colors but still follows the muted colors trend in minimalism. Look at how all the images match each other and they all basically create the color scheme that you see.

Here is an example that has a professional layout and it features fonts, logos, unique triangular color swatches, and images that tie into the color scheme.

In summary, a mood board starts with an idea, then you look for images and graphics that can present your idea really well. A great mood board design should take unrelated images and graphics and match them all together to tell the story of where you get your inspiration from.

Hopefully this helps.