Create a Mood Board + Free Template

Do you have a brand mood board for your blog or website? You should, especially if you’re looking to ditch your current theme. But before you go out with the old website design and in with a new, I advise you to hold on a little longer. Because there’s a little matter of branding your blog to take care of. Enter the role of the brand mood board.

Before any work starts on your new web design, you need to have a clear idea of where you’d like v.02 of your online self to be – whether you’re redoing your own site or hiring out.

You might think that revamping your website or blog is a just case of browsing Envato Marketplace and installing an off-the-peg theme. At first, your new template, with its default palette of settings might be hunky dory. But I bet that a few months in to using your new livery, you’ll find you’re floundering around on fonts, colours, type sizes, accent colours for links and end up with tutti fruity images that dissipate your message. Within a short few months, your new image is not living up to promise.

A Brand Mood Board Means Business

At the very least, before you dream of buying a new theme or commissioning one from a web designer, start to delve a little more into your brand. One quick-hit way to start realising what makes your online heart sing and what resonates for your brand is to create a mood board. Above is an example of a mood board I created for this website before redesigning it recently.

Why do you need a mood board when you can just use Pinterest, creating a private board to stash away your brand likes and looks? Certainly, a mood board is not the entirety of a branding exercise. But its beauty lies in its shorthand way of envisaging your new design. Plus, creating a mood board is far more effective than relying on Pinterest alone for design direction.

Not wherever the mood takes you. Just where one mood board does

As you can see from my example mood board, it’s nowhere near as extensive as a Pinterest Board could be. I can only slot in eight images and four colours. Less is more. A mood board defines a restricted palette picking up the bareboned essence of what resonates for you and your brand.

By all means start a Pinterest brand board to get your creativity flowing. Pin to your heart’s content. But then, narrow those Pins down to your very favourite, carefully curating items and blending the practical – like potential fonts and colorways – with more touchy-feely elements of mood and atmosphere.

Why? Because later on down the road in your website your images, headers, subheads, sidebar banners and all your social media presences too will be far easier to maintain ‘on brand’. A single, defined scheme for your brand helps your audience identify you when they trawl their social feeds in nano seconds. Your Instagram posts, Pinterest, Twitter and Facebook headers and your blog post and page images will keep crisply and neatly in line with your brand. Create your mood board and keep it close at hand to refer too every time you create content.

In the next section, I’ll walk you through how to use my template which you can download here.

How to Create a Brand Mood Board

First, grab the free Photoshop template. It really only needs beginner skills in Photoshop, and it’s totally easy to customise with your own images. The template is created in layers and I left my visuals as a guide. It’s easy to drag them into the bin and replace with yours. Here’s how…

1. Open the template, then open your first chosen brand image.
2. Resize your image to between around 800px to 1000px wide. You may need to fiddle around a little resizing images as they may not fit the block you wish to drop it into on the template.
3. Go back to the template and highlight the block you wish to drop your image into. Drag my image into the recycle bin. Click your image file and drag it onto the template block moving it to your liking. At this point it won’t fit as the image may overhang the block borders.Don’t worry, we’ll deal with that soon.
4. Now, just make sure your image in the layers’ palette is showing as immediately above the rectangle for your chosen block – where my original image was positioned.
5. In the layers’ dialogue box, place your cursor on the line between the rectangle for the block and the image you’ve just dragged on. Hold down the Alt key at the same time as clicking your mouse. You should see a circle with arrow showing between those layers. Release the cursor and the image on the block should snap into place, clipping off the overhang. Now we’ll deal with the colour blocks.

6. Colours: to change the colour blocks, double click in the coloured square on the layer. It will open the colour picker palette. Just put in a #hex number or use the picker to choose a colour. Note the hex number of that color so you can use it on your site.
7. Save your file as you go along, renaming it.

That’s all there is to it! I’ll be adding this template plus a circular one to my Resources soon. The brand mood board is a fun, first step to creating your brand. You’ll need however to think carefully about colours. Make sure you choose a darker one to use as an accent colour for links and so on, even if you love paler hues.

There is far more to it and I’ll be covering a full brand mood board in a few posts’ time. Next up, though, I’ll be diving into how to choose a new blog or website theme to put your brand to work – and also be covering the steps to change themes seamlessly on a live site.