7 reasons why mood boards are worth the extra time

Mood boards

Digital Surgeons' mood board for Crossfit helped to translate the design across different screen sizes

Mood boards are a collection of assets and patterns that eventually evolve into a style guide. They exist as a designer’s tactile and visual sandbox, a place where they can openly experiment with the different facets of a design. Mood boards allow creatives the ability to show clients and colleagues a proposed look without investing too much in a failed direction.

My design career has been primarily digital in nature; a field in which mood boards are more beneficial than many may realise. At Digital Surgeons, we use mood boards to establish an overarching visual language on a brand, product or site level. And we don't just stop at visuals on our mood boards either: we cover everything from voice and tone, ad-like objects, interactions and interface patterns.

With an entire ecosystem of digital devices taking the world by storm, the need for design systems is more apparent than ever. So, for all you digital designers out there who may be doubting the effectiveness of using mood boards, here are seven reasons to convince you otherwise, with some tips and examples along the way.

01. Mood boards are fluid

wall mood board

You don't have to stick with digital mood boards

Just because the final design will be digital doesn’t mean the mood board has to be. Mood boards are very fluid and can transcend multiple mediums and dimensions.

02. They help establish the basics

Mood boards help to establish all of the baselines that will eventually go into a style guide: color palettes, typography, layout, image treatments.

03. Collaboration is easier

Mood boards

This mood board helped to lay the foundation for the Ovation Guitars brand style guide that was translated to print ads, trade show pop-ups and events. Click image to see the full mood board

Mood boards allow you to collaborate easily with your clients and reduce wasted design time. Nothing’s worse than creating a pixel perfect design that isn’t in the direction that a client was hoping for.

04. Mood boards help responsive design

Trying to embrace responsive design? Mood boards should be your first step - they can help to establish a design system that can be translated across any medium or device.

05. You can use them for front-end too

Mood boards

This mood board allowed the DIgital Surgeons team to easily mock up ad-like objects without constraints liked fixed size view ports. Click image to view full mood board

Mood boards can be really helpful for front-end developers. They establish user experience patterns by illustrating interface elements and demonstrate various ways to visualize content. By showing what potential interactions look and feel like on the mood board, developers will generally have less questions when building a site.

06. They are time-saving

Mood boards

This mood board created a design system for Crossfit that was easily digitally translated across different screen sizes through the use of a responsive design framework. Click image to view full moodboard

Mood boards lessen the ideation time of a design project by creating a library of approved patterns or modules. These artifacts can be used to quickly build new pages and features on a site.

07. Now use these resources

So, if you want to get started with mood boards, there's a host of sites and reads to help with your next creation. Here's some examples:

  • Design systems - provides an overview of what mood boards are and how creating one will help you.
  • styletil.es - a great site by Samantha Warren, which helps explain the benefit of using style tiles in your next design.
  • Pinterest - not just for cupcake recipes and wedding planning anymore. Pinterest is an endless source of visual inspiration on whatever category you seek.
  • Dribbble - surf the latest and greatest from designers all over the world for your inspiration cravings.
  • Behance - An online portfolio site from all imaginable creative fields. Their recent acquisition from Adobe will hopefully keep them flush with cash and motivation to keep growing (and hopefully not lose their soul in the process).
  • PatternTap - Pattern Tap is your one-stop shop for User Interface inspiration.
  • Image Spark - a great site for discovering and curating and discovering mood boards. Unfortunately, it seems to be on the chopping block from its creators, so enjoy the images while you still can.
  • mural.ly - a new site that aims to be the collaborative tool for designers to work together on a look.
  • Musespeak - Another great collaborative tool for teams to create mood boards together.
  • Moodshare - A great platform for search, creating and sharing mood boards.

Words: Peter Sena

Peter Sena is designer and founder of creative agency Digital Surgeons. Find him on Twitter at @petesena.

Like this? Read these!

Do you use mood boards? What are your thoughts on them? Let us know in the comments box below!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.