Sign up for our monthly non-profit newsletter

The Idea Bureau

Microlearning: How to create a mood board for your website

Screenshot of Figjam mood board for LEAP

We’re introducing the first of our microlearning series: little snippets of inspiration or instruction for you to take away and do with what you will. For this edition, we thought we’d take a look into creating mood boards to share ideas for your next web project – what they are, how they work and why they’re useful.

TLDR: Here’s the first in a new series of ‘microlearnings’ – this one’s on creating a mood board for a web project.

So, what is a mood board, anyway?

A mood board is a visual tool that can quickly convey the overall feel of an idea. They can be digital or physical, and are effective at presenting images, text and other ideas to an audience. In terms of a website project, they’re a great way to collate any examples of websites or apps you like, and the elements within, to assist your design and development team in creating your vision.

Screenshot of Figjam mood board for L V Prasad Eye Institute (LVPEI)

How we use mood boards with our clients

Typically, we run a number of Discovery Workshops with our new clients to figure out what they need to bring their project to fruition. This allows us to start creating the sitemap and user journey in collaboration with the project owners.

Before we have our first session, we set up a mood board area on Figjam – part of an app we use for design work called Figma – for clients to drop all of their ideas into. Figjam is an interactive whiteboard that allows users to easily upload images and web links, and annotate these with their thoughts. If a client already uses another tool, we’re open to working with that to make things easier for them. A few other tools many people use include Pinterest, Canva or Milanote, but there are many available to suit your needs.

There are a few types of content we suggest pulling together to help inform your design – some examples of these are:

  • Colour palettes
  • Photography styles
  • Page layouts
  • Functionality e.g. maps or a ‘resource centre’
  • Graphics and illustrations

Mood boards can be as complicated or as simple as you like. They can be put together quickly or added to regularly, as you think of things or find new sources of inspiration. We usually allow our clients to continuously add to their mood boards as we move through the discovery and design phases. Most often for us, it’s the lead project owner who’ll put it together, but they may collect ideas from others in their internal teams, too.

Mood board creation tips

Historically, we’ve found mood boards to be a bit of a living and breathing document. We’ve suggested a few tips below to help you get the most out of your mood board, and make it really informative for your design and development team – these are the things we tell our clients to do to assist us in creating the best outcome for their project.

Give us your thoughts and opinions

Seeing the visual elements of our clients’ ideas is a great way to get a sense of what they’re after. However, it’s also really important for them to share the details of their thoughts and opinions to give context. Describing the reasons for including these graphical items, telling us how they relate to one another, and also what it is you do or don’t like about them will save time for everyone later, so we really appreciate any. The more detailed you can be, the better!

Tell us what you don’t like, too

Something we suggest is for our clients to share the features or design elements they don’t like alongside the things they do – this could include things from their own website or those they’ve seen elsewhere. Doing this assists us when coming up with ideas, as it means we know what directions to avoid.

Include your branding alongside your ideas

Don’t forget to add your brand colours, logos and any other graphical elements you’d like to include to your mood board – this will help to build a cohesive design later on, as you can see if the inspirational elements you’ve chosen fit with your existing branding.

Show your working

You can use your goals for the project as headings on your mood board. This will further demonstrate the direction you wish to take and keep things on the same path. It can also help us to design components and features that fit your needs. Including any kind of functional examples is also useful, as it shows us how you’d like your website to work, too.

“With a clearly defined purpose, you can determine what features to prioritise and integrate into your website that best serve your audience. Having goals also aids in allocating limited resources while optimizing results.”

Design Agency, Ramotion

We really love mood boards as a way to receive our clients’ thoughts and ideas for their projects. It’s a great way to work together to create a cohesive design. The elements they share also assists us in building a site that works for them and their audiences, serving their requirements in the best possible way.

If you’d like to have a chat about how we can help you bring together your thoughts for a project, get in touch with us. We’d love to show you how we can progress your idea to a fully working website.

Want to discuss your next project?

Contact us today
Unlock your digital potential with a bespoke website audit