This overview features a hand-picked and organized selection of the most useful and popular Smashing Magazine’s articles related to Web Design navigation and published here over all the years.
- The Elements Of Navigation1
- Planning And Implementing Website Navigation2
- Showcase of Creative Navigation Menus: Good and Bad Examples3
- Showcase of Interesting Navigation Designs4
- Showcase Of Beautiful Vertical Navigation Designs5
- Showcase Of Modern Navigation Design Trends6
- Horizontal Navigation Menus: Trends, Patterns, and Best Practices7
- Showcase Of Well-Designed Tabbed Navigation8
- Designing Drop-Down Menus: Examples and Best Practices9
- Navigation Menus: Trends and Examples10
- Can User Experience Be Beautiful? An Analysis Of Navigation In Portfolio Websites11
- 50 Beautiful And User-Friendly Navigation Menus12
When users look for information, they have a goal and are on a mission. Even before you started to read this article, chances are you did because you either had the implicit goal of checking what’s new on Smashing Magazine, or had the explicit goal of finding information about “Navigation Design”.
This article is about the tiniest of details that goes into creating the main centerpiece of your digital product—the construction of the elements of your navigation. This is the most important aid you can possibly give to your users as they are constantly seeking a reason to walk out on you.
The thing that makes navigation difficult to work with in Web design is that it can be so versatile. Navigation can be simple or complex: a few main pages or a multi-level architecture; one set of content for logged-in users and another for logged-out users; and so on. Because navigation can vary so much between websites, there are no set guidelines or how-to’s for organizing navigation.
Designing navigation is an art in itself, and designers become better at it with experience. It’s all about using good information architecture: “the art of expressing a model or concept of information used in activities that require explicit details of complex systems.”
For instance, many recent promo websites are essentially single page websites with an array of animation effects used to make navigation a smoother and richer user experience. We need to be very careful and cautious when using these dynamic effects in our designs. A simple, calm navigation is usually much more user-friendly than an evolved, dynamic one. Users want to use the website, not be baffled by the weird and hardly usable navigation. But that’s not to say that a creative navigation should be avoided at all costs.
Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.
If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.
Go to any website and you’re guaranteed to find one thing: a navigation menu. Navigation menus enable visitors to move from page to page; without them, we would have no way to conveniently explore websites. Perhaps this is why designers, information architects, usability researchers and user experience specialists invest so much time and resources into devising aesthetically pleasing and user-friendly navigation systems.
Website navigation menus generally come in one of two orientations: vertical and horizontal. Horizontal navigation menus display items side by side. Vertical navigation menus stack items on top of each other. In this post, we highlight some remarkable vertical navigation menus, for your inspiration.
The navigation menu is perhaps a website’s single most important component. Navigation gives you a window onto the website designer’s creative ability to produce a functional yet visually impressive element that’s fundamental to most websites. Because of their value to websites, navigation menus are customarily placed in the most visible location of the page, and thus can make a significant impact on the visitor’s first impression.
The design of a navigation menu has to be outstanding in order to sustain the user’s interest. As the adage goes, “Content is king,” but getting to the content requires navigation. In this post, we’ll be explore some of the more recent trends in navigation design. We’ll look at the aesthetics that recur in today’s best Web designs. The focus here is on the visual direction that leading designers are taking.
The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. The dominance of horizontal navigation over vertical (i.e. down a sidebar) is obviously due to the design and content limitations of the latter. Notably, CNN discovered those limitations32 before switching from vertical to horizontal a few years back.
There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better. In this article, we will focus on a variety of techniques and best practices to improve the usability of horizontal navigation bars, and we will note less effective styles. We’ll also look at several trends that developers can choose from when working on the navigation design for their next project.
There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout.
So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container, like in the example below. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.
When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.
As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.
Yes, that’s right: drop-down navigation menus can be user-friendly. Just yesterday Jacob Nielsen the results of his recent drop-down menus study39, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user’s choices with effective use of typography, icons, and tooltips.
In this article we take a closer look at the nature of drop-down navigation menus, analyze situations in which they should or should not be used, discuss various implementations and finally showcase a couple of bad and good examples of such menus. The article also includes various tips and suggestions to help you work with your drop-down menus.
Navigation is the most significant element in web design. Since web-layouts don’t have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers shouldn’t mess around with it.
That’s why in most cases it’s where simple, intuitive and conventional solutions are usually the best option. However, it doesn’t mean that they need to be boring. One year ago we’ve presented modern approaches of navigation design43. Let’s take a look at what’s different now, which trends one can observe and what ideas you can develop further in your projects.
This article presents recent trends, examples and innovative solutions for design of modern navigation menus. All images are clickable and lead to the sites from which they’ve been taken. We’ve missed something? Definitely! Let us know in the comments!
When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.
In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques. As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?
Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in.
You might be interested in the following Best of selections as well:
- Usability & User Experience52
- Web Design Elements: Examples And Best Practices53
- Web Form Design: Showcases And Solutions54
- 1 #n0
- 2 #n1
- 3 #n2
- 4 #n3
- 5 #n4
- 6 #n5
- 7 #n6
- 8 #n7
- 9 #n8
- 10 #n9
- 11 #n91
- 12 #n10
- 13 https://www.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
- 14 https://www.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
- 15 https://www.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
- 16 https://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/
- 17 https://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/
- 18 https://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation//#more-96551
- 19 https://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/
- 20 https://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/
- 21 https://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples//#more-93604
- 22 https://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/
- 23 https://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/
- 24 https://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs//#more-60037
- 25 https://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs/
- 26 https://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs/
- 27 https://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs//#more-38064
- 28 https://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
- 29 https://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
- 30 https://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends//#more-22959
- 31 https://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
- 32 http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/
- 33 https://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
- 34 https://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices//#more-9853
- 35 https://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/
- 36 https://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/
- 37 https://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation//#more-5522
- 38 https://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
- 39 http://www.useit.com/alertbox/mega-dropdown-menus.html
- 40 https://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
- 41 https://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices//#more-5082
- 42 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
- 43 https://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/
- 44 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
- 45 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples//#more-345
- 46 https://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/
- 47 https://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/
- 48 https://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/
- 49 https://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
- 50 https://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
- 51 https://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus//#more-3768
- 52 https://www.smashingmagazine.com/usability-and-user-experience/
- 53 https://www.smashingmagazine.com/web-design-essentials-examples-and-best-practices/
- 54 https://www.smashingmagazine.com/web-form-design-showcases-and-solutions/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.