Best Website Designs: The Menu/Navigation (Part 6) - Flight Media Blog
Best Website Designs: The Menu/Navigation (Part 6)

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

 

This is the sixth blog in a series of articles covering web design for motivational speakers and authors.

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.

As a speaker or author, 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

best_navigation_menu

Bare Snacks’ Navigation Page

Why We Love This Navigation:

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

best_navigation_menu

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

best_navigation_menu

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

best_navigation_menu

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.

best_navigation_menu

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

best_navigation_menu

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

best_navigation_menu

3. MP & C

best_navigation_menu

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 estates above the fold.

best_navigation_menu

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

best_navigation_menu

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

best_navigation_menu

  1. We Like Small

best_navigation_menu

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.

best_navigation_menu

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

best_navigation_menu

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

best_navigation_menu

5. Brave People

best_navigation_menu

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.

best_navigation_menu

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

best_navigation_menu

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

best_navigation_menu

  1. HLK Agency

best_navigation_menu

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.

best_navigation_menu

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

best_navigation_menu

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

best_navigation_menu

  1. Whiteboard

best_navigation_menu

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.

best_navigation_menu

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

best_navigation_menu

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

best_navigation_menu

  1. Mapbox

best_navigation_menu

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.

best_navigation_menu

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

best_navigation_menu

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

best_navigation_menu

  1. Dressed Inc.

best_navigation_menu

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.

best_navigation_menu

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

best_navigation_menu

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

best_navigation_menu

  1. DNA Seattle

best_navigation_menu

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.
    best_navigation_menu
  • 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.

best_navigation_menu

  • 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!

best_navigation_menu

Conclusion

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

The navigational menu is one such element that can help your business reach new heights. Use some of the tips found in these really great websites in your own navigation design to get better results.

Which navigational design element does your website need most?

About Flight Media

info@flightmedia.co'
Flight Media is a team of nerds who love helping people succeed--whether that's a business or hobby.
Scroll To Top
Flight Media Marketing & Advertising
Wanna work with us? Fill out the form below and let us know what you need help with!