Web Design Mood Boards - Style Guides For Web Designers
How and why should you use a mood board for web design? Learn what makes a good mood board, what to include and how to create one. You'll also find tips on free tools to use to create a digital mood board.
In This Article
- What is a Mood Board?
- Why a Mood Board Should Be a Part of Your Web Design Process
- How can a mood board influence my website?
- What is a good mood board?
- What should be on a mood board for a website?
- How do I make a mood board for my website?
- What software is best for mood boards?
What is a Mood Board?
A mood board is a powerful tool to visually express your ideas for a project. It is a collection of visual elements and design resources related to a product or design theme. These can be incorporated into a visual presentation, a mood board, that is accessible to other team members, web designers, clients, colleagues or partners.
This takes us to the next question - what is a mood board in web design? It’s basically the same thing as a regular mood board except for the fact that it is created to set the tone and style for a website. A website mood board is typically created at the beginning of a web design project, either by the client or the web designer, or both. It allows everyone involved to seek and organise inspiration during the pre-design phase of a project.
Why a Mood Board Should Be a Part of Your Web Design Process
A well structured process should always be in place when working on website design projects. What the mood board will do is save both time and effort. It will provide you with a clear picture of what you are trying to achieve when creating your website or your mock-up.
Another advantage is that it will make the communication with other team members smoother. You will all be on the same page and be able to refer to the same visuals. The mood board will also act as a quick source of inspiration for anyone involved in the project.
How Can a Mood Board Influence My Website?
Creating a mood board in the beginning of a website design project helps define the direction of a website. You can see it as a sort of creative brief where you include visual elements instead of text and descriptions.
Working on a mood board is a great way of experimenting with colour, style, imagery and tone before starting the actual building process of the site. Having a mood board ready before moving on to the next phase in your project will assure that the end result truly reflects your brand and the vision for your website.
What Is a Good Mood Board?
A good mood board will establish the tone and personality of your design to help users distinguish your products from your competitors. It is a well stocked library of visuals, colours and styles, all in one place, that together form a theme or design.
Depending on your work process and style a good mood board can look completely different to different people. The main thing is that you feel inspired by your mood board. Something to keep in mind though is that if you are creating a mood board to share your vision with someone else, a web designer for example, you may need to build your mood board in a way that makes sense to other people. Our creative minds work differently and if you add images that contain a certain detail that you like (a specific colour for example), someone else may look at the same image and pick up on something completely different (a detail in the image or even another colour than the one you noticed).
A well made mood board is bound to instantly inspire you when working on a project and to keep you on the right track throughout the whole process.
What Should Be On a Mood Board for a Website?
If you are creating a mood board for a web design project there are a few key elements to include. You don’t need to include all of these but it’s a good starting point.
Logos
Add your logo, preferably in different versions such as submarks and secondary logos. If you don't have a logo yet, or if you would like to create more versions of your current logo, you can easily make one in the free tool Canva.
Typography (Fonts)
Add your headings, subheadings and paragraph font of choice. You can even note the name of the fonts to make it quick and easy to find them again if needed. Not all fonts are available in every tool, program or on every website design platform. You can view and dowload lots of free tools like Google Font, Dafont and Canva.
Colour Palette
Including a colour palette or colour scheme will help to set the tone for your design and vision. Remember to note the name or the numbers of each colour so you can easily access it. It can be helpful to divide your colours into groups based on how you are planning on using them in the finished design - which is your main colour, your secondary colour and your accent colours?
Images
If you prefer not to use your own images there is access to lots of free images Online. These are called stock photos and can be downloaded from sites like Unplash, Pexels, Pixabay and Canva. Choose images that inspire you - they don’t need to have the exact colour scheme or style as you plan on using on your website, they can simply contain details that you want to include in your vision.
Icons
If you want to use any icons on your website there are lots of free options on sites like Flaticon and Google Fonts. Icons are graphical attractors which are great when you want to highlight your services or values in a more creative way.
Illustrations & Graphics
Some people find lots of inspiration in illustrations. These can be found on the free sites mentioned above, or you can create your own if you are computer savvy. Illustrations can be used in many different ways and the only limit is your imagination!
Texts & Quotes
Are there any quotes, words or phrases that represent your vision? Add them to your mood board! Quotes can be found on sites like Pinterest and can help set the tone for a design or website.
Layout
A mood board can be used to create a layout that feels right for your website design but this is typically something that is done during the website mock-up phase. The website mock-up is more of a concrete version of a website while the mood board is providing inspiration for the mock-up.
Patterns
Patterns can be used as a source of inspiration when it comes to any kind of design project. They can be used as background visuals, as accents or to bring originality to a design. Patterns can be found anywhere - if you see one you like just take a screenshot and add it to your mood board.
Mood Board Samples
Feminine mood board for a boudoir photographer's website:
Masculine mood board for a quantity surveyor:
This mood board was created for an asian style eatery's website:
How Do I Make a Mood Board for My Website?
Creating a digital mood board is simple and there are lots of free tools to use (see our list of samples below). Most tools allow you to simply drag and drop your elements onto a page where you can move them around as you please.
If you are working with a team remember to choose a tool that will allow you to add more users or even work in real-time together.
What Software Is Best for Mood Boards?
There are multiple ways of creating a digital mood board. You can use programs like Adobe Illustrator, Evernote, OneNote or even Adobe Photoshop. The quickest and easiest way can be to use a free Online tool. The advantage of working Online is that other users will be able to access it as well.
Below are some of our favourite free tools to create mood boards:
Canva
Canva is a free drag-and-drop tool that is very easy to use. The easiest way is to search for mood board, brand board or style board and use one of their many templates. When you have found a template you like you simply drag and drop your own images, or images found within the Canva tool. There are lots of font options and you can select any colours, icons, shapes and frames that suit your design. The mood boards can be downloaded, shared or saved within the tool.
Figma
Another great free tool to use for mood boards is Figma. Figma is browser-based which means that you can use it on any computer (Mac, PC). Another advantage of Figma is that it has real-time collaboration. This is great if you want to work on a mood board with other people and brainstorm together. Note that there is an app version of this tool that you can easily download to your computer for easy access and more options.
An amazing source of inspiration for mood boards is Pinterest. Pinterest is packed with user-generated content. You can create collections of inspiring images, colour palettes and layouts that you organise under different themes or topics. You can also share the mood boards or collections with other people, such as your clients, colleagues, partners or your web designer.
Have Fun With It!
Have fun creating your mood board and don't be scared to go a bit crazy with it! You'll learn what works and what doesn't as you go and you can always rearrange, add, remove or edit your project until you feel happy about the end result.
Author
Camilla Hansen
SEO Specialist & Web Designer
