In our previous article of the design series, we talked at length about selecting the right theme for your website. However, a theme is not everything, is it? There are several elements that help design an appealing website.
In our second article of the series, we will explore colours and fonts, and talk in-depth about how they can help transform your website.
Do Colours and Fonts Matter?
Colours can impact us – a sunshine yellow can cheer you up on a sad day or a blue may literally make you feel blue. Bright cheery colours give me fun and exciting vibes as opposed to subtle colours like grey and black that induce practicality. This visual feeling is even applicable to the websites you visit.
In fact, there is a whole field of colour psychology that talks about how colour sway emotions, help make you form perceptions and when it comes to a website, impact in the conversion rates. In short, your website colour can be a deal-breaker when it comes to capturing your audiences’ interest when they land on your website.
Similarly, fonts too are important. If the text is not readable or doesn’t go with the kind of content your website has, it can have a negative impact. Thus, it is safe to say that both fonts and colour matter.
Choosing the Right Colour
- Decide the number of colours you need
Too much salt can spoil the soup, and so can too many colours on your website.
Take a look at the image below. The web design is a mix of colours and none of them compliment each other. This goes for background colour, font colour, as well as, headings.
How does it look, appealing or too much? Well, if I were to visit such a website I wouldn’t return. This is true even though the colours are not harsh but pleasing to the eye. The simple reason for me would be too many colours when not required and none of them sync together.
So, is there any rule or the number of recommended colours? Well, most designers tend to follow something called as a 60-30-10 rule. For simplicity, think of a man in a business suit, 60% is the blazer and pants, 30% is the shirt, and 10% is the tie (the pocket square too will match the tie).
Similarly, if your website is divided into three colours then it would not only look presentable but also engage the user into reading the content. For this reason, there are three sections or types where colours are used namely: primary colour, secondary colour and the background colour.
- Primary Colour
The primary colour otherwise known as dominant colour is the colour associated with your brand. This is the colour of your logo and will be scattered throughout your design.
Take, for example, our website. The brand logo comprises of three colours with black and orange being more prominent.
However, it is the orange colour that takes precedence visually. Throughout the website colour scheme, you can notice how the colour is used to capture customer attention.
If you’re still unsure or confused about your primary brand colour, take this quiz, to help you select the best fit for your website.
- Secondary colour
Finding the right secondary colour can be a bigger struggle than getting the primary colour right. You may wonder why? Well, simply because you need to match the colour scheme.
Visualise, yellow as your primary colour and light green or red as the secondary colour, clashing isn’t it? Hence, it is equally important to select the right secondary colour. Secondary colours are usually used for links, buttons and more so that they stand out.
Head to Colour Lovers or ColorSpace to find out which colours work well with each other. Simple, isn’t it?
- Background colour
Now, we’ve chosen our primary, as well as, secondary colours. It is now time to choose our background colour.
Ideally, the choice of your background colour depends on the kind of website you have. However, most websites choose neutral colours as their background colour. Neutral colours include black, white and grey.
The idea of the background colour is that it should hold the entire web design together. If you’re an e-commerce website or a content-heavy blog it is best to stick to white. Dark colours like grey and black usually appeal more to tech, game-based or photography websites.
Source: https://whatshotblog.com/
Fonts Selection Process
Now, that you’ve decided the colour scheme of your website or blog, it is now time to choose the fonts.
- How to choose a font
Choosing a font can be a tedious task, especially with numerous fonts available. However, one thing you must remember is that your font should be consistent throughout your website. In fact, it is right to say your font too is a part of your brand guidelines that you should adhere to.
Here are some basic guidelines when choosing a font:
- Use as few fonts as possible, the maximum number being four
- Try using a different font for your website name, the heading and content
- Experiment with fonts when it comes to the brand/website name – it makes you stand out but make sure it is readable
- For the body of the text, it is advisable to choose fonts from sans-serif fonts family
- Pairing font with content
Pairing the font with your content is extremely important, as mentioned above in the second point. Imagine, you run a fashion blog and the fonts you have chosen for your website are simple.
Now, there is nothing wrong with choosing a simple ‘Times New Roman’ font but given the fact you have a fashion website, having a creative font style could add to your business portfolio. Similarly, if you run a technical blog, you can’t choose fonts that are cursive or similar, it is just not advisable. However, there is no rule that you can’t choose them. It is just how well can you merge them with your content that is of importance.
Source: https://www.glorialo.design/
Conclusion
While the colours and fonts are important, keeping them in line with your brand and engaging customers is also important. In a nutshell, research well, as well as, experiment with colours and fonts to find out which works well for you.
So, what are you waiting for? Unleash your creativity and paint your website in the colour of your choice! Until next time!
