35 CSS-based Layouts that Look Awesome

35 CSS-based Layouts that Look Awesome

on Dec 13th 2009 with 90 comments

Creattica continues to be a great source of inspiration. Whether you’re there to spark the creative fuse or just browse through some amazing work, it’s well worth checking out what’s new over at Creattica. Recently, they’ve added a whole bunch of new categories – including one for top-notch CSS work. Here's a rundown of some of the best work submitted so far.

1. Magnifico

2. BRILLIANCY

3. eCoverSuiteElite

4. Hey Indy

5. MetaLab

6. Fluid Theme

7. Tea Round App

8. Stick It USB

9. Douglas Menezes

10. We Love Icons

11. Duirwaigh Studios

12. siete de febrero

13. Morphix

14. Humza Ijaz

15. Trent Cruising

16. Pacifica

17. Dishizzle

18. Paul Carbo

19. Beerenberg Farm

20. Honblue Inc.

21. iDesign iPhone

22. AdWorks

23. Pixelcraft

24. Guifx

25. Point Zero

26. Simple Art

27. Add Noise

28. Midtone Design

29. Transmissions

30. Serj

31. Jumpstart

32. Cellar

33. Zaum & Brown

34. World of Merix Studio

35. Hymns


Tags: CSS
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

When Travis is not chained to his desk, he enjoys freelance web design, travel blogging through Japan at iheartjapan, and discovering new and interesting sources or caffeine that will keep him up all night.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • GeoThroll

    that´s amazing !!! why i cant does any same this ?! whyyy God !?

    • w1sh

      things not know for good!! u able are!! ?

      • http://tutsvalley.com Slobodan Kustrimovic

        lol :)

      • Meshach

        ROFL you’re awesome w1sh. :)

      • http://www.youtube.com/watch?v=oHg5SJYRHA0&feature=related Luke Marohn

        WIN!

    • http://www.webstuffshare.com Hidayat Sagita

      hahaha :D

  • You the Captain

    Most of these are nothing special… Not inspiring at all.

    • http://matt-bridges.com Matt B

      Ok, wise guy…I may not be a designer at heart, but saying none of these are inspiring is downright wrong.

      • ShadowAssassin

        Not really, he is entitled to an opinion, I think the same way too.

        Nothing special to be honest.

        Thanks for the advertising though ;)

    • http://www.aftertheone.com Matthew Booth

      I’d like to see “You the Captain”s personal site. Most of the design lacked a personal/unique feel to them, but if you actually study the techniques and pick them apart you could design something “inspiring”.

      • Meshach

        Wow, the trolls these days. :(

    • c.

      I’m going to have to go with this guy’s opinion. A handful of the sites have some fantastic artwork or make great use of color, but there are some that clearly do not belong in the list:

      eCoverSuiteElite: Bland black & white minimalist design. Boring, not “awesome”.

      MetaLab: Looks dated and unpolished. Also boring.

      Pixelcraft: Not as bland as eCoverSuiteElite, but it hardly falls into the “awesome” category. At least it has distinctive fonts and a bit of colorful icons to help try and perk it up.

      Midtone Design: Boring. Looks like a Javascript demo, not an interesting CSS layout.

      Want to see my website because my opinion doesn’t match yours? Maybe you should ask Ebert how many movies he’s directed next time he pans a movie you don’t like.

    • Lukas

      I second that.

  • http://www.freshclickmedia.com Shane

    Some nice sites there, for sure.

    Lots more like this on cssmania.com

  • :)

    typo on number 23 – Picelcraft

  • http://tutorial-city.net/ Tutorial City

    #11 (Duirwaigh Studios) is by far the best I’ve ever seen!

    • http://mayavps.com Omar

      #11 is more Photoshop than CSS, #12!

  • http://www.urbanvideos.tv alan

    Great article !Tx!

  • http://www.jennamolby.com Jenna Molby

    Great collection, thank you!

  • http://sonergonul.com Soner Gönül

    Brilliant..!

    Thanks..!

  • http://Www.Forepoint.co.uk Shaun

    I know the guy who coded Jumpstart, it’s an awesome website one of my favourates!

    This is a really good collection of layouts, some great work here!

  • http://www.jeffadams.co.uk Jeff Adams

    Nice collection. No doubt people will moan that this isn’t a tutorial of some sort, but to be honest I quite like this roundups especially on a Sunday lol

  • http://designinformer.com Design Informer

    Oh wow, awesome! I haven’t seen most of these sites before.

  • http://dameryworld.com DameryWorld

    Sorry but no matter the design …when it tells me to wait as it loads…after 15 seconds I am gone!

  • Tiffany

    Um… but aren’t all websites CSS-based? Unless they’re Flash? Nice roundup anyway. :)

  • http://www.alliancestudio.co.uk Fred

    Great list although #8 isn’t actually a CSS-based layout, it’s just a PSD design.

    • sniperyu

      thnx for featuring my work here dudes …

      HF!!!!!

  • Amelia

    I wished I wished that I found a web design book that literally chose one specific layout: professional, modern, elegant, rad, intelligent, functional, intuitive, all the bells and whistles…. and literally took you from the process from start to finish on how to MAKE websites like those above. Most of the web design books I’ve come across are utterly disappointing and some titles deceiving. Some make you think you are going to learn the real behind the scenes on creating advanced layouts with divs, styling professional typography, making great backgrounds and the works–but then they turn out to be stupid work process books that only give you a general view on what a good site LOOKS like, but not how to make it. Most books like the Visual Quickstart Guide are waaay too basic, outdated, design sucks and give you codes in chunks so that you don’t know where to place this or that. Or some books are on the other extreme and are waaay too involved, like programmer level.

    I was hoping someone could recommend a good book for designers specifically. The way I learn is by going through the process step by step of taking an amazing idea and transforming it into a website like those above. If anyone has a good recommendation or recommendations PLEASE let me know.

    • Tiffany

      I do believe there are step-by-step screencasts for coding up designs right here on nettuts. :)

    • w1sh

      That’s the problem with design, there is no formula for it. There are a lot of minor things you can keep in mind while designing, but generally if you just sketch out a creative idea for a website and then follow through with a lot of hours in Photoshop getting it to look right, it will come out decent.

      The harder you work on converting ideas from paper to reality, the better you’ll get.

      And so far as learning all the spacing and typography and stuff, I suggest you go to some CSS galleries (ton at cssrainbow.com), and quite literally copy the CSS you like and slightly modify it to fit your site.

      I definitely see what you mean about wishing there were set ways to design, but unfortunately there aren’t and it seems like anyone selling a book telling you how to be creative is selling a scam. :(

      • Amelia

        I think you misunderstood me. The problem I’m having is not designing. I already went to school for 5 years for this….the problem I’m having is coding advanced layouts like those examples above. I’ve honestly tried and am familiar with the tutorial sites mentioned by folks here, but they don’t really take you into a more in depth look of the process from start to finish. They can’t! Whose gonna sit there and write a complete tutorial so involved from the very beginning? Net tuts has some good layouts and formats, but still BASIC. If I’m not aware of any tuts in this site, they are probably for premium members only.

        I think only a book can really give me the in depth info I’m looking for. One of the reasons I avoid online tuts is because they only give you the info in chunks like: “making a cool rollover button” or “making 3 column layout” but most of these stop right there and don’t go further. Learning from the start will help me see where to place my code precisely, how to fix layout problems when they start shifting unexpectedly and learn from these issues, and also how to style professional typography which a lot of tuts out there that lack.

        I’m sure there is a book out there that has study cases and teaches you from the start. If anyone knows hit me up.

        Email: ameliab2005@gmail.com

        Thanks.

    • Brian Jones

      Recently there have been some newer tuts coming out for designing interfaces. What I recommend you do is the following:
      visit here on nettuts, smashingmagazine.com or tripwiremagazine.com. Here you will find tutorials for designing web interfaces (amongst plenty of other design and development goodies). Practice, practice and after that – practice some more. You are not going to automatically begin designing sites like the mentioned above right off the back. This takes time, experience and practice. I highly recommend you visit these sites and do atleast 2 tutorials a week. Visit design galleries (www.webcreme.com / http://www.screenalicious.com or cssmania.com) and start a morgue / inspiration file. Place the sites that inspire you in your morgue / inspiration file. Play with the site – see how they came up with their idea – and try and tweak the site to your liking. You may even want to try and make the site exactly as the way the designer did (do not rave as your own). Once you rolled your sleeves up – practice some more..

  • http://www.jason-saggers.com Jason Saggers

    A very nice collection.
    I love the #26 the best..

  • Markus

    Cheap promotion for Creattica.

  • http://www.crearedesign.co.uk Stephen Webb

    Some fantastic designs are covered here, which really illustrate the power of CSS when used correctly. The ‘Fluid Theme’ and ‘Stick It USB’ sites stand out particularly to me, they are very web 2.0. in style.

    ‘Simple Art’ also stands out from the list here, as the fantastic layout with top down view makes an innovative approach for site design. I’d be interested to know what software was used to create the virtual environment, it is an excellent piece of work.

    These showcase examples are a fantastic resource, perhaps in future editions we can have the technologies used in them listed below each example and also the design firm/freelancer that created each.

  • http://www.unionroom.com Union Room

    Thanks for including one of our websites, #31 Jumpstart!

  • rizmraz

    so………so………amazing………

    why i cant do same like this…….oh God…………………..

  • http://spotdex.com David Moreen

    I sense great inspiration floating off this page.

  • http://beyondrandom.com BeyondRandom

    I really like #4′s layout but he has changed it since then and even his new layout is nice. Great list

  • Paulo Ferreira

    Some very good designs here but must confess that number 11 really got my attention

  • http://shop.boomskins.com BoomSkins

    Nice stuff! I enjoy looking at these layouts!

  • http://themeforest.net/user/DDStudios/portfolio?ref=ddstudios DDStudios

    Thanks so much for featuring me ( First site of the list )

    I was wondering why my referrals count were going SOOO fast :)

    Thanks !

  • Brian Jones

    Great roundup – thank you for sharing! Good to see a mixture of artistic, black and white and even a little minimalism all in one place. Duirwaigh is my favorite of this list and have seen this site recently on a lot of inspiration sites / blogs..

  • http://www.penguinstudioz.com Pravin

    Net tuts always inspires me….really amazing….

  • http://ffffffive.com Henry

    Please don’t make inspirational list post like these. We already have several blogs doing this. Not much education is posts like these.

  • http://www.bloggerschmidt.de Bloggerschmidt

    Nice Collection. Thanks.

  • Ummah-Design.com

    i understand what u mean amelia, great selection tho, book markd for inspiration. Thanx

  • rob

    lame post…you should just post a link to creattica…..
    can’t believe you just got paid 150 bucks for this….hopefully not!

  • http://www.delugestudios.com Memphis Web Design

    Great collection! A lot of good inspiration. Thanks!

  • http://www.blogzaika.co.cc zxara

    nice lict.. most of them are really inspiring..

  • http://www.boraacemi.com BORABORA

    Great post!
    Thanks for putting this together!
    Best wishes

  • http://kaxigt.com Lillan

    Nice and inspirational collection =)

  • http://xtremillusion.com Meka James

    Thanks for all those beautiful design! lot of great ideas ,

    but i have a question:

    Why my website is not onthe list? :)

    xtremillusion.com

  • http://www.camp26.biz Eko Setiawan

    It’s great inspiration resource for us, thanks for share

  • http://ernmalleywannabe.blogspot.com/ Blatmann

    As beautiful as it is, #32 uses a table for its layout and *bleech* spacer gifs. Definitely not CSS and definitely not good practice.

    • http://www.tylergaw.com Tyler

      Whoa! you are correct sir. That markup looks like it was written by an outsourcer with a vendetta against style.

  • http://www.mlangella.com Manuela

    Speachless. Great job and much inspiration.

  • http://aboubaker.info/ Aboubaker Nour

    Thank you so much for this lesson

  • http://www.engram.nu Niklas

    I just love the Morphix website. Absolutely wonderful!

  • http://www.justinmcgonigle.com Justin

    Were they all made by the same designer? I know that they weren’t but they look like they do. I wonder what look and feel will be “in” next year?

  • http://labs.dariux.com Dario Gutierrez

    Excellent list, very inspirational.

  • mhyder1

    Nice gallery. In reference to Amelia’s post up top, I remember when I used

    to feel like that too. Like I needed a book to walk me through the whole

    process. The reason there is not book like that is because the focus would

    be too narrow. They could teach you to make a certain type of website

    but could not teach you now to design. Personally I think using photoshop

    to create an awesome interface is the hardest part. Through trial and error

    you can figure out how to code the template. But getting just the right

    shadow and gradient and layout is hard. Just my 2 cents. Keep up the good

    work

  • http://www.neophytech.com Neophytech

    very inspiring nice collection

  • Jimmy

    As a designer/developer it would nice if the article explained why the CSS was done well, ect..

    Anybody else feel this way?

    • Rafiul

      Yeah, the websites are designed attractively and less CSS coded. But, as the title says “35 CSS-based layout..” the list is appropiate.

  • http://MexiChriS.com MexiChriS

    Amazing round up! Found some very few new artists & a few companys with great imagery from there web site.

    Although, I only got one problem, across this site & other web/design related sites. I would really love to see a site include the ‘designers & web developers’ behind the website/work, with current web & social media links, for contact for whatever reason someone may want to do. Maybe view their work? Contact for project? Hell, even just to let them know there work was amazing, or even shitty if that’s how they so see it. Ya know?

    Not just displaying the current site or company holding the work; under an article with a title about ‘most beautiful sites’ or wahtever with a link to explore JUST THAT site. I know that would kinda be off topic from whatever the article may be about, but I thought we as designer & web developers are out to be known in any way & deserve to be credited, whenever & however possible. This would just help out a little & give credit.

    May involve a little more work, but I’ve found just about most of the artists behind the sites or have known about ‘em already. It would just be cool to represent & acknowledge those behind the work. With there ‘name & web links.’ Something new & different, that other ‘design & web related sites don’t do but SHOULD DO along with every article posts like these!

    - MexiChriS

  • http://www.emdesigns.de Michael

    I knew some of the sites before and have to say that they are really inspirational to me.

    Thanks for this article.

    - Michael

  • http://smashingwebs.com/ SmashingWebs.com

    Awesome collection. I Liked the 6. Fluid Theme :)

  • http://www.jonathlee.com/blog/ Jonath Lee

    Indeed a great list of inspirational CSS website design. I wonder if we’ll have any chosen css website review, I mean, like how is the website design was done, how it works with other browser.

Newer Comments →