10 Examples Of Beautiful Vertical Navigation To Inspire You
Vertical navigation has had a mixed press over recent years with many listing its limitations but I hopefully the websites below will convince you that when it is done well it can look fantastic. With the proliferation of horizontal navigation menus it is refreshing to see different menu layouts employed that don’t leave the visitor confused about where to click (as they often do when unconventional layouts are used) or detract from the main content of the page by being overly intrusive.
In order to inspire you in your own designs I have chosen websites with various different styles of side navigation — some of the examples below have collapsable side navigation bars, some employ sliding animation, some are fixed, some are on the left and some are on the right. Many would argue it is better to have the navigation on the left rather than the right given the fact that studies have shown our attention tends to be drawn to the left of webpages (i.e. this study showed web users spend 69% of their time viewing the left half of the page and 30% viewing the right half) but I believe the purpose of the site together with the design in its totality needs to be taken into account before any judgement can be made on whether the primary navigation area on a site should be on the top, bottom, left, right or middle. The studies into this subject have all too often put a narrow definition of what is ‘good’ such as the EyetrackIII study which concluded:
“Navigation placed at the top of a homepage performed best — that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.”
Many designers would argue having more visitors look at their navigation area for longer is not ‘best‘ or something to strive for. Enough of this debate — check out the designs below and let me know what you think.
Bad Assembly
Bad Assembly, a digital advertising agency, has developed a website that is a great example of the increasing use of the slide out side menu bar that can be accessed by clicking on the 3 stacked lines icon in the top corner. This icon is becoming more familiar due to its prevalence in responsive mobile website designs and web designers are starting to utilise it really well on large screen designs. The advantage is the navigation area is shown only when required and so the attention of the visitor is focused on the content of the site. The fading of the background and quick scroll effect of the page navigation are two more elements of this website’s navigation that make it stand above many others.
Google Ventures
Google Ventures have designed a fantastic clean and intuitive websites that is very successful at showcasing the images, text and high quality illustrations. It is worth visiting the site to try it out as the screenshot does not do it justice — once the side nav bar is clicked it reduces in size and all thee text becomes icons. Very classy.
The fact that they have opted for a fixed navigation bar on the left allows them to fit in more options than had they gone for a more traditional horizontal bar which would have required drop downs or a smaller font size.
Kick Point
Kick Point, a digitial marketing agency based in Alberta, have also opted for the three line menu navicon to keep the navigation area from interfering with their content until required. Their use of large images and colour would be compromised with a horizontal text area so this is another example where a vertical menu area looks right when seen in conjunction with the site as a whole.
Dataveyes
Dataveyes is a Frech data visualisation that uses a colourful thin left hand side navigation bar in conjunction with a smooth parallax vertical section transitions. Each number on the navigation bar expands to show text and it is a pleasure to click onto each section which all utilise bold colours and quality illustrations. No clunky scrolling or page loads — the whole design really is top notch.
Jonathan Da Costa
The website of Jonathan Da Costa uses the 3 line menu icon to slide a menu bar from the left so his creative talents can be showcased with minimal clutter on the main section of the site. The unique thing about this design is that when the menu icon is clicked, the navigation area is expanded to about 80% of the page with the new content being placed below a horizontal navigation block.
Arbour
Arbour restaurant’s website uses a clean and minimal fixed left hand side navigation area allowing more links to be added compared to a horizontal menu.
Pauline Osmot
Pauline Osmont is a French illustrator, graphic and web designer who has shown off her skills with her own website. The horizontal and vertical scroll transition effects when a navigation link is clicked are very elegant and the whole site demonstrates she has a very good eye for aesthetics as well as UX.
Jason James
Whilst the screenshot of jasonjam.es above may not look that impressive, this site should be visited to see the side navigation in action but also because it is an example of putting a ton of content on one massive vertical scrolling pages. The home page seems to go on for ever with example after example of previous branding and design projects.
Mammoth Media
Mammoth Media’s website is a rare design as it has zero vertical scrolling as all content is within the screen area seen. The flat design and colours used in the navigation area and inner pages give a very contemporary feel.
Flirty is one page HTML template available to buy here for only $11. Unlike some parallax scrolling websites which can be a bit jumpy the navigation to the various sections are smooth and accurate. It is a very simple layout but gives a good user experience. Another example of vertical navigation done well.
Originally published at www.webdesignerhub.com on November 22, 2013.
