Breaking the Norm: Unusual and Creative Web Layouts

Web design does not have to be limited to a typical grid structured layout. It sometimes feels like we are locked in an endless cycle of header, content, sidebar and footer. That is it. It would be great if we could to tear away from convention sometimes and also force ourselves to break some usability rules. Just imagine what we could create.

In today’s post we have for you a selection of sites that do exactly as described above: they break convention and the result is that they have built some amazingly creative web layouts which, in most cases anyway, are a little unusual as well.

The Secret Location

The Secret Location presents their work by creating the story of a character who follows a strange path to the secret location. Extremely synergistic approach with an extraordinary site layout.

The Secret Location example unusual layout web design creative

Marshall Haber

This Flash site uses a subway map as a preloader and once it has loaded you’ll be amazed at the detail and creativity of its design and highly original navigation.

Marshall Haber example unusual layout web design creative

Grzegorz Kozak

Very intriguing and interactive layout that presents a beautiful background image of a tower. Clicking on the top menu will take you to the relevant section on the page.

Grzegorz Kozak example unusual layout web design creative

Accept Joel

This horizontal scrolling portfolio website has a unique navigation that asks you to choose from one of five steps that will then scroll to the relevant page.

 example unusual layout web design creative

Thibaud

I love this website. The carefully placed navigation elements have a beautiful mouse over effect and sound. You can drag and drop the elements and can click on each to further explore the site.

 example unusual layout web design creative

Get London Reading

This layout has been designed as though you’re reading a book while sitting in a park.

 example unusual layout web design creative

Basil gloo

The center part of this website is what that make it stand out from the rest. The eye-catching green carpet looks terrific.

 example unusual layout web design creative

Colourpixel

Full of beautiful and vivid colors that grab the attention and develop your interest in the website to browse further.

 example unusual layout web design creative

Dave Werner

This portfolio site make use of a ‘scrap-book styled’ content area that allows you to explore the portfolio in a unique way.

 example unusual layout web design creative

Pretty Production

A very unusual, colorful and creative layout with horizontal scrolling.

 example unusual layout web design creative

Rich Brown

This website is equally divided into two parts. One is completely static with a very nice background image while the other part is scrollable with different tiles where you can click on to browse further.

 example unusual layout web design creative

Matthias Dittrich

You will love browsing through this truly interactive design portfolio site. Simply drag in to scroll.

 example unusual layout web design creative

Real Visuals

With this site, you will discover lots of interactive design elements that add beauty and originality.

 example unusual layout web design creative

Play Jambalaya

An iOS word game app website with bizarre color contrast and some unique interactive elements.

 example unusual layout web design creative

Sitotis

This website has been designed to give you the impression that you are flipping through a personal diary.

 example unusual layout web design creative

Gavin Castleton

This site has been designed to highlight the split personality of each of the musicians albums. Simply choose the album or personality you would like to explore.

 example unusual layout web design creative

Samsung Mobile

This impressive website is easy to use, although it can at times be confusing as new elements are brought in.

 example unusual layout web design creative

Alexbuga

This is a fantastic site with creativity brimming from all angles. The navigation is hidden behind the glass panels of the entertainment center.

 example unusual layout web design creative

Level2

 example unusual layout web design creative

McDonalds

This site has been designed to give you the impression you are walking into a generic McDonalds outlet.

 example unusual layout web design creative

Loysels Toy

 example unusual layout web design creative

Felixng

This dark site, on first load, presents itself with an almost blank layout. But when you move your mouse over the red blocks the attractive navigation appears and brings the site to life.

 example unusual layout web design creative

Nofrks

 example unusual layout web design creative

Tri Win

The background image of this site completely fits the company, which offers mailing services.

 example unusual layout web design creative

Classicwfl

Typically the navigation is positioned in either the sidebar or at the top of a site. Classicwfl takes a different route. The non-linear layout breaks past a typical boxy structure and offers something completely original.

 example unusual layout web design creative

Team Viget

Viget Labs uses a sliding navigation and a horizontal scrolling effect to make the user interaction more vibrant and interesting. However, even more outstandingly, the layout itself stands out: the layout is indistinguishable and resembles interactive Flash-interfaces.

 example unusual layout web design creative

Kamil Gottwald

In his layout Kamil Gottwald allows users to determine the width of the sites columns. To navigate vertically users require scrolling horizontally. Consequently no vertical scrollbar is needed. Multiple site views are possible.

 example unusual layout web design creative

Jeremy Levine Design

 example unusual layout web design creative

Pieoneers

This website presents the different components of web application development as different ingredients of a recipe. Nice touch.

 example unusual layout web design creative

SeymourPowell

 example unusual layout web design creative

Self Titled

Self Titled presents a single big circle at the center of the page. Clicking anywhere on the ring will reveal the actual component and clicking on the plus sign will further reveal content.

 example unusual layout web design creative

Agency Net

A very interesting site to browse. Simply click on the section you want to browse.

 example unusual layout web design creative

Elite Webmaster

A somewhat similar approach to that of Agency Net above. You can scroll up and down and click on each section for further information.

 example unusual layout web design creative

Leoburnett

Here you will come to see a very different style of navigation. The mouse over effect is as though you are moving a pencil on a paper. Simply click on the sub-menu to explore further.

 example unusual layout web design creative

(648 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter.

Comments

  • Bruno Mota

    While there are some great sites there, most of them are painfully slow to load, even with a high speed internet connection. I believe that is the reason why most web designers and agencies have abandoned flash development. Most of them are not ready for being seen in a smartphone or other kind of media and resolutions. Still, very nice concepts on some of the sites, maybe we would see this kind of interaction and animation from now on with the help of HTML5, CSS3 and javascript.
    Thank you for this selection.   

  • Great selection.

  • JuJu Bean

    While these are “creative”, many fail usability standards. They should spend a few minutes with Jacob Nielsen. 

  • aflorescu

    Cool!

  • Some very cool stuff – all visually stunning and very creative. My problem with sites like this is that they’re often so hard to navigate – one spends an inordinate amount of time hovering over icons and clicking random pictures in order to figure out what’s going on, and it can become quite tiresome. Still, very nice. The subway site (Marshall Haber) is quite impressive.

  • Dicky

    I don’t like the circle site… it’s too… round.

  • Thirion Stéphane

    Great article for inspiration!