A user’s journey on to a website will typically involve seeking answers to satisfy their queries. This can be absorbed through many website elements such as images, videos and text. 

The text element of your website or typography can be seen in every aspect of everyday life; from the bathroom, road signs, restaurant menus and even on the device you’re reading this on. Typography is the term used to refer to the arrangement and display of text in relation to its readability, legibility and appeal to the reader. 

This is particularly important for websites that contain more informative and rich content. Below, we have compiled the reasons as to why typography is important and how it affects user experience (UX). 

Hierarchy

Hierarchy helps guide readers when absorbing content in a comprehensive manner – from level of importance. This could be applied with the text’s size, colour, contrast and more. 

For example, if we search up ‘who was the first man on the moon’ on Google, the answer is easily highlighted through the use of hierarchy; by separating the names into actual boxes. While for actual websites, the important answers are often bolded or coloured for emphasis and easy finding. As seen on this screenshot from Wikipedia, the important details are set in blue to indicate the important detail and link:

Increases readability.

The use of fonts play a part in how users read text. The composition and weight of the lines used in fonts can influence readers ability to digest the contextual meaning behind the fonts – subconsciously providing guidelines for readers.

Serif typefaces contain sharp edges in its design. This includes fonts such as Times New Roman, Garamond, Baskerville and many more, as seen in the image below:

While Sans Serifs contain fonts without these sharp characteristics. This includes Century Gothic, Arial and Helvetica to name a few, as seen in the image below:

Kerning and Line Spacing can also play an important role to add to the readability of the displayed text. Kerning is considered the space in between single letters. While ‘line spacing’ is simply the amount of separation in between in each row of text on a paragraph. 

For example, the text that contains Serif – Minion Pro with a line spacing of -10,  a kerning measurement of 100 is harder to digest in comparison to the text that contains Sans Serif font, Futura with a line spacing of 10 and a kerning of 0, as seen in the image below:

Creates a tone of voice for your website.

Typography can help create tone in the context of our website’s landing page. It can influence readers’ thoughts, impressions and behaviours. 

For example, serif fonts can be used for companies that have a strong traditional and classical persona. Such as well-known car brand, Mercedes-Benz and luxury clothing brand, Dior as seen in the image below:

 

 

Through this, companies evoke a sense of respect, formality and an appreciation to reputable authoritative entities.

On the other hand, sans serif fonts evoke a more modern, straightforward and sophisticated impression, which can be used for businesses like; fashion brands and tech companies. The simplicity in the typography can further accentuate a sense of minimalist cues that are common in today’s branding with companies such as Apple and Google, as seen in the image below:

We recommend choosing the appropriate fonts and style that best reflects your website’s objectives. 

Conclusion

The impact typography has on readers can play a significant role on how they digest website content. This inturn may influence how users evaluate your content. Ultimately, typography may enhance UX, increase engagement metrics and subsequently increase conversion rates depending on other web design elements. 

Websites are essential to every business. Having a website can help a business increase its credibility, enhance their visibility, build strong relationships with their market and more. 

And so, in today’s digital age, where new technology is constantly being introduced everyday, what once were the latest innovative website design trends are now simply common requirements for websites nowadays – making this a highly demanded criteria to many websites (including our clients!)

However, despite these ‘standard’ features being common knowledge, there still may be a significant number of websites that have yet to incorporate them on their website. In this article, we’ve listed down our top 5 most important web design elements to consider in 2020. 

1. Colour Scheme 

Colours play a psychological role in how we develop feelings and from a business point of view this translates into how users (and prospective customers) feel about a business’s brand. It is essential that brands impose a very specific colour palette that is affiliated with their company profile and persona – this is important because these colours assist in reinforcing brand recognition and awareness. 

Furthermore, it is important to effectively disperse these colours throughout the webpage to avoid overwhelming users which can potentially negatively impact content readability and overall User Experiences (UX). 

For example, implementing two relatively light tone colours such as yellow and white overlapping each other may prove to be difficult for users to digest the key message, as seen in the image below:

As a good rule of thumb, we recommend picking three main colours, two of which will represent the website’s most prevalent colours, and the third being the ‘accent colour’. This accent colour can be used to further emphasise subject matters – so please use it very sparingly!

For example, the fast-food chain, McDonald’s has two main colours – red and black, and they have chosen to implement yellow as their accent colour to emphasise trigger words to promote their $1 Frozen No Sugar Coke, as seen in the image below: 

2. Navigation

Website navigation can be referred to as the website’s menu – whereby users can locate all the website’s landing pages. The placement and design of this element can take many forms.

Typically they are placed at the top of the landing page, however can also be effective places on the side, or even formatted as hamburger menu, as seen in the image below:

Navigation is an essential website element for many reasons. From a UX point of view, the absence of a navigation menu can make a website appear unstructured and organised. This element can further suggest the vastness and depth of a website. And thus it is imperative that a well-designed navigation menu considers a smooth and seamless users journey. 

We recommend ensuring that this element(s) is as simple and straightforward as possible. This will help users easily explore your website and fulfil their search intent.

3. Typography

Typography can range from the type of fonts being used to more complex properties such as; text size, weight and colour. As simple as it may sound, typography can easily make or break your website. Proper typography formatting helps emphasise key and important messages. 

For instance, through the use of proper headings, the website has reinforced some degree of  hierarchy. These headings can help direct readers’ attention to absorb website content in a more comprehensive manner.

While for fonts, it is important to consider is font pairing. Font pairing is essentially the process of identifying two (or more) fonts that complement each other (or collectively). This can help users understand the hierarchy of the content of the landing page in addition to the incorporating headings. Although it is important to note, as there are many fonts that match well together, there are most certainly many that don’t! 

If you are using a Serif font heading, a complementary font to use in the body content would be Sans Serif due to its contrasting features, and vice versa. 

A classic example of a good font pairing would be Helvetica Bold (serif font) and Garamond (sans serif font). The two fonts have a good contrast; with Helvetica having soft features and Garamond being quite thin and sharp. See example below: 

Google provides high-quality typefaces through Google Fonts. Here, you can find some quality font pairing examples utilising only Google Fonts: http://100daysoffonts.com/

4. Responsive Design

A successful website is more than just achieving the aforementioned design elements. Some websites may be outdated and do not necessarily have responsive designs. ‘A website’s responsiveness can be referred to as the website’s configuration to correspond to a user’s device – whether it be a mobile, tablet or desktop and adjust the content of the landing page if an effective and UX friendly manner. A study by Broadband Search in 2018 suggests that the percentage of mobile on web traffic worldwide has increased from 16.2% in 2013 to 52.2% by 2018. Considering this significant trend, implementing this element is highly suggested. Especially if a significant portion of your website’s traffic is from mobile devices.

If executed correctly, the responsive design will help tie together the various elements of your landing page in a comprehensive manner. We recommend working very closely with your developers to ensure the responsive designs accommodates a multitude of devices and screens sizes.

Awwwards is a well-known platform that consists of influential people all across the globe. The website is known for curating the best web design through a thorough process of assessment and dedication, showcasing only the best. And here, you can find the best responsive websites.

Here’s one of the outstanding examples of what a responsive web design looks like, as seen from HappyEgg.com, which has won a top spot from Awwwards for top best responsive web designs:

5. Animations

Website animations can help increase engagement metrics to specific content elements on the landing page. Adding motions to specific elements on the landing page helps bring the landing page to life, avoiding outdated retrospective ‘flat’ landing pages that we were once familiar with in the 90s.

Website animation doesn’t only help improve the overall aesthetic of the website, but it is also a refreshing approach to excite and guide users to scroll and direct their attention to key content pieces on the landing page. 

As an example, globally renowned soft drink manufacturer, Coca-Cola has incorporated animations to their website banner promoting Coca-Cola Energy Drinks to provide a more dynamic and engaging approach that evokes a sense of endless energy, as seen in the image below:

Another good example is from the well-known sports brand, Adidas. The brand’s website incorporates animation through combining their product with active and vibrant graphics. Through this, they were able to convey the product’s ‘super light’ feel, as seen on the screen recording below:

There are certain plugins that can be utilised to enable animation into your website. A powerful tool used for WordPress websites to do this is WPBakery. WPBakery is a page builder plugin with intuitive drag and drop features that provide you with different media options that best suits your website and business persona; from photos, loading screens, to text. See below to view more of WPBakery’s features:

Here’s a link to WPBakery: https://wpbakery.com/?v=9025a1ae8c64

Conclusion

Collectively, we at Ignite Search have seen the benefits of effectively implementing these 5 website design elements. We believe that the use of these elements have made more of a prevalent presence in numerous websites across Australia and will continue to evolve and integrate itself into the practise of UX website optimisation. Thus, we would like to encourage you to take into consideration these elements the next time you audit your website. This will ensure that your website is UX friendly in an aesthetic manner that may ultimately improve engagement metrics and conversions.