Grunge In Web Design: Samples And Best Practices
With the major focus for web design lately shifting to the minimal designs, apple inspired designs and clean cut layouts, it’s about time someone stands up and showcases the awesomeness that is grunge! I guess I’ll have to be that person today :)
Grunge has undoubtedly become my favorite form of design and I know Matt Brett can say the same as well. I believe though that a lot of people misinterpret grunge as being sloppy and unappealing – which is the furthest thing from the truth. So today I want to showcase the best practices and examples of grunge in web design. Feel free to read the article over and leave your thoughts in the comments at the end of the article – we love your opinions here and value your input.
Grunge and Grids
This section will kill off the doubters who say that grunge is sloppy and it can’t be controlled in web design. That is 100% false and as you can see by the awesome designs below, the grunge elements are accents to the grid layout they’ve prepared for their websites. The grunge doesn’t overpower things, and the websites still have a nice and clean, easy to read flow to them.
Building the grid allows the content to flow properly and then once you have the grid and/or wire frame built, you can start adding in the grunge elements that give the design its spunk. I personally use the 960.gs grid for my designs and have also been looking into the 1kb grid as of late. Check them out because it will definitely help your work flow more naturally and give you quicker build times when you get started coding your layout out.
Ryan Dean-Corke ↓
Mindutopia ↓
Corking Design ↓
Artexpo New York ↓
Form + Function ↓
Subtle texture backgrounds
This has to be one of my favorite ways of adding grunge to a website. The subtle, barely visible grunge that gives off just the right amount of texture and personality, while keeping the design itself clean and easy to read once again stomps the ‘messy and unattractive‘ statements people make into the ground.
If you look at the examples below you will notice that the websites rely on slight textures in the backgrounds and maybe 1-2 elements in the design itself to give off the grunge look. For instance, the Snook website has a texture background and also features a hand drawn face in the sidebar, while still keeping things simple and clean.
31Three ↓
Snook ↓
Arbent ↓
Kean Richmond ↓
Adii ↓
Room Five ↓
Matt Hamm ↓
Hand Drawn Elements
Here is a type of grunge web design I am getting more and more into lately. With the recent launch of my Guerrilla web design portfolio I started dabbling in the art of drawing elements by hand for websites. It’s definitely a fun process and helps you stand out from the other websites out there. After all, no one is going to have that same piece of design because you created it yourself.
As you can see in the examples below, you can give subtle hand drawn elements like the scribbles on Not Your Average Joe, or you can get a bit more creative with it like the Elan Snowboards website. Whichever direction you take it in, just remember to have fun and know that your website will definitely turn a few heads.
LePush Mail ↓
Not Your Average Joe ↓
Casio Exilim Lab ↓
Biola Undergrad ↓
Elan Snowboards ↓
Heavy Use of Grunge
And now we get to the craziness! These websites are visually stunning (in my opinion) and showcase just exactly how far you can take grunge in your website design process. They definitely don’t go light on the effects that grunge gives, and they do a damn good job utilizing the grunge in their designs to showcase exactly what their website is about.
That is the one thing I really like about these websites – even though they’re filled with grunge, they still keep the proper intentions for their website clear and focused. It’s something you have to admire and something the designers of these types of websites should all be proud of.
Revolution Church ↓
Cogitatur ↓
The Farmer & The Chef ↓
{ths} ↓
Gary Nock ↓
Adding in different grunge elements
So you’ve built your site but you want to give your design a bit of a grunge element – what do you do? Do you add in a slight grunge background and then pop in a paper with tape like Jason Julien does? Or what about distressing your logo and sidebar title sections like Web Gab?
The examples below show you that you don’t have to overdo the grunge in order to get your creativity showcased in your design. Sometimes a little bit does go a long way, and these are all proof of that.
Jason Julien ↓
Abbey Theatre ↓
Web Gab ↓
Nathalie Kosciusko-Morizet ↓
JOBY ↓
Passing It On To You
Do you have a website that uses grunge in various ways, or do you know of a website that isn’t in the article but should be? Drop us a comment and let us know.
About the author:
Mike Smith releases wordpress themes on a regular basis and is also a blog designer at Guerrilla.
jump to the comment form ↓
November 7th, 2009
And I also agree!
I love grunge design. My portfolio is grunge & clean as well.
Thanks for the nice inspiration!
November 7th, 2009
awesome artl!
November 7th, 2009
The first five or so are very very well done, but the last few fall into that same trap of overusing that grunge look, at least in my opinion…but i guess all design is subjective anyways
November 7th, 2009
Awesome article, Mike! I totally agree that grunge is an awesome way to create a bit more visual interest in website designs. I also agree that it’s very managable.
Great examples too! Especially fond of the Revolution Church design!
November 7th, 2009
i like grunge design and lots of designer are using this style. I should start to do it also thank you for sharing this great lists
November 7th, 2009
Great article Mike. I love grunge websites, and the style offers such a wide variety of options as you’ve illustrated here. Thanks so much for including Arbent!
November 8th, 2009
Nice collection. I like the clean ones with just a hint of grunge.
November 8th, 2009
I also tried to use a grunge design in my portfolio, not sure though about how good the outcome was.
Thanks for the list, it was pretty inspiring.
November 8th, 2009
Thanks for collating these themed designs together, it’s great to have a good mix of influences from subtle to extreme all in one place. Cheers!
November 8th, 2009
Super cool grunge style in web design. Nice inspiration.
November 8th, 2009
Sweet collection – you should also check out this little website – it’s for Movember and follows a bunch of geeks as they grow a moustache for charity : http://movember.welshstew.co.uk
November 8th, 2009
Great collection. They all look very pretty. But unfortunately, I use a simpler design. Might pick one of them for my next site. Thanks anyway.
November 8th, 2009
Thanks for the list. It’s neat. I’m in the process of creating my first ever WordPress theme. It is my Graphic Design portfolio, grunge bases. Super excited… some of the examples here were cool.
November 8th, 2009
I’m inspired by this great article. It will be a great resource for reference and inspiration. Thanks.
November 9th, 2009
I am very interested in making use of textures in the background. I use a bit more solid texture in the background but your article has suggested some different ways. These are really good. I will try this out in the nest design. Thanks mate.
November 9th, 2009
Thanks for all of the comments so far everyone. Glad you all liked the article.
@KDzyne – I can’t wait to see it. Once you create your first site with WP, you’ll be hooked :)
November 9th, 2009
A very nice collection of grunge style websites. Grunge only works when used in the right context, and a lot of these follow that rule. What I don’t enjoy is seeing it used unnecessarily, but I think you found a good collection of well designed grunge websites here, well done.
November 9th, 2009
trend setters for 2010 ;)
November 9th, 2009
thx for the Elan linkup :)
November 9th, 2009
i love this examples!
November 9th, 2009
Great post, very inspiring!
November 9th, 2009
Some very cool sites in the mix, easy to go too far with grunge and create a big mess
November 10th, 2009
Grunge elements maybe overused here, but check dis out: http://www.recreation.hu/
November 10th, 2009
Very nice collection
November 10th, 2009
a complete explanation and interesting, thank you
November 12th, 2009
Great Collection,its inspired me lot in art.
November 14th, 2009
This is a nice collection. I really like grunge style of web design and somewhat “off the grid” kind of layout.
Thanks for some inspiration there.
cheers
November 16th, 2009
Love The Farmer and The Chef – great design!
November 19th, 2009
Nice and minimalistic. Keep posting!
November 20th, 2009
Very interesting article! Good work.
December 1st, 2009
Subtle grunge application works really cool… Such a nice touch to the overall design… Nice selection…
December 4th, 2009
Love the way you handled those jerks http://wdtoolkit.com/2009/12/0.....practices/
December 4th, 2009
@Brad Frost: hehe thank you sir :)
December 13th, 2009
Thanks for the great pointers, I’m a huge fan of the grunge style and I’m over the moon that it is being used in more and more designs.
December 16th, 2009
Thnx for the lsit! Great source of inspiration!
December 21st, 2009
As several people have already commented,designs can be grungy and clean at the same time. A lot of these designs you showcase are not really grungy in the old sense, but it has really branched out and developed as a style.
Thanks for a great collection …
March 31st, 2010
my first site (http://stranichko.org.ua) in grunge style. I’m from Ukraine
Who Linked To This Post?
Share your thoughts, leave a comment!