SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Grunge In Web Design: Samples And Best Practices

November 7, 2009 by Mike Smith 55 Comments

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.

Author: Mike Smith

Mike Smith writes a freelance blog on a regular basis and is also a blog designer at Guerrilla.

Filed Under: Design, Inspirational, Showcase

Comments

  1. Marco Barbosa says

    November 7, 2009 at 3:48 pm

    And I also agree!

    I love grunge design. My portfolio is grunge & clean as well.

    Thanks for the nice inspiration!

  2. Diggy says

    November 7, 2009 at 4:07 pm

    awesome artl!

  3. Web Designer says

    November 7, 2009 at 4:38 pm

    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

  4. Matt Ward says

    November 7, 2009 at 7:10 pm

    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!

  5. sonnydesign says

    November 7, 2009 at 9:21 pm

    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

  6. Angie Bowen says

    November 7, 2009 at 11:59 pm

    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!

  7. Architela says

    November 8, 2009 at 5:02 am

    Nice collection. I like the clean ones with just a hint of grunge.

  8. Victor says

    November 8, 2009 at 6:23 am

    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.

  9. Paulo says

    November 8, 2009 at 7:19 am

    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!

  10. Rahul - Web Guru says

    November 8, 2009 at 1:01 pm

    Super cool grunge style in web design. Nice inspiration.

  11. WelshStew says

    November 8, 2009 at 1:40 pm

    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

  12. Dr. Gaurav Dhaka says

    November 8, 2009 at 3:31 pm

    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.

  13. KDzyne says

    November 8, 2009 at 9:03 pm

    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.

  14. Dic-Syen says

    November 8, 2009 at 9:05 pm

    I’m inspired by this great article. It will be a great resource for reference and inspiration. Thanks.

  15. Web Development Kolkata says

    November 9, 2009 at 1:09 am

    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.

  16. Mike Smith says

    November 9, 2009 at 2:47 am

    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 :)

  17. James says

    November 9, 2009 at 4:19 am

    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.

  18. Selvam says

    November 9, 2009 at 5:25 am

    trend setters for 2010 ;)

  19. grega says

    November 9, 2009 at 7:47 am

    thx for the Elan linkup :)

  20. Jannis Gerlinger says

    November 9, 2009 at 8:28 am

    i love this examples!

  21. Jonathan says

    November 9, 2009 at 9:52 am

    Great post, very inspiring!

  22. Kris says

    November 9, 2009 at 1:42 pm

    Some very cool sites in the mix, easy to go too far with grunge and create a big mess

  23. eugene & his axe says

    November 10, 2009 at 1:21 am

    Grunge elements maybe overused here, but check dis out: http://www.recreation.hu/

  24. DJ Designer Lab says

    November 10, 2009 at 2:24 am

    Very nice collection

  25. choen says

    November 10, 2009 at 2:40 am

    a complete explanation and interesting, thank you

  26. Custo Icon Design says

    November 12, 2009 at 4:30 am

    Great Collection,its inspired me lot in art.

  27. NinjaCrunch says

    November 14, 2009 at 8:21 am

    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

  28. Callum Chapman says

    November 16, 2009 at 10:24 am

    Love The Farmer and The Chef – great design!

  29. Ed Norton says

    November 19, 2009 at 4:29 am

    Nice and minimalistic. Keep posting!

  30. Zine Creative says

    November 20, 2009 at 6:34 pm

    Very interesting article! Good work.

  31. LukeSF says

    December 1, 2009 at 8:24 am

    Subtle grunge application works really cool… Such a nice touch to the overall design… Nice selection…

  32. Brad Frost says

    December 4, 2009 at 4:36 pm

    Love the way you handled those jerks http://wdtoolkit.com/2009/12/04/grunge-in-web-design-samples-and-best-practices/

  33. Jon Phillips says

    December 4, 2009 at 4:39 pm

    @Brad Frost: hehe thank you sir :)

  34. Sam Logan says

    December 13, 2009 at 2:54 pm

    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.

  35. Waasys says

    December 16, 2009 at 3:08 pm

    Thnx for the lsit! Great source of inspiration!

  36. Chotrul Web Design says

    December 21, 2009 at 4:24 pm

    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 …

  37. Max says

    March 31, 2010 at 1:27 pm

    my first site (http://stranichko.org.ua) in grunge style. I’m from Ukraine

  38. Sherwin says

    September 3, 2010 at 11:32 am

    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.

  39. Theraisa K says

    October 22, 2010 at 8:08 pm

    There’s some great and very effective ideas in a lot of these samples.

  40. Michael Gerstmann says

    October 25, 2010 at 11:31 am

    Nice Examples for Grunge Web Design. I have a Grunge Design too, hope you enjoy this at http://seiler-gerstmann.de

  41. Abhoy says

    December 13, 2010 at 11:48 am

    “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.

  42. Hasan Raza says

    October 1, 2015 at 1:57 am

    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.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

SpyreStudios © 2018