35 CSS-based Layouts that Look Awesome
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
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Travis King
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.
Join our newsletter!
Freelance Jobs
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
that´s amazing !!! why i cant does any same this ?! whyyy God !?
things not know for good!! u able are!! ?
lol :)
ROFL you’re awesome w1sh. :)
WIN!
hahaha :D
Most of these are nothing special… Not inspiring at all.
Ok, wise guy…I may not be a designer at heart, but saying none of these are inspiring is downright wrong.
Not really, he is entitled to an opinion, I think the same way too.
Nothing special to be honest.
Thanks for the advertising though ;)
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”.
Wow, the trolls these days. :(
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.
I second that.
Some nice sites there, for sure.
Lots more like this on cssmania.com
typo on number 23 – Picelcraft
#11 (Duirwaigh Studios) is by far the best I’ve ever seen!
#11 is more Photoshop than CSS, #12!
Great article !Tx!
Great collection, thank you!
Brilliant..!
Thanks..!
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!
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
Oh wow, awesome! I haven’t seen most of these sites before.
Sorry but no matter the design …when it tells me to wait as it loads…after 15 seconds I am gone!
Um… but aren’t all websites CSS-based? Unless they’re Flash? Nice roundup anyway. :)
Great list although #8 isn’t actually a CSS-based layout, it’s just a PSD design.
thnx for featuring my work here dudes …
HF!!!!!
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.
I do believe there are step-by-step screencasts for coding up designs right here on nettuts. :)
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. :(
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.
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..
A very nice collection.
I love the #26 the best..
Cheap promotion for Creattica.
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.
Thanks for including one of our websites, #31 Jumpstart!
so………so………amazing………
why i cant do same like this…….oh God…………………..
I sense great inspiration floating off this page.
I really like #4′s layout but he has changed it since then and even his new layout is nice. Great list
Some very good designs here but must confess that number 11 really got my attention
Nice stuff! I enjoy looking at these layouts!
Thanks so much for featuring me ( First site of the list )
I was wondering why my referrals count were going SOOO fast :)
Thanks !
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..
Net tuts always inspires me….really amazing….
Please don’t make inspirational list post like these. We already have several blogs doing this. Not much education is posts like these.
Nice Collection. Thanks.
i understand what u mean amelia, great selection tho, book markd for inspiration. Thanx
lame post…you should just post a link to creattica…..
can’t believe you just got paid 150 bucks for this….hopefully not!
Great collection! A lot of good inspiration. Thanks!
nice lict.. most of them are really inspiring..
Great post!
Thanks for putting this together!
Best wishes
Nice and inspirational collection =)
Thanks for all those beautiful design! lot of great ideas ,
but i have a question:
Why my website is not onthe list? :)
xtremillusion.com
It’s great inspiration resource for us, thanks for share
As beautiful as it is, #32 uses a table for its layout and *bleech* spacer gifs. Definitely not CSS and definitely not good practice.
Whoa! you are correct sir. That markup looks like it was written by an outsourcer with a vendetta against style.
Speachless. Great job and much inspiration.
Thank you so much for this lesson
I just love the Morphix website. Absolutely wonderful!
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?
Excellent list, very inspirational.
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
very inspiring nice collection
As a designer/developer it would nice if the article explained why the CSS was done well, ect..
Anybody else feel this way?
Yeah, the websites are designed attractively and less CSS coded. But, as the title says “35 CSS-based layout..” the list is appropiate.
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
I knew some of the sites before and have to say that they are really inspirational to me.
Thanks for this article.
- Michael
Awesome collection. I Liked the 6. Fluid Theme :)
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.