Aside from content, navigation, loading speed, the colour scheme of your site and your font choices can have a huge impact too. Choosing the right colour scheme and font doesn’t just give your site a better aesthetic, it also leaves a lasting impression and psychological impact on its visitors. While you may think it’s as easy as mixing and matching things that suit your fancy, you can’t expect to have an effective website this way.
Colour Psychology
When you are first deciding on a colour scheme, it is important to visualize and understand the relationship between colours. If you select a colour scheme without taking into consideration how well colours work together and how you want them to reflect your brand, your website can end up looking unprofessional. In the worst-case scenario, it may even drive people away. After all, it is the first thing that your visitors will see before all the text loads.
While the colour theory is an extensive subject, there are plenty of online resources to educate yourself. In this article, we will briefly discuss the psychology of colours and what feelings and emotions different colours can evoke. For instance:
White always looks clean, sleek, and even user-friendly.
Purple can act as a mark of quality, luxury, and royalty.
Red displays excitement or energy.
Yellow radiates happiness and optimism.
Blue shows reassurance and dependability.
Orange portrays friendliness, a fun time ahead, or confidence.
Green can represent nature, healing, freshness, and wealth.
Brown indicates that your brand is reliable and universal.
Black emits mysteriousness, elegance, and luxury.
How to Build a Colour Scheme
1. Set a Primary Colour
In this case, we’re talking about the main colour for your scheme, and not the primary colours red, yellow, and blue of the colour theory. You first have to evaluate what vibe you want to give off to your visitors using the section on Colour Psychology above. This primary colour can serve as the colour used in your navigation panel and other major elements of your website. But if you already have a logo for your business prepared, a safe and common option is to choose the most prominent colour of your logo as the primary colour in your colour scheme.
2. Set a Secondary Colour
The next step after choosing your primary colour is deciding what your additional colours will be. Select a colour that complements your primary colour to make it pop. These colours are known as complementary colours. Refer to the colour wheel when choosing between colours as some combinations such as blue and green may not complement each other. You may also want to limit the number of colours you have in your scheme to prevent a cluttered look. Stick to different shades of one or two colours.
3. Choose a Background Colour
Your background colour plays a vital role in your website as it covers the most space compared to any other colour in your colour scheme. In most cases, web designers will choose a white or grey overlay on top of the background. This makes texts visible and easy enough to read. Another common option that takes a minimalistic approach is designing the whole website white or an off-white shade, which is sleek but convenient. With this background, all images, texts, or links will appear on your page clearly.
4. Choose a Typeface Colour
Choosing a typeface colour is the last step. Black might seem like the perfect colour, but that's not always the case. Depending on your colour scheme, a black font can lead to eye strain especially when it’s against a white background. Instead, use grey or grey-tinged colours and coloured typefaces for links and essential bits of information.
How to Choose Fonts for Your Website
Choosing the right font is necessary for your site as fonts communicate different subconscious messages to your visitors. Just like with colour schemes, a person will decide based on your font choices in the first few seconds of visiting whether they will stick around or not. Thus, having the right font will create a better user experience.
1. Match It to Your Brand
Don’t just choose a font because it looks appealing. Consider a font that represents your brand and portrays its personality. Your target audience should be able to get a glimpse of your brand offers through your font.
2. Choose Readable Fonts
Surely, we all have come across a website whose fonts were too difficult to read. Our next step was to click away from the site no matter how enticing the content seemed in the search results. In the spirit of having fonts that look good, ensure that they are readable even when presenting your brand.
3. Know Your Fonts
The most common classifications of fonts are serif fonts, sans serif fonts, and script fonts. Knowing your way around even just basic typography will give your site an added boost of professionalism once you’ve decided on the right fonts. These classifications of fonts give different vibes, which offers flexibility when trying to match fonts to your brand’s theme.
Serif fonts are elegant and very classical, making them widely used in newspaper and magazine prints. Sans serif fonts are cleaner and more modern, while script fonts are those that are modelled after handwriting. Script fonts are more eye-catching and unsuitable for use in body text for your site so they should only be used for headlines and titles.
5. Use Web-Safe Fonts
While you are doing all the above, remember to choose a web-safe font that is universally installed across all devices. Doing this ensures that you won’t have any compatibility and loading speed issues, leading to better website SEO rankings.
6. Preview the Font
It’s advised to preview a font on your website before you make the final decision to use it. Please test out how it will look with different sizes, forms, weights, in uppercase and lowercase letters, italic, and bold. Once you’re satisfied with all forms of the font, you can tell if it's the right font for your site.
Conclusion
As you choose your colour scheme and fonts, try to keep everything as minimal as possible. Too much of either will overpower your brand, leaving you with an ineffective website with no traffic. Try out different designs until you find the ideal one that ties nicely with the website’s design, can be easily read and appreciated by your audience, and most of all, create an association with your brand’s identity.
