Grunge in web design has had its revivals. There seems to be an everlasting pendulum pointing at either clean design or its opposite: grungy design. Is grunge web design a counter-movement to the shiny and glossy design of web 2.0? Grunge elements aren’t necessarily overwhelming but they add a sense of rebellion.

What does it look like?

The grunge design is often recognized by using graphics that give a dirty feel. Dirty stains and textures, drips, splats, sprays, torn images, hand-drawn elements and creased pieces of paper are common design elements in grunge design. Often, elements from our daily life is replicated in their real form without any digital glossiness.

Irregular elements

A few irregular or dirty elements in an otherwise glossy design can help bring personality into the design and give a more realistic look. It is the small details that influence the mood of the user and defines his or her perception of the site.

Colors

Grunge designs often uses subdued colors. Brown, beige, grey, and black is seen again and again. The subdued, dirty and dull colors mixed with textures and real life graphics creates a look anything but boring.

The more bright and vivid colors get in a grunge design, the less striking the design is perceived.

Trends in grunge design

  • Dirty textures and background images
  • Irregular lines and frames
  • Yellowed scotch tape
  • Paper- and photo clips, needles and pins
  • Coffee rings and dirty stains
  • Torn paper and dirty edges
  • Dog-ears
  • Hand-written elements

Where is it used?

The grunge style has always been used extensively on band and music websites and urban lifestyle sites. It seems that these kind of sites uses the very free form to express and convey their artistic and often anti-mainstream image.

Check out more examples of the grunge design style in action.

Anders Toxboe Author

Based out of Copenhagen, Denmark, Anders Toxboe is a Product Discovery coach and trainer, helping both small and big clients get their product right. He also founded UI-Patterns.com and a series of other projects. Follow Anders at @uipatternscom.

20 comments

  • China Manufacturing on Feb 18, 2010

    This seems pretty interesting article for many web designers. Thanks for posting! :)

  • Site Pe .NET on Oct 22, 2010

    I found out now that this graphic style has a name :) Thank you!

    Best regards

  • Webbdesign on Nov 21, 2010

    I found the article interesting. Actually I was stalling a little with a project with a lot of glossy element.
    To make a little more dirty will give me an extra edge in this project, I think.

  • Pippa@web design Stafford on Nov 23, 2010

    I’d heard the term used but never explained as well as this. Personally don’t like the term “grunge” but I suppose it does fit with the theme.

  • seo melbourne on Nov 25, 2010

    I found very nice and informative your blog to design some think thank you for it. and be continue.

  • Houston Web Design on Dec 02, 2010

    My approach to grunge is kinda like what you mention in your posting: a mostly polished overall design, but with grungy elements injected here and there.

    I feel that combining things that have become trends tends to make the design relevant for a little bit longer once one or the other trend dies out.

  • Montreal Web Design on Jan 26, 2011

    Website designed like you described look cool but “more realistic”? Not sure about that.

  • Al - Web designer on Jan 31, 2011

    I really like the Grunge style of web design. But unfortunately I haven’t yet had a client adventurous enough to let me loose on their site. (and to be fair most would have been completely at odds with their brand).

    I have tried using some elements of the style, but find it generally has to be all or nothing.

  • hair styles on Feb 05, 2011

    Grunge is cool for the right type of website. Toxboe your designs look amazing.
    Regards Katie

  • Photoshop Tutorials on Feb 10, 2011

    Grunge is awesome… but one must be careful too much of it, and your well thought out piece gets ruined!

  • Web Design Melbourne on Feb 15, 2011

    grunge style is definitely the “go to” style for music/band websites nowadays. We highly recommend trying the grunge style for photography, performing arts and even architectural websites to give that rugged yet professional feel to the site.

  • Terrasse En Bois on Feb 15, 2011

    Grunge design is destined to a very specific crowd, but it will be very appealing for them. Nice work.

  • martin on Feb 19, 2011

    grunge style is definitely the “go to” style for music/band websites nowadays. We highly recommend trying the grunge style for photography, performing arts and even architectural websites to give that rugged yet professional feel to the site.but one must be careful too much of it, and your well thought out piece gets ruined!

  • Ash on Feb 22, 2011

    Grunge is awesome… but one must be careful too much of it, and your well thought out piece gets ruined!

    im a perth web designer

  • Website Design Los Angeles on Feb 22, 2011

    Fantastic information, great articles! I’m still not getting everything, but I’m learning and I will read them again and again! Thanks. Good tip with good examples. I would have preferred to see a few more examples that didn’t have anything to do with Nevertheless, your advice has me going back to an upcoming post on my own blog so I can “fine tune” the

  • Web Design Nashville on Feb 25, 2011

    As a Nashville web design agency owner, I understand the importance of clean design, but something inside me always wants more texture and depth. Grunge designs may have an edgy feel for some, but to me they feel natural (if done right).

    Just like a good piece of art, a website design should make you feel something. Sometimes a clean design is necessary, but if given the freedom to experiment on a web project, I think you should. Being in Nashville, there are plenty of opportunities to experiment with grunge designs on musician and music industry websites.

    It’s all about what feels good. So, do it! Just remember that everything is better in moderation…

  • Web Design Montreal on Mar 30, 2011

    It is the small details that influence the mood of the user and defines his or her perception of the site = Agree 150%

    Remember people! Simplicity is the ultimate sophistication. by Leonardo da Vinci.

  • AngeWayne on May 19, 2011

    Well i imagine a great graphics base on the info, it will surely capture every eyes. I think grunge web design style is one of the best.

  • Sam on May 26, 2011

    I really like the grunge elements. Question is how do you incorporate those into a faith-based website? Haven’t seen many examples of good grunge design in Christian websites.

  • Conrad on Jan 16, 2012

    I’m at work surfing around your blog from my new iphone!
    Just wanted to say I love reading your blog and look forward to all your posts! Keep up the outstanding work!

Comments have been closed