Web design offers the opportunity for the brand to express itself while showing its credibility and value in the market place. Although the design possibilities can stretch as far as the creative imagination of the brand and designer, there are certain design constants which go into providing a great website experience for the reader.
Here are the top 10 essential elements for your web design checklist:
1 – Negative White Space
White space plays an important role in highlighting an image or text. This is achieved by the negative space around the text which in fact draws attention by omitting other text or images and in that way declutters the surroundings.
Another aspect of white space is paying careful attention to keeping constant spacing between lines. This allows both text and the reader to breathe, enhancing the legibility of the content as the reader’s eyes are naturally drawn to the following word or sentence rather than having to go back and re-read text which is usually the case when the text is too cramped.
Tip: Don’t be afraid to dominate your page with white space. For inspiration, look at the Google home page – clean, clear, with dominating white space so that the reader’s attention is fully focused on ‘Google’ and the search textbox.
2 – Leading the way
Navigation involves planning and following a route. And when it comes to a website, the user needs to be guided by a path which is logical and intuitive, enabling the reader to understand the website’s range of content and how to access it. Websites which are difficult to navigate will have a high bounce rate.
Navigation organises the content in order of its priority and provides an overall structure for the website. It is one of the few consistent design elements and provides a frame of reference to which the reader can relate and orientate him or herself to the site.
Tip: All pages within a site should be accessed within 2 clicks; the Home Page (or main page) should be accessed within 1 click.
3 – Getting to Know you
The ‘About us’ page plays a significant role in establishing a relationship with the reader and in building the brand’s credibility with the reader.
Insight into ‘behind the scenes’ in terms of who and what goes into making the brand can be provided through images of team members. A smiling team portrays a feeling of your company being helpful and approachable which can go a long way in helping to convert a reader to use your brand.
This page provides an opportunity to tell your brand story – who you are, background to starting up (if relevant) and aspects which differentiate you and your brand from your competitors. Facts to cover include details such as the brand vision, special interests and focus of the company.
Tip: Provide the necessary information but don’t make it too detailed. Start with an interesting opening paragraph and use a creative design to further invite engagement with the page content.
4 – To be or not to be accessible
As far as we’re concerned, contact information should be easily accessible, providing details of your contact number, address, social media pages and even a map and directions. Contact details can either appear in the header and or footer or as a tab in the navigation menu.
Keep in mind that the contact page is often the final page which your reader visits before making the call to purchase your offering. For this reason it is advisable to have a nice, clean design for this page while maintaining continuity of your website design or theme, with clear information which is quickly accessible.
If you do use a contact form, best practise would be to make it short and effortless to fill out.
If you prefer one communication channel over another, readers can be guided to contact you via that medium, drawing their attention through the use of highlighting. So say for instance you prefer communication through a contact form, the contact form would be highlighted on the page, drawing attention away from contact numbers.
Tip: Provide a wide variety of choices when it comes to making contact – from contact numbers, email to social media platforms and comment textboxes.
5 – Act now!
The Call To Action (CTA) button on a page motivates or persuades the reader to take action. The website is the centralized point where the audience is persuaded to act – either to join a newsletter, shop, download app etc., with the main aim being to get qualified leads.
CTAs come in many different forms, from the pop-up ‘sign/join here’ form to using contrasting colour to highlight the action to taken.
CTAs often follows a strategy as follows:
- Listing benefits of the CTA using simple verbs e.g. Learn more about our gym offer
- Has a money back guarantee
- Has a nice brightly coloured (and alluring) CTA button (proving the fact that not only fish are drawn to colourful bait). Again inserting the money back guarantee
- Words are used carefully. For example ‘Talk to Us’ invites engagement rather than ‘Submit Now’ which sounds more official
- Strong CTAs include ‘Start a free Trial’; “Make an Appointment Now”
Tip: CTAs must be brief and have action orientated words in order to achieve the aim: to close the sale.
6 – Hide and Seek
The search function is an excellent way to encourage engagement, reducing frustration, especially when the reader can’t immediately find the content for which they are looking.
It is advisable to use the general symbol of the magnifying glass, usually in a search textbox on the top right hand side of the page
Tip: You can control the parameters of the search, either within your website or across other websites you may own or even across Google. If you do have different searches, give your reader the option which one they would like to use.
7 – Web Fonts
Font is also going to contribute to your website style and its overall look and feel. You don’t have to be restricted to the same font as on a desktop computer but it is important to make sure that the font is legible. If the font is placed against a dark background, choose white, while black font is generally a good option against a white background.
Tip: Use google.com/fonts – open sourced fonts which are optimised for the web. The Advantage here is that the fonts are free which means that you needn’t worry about a license and they’re compatible.
8 – Button it Down
Buttons play an important role on a page, serving either as a link to information or as a CTA. It is a good idea to use a consistent style and colours to delineate buttons so that the reader comes to understand them as part of your website language.
Tip: When it comes to buttons, pay attention to the text used. Select the design element that will make the button stand out and draw the reader’s attention to it in order to optimise the effectiveness of the CTA.
9 – Make Great Images
Use images which give your reader further information about your product and style. Photos of people in action tend to draw people to look more closely and can be used strategically in illustrating your services or products..
Tip: Keep images relevant and in keeping with your website theme and product or service offering.
10 – Rounding it off
The footer provides an ideal space to repeat information offered in the top navigation panel. It is usually in a slightly different format which provides an alternative way to accessing information and processing your site’s offerings.
It can also serve as a space to provide additional information, depending on the structure of your site.
Tip: Always make sure that your contact details are available in the footer of your web page