The Principles of Good Web Design Part 2: Navigation

  • Tom Kenny

This is the second part in this series of The Principles of Good Web Design. The other parts are listed below:

Navigation is one of the most important things to consider when designing a website. After all, it is one of the main ways that will determine how a user interacts with a site. It is also an important thing to consider as it has an effect on usability. Poor use of navigation can cause confusion which has a negative effect on usability. We will discuss the principles of how this can be avoided in this article.


Location, Location, Location

Navigation by design, needs to give the user awareness of where they are in the site’s structure. The most effective way of achieving this is to highlight the current section in the navigation itself. A great example of this can be seen below at Kingpin Social:


An example of navigation clearly communicating location


Another way of communicating where a user is on a site is through the use of breadcrumbs. Breadcrumbs are especially needed for more complex sites that have multiple levels of navigation. The name comes from leaving a path behind from which you can follow back to your original location. So essentially it shows the exact point where you are, while giving you options to go back to other previous steps in the site’s structure.


Breadcrumbs example at

Clear, Simple and Easy to Understand

One of the easiest ways of having a positive effect on usability is to make the navigation itself clear, simple and easy to understand. Some of this overlaps with good use of whitespace as discussed in part one of this series as that will certainly help make navigation easier to read.


Mimeo uses colour to help make the navigation clear and easy to understand

Clear wording is another critical part of navigation. By communicating clearly through wording, you reduce any confusion as to where the link will take the user through to.

Another technique is to use supplemental text to reinforce the navigation. This is often used in the main navigation but as you can see in the example below, Mia and Maggie also use it in the secondary navigation in the sidebar on the left.


Mia & Maggie use supplemental text to aid navigation

This is the second part in this series of The Principles of Good Web Design. The other parts are listed below:

Coming Soon...

The Learn from Great Design Volume 1 eBook


The bad news is it isn't ready yet but the good news is you can get three case studies for free, right now. Simply sign up and I will send it to you immediately. People subscribed to the email newsletter also get a discount on the book when it's released.

The book will contain 20 LFGD case studies (I spend at least 5 hours on each one) but there will be another version of the book with even more studies and at least 3 masterclasses, with even more in-depth studies of great design. One of them is the travel giant Airbnb.

Sign up below to get notified of the launch.

Free. No spam. Unsubscribe any time.