40 Creative Design Layouts: Getting Out Of The Box

Advertisement

Over the last months we have seen a strong trend towards more individual web designs. These designs use realistic motifs from everyday life, such as hand-drawn elements, script fonts, pins, paper clips, organic textures and scrapbooks. That’s not a big surprise as they serve the function that faceless, shiny, glassy 3D-buttons completely fail to deliver: individuality and personality. “Personal” designs appear more familiar and more friendly. Used properly, such elements can give a human touch to design and communicate the content in a truly distinctive manner.

However, apart from visual design elements, one can also get creative with the layout of the site – its structure and the way the information is presented and communicated. To give you some ideas of how exactly it can be done, we have been collecting examples of creative design layouts. Design was more important to us than a concrete implementation of some creative idea. We also weren’t interested in whether the code validates or not. Below are some examples we have found so far.

In the showcase below we present 40 creative out-of-the-box layouts that break the boring 2- and 3-columned, boxed layouts. We have collected pure CSS -designs, CSS+JavaScript -layouts as well as Flash -designs. Most designs presented below risk their site structure and content presentation with unusual approaches. That’s what makes them different. Hopefully you will find some creative ideas that you can develop further in your future projects.

We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

20 × Getting Creative With CSS

Pavel Buben1
Pavel Buben uses a magazine cover-style layout for his one-page-site. Unfortunately, there are no internal pages — it would be interesting to seek how they would be designed. An interesting and unusual approach.

Showcase of Unusual Layouts - Pavel Buben2

AIGA Los Angeles3
AIGA Los Angeles uses boxes in a creative way. All design elements are placed according to the underlying grid, however they clearly break out of the boxes. This approach creates tension within the design and looks truly distinctive.

Showcase of Unusual Layouts - AIGA Los Angeles4

SpaceCollective5
For its gallery section SpaceCollective uses a five-column grid. Text and images are perfectly placed on the grid giving the layout a complete form and a sense of order. Notice various font sizes and text styling in the design — they introduce a profound visual hierarchy into the layout that works perfectly within the complex, unpredictable layout.

Showcase of Unusual Layouts - SpaceCollective6

Jason Santa Maria7
Jason Santa Maria has taken a truly different route with his site layout. Each article is laid out differently, with strong focus on typography and visual clarity. Below three of the layouts are presented. You may have a hard time finding similar layouts on the Web.

Showcase of Unusual Layouts - Oh, Snap @ Jason Santa Maria8

Showcase of Unusual Layouts - Explain Yourself | Jason Santa Maria9

Showcase of Unusual Layouts - Jason Santa Maria10

Checkout: Point of Sale for Mac (POS)11
At the first glance, Checkout looks like an ordinary Apple grid-layout. What makes the layout interesting is not only the position of its visual elements, but the fact that each section of the page has its individual (although consistent) design. Still, the layout is very scannable and intuitive.

Showcase of Unusual Layouts - Checkout: Point of Sale for Mac (POS)12

NOFRKS.design13
NOFRKS uses JavaScript to slide between various parts of the site. What we found more interesting was the way the content is presented. Most elements are placed within a context, giving the content a secondary meaning.

Showcase of Unusual Layouts - NOFRKS.design14

SMS Parking15
At the first glance SMSParking has no layout at all. The design appears to be one single illustration — all elements fit perfectly with each other, creating visual harmony and a sense of balance and closure.

Showcase of Unusual Layouts - SMS Parking: Welcome16

Matriz Communicacao17
This Brazilian company delivers a perfect example of how design and content can seamlessly be integrated within a complete yet simple layout.

Showcase of Unusual Layouts - MATRIZ COMUNICAÇÃO18

Mihmorandum19
Mihmorandum uses a common 3-column-layout in an unusual way. Although the structure is quite usual, the design itself looks distinctive and resembles a pile of paper put inside a folder.

Showcase of Unusual Layouts - Mihmorandum: The Small Business Web Design + Local SEO Blog20

3rdM21
3rdM uses icons to indicate various navigation options. This is not a type of layout you will find in many other web designs. And that’s what makes the layout creative.

Showcase of Unusual Layouts - 3rdM22

Nile Inside23
Many portfolios use vertical layout to showcase their works. Nile.ru displays its works in a chronological order as if it was a horizontal blog.

Showcase of Unusual Layouts - Nile Inside / years-200824

Rockatee25
Rockatee uses asymmetry to position content blocks in an unusual yet appealing style. Notice that the left block perfectly aligns with the navigation option “Home” at the top of the page. The screenshot in the middle of the page spans exactly two navigation options and has the same width as the description block on the right side of the page.

The distortion in the layout is caused by the underlying organic texture. Although the design is perfectly aligned according to the grid, it seems to be chaotic at first glance. The tension between order and chaos creates tension in the layout and looks very appealing.

Showcase of Unusual Layouts - Rockatee Home26

Get London Reading27
An effective background image can help a layout stand out. The effect achieved here fits with the objective of the project — to encourage people to read more.

Showcase of Unusual Layouts - Get London Reading28

BL:ND ( blind )29
At the first glance, the layout looks underwhelming. What distinguishes it, though, are the choice of images sizes and a good use of white space. Notice how well negative space is used in the sidebar, where individual elements are clearly separated and properly aligned. The width of the images equals the width of the content blocks. Yes, the layout is boxy, but the wise use of whitespace makes it far from boring.

Showcase of Unusual Layouts - BL:ND ( blind )30

The portfolio of Hannibal31
Usually, navigation menus are placed in the sidebar or at the top of the site. William F. Leffert does it differently. His non-linear layout literally breaks out of the boxy structure and offers something quite different. Sometimes it’s enough to simply experiment with the position of design elements to achieve striking design solutions.

Showcase of Unusual Layouts - The portfolio of Hannibal, Missouri artist, web designer, photographer, musician, and composer: WFL32

URLshrinker
Creative design solutions can be as simple as this one. An elegant and attractive layout by URLshrinker.

Showcase of Unusual Layouts - URLshrinker

15 × Getting Creative With CSS+JavaScript

ShopComposition33
ShopComposition offers a sliding navigation at the top of the site. Users can choose the content they would like to read and select the width of the content blocks. This store has an integrated blog and some further projects (such as picture-a-day) to attract customer’s attention. JavaScript in use.

Showcase of Unusual Layouts - ShopComposition | Composition | Outfitting Designers Since 200334

forgetfoo35
Forgetfoo uses an almost minimalistic, simple layout with a sidebar and a content area. Designers removed all necessary and unnecessary details focusing only on last blog entries. The design doesn’t contain any category navigation options. That’s unusual, but may be a little bit too much of the minimalism. Navigation through blog posts is realized with Javascript.

Showcase of Unusual Layouts - foo // it36

Include37
On Include one content block and the corresponding navigation block seem to “hang in the air”. Essentially the page has two columns; however. the layout seems to be quite original — maybe because of the cows placed on the background for some reason. The navigation on the right-hand side is realized with Javascript.

Showcase of Unusual Layouts - Include38

Kobe39
The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. Once one of the sections is clicked, the main content area slides vertically — first the background image, then the content. If the content area also has some navigation options, they are slided vertically as well. In this situation it might be a slightly better design decision to use horizontal navigation instead to make it easier for visitors to distinguish between the primary and secondary navigation.

Kobe40

tap tap tap41
tap tap tap uses a bold and eye-catching layout to deliver the message to its visitors. The layout, although basically consisting of the sidebar and content area, is not boring at all and looks attractive. The left-hand side navigation and further effects are created using JavaScript.

Showcase of Unusual Layouts - tap tap tap ~ Groceries42

youlove.us43
The layout on youlove.us is definitely very vibrant. It uses a large vivid background-image and a the scroll-effect to enable users to quickly jump from one section of the site to another. Notice that the navigation area is repeated four times, in each of the categories. Sliding effects are also used for each of the categories. Instead of using 20 separate page, the layout combines them all on one single page. The result is compact and user-friendly.

Showcase of Unusual Layouts - youlove.us44

Method: A Brand Experience Agency
This design agency uses a flexible JavaScript-based layout which updates its size depending on the browser window size. The content is “packed” in boxes is usual for such a grid-based design; however, the alignment of the boxes makes the design literally stand out.

Showcase of Unusual Layouts - Method: A Brand Experience Agency

Viget Labs45
Viget Labs also uses a sliding navigation and a horizontal scroll-effect to make the user interaction more dynamic and hence more appealing. However, more importantly, the layout itself stands out: the layout is invisible and resembles interactive Flash-interfaces. CSS+JavaScript in use. Smashing says: five out of five stars.

Showcase of Unusual Layouts - Viget Labs46

Lucuma47
Lucuma also uses horizontal layout as well as a horizontal slider-navigation. The simple yet effective integration of background images, navigation, videos and content makes the layout unusual and distinctive.

Showcase of Unusual Layouts - Lucuma48

Axel Peemoeller Design49
On this page all design elements are draggable and some of them are clickable. Images seems to be thrown on you in the first moment, but in the end they all make sense. This is an unusual portfolio which is memorable and interesting to explore.

Showcase of Unusual Layouts - Axel Peemoeller Design50

IDEO51
IDEO presents everything on its main page. The navigation options are placed in the black boxes and somehow arranged among other content boxes. Once one of the black boxes is hovered, related content blocks are highlighted. That’s not something most users would expect from a layout.

Showcase of Unusual Layouts - IDEO52

Bohdan Levishchenko53
Bohdan Levishchenko uses the same approach as IDEO, but presents all navigation option at the top of the page. Single works are presented as images under the navigation and spread throughout the layout.

Showcase of Unusual Layouts - Bohdan Levishchenko54

MelissaHie.com55
Melissa Hie places all deign elements on a single large page. Visitors are basically driven from one site are to another using a scroll-effect.

Showcase of Unusual Layouts - www.MelissaHie.com56

Hotel Oxford – Timisoara57
A single-page-site with a very calm and comforting layout. All navigation options are available at the first glance. Once some of the options is clicked, the content block on the left is dynamically replaced. The logo of the Hotel Oxford always remains on its place.

Showcase of Unusual Layouts - Hotel Oxford - Timisoara58

thruSITES / Portfolio59
In this portfolio the illustrations of a designer’s works seem to somehow be loosely placed on an invisible rope. When one of the illustration is clicked, all other elements arrange themselves in such a way that the content which this illustration represents becomes dominant.

Showcase of Unusual Layouts - thruSITES / Portfolio60

Erwin Bauer KEG61
The portfolio site of Erwin Bauer takes a different approach to using a pannable user interface, but implementing in JavaScript rather than in Flash. The site allows users to click and drag to pan the canvas, or to use links positioned around the content to move around. The design is clean, and mimics a design document with regisration and crop marks, and visual cues about the directions the canvas will pan to when you navigate. [via62]

Showcase of Unusual Layouts - Erwin Bauer KEG – Designbüro für Konzept & Gestaltung63

5 × Getting Creative With Flash

The Secret Location64
The Secret Location, a media agency based in Toronto, Canada exemplifies their work, by providing an immersive flash experience around a conjured up story leading a character to follow a mysterious path that leads to the secret location. Very interactive approach, a very unusual site layout. [via65]

Showcase of Unusual Layouts - The Secret Location - 416 849 5298 - Interactive Media Production, Ideas, Experience Design, Tangible Media, Animation and Motion Graphics66

Kamil Gottwald67
In his layout Kamil Gottwald enables users to define the width of site columns manually. To navigate vertically users need to scroll horizontally. Hence no vertical scrollbar is necessary. Multiple site views are possible.

Showcase of Unusual Layouts - Kamil Gottwald - interactive developer68

Grooveshark Lite 69
Grooveshark seems to imitate an iPod-interface and does it indeed very well. Although it may be not very creative, such layouts are hard to find on the Web.

Showcase of Unusual Layouts - Grooveshark Lite 70

Jeremy Levine Design71
Flash offers many creative possibilities for an interactive navigation design. Jeremy Levine uses dynamic paper strips which seem to hang in the air.

Showcase of Unusual Layouts - Jeremy Levine Design72

SeymourPowell73
SeymourPowell has come up with an interesting idea to provide its visitors with some intuition of how good its work is. Click on the pile to find out.

Showcase of Unusual Layouts - Product Designers74

Muku Studios75
“Let Muku Do You”: this friendly buddy just wants to remain visible and hence he tries to find some place on the screen to keep an eye on site’s visitors. The layout of the site is simple yet memorable — well, Muku makes sure he’ll be remembered after the browser window is closed.

Showcase of Unusual Layouts - Muku Studios | Let Muku Do You76

Related Resources

You may also be interested in the following articles we published earlier:

Footnotes

  1. 1 http://www.pavelbuben.cz/
  2. 2 http://www.pavelbuben.cz/
  3. 3 http://aigalosangeles.org/chapter/
  4. 4 http://aigalosangeles.org/chapter/
  5. 5 http://spacecollective.org/gallery/
  6. 6 http://spacecollective.org/gallery/
  7. 7 http://jasonsantamaria.com/articles/cheesesteak-crawl/
  8. 8 http://jasonsantamaria.com/articles/oh-snap/
  9. 9 http://jasonsantamaria.com/articles/explain-yourself/
  10. 10 http://jasonsantamaria.com/articles/cheesesteak-crawl/
  11. 11 http://www.checkoutapp.com/
  12. 12 http://www.checkoutapp.com/
  13. 13 http://www.nofrks.com/
  14. 14 http://www.nofrks.com/
  15. 15 http://www.nikolamircic.com/archive/sms/index.html
  16. 16 http://www.nikolamircic.com/archive/sms/index.html
  17. 17 http://www.matrizcomunicacao.com.br/html/index.html
  18. 18 http://www.matrizcomunicacao.com.br/html/index.html
  19. 19 http://www.davidmihm.com/blog/
  20. 20 http://www.davidmihm.com/blog/
  21. 21 http://3rdm.org/
  22. 22 http://3rdm.org/
  23. 23 http://inside.nile.ru/#years-2008/
  24. 24 http://inside.nile.ru/#years-2008/
  25. 25 http://rockatee.com/
  26. 26 http://rockatee.com/
  27. 27 http://www.getlondonreading.co.uk/Home
  28. 28 http://www.getlondonreading.co.uk/Home
  29. 29 http://www.blind.com/
  30. 30 http://www.blind.com/
  31. 31 http://www.classicwfl.com/
  32. 32 http://www.classicwfl.com/
  33. 33 http://www.shopcomposition.com/
  34. 34 http://www.shopcomposition.com/
  35. 35 http://www.forgetfoo.com/
  36. 36 http://www.forgetfoo.com/
  37. 37 http://www.include-digital.com/
  38. 38 http://www.include-digital.com/
  39. 39 http://www.arcinspirations.com/kobe/
  40. 40 http://www.arcinspirations.com/kobe/
  41. 41 http://www.taptaptap.com/#groceries
  42. 42 http://www.taptaptap.com/#groceries
  43. 43 http://youlove.us/
  44. 44 http://youlove.us/
  45. 45 http://www.teamviget.com/
  46. 46 http://www.teamviget.com/
  47. 47 http://lucuma.com.ar/
  48. 48 http://lucuma.com.ar/
  49. 49 http://de-war.de/
  50. 50 http://de-war.de/
  51. 51 http://ideo.com/
  52. 52 http://ideo.com/
  53. 53 http://creativeperson.info/
  54. 54 http://creativeperson.info/
  55. 55 http://melissahie.com/
  56. 56 http://melissahie.com/
  57. 57 http://www.hotel-oxford.ro/
  58. 58 http://www.hotel-oxford.ro/
  59. 59 http://www.web-developers.net/portfolio/
  60. 60 http://www.web-developers.net/portfolio/
  61. 61 http://www.erwinbauer.com/
  62. 62 http://konigi.com/design/erwin-bauer-keg
  63. 63 http://www.erwinbauer.com/
  64. 64 http://www.thesecretlocation.com/
  65. 65 http://konigi.com/design/secret-location
  66. 66 http://www.thesecretlocation.com/
  67. 67 http://www.iameuropean.com/
  68. 68 http://www.iameuropean.com/
  69. 69 http://listen.grooveshark.com/
  70. 70 http://listen.grooveshark.com/
  71. 71 http://www.jeremylevine.com/
  72. 72 http://www.jeremylevine.com/
  73. 73 http://www.seymourpowell.com/
  74. 74 http://www.seymourpowell.com/
  75. 75 http://www.mukustudios.com/
  76. 76 http://www.mukustudios.com/
  77. 77 http://www.smashingmagazine.com/2008/08/06/design-showcase-of-creative-online-shops/
  78. 78 http://www.smashingmagazine.com/2008/04/02/39-creative-flash-designs/
  79. 79 http://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/
  80. 80 http://www.smashingmagazine.com/2007/07/17/exploring-design-outstanding-start-pages/

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    Some of these I disagree with, but for the most part, they are very creative, beautiful designs, while also being user-friendly. I think one of the hardest parts of web design is walking the thin line between creative and usability. A lot of web designers end up trying to be too creative. It would do them some good to look at some of these sites, especially the one for “Kobe”.

    One comment I saw on here had a really good point that too many websites are WordPress themed. I see TONS of corporate websites(even online stores) that use a WordPress theme and it makes me cry alittle. Why would anyone think it’s a good idea to use a blog as the main website for a business? Especially when they don’t even use it as a blog!

    4
  2. 102

    Please have a look, in case you may like this online magazine http://www.atolmag.com

    2
  3. 203

    Sae.. sae.. sae keur inspireysyen… hatur nuhun.. mangga, ah!..

    1
  4. 405

    most of them are wonderful~~~
    but not all….

    2
  5. 506
  6. 607

    Good post! It was a useful article for web designers and programmers. Thanks.

    0
  7. 708

    nice website collection. your collection is very helpful.

    0
  8. 809

    this is crap, due to the fact that it doesnt tell you how you should design a magazine aticle in a formal or informal way. So this does not explain anything, all this has is pictures with page of an magazine with a small writing on the bottom. start opening your eyes a bit and wake up.

    5
  9. 910

    Awesome. Very out-of-the-box! Thanks for sharing.

    0
  10. 1011

    That was great! Thanks for sharing those :) Looking forward to seeing more.

    Cheers,

    Norah

    0
  11. 1112

    Nice Creative Design this is most useful for other Creative Design…

    Thanksss…

    0
  12. 1213

    what a beautiful site. thank u so much for sharing those !

    0
  13. 1314

    dis haz rly halped me

    0
  14. 1415

    Please forward this email to the Vice President Gerold P Coyle . We grew up together as best friends , but lost contact with him in 1989 . Would like him to contact me by this email address . Tried several times through the years to contact him with no sucess until today when I typed in his name ” Gerald P Coyle in California ” . When his picture came up I new it was him . Even after all of these years . Much to talk about . Hope to here from him soon . Thankyou . Sincerely, Todd B Grob

    -5
  15. 1516

    These are really creative. I think I like Matriz Communicacao the best but they are all superb.

    1
  16. 1617

    great Layouts .hat’s off

    1
  17. 1718

    Best ! is Axel peemoeller :)

    2
  18. 1819

    Great inspirational layouts^^

    2
  19. 1920

    hi its zohaib i really like the designs you given up. i want wo see more designs like this and get ideas for new designs.

    1
  20. 2021

    Great layout

    i want wo see more designs and get ideas for new designs

    2
  21. 2122
  22. 2223

    Where do you find all these websites and how do you decide which ones to put in your list?

    0
  23. 2324

    Awesome collections. I wish my site will also be in this list.. :)

    Check my creative website made with HTML5/ CSS3 http://www.libin.in/

    0
  24. 2425

    Beautiful Ideas ….

    0
  25. 2526

    Most of these websites have changed now making the links useless…

    0
  26. 2627

    If people start thinking related to their work and love their work then the creativity element. Creativity is always important it attracts visitor and force to visitor to reveal every secrets of websites. Creativity adds an extra element .

    0
  27. 2728

    grate designs i want see more designs and get ideas for new designs which will give you life to me thankssss….

    0
  28. 2829

    I have clicked on 7 different layouts and got errors on every one. Is this article too old to be accurate? Something needs to be done about the fact that most of your examples don’t exist.

    -1

↑ Back to top