6 Components Moodboards Must Have To Be Effective


Moodboards have been in use for many years especially in the interior design and fashion industries. It’s the first step when brainstorming ideas that’ll contribute to the overall look and feel of the final product. Most established web designers create mood boards as part of their web design process.

The main benefits of using a mood board include:

  • Streamlining the design process
  • Reducing the time taken to design the actual website
  • Giving the client a general idea of what to expect early
  • Less frustration
  • Effectively communicate concepts
  • Making it easy to make design changes and revisions


A mood board can either be physical or digital. The physical ones are more time consuming since they involve putting together paper cuttings and other physical sources for inspiration. However, they tend to have a higher impact on clients. On the other hand, digital boards are easier to create and are less physically tasking. As a matter of fact, there are many tools available to help create them.

Although the content of the mood boards differ from one web designer to another, there are 6 key things they should contain in order to be functional. However, before you get started, have a vision statement. It should be in one sentence. This will enable you go get started. Let’s take a look at the 6 key components of a mood board.

1. Images

There are many types of images you can use for inspiration on your mood board. The first source is the internet. Search for words that describe the website. For instance, if you want to create a warm feeling, Google the word warm and check the images associated with that search term. Choose the image that pleases you. You can do this with multiple search engines. Search for different words until you come up with a catalogue of images you need. You can also use other websites to search for photos. Pinterest and tumblr can be quite useful.

Just ensure that you have an idea of what you’re looking for. You could also go through your own collection of photos to look for something that stands out. Be open minded and look for inspiration all around you. Take a photo of a view or scenery that you think could be a great contribution to your mood board.

2. Colours

The colour scheme of a website can make it or break it. You have to come up with colours that complement the client’s brand. Identify the colour palette to be used for that particular website and add it to your board. Every single piece of content should follow the mood set by the colours. Identify the main colour for the website’s theme then find complementing colours for the text. Without a clear colour scheme in mind, you’ll have a hard time putting various components together.

3. Textures

The background texture of a website is something that most people overlook while putting together their moodboards. However, it’s a very important ingredient and it should be present. The theme of the website is what will help you determine the texture. For instance, if you’d like a smooth silk-like texture, you can find images with that texture and include them on your mood board. Since silk is a fabric, you could look for inspiration from online stores selling silk clothes and take one of the photos that match the texture and colour you want.

4. Inspiration

Inspiration is mainly found from websites that have the same theme as the one you’re creating. Include screenshots of websites that you’re drawing your inspiration from. If it’s a client’s website, they suggest some websites whose design they like. Also, include those on your mood board. As you go through different websites, you’ll notice some repeated trends, patterns, and layouts that are associated with that niche. Note your observations and even add the ones you’re going to use to your board.

Don’t let your inspiration be limited to websites only. You might find different things that’ll inspire you. Whether it’s an infographic, flyer, pamphlet or even a billboard soak up inspiration wherever you find it.

5. Text and Fonts

It’s easy to leave out texts and fonts when creating a mood board only to get stranded when you begin your design. Identify the font you’d like to use. The font should work harmoniously with other components to bring out the overall them of the website. Make sure you have at least to font types you’d like to use as part of your mood board.

As for text, include different sizes of the text you’re going to use. You should be able to have a clear picture of how headings, titles and normal text will appear. This will save you a lot of stress later on. You can even include your chosen font and text sizes in different formats and even a block of text just to show how everything will look. Ensure that you include text that appears in buttons and pop-ups. Include buttons that will look good on the website. With both text and font included on the mood board, the client will know exactly what to expect in terms of text.

6. Layout

You can’t begin designing a website without determining what the layout is. This is why it’s crucial to include the layout outlines or sketches on your mood board. You can have the layout in form of screenshots of wireframes or just a simple outline. The layout should have a rough outline of where all components should be and what you want to achieve.

With these 6 components of moodboards, you’ll have all the basics needed to create a great website design. Remember to show your board to the client as early as possible or better yet, involve them in creating the mood board. This way, both the designers and clients will have a harmonised idea of what the final design will look like. As a result, there’ll be minimal revisions once the design is complete which will save you a lot of time and save you a lot of frustration as a designer.