Moodboarding Methods for Web Designers

Posted September 10th, 2009 / By Ben Gribbin in Tools

There used to be an art teacher at our high school, and they strongly insisted that you made a moodboard before starting a new project.

We’d collect research, examples & notes looking at the textures, colors, positioning and general arty attributes of the work we were studying. All along we’d be collating this research onto a moodboard.

It never really stood out to me why we used them. But then, other day it hit me and now I think we should all be using them for our design projects.

Image by dbloete

Why moodboard?

• Moodboards are great way to display related media, research and examples – if you were to make a book the same size it would be huge.
• Moodboards help you gain a complete understanding of what you are trying to achieve design wise. They also keep you inspired, and you can create as many as you like for any one project.
• Moodboards will push your design abilities, allowing you to explore new concepts, color palettes and typography all in a fairly noncommittal way.
• Clients love moodboards, because they let you see exactly what your planning and how there site is shaping up before you even start properly designing.

Moodboards 2.0

That got me thinking. Since moodboards were always monolithic chunks of card, where would I store them all? It sure would use a lot of paper and ink too. But there is another way. Digital moodboarding.

All you need to do to get going is create a basic HTML template, with some light css styling. You don’t want to spend hours on this because its not the design we are interested in, its the content.

I’ve included my own template for download below. It has various elements that allow you at add notes, drop in simple snapshots and it scrolls horizontally. Its not standards compliant, because it doesn’t need to be. This is a process that likely will only ever be viewed by a few people, most of whom will be on your team.

Moodboards 1.0

For those of you who prefer analog to digital don’t worry. Here’s a few ideas how to create real life, touchable moodboards.

Sheet of card

Image by Svanes

This is how we always did them at school. We’d have a big (typically black) sheet of card. You can pick a sheet of card up for a few dollars. Then we printed, drew, wrote and glued on ideas and concepts.

This method is the most professional and you can quite reasonably show these to clients. Only trouble is, when the projects done you have a huge sheet of card to store or dispose of.

Moleskine

image by Ann D

Moleskines are great! People use them for doodling & note taking but why not use them to moodboard? Each page is like a new path on your road to inspiration. Plus, moleskines are reasonably sized and most of you will have a small stockpile in your office already.

So what are you waiting for? Moodboarding is a quick, efficient and cheap way of furthering your design skills and keeping clients in the loop. Try using them on your next project for a heightened sense of creativity.

Ben Gribbin is a freelance web & icon designer from the UK. Ben is a huge Apple fan, and loves to write about design, inspiration, apple and other techy stuff whenever he can.