Web Design Navigation Showcases

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.

Quick Overview

The Elements Of Navigation13

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”.

Navigation - Test14

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.

Read more…15

Planning And Implementing Website Navigation16

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.

17

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.”

Read more…18

Showcase of Creative Navigation Menus: Good and Bad Examples19

Good navigation is the main cornerstone of an effective website. In practice, however, it’s often a tough challenge to come up with a meaningful, unambiguous way to organize, arrange, and display content to users; and it’s often not much easier to find a visually interesting solution either. The wide adaption of JavaScript libraries like jQuery is making it increasingly easy to add various kinds of sleek animations to navigation design.

Design Intellection20

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.

Read more…21

Showcase of Interesting Navigation Designs22

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.

Foundation Six Portfolio23

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.

Read more…24

Showcase Of Beautiful Vertical Navigation Designs25

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.

gary's real life26

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.

Read more…27

Showcase Of Modern Navigation Design Trends28

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.

Delibar29

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.

Read more…30

Horizontal Navigation Menus: Trends, Patterns, and Best Practices31

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.

33

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.

Read more…34

Showcase Of Well-Designed Tabbed Navigation35

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.

Screenshot36

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.

Read more…37

Designing Drop-Down Menus: Examples and Best Practices38

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.

Screenshot40

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.

Read more…41

Navigation Menus: Trends and Examples42

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.

Screenshot44

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!

Read more…45

Can User Experience Be Beautiful? An Analysis Of Navigation In Portfolio Websites46

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.

Portfolio Navigation Main Image47

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?

Read more…48

50 Beautiful And User-Friendly Navigation Menus49

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.

Screenshot50

Below we present over 50 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.

Read more…51

Related Posts

You might be interested in the following Best of selections as well:

(vf) (il)

Footnotes

  1. 1 #n0
  2. 2 #n1
  3. 3 #n2
  4. 4 #n3
  5. 5 #n4
  6. 6 #n5
  7. 7 #n6
  8. 8 #n7
  9. 9 #n8
  10. 10 #n9
  11. 11 #n91
  12. 12 #n10
  13. 13 http://uxdesign.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
  14. 14 http://uxdesign.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
  15. 15 http://uxdesign.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
  16. 16 http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/
  17. 17 http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/
  18. 18 http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation//#more-96551
  19. 19 http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/
  20. 20 http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/
  21. 21 http://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples//#more-93604
  22. 22 http://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/
  23. 23 http://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/
  24. 24 http://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs//#more-60037
  25. 25 http://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs/
  26. 26 http://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs/
  27. 27 http://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs//#more-38064
  28. 28 http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
  29. 29 http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
  30. 30 http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends//#more-22959
  31. 31 http://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
  32. 32 http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/
  33. 33 http://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
  34. 34 http://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices//#more-9853
  35. 35 http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/
  36. 36 http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/
  37. 37 http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation//#more-5522
  38. 38 http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  39. 39 http://www.useit.com/alertbox/mega-dropdown-menus.html
  40. 40 http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  41. 41 http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices//#more-5082
  42. 42 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  43. 43 http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/
  44. 44 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  45. 45 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples//#more-345
  46. 46 http://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/
  47. 47 http://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/
  48. 48 http://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/
  49. 49 http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  50. 50 http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  51. 51 http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus//#more-3768
  52. 52 http://www.smashingmagazine.com/usability-and-user-experience/
  53. 53 http://www.smashingmagazine.com/web-design-essentials-examples-and-best-practices/
  54. 54 http://www.smashingmagazine.com/web-form-design-showcases-and-solutions/

The Smashing team loves high-quality content and cares about the little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    Would be really interested in seeing examples of complex nav systems that are necessitated by business rules. Perhaps a case study on a company or site that best elevates all their prime site functions yet keeps things simple and beautiful. All these examples are great if you are doing small sites for freelance or for personal and blog use but beyond that they are impractical for scaled use.

    12

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top