Have every post delivered to your inbox and get access to hundreds of useful design freebies.
It’s time for our second installment of Thursday Theory, our new weekly post series!
Today I’ll be looking at how to achieve a really effective website navigation, and how to avoid some of the most common pitfalls that website owners encounter. I should be clear that it’s really impossible to have a ‘perfect’ navigation, but we can certainly try! Of course, your navigation will vary depending on your site topic/layout, however, hopefully these ground rules should give you a good foundation to work from.
This is an incredibly important part of website navigation, yet something overlooked by a lot of people. There are several benefits of including an active/hover state in your navigation:
Looking at the navigation right here at PSD.FanExtra we not only use a hover state on the primary navigation, but also in our drop down menu, to aid usability. And yes… I know we’re not using active states right now, but it’s something I’m working on.
Another common error in website navigation is including too many links in your menu. If the user is bombarded with a huge variety of options it will simply confuse them, and render your links useless.
A good tip is to try and keep your links below 6-7. Any more than this and it may be a good idea to introduce a second tier navigation or drop-down navigation. It’s no excuse to say that you have a lot of content, as even the largest sites in the world can manage to use a minimal navigation menu.
1stWebDesigner is a blog with a lot of content. However they’ve kept their navigation menu down to 7 links, by integrating a category-based drop down menu. Furthermore they’ve integrated attractive icons to make the navigation even easier to understand.
There is no point integrating active/hover states and limiting your link numbers if nobody is noticing your menu! You absolutely must ensure that you menu is prominent and legible. This means pick a font face/size that are legible, and ensuring adequate contrast against your background. Also try to have your menu near the top of your page, preferably as part of your header.
BuySellAds proves that you don’t need to use huge typography to have a clear navigation menu. The white text against a bold red background ensures that the primary navigation is really clear and legible.
Garphee uses a side navigation, yet it’s still very effective. Rather than a textual navigation, the text is constructed using images. However, this makes it all the more prominent as the button format really makes each link pop.
It’s important not to forget about sub-navigations and other browsing methods. Be sure to include the following on your website:
This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.
Do you make any of the common mistakes above, and what do you think about the issues raised? Please leave a comment below.
Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.