Creative and Unusual Layouts and Navigation Designs

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.

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 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 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 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 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 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 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 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 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'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 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 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 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 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 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 puts its navigation at the bottom, while the different images point to the same content.

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 lets you use your mouse wheel or the arrows to navigate through photo thumbnails.

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 has expandable navigation supported by photos and text. This style is interesting, functional and at times comical.

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 offers a small content area designed mainly for viewing the portfolio, complemented by thumbnails at the bottom of the viewport.

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 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 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 puts its navigation front and center and never budges, although the icons become text on hover.

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 lets you drag the slider at the bottom not only to access different pages but to discover content, too.

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 has a fresh and pleasing feel for its navigation, and you can find all the controls you would expect from a portfolio.

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 has a familiar-looking information stand to help users connect with its unique style of navigation.

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)