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

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

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

Please prove you're human *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022