Jan 08 2010

Creative and Unusual Layouts and Navigation Designs

Advertisement

By Robert Hartland

In this article, we’ll showcase website layouts and navigation structures that really break the mold. The designers of these websites have seen dozens of clone websites out there but have sought their own way. The unusual website layouts and navigation that results can either be very successful and innovative or disorienting for visitors. You decide. When you browse the showcase, think not so much about functionality as about why you design and develop the way you do.

Unusual Layouts

Breaking industry conventions is not always easy. Still, many designers push on to find fresh ideas and ways to innovate. Have you ever driven down a street where the homes perhaps have different-colored paint on the shutters but essentially look the same? The Internet can be the same, with designers cloning the same layouts day in and day out. But it is amazing what can be accomplished by a simple shift in the placement of website elements, while keeping the website familiar and easy to use.

Unusual Layout Best Practices

There are no “standards” for designing your own unusual layouts, only guidelines to keep you on track. The style is defined by freedom from conventional standards and by placing items where visitors are not trained to find them. Here are some ways to achieve an unusual layout:

Let your content articulate the design. Try even five or more columns without aligning everything perfectly. Prioritize usability, with layout as a secondary consideration. Let things flow naturally.

Let your users view content horizontally or vertically, without making additional content hard to find. Bring an element of surprise and excitement when presenting crucial content.

Keep in mind that users tend to focus on faces. Guide them with visual imagery to help them find content. Also, make sure the layout does not disorient visitors. The experience should be new and delightful.

India60
India 60 has a layout that seems successful for every section of the website but “Videos.” Identifying the different content on the website is easy, but no matter how large your monitor (mine is 24″), you still seem to need to scroll.

Big Kid
Big Kid has a series of windows and photos that wrap to your browser window, helping you navigate the content. An effective yet slightly disorienting approach.

26000 Vodka
26000 Vodka takes an abstract and innovative approach to layout. Even with the parts moving constantly, you still manage to find content and enjoy your visit.

Red Mccombs Media
Red Mccombs Media has several different levels of navigation on its landing page and internal pages. While the page design is pleasing to the eye, it can be confusing and frustrating if you are not sure what you are looking for.

Tiny Team
Tiny Team has a very simple layout that replicates how folders are opened on a computer. You can easily navigate back and forth through sections after some trial and error. One feature that is lacking is direct access to a specific part on the website.

Max Haus
Max Haus puts its navigation and search at the bottom of the website, with all options initially hidden. Once you leave the home page, returning is nearly impossible.

Webbli World
Webbli World has a very creative layout. All of the main content is hidden from non-members. The unique layout of the Webbli creator and registration form, though easily lost, get your attention.

Jan Sochor
Jan Sochor has a three-column layout that adapts to each section. The website feels very natural even though it contains at least four different layouts.

Sursly
Sursly has an interesting take on horizontal navigation; each page contains only a small chunk of information. While the layout as a whole may not be unusual, the dark frame containing the content is.

Gavin Castleton
Gavin Castleton‘s layout has a split personality but helps you quickly identify your needs. Once on the website, you are presented with obscured content against a transparent background. The navigation transitions are appropriately nauseating.

FMCS
FMCS has a five-column layout that is not often seen. While plenty of content is displayed, you are never overwhelmed or confused. Content is easily findable, even if a bit hard ro read when crammed into the left column.

AntiSweden
AntiSweden has a full-screen video layout, accompanied by a two-box navigation to the right. When you navigate to a new page, the simple navigation scheme remains.

Samsung
Samsung has stylized navigation to the right that changes with the photo. The layout is easy to use, though occasionally confusing when new elements are introduced.

Love Bento
Love Bento groups its navigation in the lower-left with the bento box of content. While the website may appear overwhelming at first, you quickly realize understand how to find what you’re looking for.

Unusual Navigation

Developing a unique navigation scheme that does everything but conform can be a huge task, almost the Mount Everest of Web design. Not many people take on the challenge, and not many who do succeed. In this section, we cover both the victories and defeats. Unusual navigation requires a balance between innovation and practicality. If you lean too far towards innovation, the navigation can become frustrating and even unusable. The goal is to make the navigation intuitive enough for the website to be perfectly usable.

Unusual Navigation Best Practices

Unusual navigation has no set rules. Just think differently and try something that does not look, feel or function like your everyday website. And follow these guidelines:

Let your navigation float freely within the content, rather than using the typical “Z pattern” that helps users scan. Make sure the navigation is still clear and self-explanatory, even if it doesn’t sit in the usual location at the top. Make it intuitive yet simple, maybe with just a few symbols that expand into many options.

Use imagery instead of, or in addition to, text. Allow users to use the mouse buttons and click wheel as alternatives (with instructions, of course). Also allow keyboard navigation as an alternative (instructions again, please).

Finally, include arrows that visitors can use to cycle through the main sections without using the main navigation. Allow users to drag items to reveal new content, while maintaining usability and accessibility.

Lucuma
Lucuma displays some great art, but the initial lack of content is a bit confusing. The horizontal scrolling is also interesting, although the pages are so short that you can see multiple pages at once.

Okay Dave
Okay Dave puts its navigation at the bottom, while the different images point to the same content.

Marc Anton Dahmen
Marc Anton Dahmen combines mouse and keyboard options for navigation. Making the keyboard interact with the images and text is definitely unique. The configuration stands out while remaining practical.

Andreas Smetana
Andreas Smetana lets you use your mouse wheel or the arrows to navigate through photo thumbnails.

Snuggle Fux
Snuggle Fux takes a curious approach to layout and navigation, with functional expandable windows and no main navigation to be found. If you are looking for something in the 15 most recent topics, you should be fine; otherwise you will certainly give up and move on to another website.

Cypher 13
Cypher 13 has expandable navigation supported by photos and text. This style is interesting, functional and at times comical.

Im Design
Im Design lets you use your keyboard arrows and a few other keys to navigate the on-screen portfolio items. Some of the keys are not Mac-friendly, and visitors are forced to use the mouse on several occasions.

Mandchou
Mandchou offers a small content area designed mainly for viewing the portfolio, complemented by thumbnails at the bottom of the viewport.

Studio Stemmler
Studio Stemmler has a plain landing page. But as soon as you select a category, the interface changes and you have multiple ways to access content.

Lab for Culture
Lab for Culture has a unique and very interactive style of navigation for its case study section. After clicking through several types of navigation, the final presentation is useful and interesting.

Salinas
Salinas has a great “Wow” effect when you first select a section. Upon leaving the landing page, the appeal is lost, with the slow-loading content and awkward page transitions.

Got Milk
Got Milk puts its navigation front and center and never budges, although the icons become text on hover.

Ian Wharton
Ian Wharton uses a combination of navigation and arrows to let you cycle through content, with the option to view full-screen. The interface changes on interior pages, with the main navigation disappearing, leaving only a “Back” button.

Eric Johansson
Eric Johansson lets you drag the slider at the bottom not only to access different pages but to discover content, too.

Johnny Slack
Johnny Slack has a fun interactive navigation style that shows all of your options up front and then gives you the option to identify an item by category. When viewing projects, you are presented with expandable images.

Yodabaz
Yodabaz has a fresh and pleasing feel for its navigation, and you can find all the controls you would expect from a portfolio.

OFIS
OFIS borrows from the periodic table of elements for its navigation. It is minimalist yet useful, and it adapts when you enter a new section.

SensiSoft
SensiSoft has a familiar-looking information stand to help users connect with its unique style of navigation.

OFIS
Thibaud not only lets you drag with your mouse but takes a page out of the Pantone color book. Designers are familiar with this and know what to expect.

When Unusual Becomes Unusable

Not all unusual designs are as intuitive as their designers would like to believe. SOme can be more of a nuisance than a convenience. MIT offer some usability guidelines for websites, which are not detailed but still useful as a quick checklist. If your website’s purpose and content are not immediately understood, you may want to rethink your design. Your content’s structure does not have to be conventional, but it should be logical. Few things are more frustrating to a user than not knowing how to navigate content.

Think of your website like a brand new vehicle. It has some things you are used to: a steering wheel, gears, a seat, etc. When you first sit in it, you immediately recognize certain items, but not others. If the gear shift has been moved from between the seats to behind the steering wheel, you might be confused at first. Not knowing how to shift detracts from the vehicle’s functionality. So, the vehicle’s controls should be clearly labeled and feel natural to use. The relocation of the gear shift is one of the more drastic advancements in the usability of automobiles in recent years and feels quite different from the “layout” of typical car.

While creativity, uniqueness and pushing boundaries always benefit the Web community as a whole, usability is far more important. Your layout and navigation must be intuitive and easy to use to be successful.

About the author

Robert Hartland is a professional designer and photographer with over seven years of experience. He owns his own clothing company Envee Apparel, a creative theme-based lifestyle t-shirt company and accepts freelance work through his portfolio web site Aether Design.

(al)

About the Author

Comments and Discussions
  • Sara R, 08 January 2010

    Thibaud’s profile has been one of my favorites for a while, but I like some of the other interesting navigation ones you threw in! I especially like the unusual layouts – I’m getting more and more into the point that Drawar made yesterday (drawar.com/articles/are-homepages-dead-or-are-we-missing-the-boat/69/), and I firmly believe our pages need to reflect the content ON them and not necessarily be subjected to a generic template 100% of the time.

    These are some good examples, and when I redesign my portfolio (again) I’m going to see if I can incorporate a few different elements but still maintain cohesion!

    • sam, 10 January 2010

      I know what you were saying,
      however,this style is not available for electronic commerce sites
      this is my favorite style fo my blogs

  • Lam Nguyen, 08 January 2010

    Great designs collection here although some of them have been mentioned a thousand time already. However, this is a great article when you put nice comment on it!

  • Ben J, 08 January 2010

    What excites me from this list is are sites not built with flash. HTML, CSS, and Javascript are more natural to the web and frankly, I’m tired of seeing flash sites. Show me sites that are visually unique or dynamic that are not in flash. That’s what is cool and tough and overall more appealing.

    • Robert Hartland, 08 January 2010

      Ben,

      Flash is an amazing beast when it comes to building websites although many amazing things can be done without using flash as your base. This list is proof of the amazing things HTML, CSS and Javascript are capable of.

      • Ben J, 22 January 2010

        Thanks for the reply, Robert. When I said, “Show me sites that are visually unique or dynamic that are not in flash” I wasn’t speaking to you specifically, just making a challenge statement in general. Thanks again for putting this list together.

    • Pusparaj, 09 January 2010

      Yes, Agreed!

      • Mushroom, 11 January 2010

        I’ll second that. I have no love for the flash websites. When it comes to building websites, CSS, HTML and Javascript all the way. If your going to build an online game, use Flash.

  • Stephan, 08 January 2010

    Outstanding! One of the best articles I have seen!
    Stephan

    • Robert Hartland, 08 January 2010

      Stephan,

      I appreciate the compliment. I wanted to focus on an area that there was not a lot of information available about online. I hope the examples provide useful in future development.

  • Inside the Webb, 08 January 2010

    These are some really awesome designs! I have to say these are definitely unique and unusual, but very inspiring and some great articles. Thanks!

  • Eko Setiawan, 08 January 2010

    wow…very creative, and unusual, give inspiration for me. I agree with “usability is far more important”.
    Thanks…

  • Alex Flueras, 08 January 2010

    Great article, very inspiring. Here is another example of horizontal scrolling site: http://www.album.alexflueras.ro

  • sayan mukherjee, 09 January 2010

    Great and simply great compilation.
    Thanx.

  • Beck, 09 January 2010

    Great choise. Congratulations

  • Francoise, 09 January 2010

    Very simple and tasteful !!

  • Marcie, 09 January 2010

    Very good article. Extremely good investigation

  • AIR, 09 January 2010

    Congratulations to the author’s tasty choise and many new sites I have never seen before; AntiSweden, OFIS, Thibaud, FMCS … I am also a fan of clean and simple layouts

  • Tutorijali HDonWEB, 09 January 2010

    Excelent post, they realy are unusuaal :-)

  • Tom, 09 January 2010

    I have always enjoyed ux magazines unusual layout

    http://www.uxmag.com/

  • Langston Richardson, 09 January 2010

    Congrats to these sites that are fearless in pushing what s possible for the web in a creative, fearless, and bold way.

  • Simon Carr, 09 January 2010

    This is a fantastic list! I think it is really important for us, as web designers to push the envelope. Its 2010 and people are tired of seeing the same concepts.

    I am using mootools on the Projects page of my website to produce a pretty neat navigation technique…

    Good posting. Thanks for sharing.

  • member, 09 January 2010

    I just wanted to know, when I visit this website the titles come out in funny letters e.g. ‘ then e with a hat and so on. Do you know why this could be?

  • David B., 09 January 2010

    Very interesting article and website. I appreciate the experimental approach, but in reality, a good few of these sites would be impossible to use commercially. There are some good ideas, but many users would be frustrated with the lack of an intuitive interface. The Max Haus website looks pretty but is horrendous navigation wise, and Webbli World is way too cluttered as well as giving you no information about why you’d want to… do whatever you do on that site… I think it is some sort of game? Great design inspiration though!

  • kami, 10 January 2010

    Nice designs,
    thx
    Kami

  • veronika, 10 January 2010

    very good research and website listing

  • Jan Srutek, 10 January 2010

    Those are some interesting designs. Thanks for the post,
    Robert.
    Just to add to your comment about focusing on faces:
    Faces are only one of the multiple Focal points that usually draw users’ attention. Others are e.g.: whitespace, high contrast, salient size/colour/position, converging lines, hard edges, and motion.
    More on that in Tidwell’s book Designing Interfaces.

  • Theo, 10 January 2010

    Realy unusual and very interesting sites, lots of inspiration. How much time do they needed to create Sensisoft`s website ?

    Very good article, thank`s for sharing

  • Gonzo the Great, 10 January 2010

    Hi,

    love some of the unusual layouts, is a good inspiration resource. The unusual navigation I’m not very keen about, navigation should be simple, always on the same spot and without an (written) explanation of the (nutty) designer.

    Keep the navigation simple and stupid, my grandma has to know how to navigate too! Cheers & Ciao …

  • fox Ramesh, 10 January 2010

    Great Idea….. I like toooo much, thanks for these kind of collections…. cheers!! ;)

  • foxramesh, 10 January 2010

    Very unusual designs….. great collections…. cheers! ;)

  • bono calacal, 10 January 2010

    Nice post! Thanks for sharing.. When unusual becomes unusable – I think most of the time the unusual becomes really more interesting specifically in user navigation part of the design. :D

  • VP, 11 January 2010

    Check this out:

    http://www.factual.es/periodico/24-12-2009/#page:1

    It’s a Spanish digital newspaper.

  • Awesome Collection of website listing

    I was looking for it. Thanks for sharing this nice post.

  • Web Design Cambridgeshire, 11 January 2010

    These are all fantastic! Thanks for these.

  • Krystian, 11 January 2010

    Very good job. It is good to explore some new ideas.

    Thanks.

  • Phil Rodriguez, 11 January 2010

    Thanks for sharing. Best set of websites i have seen for a long time. Will check out the usability factor. Great job!

  • Isaacson, 11 January 2010

    don’t forget http://www.booneoakley.com, this is a very creative idea. No website to speak of, just a series of interlinked videos on youtube.

  • Shea, 12 January 2010

    Jim Carrey’s website is one of the best launched last year and has an incredible navigation and layout. It should be on this list as well!

    http://www.JimCarrey.com

  • Peter, 18 January 2010

    Check out this:
    nice Portfolio with a great 3D navigation.
    http://www.matthiasdittrich.com

  • Miquel Desoto, 04 March 2010

    Hey, I came across this blog article while searching for help with JavaScript. I’ve recently switched browsers from Google Chrome to Internet Explorer 7. After the change I seem to have a problem with loading JavaScript. Everytime I browse page that needs Javascript, the page doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix the problem. Any help is greatly appreciated! Thanks

  • Boss Office Chair, 01 May 2010

    Just to let you know your site looks really weird in Safari on a mac Schwinn Double Stroller

  • Jan, 11 May 2010

    I enjoy this list very much. Unfortunately it seems as if the website johnnyslack.com does no longer exists.

    Great article!

    Jan

  • Daren Loree, 07 June 2010

    isolated site, when fall for due content, trail more visits. Your site is excelent.

search form
 
image description image description