/Tutorials/ Discover the art of grunge
31/03/2008 | Filed under Design > Tutorials
Elliot Jay Stocks shows you how to create a dark, distresssed, rough-and-ready design for your website. Roll up your sleeves and prepare to get dirty
In this world of gradients, logo reflections, horizontal stripes and rounded edges, the web has become bloated with sites obsessed with looking Web 2.0, when in fact the term is meaningless when applied to pure aesthetics. Fighting back against the gleaming white websites and their uninspired shine is the so-called “grunge” look; an aesthetic more interested in dirty, worn, scratched and jagged textures. It’s a muddy Doc Martens boot in the face of Web 2.0 neatness.
However, achieving an authentic look isn’t easy, and many get lost along the way with how to “mess up” a site that has a decent, solid structure
at the foundation of its design. Well read on! I have two words for you: dirt and decay. These are the key components of the grunge aesthetic, and they’re all around us, given that the very nature of most real-world objects is to degrade over time. It’s the malfunctioning quality of decay that really sets this look apart from designs that smack of sterile cleanliness.
And that’s the task this issue: bringing dirt and decay into a Photoshop design and turning it into a site for a fictional band, putting some icing on the cake along the way. Or should that be mud?
About the author:
Name: Elliot Jay Stocks
Areas of expertise: Front-end design, CSS, web standards
Clients: Apple Corps, Trojan Records, EMI Records
Favourite holiday food: Sushi
Click here to download the support files
Click here to download tutorial PDF
Comments
Inwils / 02/04/2008 / 07:46
This is a good article, was just wondering...didnt i buy this article in the magazine the other week?
perhaps i should wait until they come out free on here? :O)
R.J. Adams / 05/04/2008 / 03:59 / http://linkbuildingbible.com
I really liked this article. It is nice to see sites that aren't Web 2.0ish. Being someone who always uses designs that are neat and clean, it was nice to see some tips on how to mess up a website, but still keep it readable and functional. I liked the tip at the end of the article about balance. A totally messy website is useless, whereas a totally clean site isn't too aesthetically pleasing. Finding that correct balance is necessary for a great looking website. Heck, finding a balance in everything in life is the key.
Tanvir / 06/04/2008 / 10:19 / http://www.lyonssolutions.co.uk
Well if you don't buy the magazine Inwils, you won't have the CD ;) lol
By the way i dont work for .Net magazine ;)
bozboz / 06/04/2008 / 15:32 / http://www.bozboz.co.uk
Excellent article really useful. Thanks!
Rainer / 07/04/2008 / 06:54 / http://www.feike.biz
That's VERY cool! Great intro and - by accident - very useful currently for me. I got a new assignment to create a darkwave community site. Maybe it will become a bit more black - but your grunge is the right direction for me.
tartan webdesign / 09/04/2008 / 08:18 / http://www.tartanproject.com
hi, great thing, I already knew this from Jays site, but it's good to know that more and more people will have the chance to know and appreciate this relatively new approach. cheers
Mike Lawson / 11/04/2008 / 10:50 / http://www.trcreative.co.uk
I love the grunge look, when done right looks fantastic! Much better than any clean site.
Liam Giles / 12/05/2008 / 22:36 / http://www.spindogs.co.uk
Great article thanks! really usefull!
Hillary / 19/05/2008 / 14:45 / http://www.jellocat.com
I love your magazine but in the states it is expensive so this is fantastic that some of the content appears online here. Thank you!!
Johannes / 02/06/2008 / 19:31 / http://www.gratiswebwinkels.nl
great stuff! As a designer I love the grunge look. But from experience I can tell a clean design is so much easier to create (no transparency and PNG's). But I've to admit that sometimes you just need to take the time to create an artwork!
Dolapo / 16/06/2008 / 12:26 / http://www.unotechmedia.com/webdesignnigeria.php
Thanks for the tutorial. Its interesting to know how much grunge can spice up a design if used tastefully!! It gives your design an organic look and breathes life into it. by <a href="http://www.unotechmedia.com/webdesignnigeria.php">; Unotech web design (Nigeria)</a>
