How to make a website design mood board

A mood board is a brilliant way to create a visual direction for any project including website design. Website design mood boards do differ from standard boards because they contain field-specific elements that we will cover in this article. Put simply, we are going to find a way to establish colour, theme and style for websites.

What is a website design mood board?

During the middle ages, alchemists believed that there were five elements – water, earth, air, fire and essence. The first four can speak for themselves but ‘essence’ was unique. It is an intangible element that held the other four together to create matter. Thanks to modern science, we now have a much better explanation for what makes up the matter of the universe with 118 elements. However, the idea of essence can be used when discovering what a client wants for their website. This essence or the feel of a website can be found through a mood board. 

Website design consists of many elements and by defining the content through a mood board, we can get an idea of what our final product might be like. A mood board is in no way the final idea and every element can be changed during the design process. We are simply using it to capture the client’s idea with the brand’s style. 

The types of elements we want to cover in our website design mood boards are colours, fonts, images, iconography and navigation. By creating a mood board that covers these elements, we can put ourselves and our clients on the same page and even get them involved with the process.

A good mood board captures the essence of a websites design and acts as a source of inspiration during the designing process. 

How to make a website design mood board.

Before we can begin designing the client’s vision into a website, we need to define what they want. This will save us time and make communicating with our clients easier. Below we will cover the basic steps to create a mood board for website design.

Communicate and research.

It’s a good idea to get your client involved with your mood board during the planning stages. Let them know that you will be creating a mood board for their website and that they can send you inspiration and examples of what they want their website to look like. Chances are, they are going to enjoy adding their inspiration which is something we love to see. 

There are loads of great places where both you and your clients can get and share inspiration from. Two of our favourite examples are Pinterest and Dribbble. 

If your client has a brand identity, make sure to ask for it. Their brand identity will contain all the visual elements that we will need, allowing us to focus on images and navigation.

Collect and refine.

Now that we have images and photos of websites and other inspiration, we can find the core elements that stand out to us and the clients. There are five elements that we are specifically looking for: 

• Colours 
• Fonts 
• Images 
• Icons 
• Navigation 

Through the inspiration that you and your client have put together, find the common themes and images used and only use the best examples of those. There is a good chance that there may be more than one theme. In this case, select the best two or the two that are most in line with your client’s vision to explore.

Bringing it together.

Using the images that we have collected to make the mood board is the next part of the process. All you need is a way to put the information you have collected onto a single page and in a way that looks good. Avoid using other brand identities. 

We recommend using Adobe, Affinity or PicMonkey to put mood boards together. You can easily create your own template, or find ones online, to make your website design mood board process even easier. 

If your client offered you a brand identity in our first step, use their style to shape your mood board. If you are exploring two different themes, don’t feel like it’s a waste of time to complete two mood boards. Sometimes we need to see the final result to compare everything accurately.

Share it with your client.

This is probably the best part of the whole creation of a website design mood board. Your client now gets the chance to let you know if they like the emotion it evokes and how all the elements look like next to each other. It is very important to remind them that this is not the final product and that everything can be altered during the design process.

Get a stunning website tailored to your brand with Web2Web.

When it comes to website design and development, you need a team that you can trust and will put your brand as their number one priority. With over 10 years of experience in the field, Web2Web can give you the website answers you need for your business. If you want to update your current website or create your brands very first one, contact us today. Let’s talk about how we can make your website vision become your brand’s reality.