Best Website Designs: The Menu/Navigation (Part 6)

Subscribe to Flight Media Blog Notifications

Best Website Designs: The Menu/Navigation (Part 6)

This is the sixth blog in a series of articles covering web design.

Catch the series here:

Top 10 Best Designed Websites in 2016 (Part 1)

Best Designed Websites: The Home Page (Part 2)

Best Designed Websites: The About Page (Part 3)

Best Designed Websites: The Services Page (Part 4)

Best Designed Websites: The Blog Page (Part 5)

Best Designed Websites: The Menu/Navigation (Part 6)

Best Designed Websites: Why Growth Matters (Part 7)

Your beautiful website won’t be usable if the navigation menu stinks.

Harsh words, but it’s the truth!

You can invest tons of money into Adwords to funnel traffic to your site, but once they get here, the rest is up to your website.

Without a navigation menu to improve the user’s experience, increase pageviews, and drive revenue, you’ll be sitting on a pretty website with no customers.

Your website is like your brick and mortar store, where people can come to find out more about you and purchase services and products.

In this sixth article in our series on “Best Website Designs,” we’ll show you exactly what to do with your website’s navigation and why using 10 rockin’ examples.

1. Bare Snacks


Bare Snacks' Navigation Page

Why We Love This Navigation:

  • It’s something fresh. The approach to the drop-down menu is new.

  • It’s simple! There are minimal menu items, making it easy for the user to navigate.

  • It’s adaptable. There is a more usable layout space and design to accommodate a mobile responsive format.


2. FZ Creative


FZ Creative's Navigation Page

Why We Love This Navigation:

  • It uses a combination approach. There’s a simple navigation and a more-detailed navigation. The content is prioritized based on what the user needs to know right off the bat (simple menu), and then the more detailed menu pops up when the user drills down into the navigation.

  • It’s purposeful. The navigation is descriptive and tells the user what type of content is on each main page.

  • It aligns with the industry. The wording is standard for the nature of the creative agency’s site. 


3. MP & C


MP&C's Navigation Page

Why We Love This Navigation:

  • It’s compact. The main and sub menu are integrated into one, taking up less space and providing more real estate above the fold.

  • It’s visual. The iconography hints at the submenu items, giving the user direction without have to guess what it means.

  • It’s colorful. Each submenu item has an assigned color, enhancing the visual experience.


4. We Like Small


We Like Small's Navigation Page

Why We Love This Navigation:

  • It keeps the user experience in mind. It has descriptive content to tell more about the menu item.

  • It’s minimal, embracing white space, making it super pleasing to the eye.

  • It’s responsive. It repositions the menu items for mobile users.


5. Brave People


Brave People's Navigation Page

Why We Love This Navigation:

  • It’s personalized. Each menu item has a corresponding image, making it more personal to the brand.

  • It’s not fussy. The menu items are super simple, making it clear to the user about what is on those individual pages.

  • It’s informative. The navigation menu provides more information about the agency, such as location, contact information, and social profiles.


6. HLK Agency


HLK Agency's Navigation Page

Why We Love This Navigation:

  • It streamlines the user’s experience. It’s easy to find and the hamburger icon (located on the top-right of the page) is similar to what the user would see on mobile.

  • It’s visually appealing. The structured masonry style (similar to stones on a wall or tiles on a floor) demonstrates order  – organizing and clearly identifying each navigation piece.

  • It’s personalized. Each block turns into an animated gif when the user hovers over it, providing an insight into the agency’s environment and culture.


7. Whiteboard


Whiteboard's Navigation Page

Why We Love This Navigation:

  • It’s easy to find. The simple, clean and contrasting approach to the menu makes it POP and easy for users to identify.

  • It’s the best of both worlds! Even though it appears to be rather simple, the minimalist navigation expands into a more in-depth menu, giving the user more detail about the content on each page.

  • It uses color and contrast to highlight the most important (in this case) navigational element: the contact page. Not all navigational elements are treated in equal importance.


8. Mapbox


Mapbox's Navigation Page

Why We Love This Navigation:

  • It’s to-the-point! When the user scrolls down the page, rather than the entire navigation following, the only thing that remains in the navigation bar is the company logo and primary CTA.

  • It provides the user with helpful actions, like “I would like to,” indicating how the user should interact with the navigational item. Making it all about the user adds a personal touch.

  • Most of the items are paired with icons. This is a visual way to provide more information about that particular subject, not to mention it demonstrates great user interface practice. With labels accompanying the icons, users can painlessly navigate through the website.


9. Dressed Inc.


Dressed Inc.'s Navigation Page

Why We Love This Navigation:

  • It’s unexpected, but it works. The navigation is positioned at the bottom of the composition, rather than the top of this one-page site. Even though this is unconventional, color, contrast and other elements work together to make it super easy to identify.

  • It follows the user as they scroll down the page. Not only is it a nice transition from the primary menu format, but it makes it easy for the user to access other sections quickly.

  • It’s flexible. Even though the primary navigation design looks awesome on desktop, it’s not ideal for mobile. No worries here! A unique navigation layout was designed specifically for mobile users.


10. DNA Seattle


DNA Seattle's Navigation Page

Why We Love This Navigation:

  • There is more than meets the eye! The hamburger icon (located in the top-right corner) hints at a simple navigation; however, it expands to a full screen overview of the site.

  • It keeps the user top-of-mind. Rather than creating another page for the contact information, it’s easily found within the navigation menu. This minimizes steps the user has to take, enhancing the overall user experience.

  • It’s economical. There is no wasted space within the full-page navigation. For example, half of the screen is filled with featured blog posts that are one click away.


Final Thoughts

Your website should take into consideration every single component that will optimize traffic and turn them into leads and then customers.

The navigational menu is one such element that can help your business reach new heights.

Use some of the tips found in these great websites in your own navigation design to get better results.

Which navigational design element does your website need most?

Blog Comments

Josh Coffy

Josh has an exhaustive understanding of technology and a creative marketing approach that drives client results. In his free time, Josh does CrossFit and travels with his wife.