The Secrets Of Grunge Design


Shiny and glossy design elements are now officially outdated. Just like retro is becoming trendy again, grungy look appears to rapidly gain on popularity. And there is a damn good reason behind it. In our everyday environment we’re unlikely to find ideal geometric forms or pretty shadow effects as they are manifested by glorious Web 2.0-designs. The reality is different, and Web is definitely not an exception here.

Therefore designers often tend to explore the less ideal and more realistic design solutions which reflect the world we’re living in more accurately and precisely. Result: such elements give the design a more realistic, genuine look, a look one would actually expect in real life.

In such grunge designs dirty stains, torn images, “broken” icons and creased pieces of paper are as popular as hand-drawn elements1 and dirty textures. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note. And dirty textures are often used as background images for navigation menus, photos and overall layouts. Usually these elements are regular objects from our daily life, replicated in their real form without any glossy effects.

Grunge Style ≠ Dirty Look

Few weeks ago we’ve already provided you with grungy fonts, textures, icons and brushes2. Since most designers were confused about the purpose of these “dirty”, “graffiti-like”, “urban” elements, it’s important to understand that grunge designs don’t necessarily have a dirty look.

In fact, grungy layouts don’t necessarily consist only of grungy design elements. The latter can as well support the design, giving it a more realistic look without making it look overcrowded or dirty. Take a look at Bart-Jan Verhoef’s blog3 presented below. Although the design has a number of irregular elements such hand-drawn doodles and dirty background image, it doesn’t feel dirty at all — in fact, the design is rather subtle, clean, elegant and in any case unique.

Although the design has a number of irregular elements such hand-drawn doodles and dirty background image, it doesn’t feel dirty.

Sometimes it’s enough to add just few irregular (or dirty) elements to achieve a more realistic look. In online-shops and corporate projects it simply doesn’t work otherwise. In such cases small details influence the mood and define the perception of the users. Sometimes it’s enough to simply replace the background image of the layout with a dirty texture. This is exactly what Jeremy Zevin5 has done. Without a dirty texture his weblog would have a typical Web 2.0-design.

Without a dirty texture used as a background image this weblog would have a typical Web 2.0-design.

Grunge Color Palette

In most cases grunge designs use subdued, dirty and dull colors. Brown, beige, grey and black are dominating colors. Vibrant shades of vivid colors are being replaced with more natural and subtle colors. The color palette below presents colors which are often used when it comes to grunge designs. The colors have been extracted from the screenshots listed below.


For instance, Satsu7 uses rather subtle colors; the design, however, doesn’t look boring. Hand-drawn elements support the overall design and give it an artistic touch.


However, grunge designs can as well contain more vivid colors; however, in order to fit to the design, they are less striking and more realistic. Dark shades of green, blue and read are usual. Shop Moss9 and David Hellmann’s blog10 are examples of a vivid grunge design.



  • Dirty textures and background images are almost essential in every grunge design.


  • irregular lines and frames


  • yellowed scotch tape


  • paper- and photo clips, needles and various pins


  • coffee rings, spilled out liquids and dirty stains


  • torn paper and dirty edges


  • dog-ears


  • hand-written elements


Joe Grisham’s site13 is exemplary for the elements listed above. Multiple grunge elements in use…


…and EXP.TYPO15 is rather a collage than web design.






Pain is Good – don’t take it seriously, please.


Olly Hite


Webdesigner Ro


Burn the Fields – for music-related web-sites grunge look fits almost perfectly.


Team Green


Scouting for Girls


Adventure Trekking






Shaker Designs


Lake Crackenback


Moustache Me




Design Sponge


Extreme-Designer Thomas Schostok from Germany






CSS Addict


Trozo Gallery




loworks. Flash in use.


Dot Comedy




CSS Rockstars


a j miles


Further Resources


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  1. 1

    I’ve used what I suppose you would call a sort of grungy style on my latest portfolio site, its more based around my interest in Graffiti culture and street art though

  2. 102

    Ollie, love that look mate

  3. 203

    Apple did use grunge in a few of its iPod commercials, which I thought personally were beautiful, and professionally didn’t break any sort of visual indicator that it was Apple. I think that grunge as a design “element” is very powerful. especially when people are usually beat over the head with HORRIBLE websites. To see such flourishes in grunge style is oddly refreshing, which is why I think it is coming back.

  4. 304

    “Grunge is cool but not proffesional. If you have a big company website you can`t use this style.”

    OH MAN… -_- u are absolutely wrong… DESIGN=OPEN MIND, THE DESIGN works or NOT works man… regardless of what is…

  5. 405

    i love the texture and dirty wrongness of grungey design. i understand that it should be used in varying degrees for different things, because just a touch can go a long way.

    i think if you won’t even consider any grunge elements in your design, than you’re limiting yourself.

  6. 506

    Grunge has never been out, it’s the most creative style out there! Making an appealing grunge site is more difficult than a clean site, from a designer point of view! The web 2.0 style makes me sick, it will evolve to web 3.0, web 4.0,… How square can you be?
    I like clean designs, I’m working on one right now, but next month I will be working on a grungy site, just be creative and don’t follow the masses!

  7. 607

    I agree with Hori. It just depends on the project which style to use.

  8. 708

    thank you

  9. 809

    thank you

  10. 910

    Racunovodski servis

    October 1, 2008 3:18 am

    Nice collection!

  11. 1011

    For the record

  12. 1112

    Just like Hori said its about being creative. Its also about having flexible design skills and being open to ideas. It doesn’t mean that you’re going to design every project with grunge. There’s a style for every design at the right place and at the right time.

  13. 1213

    Boğaz Tekne Turu

    October 14, 2008 4:44 am

    wery nice

  14. 1314

    god these are fucking rubbish

  15. 1415

    …much pictures instead of web 2.0-gradients (1px * 150px for example)

    Argh!! Never use an image that’s only 1px wide – it’s a huge performance hit for browsers*. You know when sometimes you come across a page that won’t scroll properly (really jerky/low refresh rate)? If it’s not ‘too many’ instances of Flash, check the background image – more than likely it’s a tiled 1×1 image.

    If you’re using a GIF, you can go up to about 200px wide with a negligible increase in filesize due to the type of compression GIF uses. That’ll be 200 times fewer repetitions for the browser to deal with – more than 2 orders of magnitude.

    (*IIRC because of the way they store repeated images in memory – each repeat consumes more memory than just the pixels it represents.)

    PS for SM: Are threaded comments on the agenda at all? ;)

  16. 1516

    Keyer Çelik A.Ş.

    1993’den beri Çıpa Marka Şerit Testere Üretici Firma Tel:0212 664 22 00

  17. 1617

    Most of you would like to design web 2.0 because it loads faster than grungish website, flash websites. Well web designing hasn’t reached its history yet, who knows after several years who would have to consider internet speed?

    Technology improves every year or maybe every second. When the time comes that internet connection is as fast as browsing your local folders would you think large scale companies would want to have those “1px x 150px repeating images” over a full flash website? I guess not.

  18. 1718

    I can’t help it, I just love grunge

  19. 1819

    Grunge is a great design, although it should probably not be used in corporate websites, as it gives a more casual feel to the whole site. So, yes, probably better for personal websites. Unless of course, you design grunge artwork, and your site promotes it. Then, I think, grunge is a great design and it should be used. I prefer working with cleaner cut designs myself, but adding a bit of grunge does sometimes, if used right, break the monotony.

  20. 1920
  21. 2021

    I like dirty textures and playing with background images.

  22. 2122

    If great design has ever touched upon trend, it is that it unintentionally sets trends for those designers who are yet to learn what great design is. A great designer designs for the product (or whatever you’re designing for), understands the project, the message that is to be communicated and if he or she adopts a style it is because that style is appropriate to the concept.

    You’ll fancy a trend today and switch your preference to another tomorrow. Don’t follow what you think are trends, let the messages come to life and be what they are, not what you want them to be.

  23. 2223

    Karl Francisco Fernandes

    February 22, 2009 11:06 pm

    Another great post… I especially liked nyq and Darklight… Smashing stuff this…

  24. 2324

    The best is Trozo Gallery. Good color and style.

  25. 2425

    Aj miles is a good design. It can be applied to both sides as well as business cards. Thanks for the idea.

  26. 2526

    Hm.. I see one like website in grunge style. But it was not personal page or club/music site. It is was social network in Russia. You can see, it is interesting. Russian social network

  27. 2627

    A very nice and useful article. I like new textures – Grunge Is Cool !!!

  28. 2728

    Great article, gave me lots of inspiration for my own web designs. I think grunge is something that works with some content and not with others. Defiantly a step forward in web design though; I love seeing sites with interesting illustrations and textures not just a whole lot of cast-from-the-same-mould, über white and shinny stuff.

  29. 2829

    is make you crazy but great

  30. 2930

    Great overview! See the following site for a mega-drop-down navigation in grunge-design. Looks nice at the cost of big images with png-opacity.

  31. 3031

    Grunge is a really nice styling to go with. But in the new avatar of advertising where design styling of marketing collateral’s are dictated by brand positioning and character I doubt it will work.

  32. 3132

    Bethany Vanderputten

    December 18, 2009 9:05 am

    I agree with your article… I get tired of seeing slick designs with no ‘weight’ or basis in the real world. The internet should have the same visual noise as the real world. Grunge also is a great way to express emotion or mood, if used right. I enjoy using textural effects in my art for this same effect.

  33. 3233

    Virtually every site featured on this page is either down for “redesign” or defunct or a spam site. Says a lot for this design style, does it not?

  34. 3435

    I myself enjoy Grunge!, it depends what you call grunge, as the article says not any dirty look website is grunge, the true grunge style which is the point of the writer is actually the ART. sometimes somewhere it needs vivid colors somewhere subdued colors. by grunge style one can express himself. I dont say the future of webdesign is grunge or not, but artistic and subtle creativity is always refreshing.

  35. 3536

    my first site ( in grunge style. I’m from Ukraine

  36. 3637

    Do you consider green-lotus-trekking site as grunge design design?

  37. 3738

    I’m planning to creat another wordpress theme in the grunge style. This gives me many inspration. Awesome!

  38. 3839

    I like Grunge Design specially if we keep it balanced and know how and how much to use it. thank you for this great article.


↑ Back to top