When you are creating a new website you may be inspired by seeing other sites that feature unique layouts. The 20 sites listed here don’t simply use a typical two or three column layout. Many of them use background images to interact with and control the layout in some unique way. Some of them I really like, and some I’m not sold on, but all are unique in one way or another.
Popmatik - Freelance web designer Rob Leach uses a unique layout for his portfolio site. The site uses a background image of a bottle and the content of the site appears to be on the label of the bottle.
Digitalmash.com - Digital Mash is the home of Australian web designer Rob Morris. What makes the layout unique is the background image of Rob holding the content of the page.
Melissahie.com - A portfolio site with a different twist, MelissaHie.com leads the visitor through a series of different sections of one page that include links to websites in a portfolio, a brief bio, and contact information. As you click on links, you will slide to a different section of the page.
Evanescenceuk.co.uk - The British website of American rock band Evanescence uses a horizontal layout and a navigational scheme similar to MelissaHie.com, where the visitor slides across the site when using the navigation rather than being taken to a separate page.
Sitotis.hr - The background image for Sitotis is a binder that contains the content of the page. Tabs in the binder are used for navigation.
Mussatto.com.br - Mussatto uses a long, horizontal layout that doesn’t require vertical scrolling as opposed to the standard, tall layout.
Basil Gloo - Web Developer Basil Gloo uses an interesting layout on his homepage that separates the page into a left and a right side. The left side contains his personal information and the right side his business information.
Danviv.net - The portfolio site of Dan Viveiros uses a unique layout and several images of cassette tapes.
CraigEarl.co.uk - Photographer Craig Earl uses a layout that features four tall and narrow images that link to different categories of photos in his portfolio: everyday, landscapes, bands, and people.
JeremyCowart.com - Another interesting photography portfolio site, JeremyCowart.com places all of the emphasis on the pictures by taking you straight to the photos in the portfolio. Rather than making you click a few links to get to the photos, they are right there, one on top of the other. What’s most unique is that to get to any content other than photos you can visit the contact, news, and project links.
Huge - This design company uses a large image on the left side of the homepage with the primary navigation and content in a narrow column on the right.
Interview Magazine - Another horizontal layout, Interview Magazine presents a different visual impression than other online magazines.
The Horizontal Way - As a gallery of horizontal websites, The Horizontal Way naturally uses a horizontal layout itself.
Swiths.com - This website uses a large background image of a wood floor and a guy’s feet. The content of the site is on a piece of paper and a notepad laying on the floor.
Davor van Eijk - The homepage of Davor van Eijk places navigation in the center of the page on an angle. The content of the page is in the lower right hand corner.
Ribbit.com - This layout features a large background image of a man sitting on the grass. The sky in the picture becomes the background of the page. The picture and how it interacts with the layout is really what give the page a unique feel.
BootB - This site uses a black background and some drawn clouds at the top of the page. The center of the page contains navigation in a circle that is part of an image of a hot air balloon that is about to float to the clouds.
Vesess - Vesess uses a simple header that includes navigation and then goes into an image right at the focal point of the page. If you scroll down you will see the use of a few columns for some basic information. While it is maybe not as different as many of the sites on this list it is still a break from the norm.
Dinulovic.com - The Dinulovic homepage contains no real content. It uses an image at the center of the layout with navigation on both sides.
StoryAbout.net - The homepage of Hansol Huh’s portfolio site uses a large image that says “Life is Random” in dots. Below the image is a link to the portfolio.
96 comments from readers
1 Matthew Griffin Jan 1, 2008 at 6:36 pm
Great list, Steven. It’s difficult to break out of those tidy two column CSS layouts sometimes. Thanks for the inspiration.
2 TyCat Jan 1, 2008 at 6:44 pm
this is a nice look at the more creative side of design
3 Vandelay Design Jan 1, 2008 at 7:09 pm
Matthew and TyCat,
Thanks for your feedback. I think it’s nice just to see how some designers are using creativity.
4 Neena (NeenMachine) Jan 1, 2008 at 7:19 pm
These are very creative. With a design like this, I would almost venture to say that content doesn’t matter, the packaging is fantastic!
5 Simon Ward Jan 1, 2008 at 7:59 pm
Wow, some very cool site designs here Steven.
6 pablopabla Jan 1, 2008 at 8:21 pm
Those sites are really beautiful. Are you going to use the ideas for your projects?
By the way, good to see the Digg button. It’s long overdue. And the 125×125 ad space is timely. I’m sure you’ll get some advertisers soon
7 Carlos Leopoldo Jan 1, 2008 at 8:32 pm
Very creative layouts but some of them are unusable
8 Jermayn Parker Jan 1, 2008 at 10:03 pm
There are some really good ideas there, I love the Evanescence layout as well as the Rob Leach, Sitotis and Davor van Eijk designs, very unique.
Thanks for showing us them
9 Links « Matt Howell’s World Jan 1, 2008 at 10:31 pm
[…] http://vandelaydesign.com/blog/design/unique-website-layouts/ […]
10 Wayne Liew Jan 1, 2008 at 10:52 pm
Creative sites like these often own the world when their screenshots are published.
Some creative sites have gone overboard with their creativity, causing the usability of their sites to falter. Also, some creative designs such as using a lot of images or Flash application will throttle the web surfing experience of web users.
Anyway, great compilation of sites which took some of time to navigate within them to experience the cool elements, such as scrolling sideways (don’t let me see this in blogs please) in Evanescence’s site.
11 Ruchir Jan 2, 2008 at 2:26 am
Some great research there, Steve. Informative article. It shows how to stand out from the crowd. Of course all those elements won’t really look nice on blogs. Why don’t you do another post, Steven: 20 Blogs with Unique Layouts. I’m sure you’ll find some
12 Eric D Jan 2, 2008 at 5:33 am
Do you think we will be seeing more horizontal sites in the future? It almost reminds me of flipping through a magazine rather than a website that changes pages as opposed to “sliding” over to the next topic.
I may have to try to incorporate that in one of my next sites.
Thanks for the look at these great sites………….eric aka NoviceSEO
13 Eric Jan 2, 2008 at 6:06 am
I enjoy looking at sites that break away from the norm. They really work well for certain purposes. As a portfolio or gallery, they’re great. However, if you’re looking for a way to display information… simple is good.
In my opinion, a website should showcase its design OR its information. Both is simply too distracting.
14 pearl Jan 2, 2008 at 7:01 am
nice collection Steven, but I’d like to hear which designs you ‘really like’
good to see you monetizing a bit and yes that Digg button was so needed on your posts!!
15 Ahead Directory Jan 2, 2008 at 7:47 am
awsome! these are really very creative layouts, i must say. keep up the good work.
16 LGR Jan 2, 2008 at 7:48 am
I stopped looking at the sites when they started to resize my browser, use flash only and eventually crash my entire browser. Beside the fact that the sites “look cool” what criteria did you use to pick them? Certainly websites that are resizing browsers, using only flash and eventually crashing browsers are not very user friendly.
17 Dave Walker Jan 2, 2008 at 8:07 am
I’ve been seeing the trend towards horizontal layouts for a few years now, and I’m finally starting to like how they’re being executed. I’m kind of surprised that it’s taken this long to get them right, but I’m happy to see web media finally becoming independent of its print roots (especially now that widescreen monitors are so prevalent).
Hmm… new New Years Resolution: try building a personal project web site that uses horizontal layout and scrolling.
18 Alex Jan 2, 2008 at 9:07 am
Some of these sites do have cool layouts, some I had to figure out exactly how to work them and where the information was going to be displayed. Nonetheless I always like seeing creative designs, thanks for posting
19 john Jan 2, 2008 at 9:29 am
Uniqueness does not always a usable web site make.
(and because I’m putting the verb at the end of the sentence, you know it’s true)
20 Marco Rosella Jan 2, 2008 at 10:15 am
Many thanks Steven!
21 Aaron Jan 2, 2008 at 10:54 am
Wow some of these sites are very inspiring to me.
Thank you for sharing.
22 Braintrove.com Jan 2, 2008 at 11:57 am
Great to see such creativity out there!
Keep up the good work!
23 patternlinks.com Jan 2, 2008 at 12:29 pm
Very interesting designs.
24 Al. E Jan 2, 2008 at 2:28 pm
this new site findingdulcinea.com (spelling?) did a whole week long feature on “design goes online” - which doesn’t really name specific sites for their design attributes - but talks about some sites to go for inspiration and history of design , online design firms, and the like. A cool indepth look at e-(and other) design.
25 De tudo um pouco… « Inovação Jan 2, 2008 at 3:54 pm
[…] - 20 sites com layouts inspiradores […]
26 links for 2008-01-03 « Simply… A User Jan 2, 2008 at 4:31 pm
[…] 20 Websites With Unique Layouts | Vandelay Website Design (tags: design layout webdesign inspiration web css website reference **) […]
27 Melissa Hie Jan 2, 2008 at 6:41 pm
thanks for the mention!
28 Devolio Jan 2, 2008 at 7:39 pm
[…] When you are creating a new website you may be inspired by seeing other sites that feature unique layouts. The 20 sites listed here don’t simply use a typical two or three column layout. Many of them use […]
29 :: Imaginalab / Blog :: » Blog Archive » Unique Layouts Jan 2, 2008 at 7:40 pm
[…] Necesitas inspiración para darle forma a tu Sitio Web, al posicionamiento del menú y de la informa… […]
30 Vandelay Design Jan 2, 2008 at 7:41 pm
To everyone who mentioned that some of these sites aren’t user-friendly, I agree. I think some are and some are not. Even the ones that are not usable I think can still provide some good design inspiration. In a few cases it’s not actually the design that makes them unusable.
Eric D.,
To answer your question, I hope we don’t see more horizontal designs. I find them to be annoying to use, personally. Apparently some people love them, and they are definitely unique.
Eric,
I couldn’t agree more, simple is good when displaying information. A unique design can help you to stand out, but it can also hurt you in other ways.
Pearl,
Ok, here are my favorites in no particular order: Jeremy Cowart, Huge, Digital Mash, and I like the concept of Craig Earle but not the functionality.
LGR,
That’s why I tend to like minimalistic designs, you can avoid most of those problems. However, I didn’t have any of the issues when I was on these sites. Again, this is only meant to be an inspirational gallery, not a collection of great and useful sites. Certainly you have a very valid point.
Melissa,
You’re welcome.
31 openswitch » 20 Websites With Unique Layouts | Vandelay Website Design Jan 2, 2008 at 10:05 pm
[…] 20 Websites With Unique Layouts. For the most part I think this article is right on the money. But one site they linked resized my browser to 100% of my screen width. With a 24″ monitor it was VERY frustrating. That should be a golden rule of web design post ‘95: never screw with your user’s browser settings . . . EVER! This entry was posted on at 1:05 am and filed under url. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Both comments and trackbacks are currently closed. « YouTube - The Original Human TETRIS Performance by Guillaume Reymond […]
32 Toni Jan 2, 2008 at 11:58 pm
You could aslo add this site, it is quite interesting
http://web.burza.hr/en/
33 Toni Jan 2, 2008 at 11:59 pm
i wrote wrong e-mail in the post above…..
34 meneame.net Jan 3, 2008 at 12:15 am
20 diseños unicos de webs…
Entre ellos se encuentran páginas de diseñadores web con ganas de impresionar a sus clientes, artistas, grupos de rock, revistas, gente que quiere dar su propia imagen a su pagina, o simplemente gente que quiere explorar o mostrar lo que se puede hac…
35 RECURSOS FLASH » Layouts diferentes para la web Jan 3, 2008 at 2:40 am
[…] Vandelay Design nos ofrece una recopilación de 20 webs con un layout distinto al tradicional. […]
36 Reviews: Melissahie.com « (dis)information architecture Jan 3, 2008 at 2:47 am
[…] I found Melissa Hie’s website thanks to Vandelay’s website design blog. […]
37 Cuban Cigars Dave Jan 3, 2008 at 3:13 am
Digital Mash really caught my eye.. and Basil Gloo. We’re in the process of redesigning. Our aim.. a different layout and the ability to be user friendly ! Possible ? I think so !
38 Being Unique « Trajcov Blog Jan 3, 2008 at 5:30 am
[…] is very difficult. Some of the web developers though have success in that. Vandelay put together a list of 20 website with unique layout. I like some of them. Check it out and decide […]
39 links for 2008-01-03 « The Dirty Jos Soundsystem Jan 3, 2008 at 7:25 am
[…] 20 Websites With Unique Layouts | Vandelay Website Design (tags: cool design lists web2.0) […]
40 Alex Jan 3, 2008 at 8:04 am
CubanCigarsDave.com/nofollowownsyourface =)
41 Marcin Dmoch Jan 3, 2008 at 10:43 am
Thanks for publish my site too
42 Dejan Cancarevic Jan 3, 2008 at 2:01 pm
thanks for the list, it’s really inspiring
43 links for 2008-01-03 « 個人的な雑記 Jan 3, 2008 at 2:21 pm
[…] 20 Websites With Unique Layouts | Vandelay Website Design (tags: inspiration webdesign layout css) […]
44 links for 2008-01-03 « toonz Jan 3, 2008 at 3:23 pm
[…] 20 Websites With Unique Layouts | Vandelay Website Design (tags: inspiration layout CSS) […]
45 Tay - Super Blogging Jan 3, 2008 at 11:51 pm
Wow Steven, thanks for sharing these. There are some pretty cool and inspiring designs here. Just wondering, but how did you come across them all in order to compile such a great list?
46 The Best of the Blogosphere: January 4, 2008 | Super Blogging Jan 4, 2008 at 12:02 am
[…] 20 Websites With Unique Layouts by Vandelay Design. […]
47 Interesting Posts Around the Web - Jan 4 | Interesting Observations Jan 4, 2008 at 12:34 pm
[…] presented Unique Website Layouts and if you digg through the comments, you’ll be able to find Steven’s favorites […]
48 hellcola Jan 4, 2008 at 2:13 pm
wow, I really enjoyed some of them!
I’ll get a custom one one of these days!
49 Weekend Links 01/04 | PureBlogging Jan 4, 2008 at 10:50 pm
[…] Steven Snell lists 20 websites with unique layouts. […]
50 Sly from Slyvisions.com Jan 4, 2008 at 11:33 pm
Nice list there. All those sites had one thing in common (other than being unique): they were creatively done without using a layout as you said. In my experience, most of them have probably been made through Photoshop and other related tools.
51 440design » Blog Archive » ユニークなレイアウトのサイト 20選 Jan 5, 2008 at 5:12 am
[…] 20 Websites With Unique Layouts […]
52 440 Jan 5, 2008 at 5:15 am
thank you for the great links!!! i translated some parts of this article in Japanese. if you have any problem with that, let me know.
53 Potos Jan 5, 2008 at 6:34 am
I would recommend http://www.asvalia.com also.
54 Vrai Jan 5, 2008 at 7:44 pm
You missed a great one.
http://www.alienmelon.com/
For a graphics, web and flash design company.
Browse through it. You won’t be sorry.
55 Abu Jan 6, 2008 at 4:04 am
Hii here is one page site
http://www.telugucinemastills.com
56 Today’s News » 20 Websites With Unique Layouts Jan 6, 2008 at 6:49 am
[…] post by Vandelay Design and software by Elliott Back This entry is filed under 2554. You can follow any responses to this […]
57 Malignition.com – The Don’ts of How To Make Money Jan 6, 2008 at 3:20 pm
I really like the Mussatto layout, it’s very original and functional. The second best is probably the Popmatik layout.
58 Jenny Jan 6, 2008 at 7:55 pm
wow all those make my work look like crap!! I wish I was that good.
59 sites with unique layouts - BlackHatCrew - Elite Webmaster SEO Forum Jan 6, 2008 at 10:35 pm
[…] with unique layouts I came across this today: 20 Websites With Unique Layouts | Vandelay Website Design if you’re stuck for inspiration for the layout of that rad new site you have in your head, might […]
60 20 unieke layouts-- Sund Creative Blogging Jan 6, 2008 at 11:54 pm
[…] maakt kan je geïnspireerd geraken door andere site’s met unieke layouts. De 20 websites die hier te vinden zijn maken geen gebruik van de typische 2 en 3 kollomen layout. Er wordt gebruikt gemaakt […]
61 20 sitios web con diseños unicos | frogx.three Jan 7, 2008 at 10:32 am
[…] Enlace: 20 websites with unique layouts […]
62 » Links for Web Designers : December Jan 8, 2008 at 3:09 am
[…] 20 websites with unique layouts - When you are creating a new website you may be inspired by seeing other sites that feature unique layouts. The 20 sites listed here don’t simply use a typical two or three column layout. Many of them use background images to interact with and control the layout in some unique way […]
63 Silkester erzählt » Blog Archive » Websitetipp: Der Photograph Jeremy Cowart Jan 8, 2008 at 9:12 am
[…] 20 Layouts Bildkritik, Fotografie, Jeremy Cowart, Linktipp Abgelegt unter: Wahrnehmung, Kaffeetscherl […]
64 web design new york Jan 8, 2008 at 11:57 am
These are some really nice designs gotta bookmark this for future reference!
65 Glacier Real Estate Jan 8, 2008 at 10:52 pm
The list you compiled is great, some of the best techinical sites I have seen. I ran across this one http://crepp.net/ this ones good too.
66 20 Ways to Get Constant Post Level Links [Part 1] | Wayne Liew Dot Com Jan 10, 2008 at 2:21 am
[…] from time to time such as 60 Elegant and Visually Appealing Designs by Smashing Magazine and 20 Websites With Unique Layouts by Steven Snell which gives out link credits to these blogs. You will only need to make sure that […]
67 How to Effectively Use a Unique Website Layout | Vandelay Website Design Jan 10, 2008 at 3:49 pm
[…] week I published a gallery of 20 Websites With Unique Layouts, which got a mixed response. The post did very well with social media and most of the comments were […]
68 Kreatives Design Jan 10, 2008 at 11:22 pm
[…] Hintergrund. Man kann also auch so ein Design zugänglich machen. Bislang ist es unzugänglich.Vandelay DesignWebdesignPermalinkPersönliche DatenName:Webseite:KommentarMangels php auf dem Webspace ist das […]
69 Noch mehr Kreativität Jan 10, 2008 at 11:53 pm
[…] unangenehmes Flackern, das nicht sein muss. Und vor Allem: Es ist so einfach, das abzustellen! Vandelay DesignWebdesignPermalinkPersönliche DatenName:Webseite:KommentarMangels php auf dem Webspace ist das […]
70 massimo Jan 13, 2008 at 11:24 pm
Jan Gernen gives us this beautiful site design: http://www.yanone.de .
take a look
71 Einzigartige Layouts | Chaim Jan 14, 2008 at 1:39 am
[…] habe ich auf vandelaydesign.com eine Auflistung von 20 einzigartigen Webseiten Layouts gefunden die ich hier nun gern auf deutsch […]
72 בין חינם לחופשי » הזדמנות אחרונה לסיכום 2007 - חלק שני Jan 15, 2008 at 12:01 pm
[…] ועוד שווה לראות, vandelaydesign מציגים 20 אתרים עם עיצוב שונה ומיוחד […]
73 links for 2008-01-18 « Yet another blog Jan 18, 2008 at 2:18 am
[…] 20 Websites With Unique Layouts (tags: design) […]
74 20 Ways to Get Constant Post Level Links [Part 1] | Cute Nindya Jan 22, 2008 at 9:46 pm
[…] from time to time such as 60 Elegant and Visually Appealing Designs by Smashing Magazine and 20 Websites With Unique Layouts by Steven Snell which gives out link credits to these blogs. You will only need to make sure that […]
75 Designing to Meet User Expectations | Vandelay Website Design Jan 23, 2008 at 5:49 pm
[…] appeal to everyone. In recent weeks I’ve published two different galleries of web designs of unique website layouts and minimalistic websites and the sites featured in these galleries take different approaches to […]
76 Juicy, Jazzy and Jolly Links of January | Malene Hald Jan 31, 2008 at 12:20 pm
[…] 20 Websites With Unique Layouts Vandelay presents innovative designs […]
77 Designing to Meet User Expectations by Joe McLaughlin’s Blog Feb 5, 2008 at 2:33 am
[…] appeal to everyone. In recent weeks I’ve published two different galleries of web designs of unique website layouts and minimalistic websites and the sites featured in these galleries take different approaches to […]
78 Working at Home Mom Feb 11, 2008 at 2:39 am
Those are some really great website designs. I wish that I could do something like that.
79 Daily Common Sense Feb 16, 2008 at 7:55 am
very nice designs!
80 Stepping Up Your Skills: Areas for Continual Improvement as a Web Designer | Vandelay Website Design Feb 18, 2008 at 4:11 pm
[…] 20 Websites with Unique Layouts - This is a mini gallery that I put together last month. […]
81 Our Thoughts at Level2wo on Design and Marketing | Level2wo Feb 19, 2008 at 10:06 pm
[…] 5. User Experience / Workflow 6. Purpose 7. Clean Code 8. Fast Loading 9. Efficient Code 10. Layout 11. Information […]
82 rich math.man Feb 21, 2008 at 1:51 am
Those are some good looking 20 websites. Good looking but I didn;t visit any of them. They are too fancy schmancy for me. I like down earth websites that contain information first and usefulness second and truhfulness third.
83 dENz Feb 25, 2008 at 8:40 pm
Wow… this are all great web site i ever seen specially melissa.com… keep it up melissa.. hope i can have like melissa’s web site
84 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design Mar 3, 2008 at 7:13 pm
[…] Navigational buttons, bars and menus provide the designer with an excellent opportunity to be creative and add some style to the design. What better tool to use for this purpose than […]
85 Most Inspired Blog » Blog Archive » 6 Methods to Make Your Website Standout Mar 6, 2008 at 6:31 am
[…] To see more examples of creative layouts, see 20 Websites With Unique Layouts. […]
86 6 métodos para hacer que tu página destaque Mar 10, 2008 at 2:54 am
[…] Para ver más ejemplos de layouts creativos, véase 20 páginas web con diseñós únicos. […]
87 6 métodos para hacer que tu página destaque Mar 10, 2008 at 2:54 am
[…] Para ver más ejemplos de layouts creativos, véase 20 páginas web con diseñós únicos. […]
88 Algunos trucos para destacar en la web » Cosas sencillas Mar 11, 2008 at 12:41 am
[…] Ejemplo: MelissaHie.com usa un diseño único que se diferencia de otros sitios. El sitio en realidad solo es una gran página, y la navegación te lleva de una parte de la página a otra. Al hacer clic en un vínculo nos desliza hacia la siguiente sección, hasta que volvemos al principio. Para ver más ejemplos de layouts creativos, véase 20 páginas web con diseñós únicos. […]
89 Lynn Pham Apr 9, 2008 at 2:10 pm
wow..thanks so much for the share.. They really are inspirational, all out of the box designs.. How bout some good web design with curves?
90 arwienu Apr 19, 2008 at 11:03 pm
this is great design. thanks for share man..maybe someone can try to design other unique layout :D. tell me if u do
91 Xtence Jun 19, 2008 at 5:19 pm
Very very nice, il ike these layouts very much, great job!!!
92 Challenging Yourself as a Designer | Vandelay Website Design Jun 21, 2008 at 10:05 pm
[…] sites with a typical two or three column layout? Challenge yourself to design a site with a unique and creative layout. Being able to design effectively in a wide variety of different styles can be difficult, but it […]
93 Creativity and Innovation vs. Predictability | Most Inspired Blog Jun 23, 2008 at 9:59 am
[…] creative art. We’ve all experienced situations where we’ve been wowed by a site with an exceptionally creativity design or functionality. However, we’ve also had frustrating experiences with sites that try too […]
94 Mobimeet - Creativity and Innovation vs. Predictability Jun 26, 2008 at 2:28 am
[…] is a creative art. We’ve all experienced situations where we’ve been wowed by a site with an exceptionally creativity design or functionality. However, we’ve also had frustrating experiences with sites that try too hard to […]
95 aoc gold Jun 28, 2008 at 5:41 am
Very very nice
96 Creativity and Innovation vs. Predictability | WatchCSS Jul 22, 2008 at 10:03 pm
[…] is a creative art. We’ve all experienced situations where we’ve been wowed by a site with an exceptionally creativity design or functionality. However, we’ve also had frustrating experiences with sites that try too hard to […]