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.
And I also agree!
I love grunge design. My portfolio is grunge & clean as well.
Thanks for the nice inspiration!
awesome artl!
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
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!
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
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!
Nice collection. I like the clean ones with just a hint of grunge.
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.
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!
Super cool grunge style in web design. Nice inspiration.
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
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.
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.
I’m inspired by this great article. It will be a great resource for reference and inspiration. Thanks.
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.
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 :)
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.
trend setters for 2010 ;)
thx for the Elan linkup :)
i love this examples!
Great post, very inspiring!
Some very cool sites in the mix, easy to go too far with grunge and create a big mess
Grunge elements maybe overused here, but check dis out: http://www.recreation.hu/
Very nice collection
a complete explanation and interesting, thank you
Great Collection,its inspired me lot in art.
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
Love The Farmer and The Chef – great design!
Nice and minimalistic. Keep posting!
Very interesting article! Good work.
Subtle grunge application works really cool… Such a nice touch to the overall design… Nice selection…
Love the way you handled those jerks http://wdtoolkit.com/2009/12/04/grunge-in-web-design-samples-and-best-practices/
@Brad Frost: hehe thank you sir :)
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.
Thnx for the lsit! Great source of inspiration!
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 …
my first site (http://stranichko.org.ua) in grunge style. I’m from Ukraine
These examples are great. I’d pick 31Three as one of my personal favorites. All of them are unique and the blending of colors are pleasing to the eyes.
There’s some great and very effective ideas in a lot of these samples.
Nice Examples for Grunge Web Design. I have a Grunge Design too, hope you enjoy this at http://seiler-gerstmann.de
“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.”
This I feel, makes this kind of designs more attractive. There is a hint of grunge but at the same time the simplicity is also maintained with perfection. I myself prefer clean design elements so that people can concentrate on the main part of the web-page. But after going through the post, I have to say that people like me will definitely try this form. Thanks for the post and for such attractive examples.
Thanks for sharing this great post.
Grunge icons-They don’t necessarily fit to all designs, however it’s nice to have them ready to hand once you might need them.