When we think of best practices for user experience in web design, we think of clear messaging, great aesthetics, and easy site navigation. And when it comes to creating intuitive navigation on a website, we aim for a user experience that lends itself towards familiarity and clarity. As a result, however, we end up seeing the same typical navigation bars that reside in a list on either the top or side of our page.

Navigation isn’t an Obstacle, it’s an Advantage

Usually, it’s a list of words that we’re trying to fit into our near-completion design layouts. Or maybe it’s an awkward arrow that we don’t want covering up our content. More times than not, navigation bars are “necessary evils” that we reluctantly use to help ease the usability of our sites.

Yet, we should be proactive about site navigation and utilize this design ingredient to our advantage. When used right, navigations can enhance a site’s usability, aesthetic, and efficiency. So take a look below and see how you can utilize your next navigation section to your benefit.



The general site navigation is out of the way and allows the user to immediately enjoy the visual layout and content of the site. The navigation tab extends the branding of the site. Upon opening the navigation menu, a user is presented with a very intuitive and highly visual way of browsing the portfolio of the site.



This navigation is positioned in a familiar area to users; however, it is designed to carry out the site’s general design aesthetic. The style of the navigation also draws the user towards exploring different areas of the site.



This site introduces keyboard navigation functionality, thereby allowing a user to fully experience the site for how it was designed and presented. The minimalistic design of the navigation is unobtrusive and simple to understand. The flyout subnavigation of the individual portfolio pieces allows for quick scanning and jumping throughout the site.



The simple bottom navigation that is different from the traditional top navigation allows for a visually pure and simple viewing experience. In addition to its position, the navigation tab also fades in opacity to reduce visual clutter when viewing different sections of the site.



The unique and spread out design of this layout rings true to the style and brand of their site. Their layout makes the navigation the star of the show and tempts the user to interact with the navigation links to see what the site will present the user with.



This site also utilizes keyboard navigation functionality with minimalistic vertical and horizontal navigation. Its restricted navigation allows the user to be fully exposed to the site’s story and messaging.



Iconic and creatively positioned navigation elements make this site unique and stand out in a user’s mind.



While this navigation leans more towards the traditional ways of side navigation; its usage of visual icons give aesthetic value and an efficient tie-in to the site’s brand identity.




While the main navigation is short and simple, this site does a good job of enticing a user to play with the portfolio sub navigation below the main header. The high contrast iconographic tab navigation makes it painless to browse the author’s portfolio.

Cast Iron Design Company

Why it’s different:

Navigation can be unobtrusive and advantageous if designed with intent. It not only aids in usability, it improves aesthetics and general user experience. So the next time you’re designing navigation for your site, think about how you can position your navigation to lead your users towards an unforgettable and satisfying experience.