THE BLOG

Whoooaaa there, let’s back up a bit, a mood board?

Yes! If you’re a new business owner or you’re looking for a refresh I would highly recommend doing a mood board. Not a vision board, although they are also super fun to do! A mood board helps you identify your brand so you can either build a website with your branding and/or have consistent branding across your social media, Link in Bio, CRM’s etc. I’m going to cover colours and fonts in this article and touch on elements so you really know how to get cracking on creating a brand that is YOURS!

What is a mood board?

A branding mood board is a visual representation of your brand. This includes values, personality and overall vibe. This will include colours, fonts and elements. If your overall vibe is boho it could include macrame wall hangings, neutral colours with a splash of turquoise. If your overall vibe is beachy then it’s palm trees, the sea and starfish on the beach. These are just examples and you can of course take anything and make that your vibe.

Where to start

I would start on Pinterest, honestly I talk about Pinterest a lot. Set yourself up a board, you can make it private if you want and get pinning!

Because Pinterest is genius and a search engine you could even search mood boards or brand boards and get an idea of colours or vibes that you like. 

Even if it’s that camel coat you’ve had your eye on or your favourite flowers there is no limit to what you can add to your Pinterest board. After a while you are definitely going to see a pattern and a vibe. 

You can also jump on Canva and look through their mood board templates and add your own photos or ones you’ve found to grab the colours from the photo editor.

If you’ve already started…Go You!!

BUT if you’re really not sure on your colours because you love them all.  A bit like picking up a paint colour palette from your local DIY shop and just loving all the colours?  Then you realise you need to pick one to paint your walls or help you decide on your furniture? If not then great, if you’re like me then arrrggghhh it’s so hard to decide.

Thing is when it comes to branding, colours are actually important and can evoke a feeling in your customers which means they could decide not to buy from you based on your colours. When I found this out it blew my mind!

Colour Psychology

There is a psychology behind colours and how we perceive them. Blue invokes trust and loyalty, whereas yellow means youthfulness and fun. A really great exercise is to ask people around you to describe you or your products/services in words and colours. It could teach you how others perceive you and your brand. I recently saw this exercise played out with a business coach and the colours chosen by the people she coaches were almost the exact colours that her brand designer had come up with to represent her brand. The psychology of colours is such a fascinating topic and if you want to learn more the Brand Master Academy has an interesting article on colours in branding.

Picking your brand colours

If you’re an absolute newbie 99 Designs have a fun quiz and colour picker you can use to generate your primary logo colours. Find it here. Mine said hot pink, which funnily enough was one of the colours of my first ever ‘brand’. I moved away from that colour scheme now but I still love it. I have actually just rebranded, as you might have noticed and gone back to pink! I’m in love with my new branding, it’s a lot more feminine and a lot more me. I’ll share more of my rebranding journey next time!

Translating your colours for your website

Once you’ve added more and more to your mood board you might see that there are a few colours that are more common than others but no idea how to translate them onto a website design. I have 2 great tips for you.

1. Coolors.co  is a colour palette generator that you could really use for anything. The reason web designers use it is because it gives you the Hex code for each colour. A Hex code is a 6 digit code that corresponds to a colour and is prefixed with #. For example #FFFFF is white and #393939 is a dark charcoal almost black that is commonly used for text on a website. You will need these codes when you move onto designing your logo and subsequently your website and marketing.
2. ColorZilla is a search engine extension that you can add onto your Google Chrome/Firefox browser. Add it into your browser extensions then let’s say you’re building your mood board and you love an image and want to use that image and its colours on your website. Use the colour picker to find the colour that is in the image and it will save it to your clipboard and give you the 6 digit Hex code. You can then input this Hex code into Coolors to help you with your design or add it straight into your website.

Colour rules guidelines for web design

I hate using the word ‘rules’ so let’s go with guidelines.

If you’ve already been on Coolors and had lots of fun with the colour palette generator I’ve been there. It’s great. Actually it’s surprisingly addictive. BUT there are some things to be wary of. Let’s dive in.

Have you ever read someone’s IG post and been thinking I really can’t read that, is my phone bright enough, do I need glasses? Nope it’s just the 2 colours that person has chosen doesn’t have enough contrast so they sort of blend into one another. Once you’ve got an idea of the colours you love, pop them into canva and play around with which ones actually are legible on top of each other.

Make sure you have a dark colour and a very light colour in your palette for text and for backgrounds. To make it easy start with black and white but you can also use a dark navy and a cream. The possiblities are endless as long as it encapsulates who you are.

If you are looking for a darker website consider the darker colour for your backgrounds and the lighter ones your text and vice versa for a brighter lighter website. You can also use lighter hues of one of your dark colours as a background, think light pastels. If you’re thinking a what now, a hue is the saturation of colour so a lighter hue will generally be mixing the colour with white if we go back to the paint analogy. 

A few things to remember when picking your colours:

1. Colour psychology is a thing
2. Don’t just pick colours you like
3. Make sure the colours can go on top of each other (not all but some)
4. Make sure black or white text is legible on each picked colour

Picking your fonts

Why are fonts important? Fonts are important for so many reasons. They contribute massively to the look and feel of a website AND they convey your brand and your vibe.

Do you want to look more masculine or feminine? Is your brand modern or classic? Do you write books/articles and you want to invoke the old typography you used to see in books and newspapers? If you’re not sure, have a look at your mood board or even grab a few old magazines and rip pages out of fonts you like. It’s a great mood booster if you’re not having the best day, just try not to rip up the font you like. Another option is to use Canva and try out their fonts. They’ve written a great article here about font psychology. 

In short, different fonts evoke different feelings in the reader. I know, we’re back to the psychology of it all BUT it is so interesting!

The 4 main font types

There are 4 main font types for you to consider.

Serif – serif fonts are the OG of typefaces and date back to the 1400’s. The font has decorative flicks at the end of each stroke mimicking a quill which is what they used back in the day. Serif fonts mimic a more traditional and classic style. 

Sans Serif – sans serif fonts are the relatively modern alternatives to the serif font, dating from the 1800’s. Brands that use sans serif aim to convey modern if not futuristic qualities to their brand. However, they are also great to use for your content, your educational text as they offer a clean and modern look. 

Script  – script fonts mimic handwriting and don’t stand out as much in smaller sizes. A lot of brands use script fonts for their logos, or as highlighter text throughout their content. They convey a sense of class and elegance to your brand. 

Decorative – decorative fonts are usually stylised versions of serif, sans serif and script fonts and inject a bit of fun into your brand. They are also great for logos and billboards or as a way to highlight a bit of text.

Fonts in relation to web design

Fonts in relation to website design should be considered from 2 view points. 

1. How is the user going to view and associate your fonts
2. SEO  

For the first point look at what fonts you plan on using in your header/menu and what fonts you want to be a title, heading, subheading and content. This makes it easy for a user to navigate your website easily and therefore enhances the user experience. Also make sure you can actually read the font if you’re using it for more than a couple of words… hello script fonts.

When you set up your website you will often be asked to choose a font and a font size for the different header areas on your website. Be it the text in your above the fold, the menu, the section headers on your page and text of your content. These are classed as H1, H2, H3 and so on in the back end of your website. Apart from using the fonts and their sizes to contribute to the look and feel of your site they are also important from an SEO standpoint. An SEO tool will tell you only to have one H1 on each page, multiple H2’s and so on. So you see the H1 or 1st Header should be the least used and the content fonts should be the most used. This is most relevant in web design. Book a free call with me here if you have a website and you have no idea about SEO and we can talk through the basics.

Pairing fonts

If you like a font but you’re not sure which fonts to pair it with, do a little Google search, there are lots of amazing graphic and website designers that have written many articles on just that and they show you examples which can really help you visualise what look and feel you are aiming for.

Remember you’ll want at least 2 fonts, maybe 3 : a header font, maybe a decorative/script font to draw attention and a content font. 

Pick some fonts that will emulate that and think of which fonts you want to stand out and which fonts you want to be your main content. It’s OK to have a timeless look with a serif font paired with a script or decorative font as well! You can always check what is trending now, but also choose from your own taste. If you really don’t like a font….don’t use it.

Elements

Now you might be wondering what on earth is an element? An element could be a graphic or a vibe or a theme and the element itself is how you portray that. It could be a gold paint swipe, pictures or graphics of waves, a flame, a chakra, flowers. The list honestly is endless. When you go back to your Pinterest board, have a look at what is most prevalent. Also try and tie it in with your business and your ideal client.

If you don’t use an element what can you use?

An elements or vibe can also be done sneakily, maybe you make all your photos and buttons square or oval or round. You could also make a photo look like you’re viewing it through an arch and that in itself is an element. If you look at my website it looks a bit like a newspaper so I’ve used the lines in my design as an element. The possibilities are endless!

Summary

Get on Pinterest and find all the things that encapsulate you, your brand and your values. Look for common colours and themes. You can go on Canva download one of their mood board templates and make it your own using different tools like Coolors and Colorzilla or even the proprietary photo edito to help you find your colours. Decide on your fonts and pick a style or element that fits. Tag me on IG when you make your own and show it off!!

If you’re completely lost sign up for my newsletter below and I’ll send you a monthly branding board to play with!