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

    thanks soooo much!

    0
  2. 52

    Grunge is synonymous with Pearl Jam, the mid-90s and teenage angst and is therefore giving commenters angst.

    Design has definitely become more hand-tooled, tactile, and organic. Classic and formal typography, authentic textures, old-world newspaper layouts seem to be coming back in.

    Computer graphics (and all computer-based expression) has consistently moved from cold/mechanical to warm/human since the early 90s. Graphic design then was dominated by the constraints of new technology: colors, textures, and type were all simpler — constrained by slow processors, complicated color correction and printing processes, and analog camera.

    oh, and a severe lack of alpha channels.

    Early online graphics had to be simple — mostly due to poor markup and low bandwidth. Flash, rigid grids, solid colors, and a more Modern design sense became prevalent.

    Since the early 2000s, however, constraints have be lifted by better software, faster hardware, cheap bandwidth, CSS, digital cameras, etc. Designers also seem better read and are (re)exploring the trade’s roots — especially in typography. The result is that more artists are better able to recreate the complexity and authenticity of the real world — carving out a visual space that feels (sur)real.

    0
  3. 103

    Even though you posted:

    I don’t think most readers get it. What you guys are calling grunge just means adding tactile depth to a page through texture… NOT just making something dirty. This could be as simple as making the site background feel like paper, or making a font feel screen printed. I work exclusively with corporate clients, and I think a subtle texture like Design Sponge (minus the lace?) or Adventure Trekking could work for any type of company.

    Bring on the texture!

    0
  4. 154

    grunge is not back – do some homework.

    0
  5. 205

    Design is full of trends. No idea is original – it only evolves. A “grunge” site will fit a “grunge” client/company. Same goes for a clean, “Web 2.0 glossy” style towards a clean, professional company. As long as it fits within the context of what you’re trying to communicate, it’s hard to call something a “trend” or a fad.

    *Triple snap, Z-formation*

    0
  6. 256

    I love the grunge look, but I’ve never like the yellowed tape effect–always looks way to forced.

    0
  7. 307

    i lov grunge! good stuff!

    0
  8. 358

    I think grunge is good in a small site. But not in a long long page which is like Blog. I think it will also makes our eye very tired while readying on a complicated textured background.

    I still prefer simplicity.

    0
  9. 409

    not sure how you guys make it official that glossy sites are out of style….but if a client’s site doesnt fit the grunge look, it just wont work, no matter how cool it might look…

    0
  10. 460

    Accidentally I resently searched for grunge styles. So thanks to the collector!
    But in my humble opinion, isn’t it a little bit old-fashioned? Or is it retro?

    0
  11. 511

    This grunge style is one of those trends that only works if the content allows it.

    0
  12. 562

    hei, you forget to mention Matt Brett.

    0
  13. 613

    Mexico supports Smashing Magazine!

    0
  14. 664

    Great collection and article! Thanks! Very interesting!

    0
  15. 715

    Are Olly Hite’s photos for real? anyone know? If they are meant to be taken seriously then lol@Olly

    Scouting for girls site is pretty nice…

    A2daK

    0
  16. 766

    Allways using those stickers etc. is boring and cheap. It´s fantastic photoshop work, but the final result is low-effect. Sorry :) Vivat le SM

    0
  17. 817

    Great resource guys, but still Grunge designs are never used for corporate and real bushinesses.

    0
  18. 868

    I don’t like a single one of those designs… I think keeping it clean is still the way forward!

    Thanks for the article.

    0
  19. 919

    Grunge designs aren’t new or the future, but for certain sites they work. That said, as with all design, anything overused gets dated quickly, so it’s better to use specific visual styles for a given audience instead of just following fads. I’m a fan of all sorts of styles… I’d hate to box myself in.

    0
  20. 970

    While I personally tend to want to work with designs that are “clean”, there is definitely a place for grungy design, and for that matter all manner of designs. The great thing about web dev is that it is constantly in flux, what worked for everyone 6 months ago, may not work now. There are certain standards that make a site useful and useable, but whether clean or grungy, good design is good design (or conversely as I have been know to say before “Crappy knows crappy”)

    On another note, I just wanted to give a shout to Smashing for always providing amazing resources for developers.

    I have used the content here extensively to help “teach” some of the print designers I work with how to design for web. Great stuff, and because of it we just launched a new site focused on entrepreneurship and startups in New Orleans that I hope you will all check out and provide your feedback on.

    0
  21. 1021

    I think Kurt Cobain would turn in his grave to hear how contrived you make grunge sound. Look, it has a cute fake paperclip – how grunge! The movement was about being raw and not conforming, and died when it became mainstream. Thanks for now providing us with the guidelines to be grunge!

    0
  22. 1072

    Some very good examples of grungy design work there, but at the same time there are some examples which look like the designer is trying a little bit too hard and has given the site a grungy look and feel because someone told them or they read it was the in-thing to do.

    The grunge look and feel most certainly has it’s place and I am a fan, but at the same time I’m also a fan of very clean minimal sites, when reviewing these designs we should consider how the aesthetic of an individual piece compliments the brand and content its portraying and whether it is fitting or not, it’s this that makes a successful design rather than rather than a look and feel that fits with the current trend.

    0
  23. 1123

    Grunge has it’s place, but it’s not appropriate for as many industries as clean minimalism. Having said that, I’m glad that my grungy website is considered in style again.

    0
  24. 1174

    I think there’s a bit of lag occurring in regards to web design these days. A few years ago designers were going nuts over grunge but it wasn’t hitting home with certain businesses. Now I think a lot of these businesses are trying to capture a more youthful audience on the web and they’re requesting more grunge designs because of the impression that it resonates with youth.

    0
  25. 1225

    grunge or clean? thats a choice, grunge style need more considerations else it will look messy , but above list are excellent insipired.

    0
  26. 1276

    grunge is cool, but usage of grunge is definitely limited to non-company/organization websites.
    hope to see more entry related to clean design.

    0
  27. 1327

    web design has trends, yes. but just like all art forms, some styles come ‘n go. a true timeless design will out live others… i’m still trying to find a design that’s as timeless as a black Tee ‘n a pair of jeans..

    0
  28. 1378

    Leon Paternoster

    March 13, 2008 6:15 am

    The thought of geeky designers doing ‘grunge’ is amusing in itself. The idea that these are somehow more ‘naturalistic’ or ‘hand-crafted’ than, erm, other designs is equally absurd – have you tried CSSing graphics of this complexity? It’s a technical nightmare.

    Can’t we have a 1996 geocities revival? That would be more fun. And can’t graphic designers keep to print?

    0
  29. 1429

    “grungy look appears to rapidly gain on popularity.”

    What are you like 60 years old? I suggest to stop looking around CSS galleries for research and explore the underground music scene if you’re looking for real grunge designs.

    0
  30. 1480

    Well, “grunge-design”… Doesn’t it sound stupid? It’s nothing but kitschy artistic approach to creating visuals. What is web 2.0? Series of rules for those without any real design knowledge by which they can recycle one and the same page over and over again. Sorry, but I don’t see anything beauty full in it. People who call it grunge-design, web 2.0-design… Argh! You can only talk about style. Don’t mistake it with design because you obviously don’t know what the word means. Style and design don’t have and must not have anything in common because they are two totally opposite things. Word style can only be used in terms of art. Design isn’t art. People who put design in museums are idiots. Good design is something subtle and invisible to normal eye because it’s well made to be useful and without any ornament or style. The rest is nothing but kitsch. Kitsch!

    0
  31. 1531

    And one more thing.
    “Form ever follows function.”
    “Less is more.”

    Put it in google if you don’t know what I’m talking about.

    0
  32. 1582

    Is grunge simply a response to the growing interaction between web properties – where everyone seems to simply be regurgitating everything else? Is this just a visual design technique? As I look around our culture, I see amazing parallels to Dadaism. Peraps?

    0
  33. 1633

    If you haven’t seen it already, the USPS has a temporary design up right now that fits perfectly in with this topic. It looks great.

    http://www.usps.com/

    0
  34. 1684

    Disagree on the first paragraph. Grunge isn’t popular because the web is no exeption to the harsh reality we live in ( even though that’d be quite funny) but rather because it’s the good old vintage look (as mentioned), we keep coming back to. If it had anything to do with the “reality”-explanation this would be the last trend in webdesign history… but it isn’t… it’s just ppl coming back to something old coz they can’t make up new stuff!!!
    Well do i need to mention i prefer the clean designs???

    0
  35. 1735

    I Disagree with the first sentence too, I think the glossy and shiny style still have more room to be explored. Grunge style arising again so fast, to me, appears more like just a breath / pause, because since web 2.0 style starts, everybody thrown in, deep and fast. Perhaps it`s a sign showing that this main style (glossy-shiny w2.0) starts to be revised and, maybe, go in another way / improvement.

    I like grunge style, but I think that if the designer work rules, every style can have pretty good highlights to be showed.

    0
  36. 1786

    You’re sadly mistaken. There is NO Web 2.0 design.

    We might as well call these Grunge 2.0

    These looks great depending on who is beholding.

    0
  37. 1837

    Grunge is simply too slow. I know every designer want to show of sometimes but as webapps developer i suggest to get a grip with reality. try to optimise grungy layout for bandwidth efficiency. You have to remember that when site loads >10-20s you are loosing visitors and thats the way it is…

    0
  38. 1888

    So, most the kids who were into grunge are in their peek earning years, and suddenly we’re seeing a re-emergence of that style in view-seeking web pages. I don’t think this should be seen as an indicator of web design’s future other than its tendency to follow demands of the market.

    0
  39. 1939

    We have always been a fan. I love greasy, filthy web sites.

    0
  40. 1990

    grunge is cool, but usage of grunge is definitely limited to non-company/organization websites.
    hope to see more entry related to clean design.

    0
  41. 2041

    I love grunge design, but I do not agree that cleaner, slicker design is dead. Why limit art/visual expression in such a way??? One of the defining characteristics of a truly good artist is his/her ability to create in different styles. Especially in graphic design, the ability to respond to the needs and tastes of a client is paramount, but does not mean we can’t end with a great design regardless of style!

    0
  42. 2092

    You know what? this article is absolutely a more comprehensive writings from what I’ve done in my blog :p
    Good job!

    0
  43. 2143

    I loved each and every of these designs… I think its good when its tough, even better when its toughest

    Thanks for the article.

    0
  44. 2194

    Wow. I’m surprised to see so many of you with reservations. I found these designs really fresh and exciting. Not for Microsoft or IBM, of course – but perfect for me or the corner coffee shop.

    0
  45. 2245

    grunge is cool, but usage of grunge is definitely limited to non-company/organization websites.

    0
  46. 2296

    WOW, those grunge sites are tight tho – when done well it’s a bonus!

    That said, grunge is definitely not rated E for everyone like web 2.0’s mom. It’s definitely a horses for courses world out there and if built properly they load as quickly and perform as well as any other design.

    I think the upside is that they really do have a lot of character and a very strong sense of identity and are a great fusion of art + programming.

    0
  47. 2347

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

    0
  48. 2398
  49. 2449

    I thought that most of the sites showcased here were very pleasant looking and well thought out and well put together except for one. I had the unfortunate situation of coming upon the “Extreme-Designer Thomas Schostok from Germany” page through StumbleUpon (just as I got to this page) and I felt disgusted. I think the page is just ugly. Some of the elements are very artistic, but it is just put together very slapdash, unorganized and I feel like my eyes were burning when I was forced to look at it until StumbleUpon was kind enough to show me another page.

    0
  50. 2500

    Grunge design is great and necessary to help keep “clean” design honest. But I think it’s even more fun when the lines blur.

    0

↑ Back to top