Best practice in web design

Consistency in web design

Guide

Consistency is a key factor in web design for both visual elements and functionality. Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars. It also:

  • gives your users a more positive experience
  • enables users to carry out tasks more quickly and efficiently
  • improves usability and learnability of your website
  • eliminates pain points and difficult navigation
  • saves money and time on design

Consistent navigation

Navigation elements offer users a road map to all the different areas and information within the site. In order to work effectively, navigation should be clear and consistent across your website.

Visitors to your website should be able to move from page-to-page easily and always know where they are. Difficult website navigation can tempt them to leave your site.

Page layouts and menu structure

It is a good idea to use templates to create a common page layout across your site. Create smooth transitions between pages by having consistent elements on each page. For example:

  • have menus in the same position on each page
  • have same fonts and colours throughout the site
  • have a clear, visual hierarchy to the elements on your page
  • ensure that your business logo appears on each page
  • make sure that your logo links back to the homepage
  • include a search box on each page in the same location

You should also consider the placement of any marketing messages and 'calls to action', such as newsletter sign-up, special offers or discounted products or services. Place these prominently as positioning can improve customer response rates.

Fonts and typography

Designing for a website restricts your font choices. If you specify a font that a user does not have on their computer or mobile device, their browser will substitute a default font, changing the look of the page.

It is best practice to choose standard fonts for pages and specify a font family - this will help reduce the possibility of the page being displayed using system fonts. The web page will also look clearer if you choose fewer fonts and type sizes.

Remember to test your web pages on multiple browsers to see what effect these have on the overall appearance.

Branding in web design

If you already have a recognisable brand or image, make sure to incorporate it into your design. Your website should:

  • reinforce your corporate brand
  • use your company logo consistently throughout the site
  • be part of your wider marketing strategy in an attempt to reach your target audience

While you are making sure that your website is consistent and true to your brand, don't forget it also needs to be accessible and usable. Read about web accessibility issues.