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.