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 ↓

Ryan Dean-Corke

Mindutopia ↓

Mindutopia

Corking Design ↓

Corking Design

Artexpo New York ↓

Artexpo New York

Form + Function ↓

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 ↓

31three

Snook ↓

Snook

Arbent ↓

Arbent

Kean Richmond ↓

Kean Richmond

Adii ↓

Adii

Room Five ↓

Room Five

Matt Hamm ↓

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 ↓

LePush Mail

Not Your Average Joe ↓

Not Your Average Joe

Casio Exilim Lab ↓

Casio Exilim Lab

Biola Undergrad ↓

Biola Undergrad

Elan Snowboards ↓

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 ↓

Revolution Church

Cogitatur ↓

Cogitatur

The Farmer & The Chef ↓

The Farmer And The Chef

{ths} ↓

{ths}

Gary Nock ↓

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 ↓

Jason Julien

Abbey Theatre ↓

Abby Theatre

Web Gab ↓

Web Gab

Nathalie Kosciusko-Morizet ↓

Nathalie Kosciusko-Morizet

JOBY ↓

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.


Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!