mood board icon

How to create a mood board

There are 5 key elements to any mood board:
    - Colours
    - Typography
    - Images
    - Adjectives
    - Examples
When building a website, it is important to plan out the overall style to make sure that the look and feel stays consistent.
There are 2 main outcomes of a mood board: typography and colour scheme.
The images, adjectives and examples all serve as inspiration for the creative direction.

Colours

Mood boards allow you to have a clear overview of your colour palette and how that synergises with the general impression that you would like to give your visitors. Planning out the palette you’d like to use beforehand means you don’t have to worry about overloading your website with clashing colours that don't work well together. It is important to stay consistent so they set a suitable tone, evoke the right emotions and have a website that is impactful while reflecting its core identity.
Colours are labelled with their HEX code so that they can be easily found when developing the website. Generally speaking, more than 4 or 5 colours will start making a website a little disorientating and distract from the content itself.

Typography

Choosing the right styles for your text is so important because it will most likely be the most used element on the website that reflects  the overall mood and personality. Making sure you pick a font that is readable and aligns well with the overall style of the website will be crucial for it to successfully send the message you would like it to. The 2 main categories for typography styles are serif and sans-serif but there are many subcategories like slab serif, monospace, script etc. It is common to see websites with 2 different styles  of typography as it can create interesting texture but be careful not to use too many as it can quickly clutter your website and make it very hard to establish a clear visual hierarchy.
Generally speaking, it is good to stick to 1 - 3 font families (typefaces) otherwise it can negatively impact the readability of your website and confuse visitors.

Images

A visual representation of the “vibe” of the website is great to have as inspiration before you start designing. Having multiple images all in one place will quickly create an atmospheric space where you can dump your creative ideas and see what works well and what doesn’t. A mood board is a lot easier to edit than a website so it is great to experiment here first so you know the general stylistic direction. Images will often involve colours that you may never have thought of and spark new associations.

Adjectives

Much like the images, this will serve as inspiration in written form. It is a more concrete way of describing what is important to you and the feel of your website so I would suggest doing this after the images. Having words that you can work from to find the right fonts and colours will make it easier to choose something that fits perfectly. It is also useful because you will have keywords that you can use to research in search engines if you need more inspiration.

Examples

This can include examples of logos, websites, posters and any other design-related things that incorporate elements (eg. buttons, header section, fonts etc.) that you think could work well on your website. Seeing what is already out there is a great way of getting inspired. You can use some elements of what you see but build on top of that to create a unique, fresh take on it and set yourself apart..