/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!

Peter Johnstone / 07/08/2008 / 16:53 / http://www.streammedia.org

I have always loved nice distressed websites. I feel they really pull you into the site, but so many of them use graphics that slow down the loading time. Its essential to make sure the graphics are optimised for the web. One site I seen recently that I felt worked really well was

http://www.ernesthemingwaycollection.com/

THis I feel really brought a very content light site alive!

Jasja / 17/08/2008 / 12:47 / http://www.hypotheekberekenen123.nl

The suggestions made to achieve balance are very important. My personal rule concerning balance is that it doesn't have to be a pixel perfect balance because a perfect balance to the eye is much more important.

Stuart Rutter / 21/08/2008 / 16:08 / http://www.aura99.co.uk

Cool tutorial and love the grunge style takes me back to the 90's. Came across this site a while back and after Peter's comment on the Ernest Hemingway site I think you might spot a couple of similarities!

http://www.darasgarden.com/

Simon / 28/08/2008 / 21:10 / http://www.emstech.co.uk

Very interesting and enlightening article! My natural instinct is to design neat and clean websites, but something like this could be a great alternative for the right client.

Ben Ceglowski / 16/09/2008 / 19:30 / http://www.avatarmusic.co.za

I do so enjoy a spot of grunge. Thanks for this.

Steve / 24/09/2008 / 11:38 / http://hypnosisvoid.com/

Great article Elliot. Very true about some sites trying to over-do the so called dirty look, which if done right, can really make a site stand out. Thanks.

Chip / 10/10/2008 / 16:35 / http://www.faciodesign.co.uk

Excellent article. I use grunge quite a bit in my graphic design, and have always found it hard to integrate into web work without over grungefying (!?!).

Ant Casey / 05/11/2008 / 16:37 / http://www.hikariinteractive.com

I've always found the grunge style far more interesting than web 2.0 orientated sites, admittedly because I started out in band artwork and alternative design. It's still possible to integrate both together, having a creative site design whilst maintaining a legible content area.

Mobius / 03/12/2008 / 15:25 / http://www.thewebtechreviews.com

I have recently fallen in love with the grunge style, thank you for the tutorial! Greatly appreciated.

Tomahawk / 19/03/2009 / 12:28 / http://www.nexusdp.co.uk

I love the term grunge for this style of web design! "Thinking outside the box" is such a cliche these days but I gotta say these kinds of designs are literally about that - letting patterns flow outside of constrictive boxes and edges - beautiful.

Jaydee / 07/04/2009 / 16:30 / http://www.logoquality.co.uk

Web 2.0 grunge logos are great on websites but they don't translate very well to other media or in things like gravatars, icons or twitter profile pics IMO. The trend for design is moving towards clean, simple lines that are scalable and stand out in any medium.

jenny / 27/07/2009 / 22:37 / http://www.tuning-wiki.de

grunge is still great, i enjoy it sometimes. your tutorial looks nice, thank you.

zabeth / 31/07/2009 / 15:34

wow the article is very exciting it taught me a lot

Anna Green / 28/10/2009 / 11:15 / http://www.crearedesign.co.uk

I do like the grunge look, but I also like the web 2.0 style. I think that they both have there uses and its up to the designer to realise when which is appropriate. Then take sublets from each and mix it up. The web because of what it is does end up being uniform and deisgners need to keep on there toes to be fresh, design is like fashion people get bord and move on to the next thing the trick is knowing what the next thing is. Any body have any ideas whats next?

gary purcell / 16/02/2010 / 16:56

I like its beautiful simplicity. But it will not display correctly in IE6 and certainly all the seams fall apart in 5.5. Are we generally ignoring lower than IE7 these days? would still love to know what the cross section of designers think on this as i would love to feel more at ease with dumping anything to do with versions below even 8 (further, eventually dumping all of IE). Lovely otherwise g

TonyR / 17/02/2010 / 18:14 / http://www.tshirtinsight.com

Interesting article. With the move for almost all websites to go 'Web2.0' it is refreshing to see alternatives being promoted. I like the idea of the grunge look, though I guess it is applicable everywhere.

craig david / 01/03/2010 / 10:48 / http://www.logodesignpros.co.uk

It's still possible to integrate both together, having a creative site design whilst maintaining a legible content area.

Jackson / 12/04/2010 / 05:44 / http://www.firstservemedia.com

more grunge please!

Luke / 12/04/2010 / 09:01 / http://www.ultimatebanners.co.uk/roll-up-banners.htm

it's still a relatively new art form, but so many designers are using it.

Paul Dowd / 11/05/2010 / 10:41 / http://www.juicewebdesign.co.uk/

thanks sooooo such a great blog post :) Your magazine is fantastic

rory / 25/06/2010 / 09:55 / http://www.webdesignkc.co.uk/

Net Magazine rocks my world, another great post. Love the grunge effect, makes me wanna grow my hair, not wash and live in Seattle.

Steam Multimedia / 21/07/2010 / 11:31 / http://www.steammultimedia.com/

Nice article, It really helps give a nice effect to your website.