Inspirational Sidebars in Web Design

Navigation has always been, and will always be one of the most important aspects of web design. Until fairly recently, the standard was to have a top, side or bottom navigation bar or a mixture of two or even all three.

Nowadays designers are becoming much more creative with navigation, in particular, sidebars. Of course, not all sidebars are given over to navigation, and not every sidebar in our selection is used for navigation, but the majority are.

This round-up brings you a collection of inspirational sidebars in web design, some of which are not necessarily ‘different’, but the way they are implemented and/or presented makes them quite special.

Sidebars for Inspiration

Eat Drink Inc

This site makes absolutely sure that you can’t miss one of their links. Not only do they have unique sidebar links, but the grid-style layout on the rest of the page contains the same links.

Eat Drink Inc

FLIPP

This agency uses a clean, dark sidebar with their yellow logo, white text and gray social media icons. As you scroll down the page, the sidebar is static.

FLIPP

EVA Air

A nice color scheme on this sidebar enhances the overlay/label effect. When you click on one of the categories, that ‘label’ become transparent, showing you which page you are visiting. The sidebar is not constantly visible, but you can access it from every page.

EVA-Air

Daniel Portuga

This freelancer’s portfolio site is presented in a very brave, hot pink color scheme. The small navigational sidebar to the right of the page has a checkered pattern and remains static as you scroll down the page.

Daniel Portuga

Goltz Group

This site uses a slight transparency on the white fixed sidebar. The sidebar itself has tasteful gray and gold text, and the categories change to gold when you visit that page.

Goltz Group

Sculpt Communications

This Australian site is extremely image-heavy – in fact, apart from the fixed sidebar, there are only images. However, hovering the mouse over any image brings up a dense white transparency with red headline text, and the red theme is carried through on the sidebar, with the category you are currently viewing becoming red. A very clean presentation.

Sculpt Communications

Elevated Third

This is the blog site of Denver Online Marketing, and they use a sidebar on each side of the page. The left sidebar is their navigation menu and the right one is a selection from their archives.

Elevated Third

Adsy.me

This site offers a free service for creating mobile web apps. The green stylized chipmunks (?) that are the main feature of the sidebar, are slightly animated on mouse-over.

Adsy.me

PUSH Collective

This site has an interesting navigational sidebar – as the image on the landing page slide show moves on, the background blur on the sidebar changes colors to match.

PUSH Collective

Gareth Emery

Here is another interesting sidebar. Every other slide in the slideshow is a smaller image with a black background – on these slides the sidebar simply appears white on black. The other images in the slideshow are full width, where the sidebar now appears as white text on black transparent labels.

Gareth Emery

Draw to Click

This French communications agency uses a bright blue slide-out menu on the right of the page. The color is in stark contrast to the images contained in the slide show that all have a transparency overlay.

Draw to Click

The Seven Types of Motorcycle Rider

This site belongs to MCA Leicester – a British motorcycle clothing and accessories retailer. The fixed navigational sidebar is made up of silhouettes of the seven styles of helmet representing the type of motorcycle rider. As you scroll down the page, or if you click on the link, the current page’s helmet becomes black.

The Seven Types of Motorcycle Rider

DraughtMaster

This site belongs to Carlsberg, and the right sidebar is a series of circles with a dot in the center. When you hover the mouse over any of the circles, a larger gold circle appears around the original, and white text appears, revealing the category.

DraughtMaster

PRPL

The very unobtrusive static sidebar on the left of this site contains only a menu icon and the company logo. When you click on the menu icon, the menu fills the whole page with light gray text on a dark gray background.

PRPL

The Hunger Games Exclusive

This movie teaser site uses two sidebars, although the right-hand one is not so obvious – it is low down on the page and contains links for sharing, following and choosing your region. The left sidebar is simply white text on the image until you hover over the menu icon, when you get a solid black sidebar with white text.

The Hunger Games Exclusivehttp://www.thehungergamesexclusive.com/intl/ww/issue2/1

Inegalites.ca

This French Canadian site concerns itself with ‘inequalities’, whether it be gender, age, etc. Their unobtrusive-looking sidebar displays gray sharing and contact icons on a darker gray background, but when you hover over the sidebar, it expands to reveal the categories underlined in blue.

Inegalites.ca

Petersham Nurseries

This site is split into three columns, the right one being the navigation menu. Using white text on a green background with a line icon for each category, the categories that have sub-categories reveal another column. The whole design works very well and is a pleasure to view.

Petersham Nurseries

Colorama by Fiesta

This is a fun site, and the sidebar is where the fun happens! Fiesta are manufacturers of all dinner ware products and they have a relatively vast color selection. You use the sidebar to color all of the crockery and cutlery on the table, and you can even change the table surface!

Colorama by Fiesta

Oxo Tower Wharf

This building on the south bank of the Thames river in London was built in the 1930s by the huge British Oxo brand. By the 70s the building had fallen into disrepair, but a construction company stepped in to renovate it, and it is now a multi-use building of homes, retail design studios, specialist shops, galleries, restaurants, cafes and bars. They use a large, boldly bright red sidebar, and the red color is evident throughout the site.

Oxo Tower Wharf

Gaumont T.S. Spivet

This site is about the making of the French movie T.S. Spivet. The navigational sidebar on the right side of the screen follows you down the page, but is animated – it is a very unique sidebar!

Gaumont T.S. Spivet

Conclusion

As web design develops, trends come and go and possibly come back again, but as previously stated, navigation remains extremely important, poor navigation will cause visitors to leave the page pretty quickly. We all know the frustration of poorly signposted roads and routes, there is little difference between that and a site you can’t find your way around!

Have you ever found yourself struggle for inspiration for navigation on any of your projects? Do you think navigation menus should be permanently on show on a site, or do you like the menu icon to bring up the menu when required? Please share your opinions and experiences with us in the section below.

Advertisement