The Secrets Of Grunge Design

Advertisement

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.

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

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

Screenshot8

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.

Screenshot11

Screenshot12

Trends In Grunge Design

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

    Screenshot

  • irregular lines and frames

    Screenshot

  • yellowed scotch tape

    Screenshot

  • paper- and photo clips, needles and various pins

    Screenshot

  • coffee rings, spilled out liquids and dirty stains

    Screenshot

  • torn paper and dirty edges

    Screenshot

  • dog-ears

    Screenshot

  • hand-written elements

    Screenshot

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

Screenshot14

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

Screenshot16

The Grunge Gallery

red9ine

Screenshot17

Mindtwitch

Screenshot18

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

Screenshot19

Olly Hite

Screenshot20

Webdesigner Ro

Screenshot21

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

Screenshot22

Team Green

Screenshot23

Scouting for Girls

Screenshot24

Adventure Trekking

Screenshot25

dtamas

Screenshot26

grantmx/designs

Screenshot27

Shaker Designs

Screenshot28

Lake Crackenback

Screenshot29

Moustache Me

Screenshot30

Lataka

Screenshot31

Design Sponge

Screenshot32

Extreme-Designer Thomas Schostok from Germany

Screenshot33

Darklight

Screenshot34

nYq

Screenshot35

CSS Addict

Screenshot36

Trozo Gallery

Screenshot37

Liquidesign

Screenshot38

loworks. Flash in use.

Screenshot39

Dot Comedy

Screenshot40

DesignBStudios

Screenshot41

CSS Rockstars

Screenshot42

a j miles

Screenshot43

Further Resources

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/
  2. 2 http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
  3. 3 http://www.subdued.net/
  4. 4 http://www.subdued.net/
  5. 5 http://www.jeremyzevin.com/
  6. 6 http://www.jeremyzevin.com/
  7. 7 http://www.satsu.co.uk/
  8. 8 http://www.satsu.co.uk/
  9. 9 http://www.shopmoss.com/
  10. 10 http://www.davidhellmann.com/
  11. 11 http://www.shopmoss.com/
  12. 12 http://www.davidhellmann.com/
  13. 13 http://www.notyouraveragejoe.com/
  14. 14 http://www.notyouraveragejoe.com/
  15. 15 http://www.exptypo.com/
  16. 16 http://www.exptypo.com/
  17. 17 http://www.red9ine.com/
  18. 18 http://www.mindtwitch.com/
  19. 19 http://www.painisgood.com/
  20. 20 http://www.ollyhite.com/
  21. 21 http://www.webdesigner.ro/
  22. 22 http://www.burnthefields.com/
  23. 23 http://www.teamgreenonline.com
  24. 24 http://www.scoutingforgirls.co.uk/
  25. 25 http://www.adventuretrekking.com/
  26. 26 http://www.dtamas.dynamo.hu/
  27. 27 http://www.grantmx.com/
  28. 28 http://www.shakerdesigns.com/
  29. 29 http://www.lakecrackenback.com.au/
  30. 30 http://moustacheme.com/
  31. 31 http://www.lataka.com/
  32. 32 http://www.designspongeonline.com/
  33. 33 http://ths.nu
  34. 34 http://www.darklightart.com/
  35. 35 http://nyqdesign.com/
  36. 36 http://www.cssaddict.com/
  37. 37 http://www.introzo.com/
  38. 38 http://www.gotaqua.com/
  39. 39 https://www.loworks-store.org/
  40. 40 http://www.dotcomedy.com/
  41. 41 http://www.designbstudios.com/
  42. 42 http://cssrockstars.com/
  43. 43 http://www.ajmiles.net/
  44. 44 http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
  45. 45 http://www.smashingmagazine.com/2007/01/02/where-can-i-find-textures-and-background-images/
  46. 46 http://designmeltdown.com/chapters/DripsSpraySplater/Part4.aspx
  47. 47 http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design
  48. 48 http://luxa.org/tutorial_making_a_grungy_business_card.php

↑ Back to top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing Science Fiction Stories and looking for a publisher ...

Advertising
  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 olliekav.com

    -1
  2. 102

    Ollie, love that look mate

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

    0
  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…

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

    0
  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!

    -1
  7. 607

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

    -1
  8. 708

    thank you

    -2
  9. 809

    thank you

    -2
  10. 910

    Racunovodski servis

    October 1, 2008 3:18 am

    Nice collection!

    -2
  11. 1011

    For the record photocomma.com

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

    -2
  13. 1213

    Boğaz Tekne Turu

    October 14, 2008 4:44 am

    wery nice

    -1
  14. 1314

    god these are fucking rubbish

    -1
  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? ;)

    0
  16. 1516

    Keyer Çelik A.Ş.

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

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

    -1
  18. 1718

    I can’t help it, I just love grunge

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

    -1
  20. 1920
    -2
  21. 2021

    I like dirty textures and playing with background images.

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

    -1
  23. 2223

    Karl Francisco Fernandes

    February 22, 2009 11:06 pm

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

    -2
  24. 2324

    The best is Trozo Gallery. Good color and style.

    -2
  25. 2425

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

    -2
  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

    -1
  27. 2627

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

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

    -1
  29. 2829

    is make you crazy but great

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

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

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

    -1
  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?

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

    -1
  35. 3536

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

    -1
  36. 3637

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

    -1
  37. 3738

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

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

    -1

↑ Back to top