How to DIY a brand board for your website

February 2, 2021

We've all got those websites that we think are design goals. Regardless of the specifics of the website, it's likely got a coherent design that flows and looks consistent. Cue the brand board.

Having a brand board can make designing your website SO much easier. Here's why (+how to create one)

If you're about to DIY a site, or even if you're just looking to give your website a lift for 2021, nothing makes the job easier than having a brand board. So you might be wondering, what exactly is one of these magical boards?

Basically, a brand board is a quick and easy way to display the key design elements of your website. It should be something that you're constantly referring to as you make design decisions for your website.

For example, say you're looking to change the colour of your navigation bar - where do you look? Your brand board!

Brand boards are a fool-proof way to keep your website design looking consistent. The best bit though, is that you don't need to be a graphic designer to make one. You can use something like Canva to make one - it doesn't have to be super complicated.

If you're still confused, here's what mine looks like for a bit of inspiration.

Kat Stevenson brand board including colours, fonts, patterns, logo and button design

Make a mood board

You know that time you spend mindlessly scrolling Pinterest, looking over pretty images and aesthetics? Now's your chance to put those skills to good use.

I want you to create a mood board with images that fit the 'vibe' of your brand and the feel you're going for. Before you make and kind of design decisions you should look at the board, and see if it matches said 'vibe'.

Taking the time to create a mood board is a super easy way to help you achieve consistency in your branding.

Pick your colours

When it comes to the feel of your website, nothing changes it up quite like the colours you use. There's quite a bit of theory around colours, including the links they've got to emotion (e.g. red for passion or anger, blue for calm, relaxing vibes etc.)

If you've got no idea what colours you want your brand to be associated with, then I'd suggest you get Googling. If you're prepared to get lost in a long Pinterest scroll, you could look up mood board and colour palettes for some guaranteed inspo. Once you've got a rough idea (e.g. mint green and orange), continue reading.

I'd recommend you have a maximum of three colours. Some websites will say you can only have two, others will say five, but I generally say three - max. You can, however, have shades of a colour (if you look at my CTA buttons you'll see that there's a light and dark version of the same pink (ish) on hovering).

If you're still struggling to pick the perfect colours? My favourite tool for creating palettes is Adobe Colour Wheel. It's easy to use, fun to play around with, and just generally makes life creating a palette easier.

Adobe Colour Wheel in action

Take a screenshot like the above so you've got the HEX and RGB values and then let's move on to...

Aim for two fonts

If you've started looking at possible fonts for your website chances are you've found thousands. They're all free, you like 'em all, and you're feeling overwhelmed.

Please don't pick more than three fonts. Two's an ideal number. If you don't trust my design advice, then hopefully the fact that too many fonts will slow your website down in enough for you to narrow it down to a couple 🙃

Remember that if you absolutely cannot live without more font freedoms, you can always adjust the line height, letter spacing, or even case to add variety.

Make sure your logo fits with your chosen colours and fonts

The good news here, is that your logo doesn't need to use one of your fonts. It can, but it's also fairly common design practice to have a font that's just for your logo.

What you want to make sure though, is that your logo matches the feel of your brand. Would it look horrendous if you added it to that Pinterest board you made earlier? If the answer is yes, then you'll likely need to go back to the drawing board.

Put your brand board into action!

Now for the part where the brand board makes your design decisions easier. Every time you need to design something, design it using your brand board. This means that the colours and fonts should all be predetermined.

If you're outsourcing your design needs, then giving your graphic or web designer a copy of your brand board will be super helpful. It'll mean that they don't have to waste time searching for your colours and fonts elsewhere. It'll also mean that their designs are consistent with your branding.

Have I managed to convince you on the importance of a brand board? If you've got any questions on the topic, feel free to pop them in my free Facebook group - Build Your Website, Build Your Business.

Enjoy the post? Pin it for later:

Having a brand board can make designing your website SO much easier. Here's why (+how to create one)

Please note, a (*) denotes an affiliate link. I only recommend products/services that I’ve used personally and genuinely found useful/enjoyed.