Creative And Innovative Navigation Designs

Advertisement

A website has a personality — it is a reflection of the person or organization behind it. When people visit your website, you want it to stand out from the crowd, to be memorable. You want people to come back and use your website or get in touch with you.

So, to distinguish itself from the unwashed masses, your website not only needs remarkable content, but also has to be innovative yet functional. Ask yourself, what would make life easier for your user? Simple search functionality may be needed, or perhaps the navigation menu could use some sprucing up. Nevertheless, the personality of the website needs to be consistent throughout. The following websites will whet your appetite for extreme creativity. Browse through and explore them for yourself.

Toybox1
Navigation should always be there when needed, and graciously disappear when the user wants to focus on a particular task. For example, in designing the checkout for an online store, the navigation should always be accessible but also give enough prominence to criticial features of the website, such as the checkout form. The navigation for Toybox does just that.

Toybox2

It feels like you’re peeking behind the page or the lid of a toybox to see what’s inside. The navigation is easy to use, and the swivel effect directs the user’s attention to the navigation bar when they’re using it. Hiding the navigation also allows for a simple, clean design that makes viewing the projects quite pleasant, because the projects are not competing for attention.

Information you might want to know, such as what Toybox does and where it is located, can still be found in a discreet navigation bar at the top. The hover effect is also fun, as the other images get pushed back and fade as the user focuses on one project.

Olivier Bossel3
The portfolio of Olivier Bossel, an interactive designer, is interesting. The navigation elements create an effect of exploding pixels as you hover over them. The effect is quite dynamic and contrasts with the otherwise clean design. It works nicely as a visual element because it encourages the user to continue through the website. The consistent visual voice and tone complement the brand’s identity. Just by viewing the website, the user experiences the designer’s work.

Olivier Bossel4

Tsto5
Tsto, a design agency, has a simple yet unorthodox approach to design; its navigation is different from what we’d expect. A navigation element is fixed in each corner of the screen, framing the work being showcased. The visual identity is created with heavy hot-pink letters, along with the descriptive information. The hierarchy is clear, however, with the “Work” tab in the top-left corner, and the “Contact” and “About” tabs at the bottom of the page. In keeping with the style, the title of the work being showcased is in the same heavy pink font.

Tsto6

When clicking through the work, which presents like a slideshow, a preview of the next project is shown when you hover over the arrow. The images are large and take up most of the page. As the user clicks through and views the large images, they get a clear idea of Tsto’s identity and work.

Derek Boateng7
Derek Boateng’s portfolio welcomes the user with a polite “Hi” upon loading, and an arrow directs you to scroll down. The general design is understated; it doesn’t shout at you, but rather gently guides you through the work. As you scroll down from the loading page, the header and navigation shrink back, allowing more space for the portfolio. This is a good example of navigation that is always accessible yet gives center stage to the main content.

Derek Boateng8

Second Story9
Ah, good ol’ horizontal scrolling! Second Story’s website works like a magazine app on a tablet. It is innovative in that it doesn’t have the feel of a typical Web page and it scrolls horizontally. The content is laid out in columns, and each section scrolls vertically. The navigation is anchored to the left, which helps to establish the rhythm. As you view this portfolio, the navigation minimizes to a bar on the left and reappears when hovered over. You can choose to view the portfolio in thumbnail view or as a slideshow.

Second Story Interactive Studios10

Mostly Serious11
As its name suggests, Mostly Serious has an element of playfulness to it. You are greeted by navigation that is designed as balloons floating around. The friendly animation creates movement on the otherwise static website and sets the tone for the brand. While you can come back to the home page at any stage, a subtle navigation bar appears at the bottom of the page. The website is functional, with a splash of the studio’s fun personality. Actually, it reminds me of funky Flash animations from the good old days (EYE4U12, anyone?), but because the website is supposed to be a little playful, it works well in this context.

Mostly Serious13

Minimal Monkey14
Scrolling through articles in this bold simple design reminds me of browsing a bookshelf. The hover effect singles out an article for the user to focus on. This website also has a clever design for the “About” and “Contact” sections: When you click on a tab, the page drops down to reveal the information. It’s a simple way to provide information without redirecting to another page.

Minimal Monkey15

However, viewing old articles is not so easy because there is no search functionality. If the user is looking for a particular article, they would have to scroll through to find it. Search functionality would be useful without changing the overall design too much.

LayerVault16
It’s amazing what effect a simple, clean layout with playful colors and fun animations can have. LayerVault balances white space and subtle animation to intrigue and engage the user. Animation can be used to illustrate a point, to guide the user through a website, or even to illustrate how-tos. Animation doesn’t always do the trick, but LayerVault applies it sparingly, and only when the user is browsing a particular section of the page. The result? A well laid out page with engaging and attractive illustrations.

LayerVault17

Escape Flight18
Escape Flight is cleverly designed, and the logo animation as a page is loading is novel and funky. The navigation is fixed at the top and looks like a departures and arrivals board, as though you’re at the airport already! The drop-down menus look like a travel checklist, which works well with the theme. When you click on a location and scroll down, all of the important information remains fixed at the top, making access to the content much easier and more comfortable for the intrepid traveler.

Escape Fligh19

Making use of stunning photography, Escape Flight maximizes its space. It’s exactly what you want from a travel website. It gives you a little taste of the adventure that awaits, beautifully showcasing the amazing destinations. When you hover over a destination, you find exactly what you need to know: ticket prices, weather conditions, flight time and travel length. What more could you ask for?

aSCIIaRENa20
Calling all ASCII enthusiasts! aSCIIaRENa reeks of the ’90s. People can register and post news on the wall, submit their own text art, and get featured on the wall of fame.

Asciiarena21

The Sartorialst22
Photographs are the focus on this website, and the design supports that with no muss or fuss. More importantly, the website uses the hover effect quite elegantly; captions slide in from the side and slide out again, following the cursor.

The Satorialst23

SilkTricky24
The people behind SilkTricky are out to break the status quo, and their website doesn’t let down. Mousing over the images creates an interesting effect. The movement on the page creates a sense of activity that intrigues the user. On this single-page website, the user doesn’t have to click from page to page to navigate. Just click “View,” and the chosen article folds out as the other articles shift off. This would be a nice way to showcase a photography portfolio, too.

SilkTricky25

SumAll26
SumAll’s layout is clean, with no unnecessary extras that would distract the user. Hovering reveals more information in a simple understated manner, and the transitions are an extension of the hover effect. When you click on a button, succinct information and options appear below. I quite like that you aren’t redirected to another page when you click an option; rather, the information tidily appears below the button. A drawback: the navigation isn’t responsive, looking broken and inaccessible on smaller views.

SumAll27

Potluck28
Sorry for being so enthusiastic about this one, but Potluck exhibits a fantastic user experience. The generous white space helps the user access what they need, when they need it. The forms and buttons have a fresh and open aesthetic that makes them easy to spot and use. Both the text and beautiful graphics are laid out in a way that guides the user through the website. The buttons and icons work well together, and all buttons and input areas feel consistent and engaging. This is a great example of how a bit of well-chosen typography and a subtle, clean user interface go a long way to engaging and delighting users.

Potluck29

Lowdi30
The single-page responsive layout works quite beautifully. Lowdi uses lines and shapes to set off sections of the page, a great way to break away from the conventional boxy layout. I love how the “Order now” button is incorporated in the design with line and shape. These elements adjust to your screen effectively, and the design maintains a flow throughout, which makes for easy viewing.

Lowdi31

Barcamp Omaha32
Barcamp Omaha is an online invitation to an event. The single-page tool effectively guides the user through the narrative with a consistent visual theme. All of the essential what, where and when information is at the top of the page, but the design urges the user to scroll down to see what else they can find. I really like the clever integration of the Twitter and Facebook icons.

Barcamp Omaha33

As the user scrolls down, more information is provided systematically, and the layout remains tidy and succinct, with bold headings. The categories of conference talks are illustrated with simple animation to keep the user engaged. Once you’ve scrolled down the building and reached the ground, contact information is waiting for you, easily accessible.

Combadi34
This website feels tranquil as soon as it loads, a result of the careful design. While it does not have a lot of white space, it does not feel claustrophobic. Tabs expand on hover, providing more information and enhancing usability. Along with the other elements, this effect conveys an airy, calm feeling. The design mirrors the vocabulary of the website, and the various elements work together to achieve a coherent and consistent identity.

Combadi35

Waller Creek Conservancy: The Final Four36
A hover effect should not only provide more information, but also contribute to the visual appeal of the website. This website does that quite beautifully by expanding the image as you hover over it. The image also changes from greyscale to full color, with a caption. The effect is quite captivating.

The Waller Creek Conversy Design Comepetition37

Lift38
When laying out products or items on a website, it’s easy to end up with a static catalogue-style view. Lift’s simple hover effect rotates the books to display a 3-D version. This seemingly minor and simple visual effect really makes the website more interesting. The user feels that they are involved and can interact with the website. You can achieve this 3-D effect39, too.

Lift40

Snowbird41
Snowbird is a dynamic website that involves the user. The current weather is displayed and, when you hover over it, folds out to reveal the week’s forecast. The hover effect on the “Full Report” button, as it transforms rounded corners into square corners, is subtle yet effective. The teasers are triangular and look like a snowbird’s wing; when hovered over, they unfold into a square for a larger view.

Snowbird42

Etch43
The square sections on this website are tightly laid out but don’t feel cramped. The navigation in the top-left corner takes up little space because icons are used for the various categories. You can toggle the navigation to show and hide in the large view by clicking the menu icon. The responsive design makes the website easily accessible on any device, without losing functionality or brand appeal.

Etch44

Would You Like To See More Showcases On Smashing Magazine?

How’s that for inspiration? With so many fresh ideas to implement, we mustn’t forget that the personality of a website still needs to engage the user. An effective website should be creative yet user-friendly.

Leave a comment and let us know if this article was helpful and whether you’d like to see more showcases like it.

(al)

Footnotes

  1. 1 http://www.toybox.co.nz
  2. 2 http://www.toybox.co.nz/
  3. 3 http://olivierbossel.com/
  4. 4 http://olivierbossel.com/
  5. 5 http://www.tsto.org/work/shapeshift/
  6. 6 http://www.tsto.org/#shapeshift
  7. 7 http://derekboateng.com/
  8. 8 http://derekboateng.com/
  9. 9 http://www.secondstory.com/
  10. 10 http://www.secondstory.com/
  11. 11 http://mostlyserious.io/
  12. 12 http://www.eye4u.com/home/
  13. 13 http://mostlyserious.io/
  14. 14 http://minimalmonkey.com/
  15. 15 http://minimalmonkey.com/
  16. 16 https://layervault.com/
  17. 17 https://layervault.com/
  18. 18 http://escapeflight.com/
  19. 19 http://escapeflight.com/
  20. 20 http://www.asciiarena.com/
  21. 21 http://www.asciiarena.com/
  22. 22 http://www.thesartorialist.com/category/men/
  23. 23 http://www.thesartorialist.com/category/men/
  24. 24 http://silktricky.com/#/home
  25. 25 http://silktricky.com/#/home
  26. 26 https://sumall.com/
  27. 27 https://sumall.com/
  28. 28 https://www.potluck.it/
  29. 29 https://www.potluck.it/
  30. 30 https://lowdi.com/
  31. 31 https://lowdi.com/?z=UK
  32. 32 http://barcampomaha.org/
  33. 33 http://barcampomaha.org/
  34. 34 http://combadi.com/
  35. 35 http://combadi.com/
  36. 36 http://wallercreek.org/finalfour/
  37. 37 http://wallercreek.org/finalfour/
  38. 38 http://www.liftinteractive.com/
  39. 39 http://tympanus.net/codrops/2013/01/08/3d-book-showcase/
  40. 40 http://www.liftinteractive.com/
  41. 41 http://www.snowbird.com/
  42. 42 http://www.snowbird.com/
  43. 43 http://etchapps.com/
  44. 44 http://etchapps.com/
  45. 45 http://polldaddy.com/poll/7242543/

↑ Back to topShare on Twitter

Shavaughn studied Journalism and Media Studies, and specialized in Communication Design at the Rhodes University in sunny South Africa. She is interested in the way we interact with and are affected by the visual world around us and she’ll tweet such things at @shavaughnhaack .

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    There is no doubt about how elegant they are. But I never prefer these websites to those who have simple design. I believe simplicity make websites more user friendly.

    • 2

      Some of these designs are very simple, but I do get what your saying. To make these websites more usable, they need to follow a format that users will be familiar with. However, I think that considering that the majority of these have a target audience that will be ok with the change in format and appreciate the beauty, their designs are appropriate.

  2. 3

    I’d argue that something like https://sumall.com/, with the rollover grid, is not innovative navigation and would even say its bad UX. When you scale down the website, the squares do not scale with the rest and the logo and text are cut off.

    My point being, is that yes its interesting to have a unique navigation structure, but it requires a lot more testing and thought than the usual “text navigation at the top” websites. Although the big pay off is that by rethinking how users navigate the site, you can end up with something like http://escapeflight.com/ which is a much quicker and easier to follow process than most travel websites.

    • 4

      Yes, you make a good point for designers about testing and Escape Flight does provide great design solutions. The UX for SumAll isn’t perfect and the drawbacks are mentioned in the article but it’s a nice idea to consider and perhaps even improve upon.

  3. 5

    Love the Escape Flight site – thanks for sharing.

    Genuine and beautiful interface combined with a great user experience. The devil in the detail here is extremely well thought out and the language used throughout, both visually and through copy is excellent

    Thanks

  4. 6

    Most of these sites are pretty to look at, some even have a touch of innovation, but none live up to the billing of the headline. In fact, some are just failed ideas coming back to life to prove that Santayana was indeed correct. Then there are a few that are truly navigational and accessibility nightmares. Back buttons that do not take into account user initiated actions, or even worse break it completely. Sometimes being innovative requires the user to think in a different way, but expecting the user and the software that renders your pages for them to do it your way is cheap, lazy, and ineffective design. Nothing innovative there, people have been doing that for as long as there has been a graphical web.

    • 7

      The aim of the article was to feature interesting, different solutions that designers came up with. They aren’t the ultimate solutions and the perhaps the user experience is not perfect across all of the sites, but they provide nice alternatives to consider.

  5. 8

    I am a fan of round-ups such as the one above about creative and innovative site navigation when they are thoughtfully done. They need to feature sites that truly merit recognition in a showcase, and, more important, each site needs to be accompanied by narrative that explains what makes it special. Shavaughn hits the mark with this collection. All of the sites clearly fit within the scope of the piece, and Shavaughn smartly tells us why. She even goes a step farther to encourage us to explore the sites for ourselves by including details about many of the sites that might not be immediately apparent from a single screen capture. Round-ups such as these also present a great opportunity to recap current design trends and are an excellent place to include useful tips, which could be featured as part of the introduction and which would add an extra layer to involve readers even more. Overall, this is a great resource for inspiration. Well done and thank you.

  6. 9

    I get bummed out when I see that a cool effect is only implemented in Chrome…

  7. 10

    We developed a site a lot like mostlyserious three years ago (brightpartnerinc.com/). The site has been reduced to a single page since our client put her consulting business temporarily on hold to pursue other interests, so the links have been removed from the bubbles, but I still love that design.

  8. 11

    Single Page Scrollers are so 2011 … no Innovation there …

  9. 12

    Olivier Bossel’s website, which has interesting mouse over exploding animation, I would disagree that the site provides a good navigational system, because that’s what the article’s main aim is.

    Looking at the website and exploding things around, I had no clue for a good 50 seconds that there is stuff below the page and I had to scroll down to dig deeper. Also, I was on a windows machine, due to which I noticed that there was area to be scrolled below. Had I been on a Mac system, the scroll bar would not be even there I might not have scrolled down on the page.

    • 13

      With this site, I was specifically focusing on the exploding pixels hover effect for inspiration. It’s not a common effect and is interesting for the user. With regard to the rest of the navigation, there is of course room for improvement and perhaps there should be some indication that you need to scroll down and that you are not merely on a landing page.

    • 14

      Arjun, I’m on a Mac and I didn’t see it, either. Navigation failure.

      Shavaughn, your logic for including Olivier’s site is somewhat flawed unless you feel design trumps usability—and that goes against your claim that “You want people to come back and use your website or get in touch with you.” They won’t use it or come back if they can’t figure the site out. That’s a site only another interaction designer could love.

  10. 15

    I love these guys approach to minimal navigation as well http://etchapps.com/ :)

  11. 16

    Fix the Toybox Link…

  12. 18

    I think these are awesome! They’re fun to look at and I love when designers push boundaries.
    That being said, I don’t know how useful/applicable they are in the “selling to clients” world. Navigation needs to be clear and obvious to the user (and when dealing with most small businesses, the user isn’t as edgy and design-y as we are) – so while this is awesome and inspiring, they should be treated like art and not implemented in (most) projects.

    • 19

      Crystal, I completely agree. As a design company, it’s important to balance building out your own site in a way that is innovative and presents well to industry but still remains completely functional for the client.

  13. 20

    I wrote a jQuery plugin based on ToyBox’s menu.

    http://blog.jimjh.com/jquery-plugin-box-lid-menu.html

  14. 21

    Well and impressive sharing. Very kind of you. Thanks.

  15. 22

    your website design tells lot about your company and your product and services because whenever a visitor come to your website it leave an impact on their mind so it entirely depend upon us what kind of impact we want to leave on our customer’s mind. design and looks of our website can help us to leave a strong impact on our viewer.

  16. 23

    Over 80% of readers want to see more list articles.
    That’s a real shame.

    There is always a need for innovation and I don’t believe in saying that because a design doesn’t work in one format over another it has no place, that’s ignorance, I’ve certainly bookmarked a few of those myself.

    As a few people have noted, some of these designs are well executed within their context whilst others contain usability concerns or are completely inaccessible from certain devices.

  17. 24

    I’d like to see a gallery of responsive websites that are not just a bunch of crisp-edged squares on the page. Do you have a list of retro-textured looking sites that are also responsive?

  18. 25

    The Combadi site looks like it was built upon the Heaxagonal Theme by Avathemes (sorry, link not being posted)

    Its nice to see how little changes make the whole thing feel different. I particularly like the Picks section with the subtle color bands to represent their three categories.

  19. 26

    Toybox, SecondStory and MostlyMysterious are amazing websites, very exceptional.

  20. 27

    Great article!
    I love the navigation of the first website.

  21. 28

    Some stunning examples here of how NOT to design your interfaces, with over the top animations and un-intuitive interaction. Thanks for sharing.

  22. 29

    “Hiding the navigation” it is a nice way if you have huge amount of sections or options within your website.

  23. 30

    Awesome collections!! First impression is very important in web design. Design should interact with our brand in market. So It should be more user friendly.

  24. 31

    Great examples, all of them are indeed elegant and really beautifully done.

    From my own experience though, this designs are good for branding only, I’ve tried them 4 times on some of my really big customers (over 10mill views / month) and 4/4 of the times it reduced our conversion rate significantly, unfortunately or perhaps fortunately the common user tend to prefer the normal/classic web structure in most of the niches.

  25. 32

    Nice collection.. However you missed.. http://cssdude.com

  26. 33

    I would love to see a showcase of websites with responsive designs that don’t look ridiculous on large monitors.

  27. 34

    Just that on the “Derek Boateng” one you can’t see the dropdown work unless you have a big screen. Amazing for the user. Amazing design. Yeah

  28. 35

    Some websites remind me the early 2000’s when awkard navigation patterns started based only on technical possibities (think about those “great” powerpoint presentations of colleagues with all that blinking, blue over black and comic sans) .

    After that and thanks to more knowledge on user behaviour navigation went back to known standards nowadays.

    Remember that innovative navigation patterns are great for artistic/design studio websites but rarely would work on common websites like retail, product or government websites.

    Hopefully, we will not fall in the trap of creating “cool” websites just because technology evolved. Just like in the 2000’s.

    Parallax is another example. In most cases is used with reason but I wish to do a user test on a website with traditional business needs.

    Thanks for the post!

  29. 36

    Second Story was great! Interesting, innovative design and intuitive. Most of the rest I found a little cumbersome and confusing. Striking the balance between innovation and usability is no easy task.

  30. 37

    Once I got to the aSCIIaRENa website, you completely lost me.
    So far, the content (examples) you have featured in your articles tends to be the same and not matching up. You explain what you are about to show us, but the examples do not match.

    Is this from a limited pool to pull from? Not enough Research? An attempt to grind against the norm or stay on track with what’s currently popular?

    I really want to see good examples, but I am always confused or underwhelmed at your choices. The choices aren’t even explained in a convincing manner as to why they were chosen.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top