10 Jan 2015

Exploring nav bar examples

While looking around for inspiration for the site’s nav bar, I came across some pretty interesting nav bar examples that I’d thought to share… they’re by no means the best, and I’m no expert in this particular area.

While looking around for inspiration for the site’s nav bar, I came across some pretty interesting nav bar examples that I’d thought to share… they’re by no means the best, and I’m no expert in this particular area.

1 Spook Studio

My helpful screenshot

This was the primary inspiration for this site’s nav bar. I’m still meddling around with the site’s layout and it’s far from perfect…

2 Outdoors.io

My helpful screenshot

Don’t really fancy the white background going over the logo when the page scrolls… but I like how the nav bar was emphasized with white and the snowing video was darkened.

3 The San Francisco Globe

My helpful screenshot

Love how ‘The San Francisco Globe’ condenses to simply just its initials. Zen. I think the site isn’t entirely responsive though, the ‘SIGN UP’ button is cut off at this particular width.

4 Invision App

My helpful screenshot

Locking the nav bar at the top while scrolling is a very common thing to do… but I like its clean color scheme. Love white font over dark backgrounds….

5 Twitter

My helpful screenshot

While this isn’t exactly a nav bar, I thought it was interesting to see the changes from the Profile picture to a condensed logo version. Not sure if it’s a bug or what, but it doesn’t appear the same way on Chrome and Fox.

And here’s a site with more naviation inspiration.

I’m personally still a fan of keeping it on the top though, where it’s the most intuitive, and also most visible.

I think one of the main problems with such nav bars is its loading time? While it looks pretty when scrolling, if it slows the loading of the page considerably, then I wouldn’t think it’s good to implement, since it deters the user from a smooth experience. Any ideas on how to implement such a nav bar, yet maintain smooth loading of the page?