Smashing Magazine ~ we smash you with the information that will make your life easier. really.
Smashing Magazine we smash you with the information that will make your life easier. really.

The Secrets Of Grunge Design

March 11th, 2008 in Design Showcase | 191 Comments

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 elements 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 brushes. 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 blog 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.

Screenshot
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 Zevin has done. Without a dirty texture his weblog would have a typical Web 2.0-design.

Screenshot
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, Satsu uses rather subtle colors; the design, however, doesn’t look boring. Hand-drawn elements support the overall design and give it an artistic touch.

Screenshot

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 Moss and David Hellmann’s blog are examples of a vivid grunge design.

Screenshot

Screenshot

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 site is exemplary for the elements listed above. Multiple grunge elements in use…

Screenshot

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

Screenshot

The Grunge Gallery

red9ine

Screenshot

Mindtwitch

Screenshot

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

Screenshot

Olly Hite

Screenshot

Webdesigner Ro

Screenshot

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

Screenshot

Team Green

Screenshot

Scouting for Girls

Screenshot

Adventure Trekking

Screenshot

dtamas

Screenshot

grantmx/designs

Screenshot

Shaker Designs

Screenshot

Lake Crackenback

Screenshot

Moustache Me

Screenshot

Lataka

Screenshot

Design Sponge

Screenshot

Extreme-Designer Thomas Schostok from Germany

Screenshot

Darklight

Screenshot

nYq

Screenshot

CSS Addict

Screenshot

Trozo Gallery

Screenshot

Liquidesign

Screenshot

loworks. Flash in use.

Screenshot

Dot Comedy

Screenshot

DesignBStudios

Screenshot

CSS Rockstars

Screenshot

a j miles

Screenshot

Further Resources

Delicious button Stumbleupon

Advertisement
  1. 1.

    zombiebr (March 11th, 2008, 5:01 am)

    I still like it clean :)
    Grunge feels like going back in time, like 2002 or 2003

  2. 2.

    John Slater (March 11th, 2008, 5:10 am)

    I agree. I think grunge should stay on the band websites, cleaner is modern, give it time and grunge will be back in, it always comes crawling back.

  3. 3.

    Thomas van Zuijlen (March 11th, 2008, 5:26 am)

    Hmmm… I noticed before that you seem to be perceiving a trend towards grunge-ish design, but as to the commenters above, to me the grunge style seems like much more of a throwback than a step forward. I doubt the grunge style is as viable a design option as the clean 2.0-style simply because of the lack of site types it might be applied to. The strength of the 2.0-style (most definitely in its more nuanced, sophisticated incarnations) is that it can be applied successfully to smaller and larger (e.g. corporate) cases alike. To me, the examples from the collection in this article actually reflect the relatively narrow focus of grunge.

  4. 4.

    Eli (March 11th, 2008, 5:32 am)

    Good article, plenty of information here, and eye-candy of course! I myself am a designer, trying to get used to the new styles now.

  5. 5.

    Chris (March 11th, 2008, 6:09 am)

    Great round up! Love a bit o’ grunge me… Although, rather like some nice class C drugs out there I reserve this style for my own personal use and try not to push it on my usual clients.

    A single tiny element of grunge can spice up a plain, clean corporate site no end. Add too much though and your heading for trouble. Those corporate types will even warn you that a bit of the auld grunge design can lead to harder stuff!!!

  6. 6.

    Arnar (March 11th, 2008, 6:13 am)

    Use whatever style fits the site you are working on. Using a style simply because it is trendy won’t produce a good looking website.

    Just imagine corporate sites such as apple or adobe in grunge … horrible, right?

  7. 7.

    nora (March 11th, 2008, 6:23 am)

    Mhm I think too, that the grunge style isn’t that new. I like it but normally I wouldn’t use it for companies, they like it as clean as possible.

  8. 8.

    Rob Mason (March 11th, 2008, 6:38 am)

    Surprised not to see Link [elliotjaystocks.com] website in the list.

  9. 9.

    micah (March 11th, 2008, 6:40 am)

    The only reason a style looks like it’s part of an age to you is because you are too deeply entrenched into a piece of that age to see what’s happening in the design world clearly. Step out. Stop being a tool of the times and recognize that style is relative to the mood you’re trying to convey, as Arnar has pointed out.

    Kids these days. Sigh. No sense of the conceptual.

  10. 10.

    Robin Parker (March 11th, 2008, 6:52 am)

    I came across Bart-Jan Verhoef’s site the other day, very nice. It struck me that I’ve never seen a font as clean as Din used in a grungy/distressed context before. I think it works really well in this instance

  11. 11.

    Ben Jacob (March 11th, 2008, 6:52 am)

    I also have same opinion as zombiebr, Grunge style is out dated. In the present condition we can see people are giving more importance to simple, Smooth color schemes with some vector arts or nature illustrations..

  12. 12.

    tom (March 11th, 2008, 6:58 am)

    I still like clean designs - I also wasn’t such s fan of pure 2.0-Designs. I think there is a special solution for every client. Of course there are new trends every year but good design will be long-lasting and memorable.

    But anyway this article comes very handy for an actual project .. :)
    Thanks for the good quality of content!

  13. 13.

    imaginepaolo (March 11th, 2008, 6:59 am)

    Great collection… beautiful… how to define my style? Link [www.imaginepaolo.com]

  14. 14.

    Gabe (March 11th, 2008, 7:06 am)

    Thank you for quantifying “grunge”, it really cleared things up for me. I had been subconsciously equating it to dirty, but, like you say, it’s really not. With regards to “grunge” being outdated, it seems to be the word is outdated, not the styles of the samples shown here. The samples shown are very modern, they combine “clean” elements with grungy elements. Granted, it wouldn’t make sense for many sites to have any grungy elements (gotta keep the audience in mind, right?), but in some instances this style poignantly expresses the overall tone/mood/feeling of a site and its “brand”. It’s great to see the backlash against the shiny look of a few years ago, but these designs borrowed some of the other “2.0″ elements that made sense (clean layout, whitespace, big type.)

  15. 15.

    Steven (March 11th, 2008, 7:15 am)

    It’s interesting to think that web design may have already reached the end of its history. I’ve spent a couple of years wondering, “where do we go next”, and if the answer is “back to where we’ve been”, that leaves us in a unique place in the history of design; we’re the first design discipline to reach a creative plateau after just 14 years.

    The reason for this is obvious, though. Past advertising mediums — print and video, for instance — had prohibitively expensive cost-of-admission, and were used chiefly for commercial interests. A corporation would spend a mint of a print campaign back in the day, and they wanted their money’s worth. Convention and proven techniques ruled the day, leading to very slow stylistic evolution. But with the web, you had tens of thousands of people with no startup costs and no accountability doing everything at once.

    Has it all been done? It’s looking that way right now.

    In a way, it’s a good thing (for designers working commercially, at least), because we have a finished “toolkit”, so to speak. There’s an established style that will suit any client, which lets us do our jobs much more effectively. But it makes you wonder what the future of web design as an art form will look like.

    Maybe increasingly cheap bandwidth and increasingly higher resolutions will give us something new — I hope so, anyway. But right now, I really don’t know where we go from here.

  16. 16.

    scherii (March 11th, 2008, 7:16 am)

    Grunge is a nice form of design, but it inreases the loading time of a site enormously ~> much pictures instead of web 2.0-gradients (1px * 150px for example)

    >> Just imagine corporate sites such as apple or adobe in grunge … horrible, right?
    Yeah.. that would be horrible :)

  17. 17.

    Jackson (March 11th, 2008, 7:19 am)

    I tend to agree with the other commenters. Grunge style is played out. There’s not much there left to explore. In my opinion, I feel that the trend in web design will shift more towards warm, humanist design and incorporate natural textures (paper, wood, cork, etc.) into a cleaner and more elegant look than is capable with grunge style. There certainly is a place for grunge design; it just won’t be as ubiquitous as the whole glossy “web 2.0″ thing was.
    There are a lot of exciting things happening with typography and print design now. I’m almost bold enough to say that the whole 20th Century modernism / postmodernism pendulum swing is coming to a halt, to allow a new style to emerge. There’s certainly an Arts & Crafts revival happening in the art world now, and it’s bound to have implications on other disciplines as well.

  18. 18.

    Bart-Jan Verhoef (March 11th, 2008, 7:25 am)

    Obviously, the grunge look is not always a solution, just as the ‘web 2.0′ (or any other visual style) isn’t. It all depends on the specific project.

    Personally, I love the grunge style. Not just to look at, but also to create. It’s so much fun to create half a design (or just some details) with your bare hands, instead of doing everyting digitally!

  19. 19.

    Tommy (March 11th, 2008, 7:27 am)

    Great List. Tend to design more on the clean side, but just been inspired to get a little dirty.

  20. 20.

    MR_nobody (March 11th, 2008, 7:31 am)

    You’ve missed Link [www.e-knjige.net] :-)

  21. 21.

    Brett (March 11th, 2008, 7:33 am)

    I’m glad that everyone else agrees. I really dislike Grunge websites, some of them pull it off but for the most part, they are harder to navigate and put design before content.

  22. 22.

    Ryan (March 11th, 2008, 7:36 am)

    Hey, great article! Thanks for the mention.

    I agree that the recent grunge resurgence is due in part to a backlash against the web2.0 style. Will it become as pervasive as 2.0 seems to be? Most likely not as it does have a narrower scope of sites that can utilize it effectively.

    To me, grungy and realistic details are classic design elements. A classic never goes out of style if used appropriately!

  23. 23.

    superxtian (March 11th, 2008, 7:44 am)

    wow i like it, grunge! more stylish and unique.

  24. 24.

    Jimmy (March 11th, 2008, 7:48 am)

    The next time I hear web 2.0 I am going to jump off a bridge.

  25. 25.

    tzGrungz (March 11th, 2008, 7:57 am)

    It’s funny to see posts with a certain type of design, draw such negative criticisms.
    I’ll have to agree with Ryan, grungy equates realism much of the time.
    If you don’t like realism, you must suck at Photoshop, sorry about your luck.
    Some of the detailed textures in these designs do create larger file sizes, that’s to be expected.
    Great artists don’t paint with the cost of the paint in mind.

    thanks for another inspiring list!
    Rock On!

  26. 26.

    Anon (March 11th, 2008, 8:11 am)

    WEB 2.0!!!

  27. 27.

    David (March 11th, 2008, 8:13 am)

    Amazing!
    Is this web 2.1?

    Guys you rock!

  28. 28.

    Brandon (March 11th, 2008, 8:22 am)

    The grunge typeface used in the “Burn The Fields” band website is WAY WAY WAY TOO OVERUSED. It needs to never see the light of day again. It has been abused and misused to the point that it needs retiring. I believe it is either “Downcome” or “Dirty Ego” from misprintedtype. No offense to misprintedtype. The typeface could be used correctly, but I have not seen yet a good application of the font, other than the way it is shown on misprintedtype’s website.

  29. 29.

    Brandon (March 11th, 2008, 8:30 am)

    Also, adding to my previous comment, in regards to the “Web 2.0″ misnomer and other styles…
    There is no design trend or style that anyone needs to follow, even though this article seems to hint at that.

    Design is not about trends although they do occur. Design is about using the resources that work best for the project at hand. Do not use glossy shiny orbs if your project does not dictate their use. The same goes for “grunge” designs.

    Sticking to trends is the mark of a lazy designer. Don’t settle for less just because its easier to use grunge for everything. Please only use styles where they are needed. It is crazy to see the design world change. Now with automated styles and horrible typefaces that clients have somehow been convinced to let designers use, nearly anyone thinks they are a designer.

    Just because you choose a different typeface than Times New Roman for your Word document, does not make you a designer.
    The current state of design needs a huge overhaul.

  30. 30.

    tripdragon (March 11th, 2008, 8:33 am)

    web 2.0 web 2.0 web 2.0!!
    ! Woot! Go ajax!

    nOOOOO

    Well it seems that the Radial is now overused. Great, thanx, I loved that shape. Oh look at me I’m a logo that needs a radial to focus on my icon. Wooooo

    What’s next. The fashion design theme, or is it the jittery coffee tea filled designer? And how do Coders promote themselves on the web?

  31. 31.

    Skattabrain (March 11th, 2008, 8:46 am)

    I have to disagree … i don’t see the large businesses going grunge outside of companies selling fashion. the web 2.0 look is not so much a style trned to me as it is being smarter about communication.

    but i’ve been wrong before.

  32. 32.

    Diego (March 11th, 2008, 8:51 am)

    I agree, grunge is for bands, although I would use it for an old fashion car repair place (dunno the exact word in english, bear with me!), I think one of the sites was for that.

  33. 33.

    Steve (March 11th, 2008, 8:52 am)

    The “grunge” design treatment has been a small part of the web since the mid 90’s. It always “appears to be gaining popularity,” but it never really does. lol!

    Nice collection of sites though!!

  34. 34.

    Christine (March 11th, 2008, 8:57 am)

    Congrats, you’ve started a nice discussion here. Seems to be an emotional topic. Interesting…
    Thanks, Christine

  35. 35.

    Braintrove.com (March 11th, 2008, 9:00 am)

    While there are some interesting design elements in some of the examples, I find that most of it adds up to a lot of eye clutter. But then again, it all depends on your target audience. I prefer a cleaner design.

  36. 36.

    Chris (March 11th, 2008, 9:03 am)

    tzGrungz ..eh a couple of dodgy, sweeping statements there Picasso!

  37. 37.

    Creativepayne (March 11th, 2008, 9:32 am)

    It’s a good idea to ask yourself what you want to express rather than what is “in” or “out.”

    What is web design turning into a Fashion statement? I don’t want to think of myself as following trends, I would like to think of my profession as making the right decisions. Trends are good to watch, but not to live by.

    Also, If it works for the right client then use it.

    Their will always be someone saying “Oh that’s so out” If it works for what I’m trying to say, conveys a message that needs to be conveyed then it’s a good choice.

    Every style has it’s place in this world.

  38. 38.

    Bob (March 11th, 2008, 9:40 am)

    It may be hip.. it may be coool.. but I don’t want to look down a toilet bowl when I’m trying to book a flight online. Each design to it’s own place - Some places may be more ‘trendy’ than others but gritty realism will never sell that much stuff!

  39. 39.

    cemiotika (March 11th, 2008, 10:09 am)

    Hi there!, nice work, i have the link of a “grungie” website from a band,

    Link [ort.laurentlazard.com] (spanish link)

  40. 40.

    Alvin (March 11th, 2008, 10:14 am)

    Personally i dont like the grunge style, or the way that other designers treat it.

    Grunge is good for the print but for the web it suck. Users need information, not the beauty (or the dirt in this style).

    Grunge is based on to much grafic and a lack of white space. On all the example sites above the text is hard to read and to interpret. And also i dont think that Grunge style is gaining popularity

  41. 41.

    Laura V (March 11th, 2008, 10:42 am)

    You guys should consider using sites that combine minimalism and the grunge style like Link [www.ziked.com]

  42. 42.

    Germán (March 11th, 2008, 11:19 am)

    grunge? new trend? haha! please, wake up people!

  43. 43.

    Reginald (March 11th, 2008, 11:28 am)

    I actually found the few samples of the grunge design visually stimulating.

    I admit that I found them really refreshing.

    Thanks for the information.

  44. 44.

    salinon (March 11th, 2008, 11:44 am)

    Great article, grunge works for blogs, arty sites.

  45. 45.

    Mark (March 11th, 2008, 12:01 pm)

    this site has interesting header too Link [stylizedweb.com]

  46. 46.

    GoingLikeSixty (March 11th, 2008, 12:36 pm)

    Love this stuff.

    Blasphemy: I’m doing my own design just because I like to tinker. I’m striving for a Steampunk design, but see a lot of grunge ideas that I would like to incorporate.
    (If you look, do it in FF, IE is borked.)

    Fun to see what real designers are doing!

  47. 47.

    Bryan D. Hughes (March 11th, 2008, 1:11 pm)

    Great article.

    I see a lot of comments condemning designing with the trends, but I would advise that it is important to understand them even if you don’t use them. Deconstruction of trendy design can reveal clues for low-latency communication by understanding what is instantly understood.

  48. 48.

    Michael J (March 11th, 2008, 1:20 pm)

    Grunge is, I think, more an way to make the web look a bit more humanistic, to give it some texture and depth. Not that this can’t be accomplished in other ways. Sometimes that little big of dirtiness makes a website feel more like a real thing, rather than a bunch of boxes rendered out in different colors.

    Then again, maybe it’s because my own desk is a mess.

  49. 49.

    steve (March 11th, 2008, 1:37 pm)

    to me this whole ‘grunge’ design trend really just seems like another flavor of the overall ‘web 2.0′ one.. i mean, in terms of underlying structure, most of the designs above have the same basic breaks from old-school web design that made web 2.0 appealing in the first place: larger fonts, big bold graphics and section divisions, and simplicity in terms of informational conent.. the main difference is only when it comes to specific graphics, which end up with a more organic, distressed style. These elements, despite their ‘grunge’ label, are still VERY clean as is the end-user experience. I’m rambling, but what i guess i’m trying to say is that i really don’t feel that there is enough of a difference between ‘web 2.0′ and ‘grunge’ to start drawing lines in the sand between design trends.. they’re both part of the same trend.

  50. 50.

    Matt Radel (March 11th, 2008, 1:50 pm)

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

  51. 51.

    Juanjo Vargas (March 11th, 2008, 1:57 pm)

    thanks soooo much!

  52. 52.

    Jim C (March 11th, 2008, 1:58 pm)

    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.

  53. 53.

    Herrimanjoe (March 11th, 2008, 2:09 pm)

    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!

  54. 54.

    Pallian (March 11th, 2008, 2:39 pm)

    grunge is not back - do some homework.

  55. 55.

    LeftRight (March 11th, 2008, 3:19 pm)

    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*

  56. 56.

    existdissolve (March 11th, 2008, 3:46 pm)

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

  57. 57.

    David Hellmann (March 11th, 2008, 4:59 pm)

    i lov grunge! good stuff!

  58. 58.

    fazai38 (March 11th, 2008, 7:10 pm)

    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.

  59. 59.

    Gregg (March 11th, 2008, 7:56 pm)

    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…

  60. 60.

    dawist (March 11th, 2008, 8:10 pm)

    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?

  61. 61.

    Ben (March 11th, 2008, 8:53 pm)

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

  62. 62.

    daustralala (March 11th, 2008, 10:01 pm)

    hei, you forget to mention Matt Brett.

  63. 63.

    Mario (March 11th, 2008, 10:16 pm)

    Mexico supports Smashing Magazine!

  64. 64.

    Ewdin (March 12th, 2008, 1:38 am)

    Great collection and article! Thanks! Very interesting!

  65. 65.

    A2daK (March 12th, 2008, 2:02 am)

    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

  66. 66.

    Adam (March 12th, 2008, 2:14 am)

    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

  67. 67.

    Daniel (March 12th, 2008, 4:15 am)

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

  68. 68.

    Fodcj (March 12th, 2008, 9:01 am)

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

    Thanks for the article.

  69. 69.

    Nicolas Solberg (March 12th, 2008, 11:30 am)

    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.

  70. 70.

    Peter (March 12th, 2008, 1:34 pm)

    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 Link [www.startupneworleans.com] that I hope you will all check out and provide your feedback on.

  71. 71.

    Alexandra (March 12th, 2008, 2:31 pm)

    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!

  72. 72.

    Pete Marshall (March 12th, 2008, 2:59 pm)

    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.

  73. 73.

    Christina (March 12th, 2008, 3:28 pm)

    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.

  74. 74.

    D (March 12th, 2008, 4:29 pm)

    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.

  75. 75.

    chazzuka (March 12th, 2008, 5:13 pm)

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

  76. 76.

    kai (March 13th, 2008, 12:31 am)

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

  77. 77.

    Jin (March 13th, 2008, 5:06 am)

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

  78. 78.

    Leon Paternoster (March 13th, 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?

  79. 79.

    JoeSpine (March 13th, 2008, 8:09 am)

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

  80. 80.

    hrvojeB (March 13th, 2008, 8:11 am)

    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!

  81. 81.

    hrvojeB (March 13th, 2008, 8:16 am)

    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.

  82. 82.

    Milwaukee Website Design (March 13th, 2008, 9:42 am)

    The grunge look is definitely where it’s at. I can’t wait until I start seeing some decent flash homepages using this look, with mesh overlays and stuff.

  83. 83.

    PhilB (March 13th, 2008, 10:31 am)

    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?

  84. 84.

    AdLibBob (March 13th, 2008, 12:15 pm)

    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.

    Link [www.usps.com]

  85. 85.

    Max Bode (March 13th, 2008, 2:03 pm)

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

  86. 86.

    All-X (March 13th, 2008, 10:25 pm)

    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.

  87. 87.

    Dave (March 14th, 2008, 12:08 am)

    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.

  88. 88.

    kojot (March 14th, 2008, 1:57 am)

    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…

  89. 89.

    Ben (March 14th, 2008, 5:40 am)

    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.

  90. 90.

    quirk (March 14th, 2008, 11:34 am)

    Link [wreckandsalvage.com] have always been a fan. I love greasy, filthy web sites.

  91. 91.

    ttnet (March 15th, 2008, 2:37 am)

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

  92. 92.

    coyote creative (March 15th, 2008, 10:44 am)

    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!

  93. 93.

    A u d e e (March 15th, 2008, 9:56 pm)

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

  94. 94.

    Martin (March 18th, 2008, 6:47 am)

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

    Thanks for the article.

  95. 95.

    Caligula (March 18th, 2008, 7:05 am)

    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.

  96. 96.

    Baricella (March 26th, 2008, 6:33 am)

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

  97. 97.

    Gnuboss (March 26th, 2008, 10:22 am)

    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.

  98. 98.

    Webtutes (March 27th, 2008, 9:26 am)

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

  99. 99.

    Alex (March 28th, 2008, 5:16 am)

    This is quite excellent
    inspired me
    Link [rullingen.deviantart.com]

  100. 100.

    SubOne (March 29th, 2008, 11:00 am)

    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.

  101. 101.

    adsl (April 23rd, 2008, 6:52 am)

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

  102. 102.

    Ollie Kavanagh (April 24th, 2008, 11:30 pm)

    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 Link [www.olliekav.com]

  103. 103.

    Mo Kargas (April 27th, 2008, 8:49 pm)

    Ollie, love that look mate

  104. 104.

    Stephen (May 19th, 2008, 2:31 pm)

    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.

  105. 105.

    K3vs (May 30th, 2008, 2:46 pm)

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

  106. 106.

    Tara (July 3rd, 2008, 4:46 pm)

    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.

  107. 107.

    Hori (July 17th, 2008, 2:16 pm)

    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!

  108. 108.

    Gerd Wippich (August 12th, 2008, 10:44 pm)

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

  109. 109.

    web dizayn (September 8th, 2008, 9:51 pm)

    thank you

  110. 110.

    Şerit Testere (September 26th, 2008, 11:43 pm)

    thank you

  111. 111.

    Racunovodski servis (October 1st, 2008, 3:18 am)

    Nice collection!

  112. 112.

    justafa (October 2nd, 2008, 7:56 am)

    For the record Link [www.photocomma.com]

  113. 113.

    Raymond (October 9th, 2008, 9:55 am)

    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.