Website Design Conventions


What are web design conventions and why do they apply to my website?

Web design has evolved greatly from its early days, and in that time, a few patterns have solidified into convention. To follow these patterns is to give the user an easy experience, with the website’s elements roughly in the places they expect them to be. Breaking from these website conventions will make browsing and interacting with your site more difficult and – at worst case – turn away your customers.

In a nutshell: don’t make your website inadvertently difficult.

For artistic or personal preference reasons, some website owners elect to ignore web convention and make their users think hard when they are on their site. Certainly there is a little bit of artistic license lost by following the norm, but the gains far outweigh the loss. Consider how the following tasks would be more arduous if conventions were not established:

In each example there are patterns established by builders and manufacturers that allow us to do the above tasks while hardly giving a second thought. Universal pictorial signage, standardization of car features, and a large button on the right side of the camera body have decreased the amount of thinking and guesswork that goes into our everyday life. Why wouldn’t we design our site to give users the same level of convenience?

Design Patterns to Observe

Website Logo Position

The logo should go on the web page’s top left corner and when clicked, link back to the home page. Your company’s (or entitity’s) logo should always be among the first visual items on every page. This convention is perhaps the most important and when compared to traditional media (print), it is different because the logo-on-top web design rule really cannot be broken. Unlike the cover of a book, you will never be able to control what size your page is shown at. Did they see the whole page, or just the first 700 pixels? Occasionally there is a design where the logo is top center or top right – these are much less common but can be acceptable so long as the identity of the site is clear.

Site Navigation

The website’s main navigation should be clearly visible without scrolling down the page. The navigation typically occurs as a horizontal bar across the top or a vertical column of links on the left or right side of the webpage. It can be of whatever color and styling the designer likes, but it needs to be legible and in one of these places – visible immediately when the site loads.

A secondary navigation area of lesser-used links can occur away from the top of the site. This additional navigation could be placed in the footer, on a sidebar, or in another strategic place. It should be clear by the site design that this block of links plays a “supporting role” rather than the “lead role” in the page’s design.

Design Consistency Across the Site

Aim for consistency in design across the site, with deviations occurring as necessary for clarity. At no point should your user question if they’ve clicked off your site! Unlike multi-page printed materials (such as a booklet or annual report), your website should have a set of elements that remain constant throughout all pages. A common header, content layout, navigtation, and styling of text can be employed to make your site experience clear and memorable.

Designing a new site in accordance with these design conventions is just one more way you can provide an easy and enjoyable web experience for your users. You will give them the information they need, in the way that they are accustomed to receiving it. By sticking with the conventions of the web, your website will do its job more effectively and communicate more clearly.

Last updated on