Grunge Style In Modern Web Design

Advertisement

Most design trends come unexpectedly, evolve over time, become pointless and finally disappear from the design landscape. This holds particularly for web design, which is — just as every other creative field — prone for over-hyping and over-usage of trends. Being used excessively (sometimes properly, but mostly without any reasonable purpose), trends lose their ability to communicate information, express something unique or innovative and consequently lose their visual appeal.

Web 2.0 style is an excellent example for this evolution in design. In the last months of 2007 we’ve observed a clear example of design abuse, as glossy buttons, colorful reflections, 3D-effects, rounded corners and xx-large font sizes could be found almost everywhere (and we’ve presented some examples1 a year ago). However, currently we’ve been observing a new step in this evolution. Web 2.0 elements start to disappear; they become more subtle, more user-centric, more content-oriented and less loud. Is it a sign for coming changes?

What is the Grunge style?

As Web 2.0 style passes way, it’s time for something new. Few weeks ago we’ve written about the hand-drawing style2 in modern web-design. And as Web 2.0 style is all about glossy and shiny look, another option would be something rather crude, radical and provoking. Such as the grunge style — dirty look with irregular, nasty, sometimes even ugly and crooked visual elements. Will it establish itself as a trend? Probably not. However, it may be used once some creative and unconventional design approach is needed.

Below we’ve collected everything you would ever need for a perfect design in a grunge style — design examples, free fonts, icons, textures, brushes and even few tutorials.

Examples of Grunge Style

Grunge doesn’t necessarily stand for dirty. Grunge designs may have subtle dirty elements, providing the content with the dominant position it deserves. Let’s take a look at some examples how it might look like. All screenshots are linked and lead to the sites from which they have been taken.

Texture Screenshot3
Web 2.0 meets Grunge.

Texture Screenshot4
Notice the clear, rigid structure of the site blocks, supported by the grunge style.

Texture Screenshot5
Visually appealing design with grunge elements.

Texture Screenshot6
Not that visually appealing, however unique and unusual. Wood in use.

Texture Screenshot7
Grunge can be used not only in personal web-sites, but also in galleries and blogs.

Grungy Free Fonts

5 Excellent Free Grunge Fonts8
A selection of free “grunge” or “eroded” typefaces.

Texture Screenshot9

Bleeding Cowboys Font10
Free for personal use. PC / Mac OS X.

Texture Screenshot11

Grungy Icons

Stretched, torn and dirty: grunge icons at its best. They don’t necessarily fit to all designs, however it’s nice to have them ready to hand once you might need them.

RSS Grunge Icons12
A set with Feed-Icons in blue, red and green. Sizes: 128 x 128, 64 x 64 and 32 x 32 px. In .png-format. One of the icons has an ornament embedded into it — you can see it in the right hand side of the screenshot.

Icons Screenshot13

Grungy Olive Icons14
This set by designed by Dryicons fits not only to grungy cloth and weapons. 28 icons in the .png-format. 16 x 16, 24 x 24, 32 x 32, 48 x 48 and 128 x 128 px. Released under the Creative Commons Attribution 3.0 license. You can do with them almost everything you might ever need to.

Icons Screenshot15

Grungy Asphalt Icons16
Another set, in a different color.

Icons Screenshot17

Litho System18
A bright and well-worn system replacement icon set. This collection contains 99 individual icons with large resources for Vista & Leopard.

Icons Screenshot19

Grungy Textures

The Best Textures Flickr Group20 offers excellent textures, among them also pretty colorful grunge textures. More than 900 images offered in a variety of sizes.

Texture Screenshot

Torley Textures21 presents 11 sets with quite impressive images in the size 512×512 — available in the .png-format.

Texture Screenshot22

DeviantArt: Textures23 is probably one of the largest sources for textures. For instance you can find excellent textures by searching for rust24, grunge25 or wood26. The choice is enormous, so you better take a portion of patience with you: advertisements are annoying, but the search is worth it.

Texture Screenshot27
Example: Flaky Old Gold28

W-Enter Textures29
Three excellent collections of grungy textures. Preview30 (links on that page don’t work, use this31 link to download the textures)

Texture Screenshot32

Texture Screenshot33

Textures Download34
A number of textures: walls, dirty, wood, graffiti, metal, plastic, stone, sand and cloth. Feel free to use these (mostly dirty) textures for any project, personal or professional. Click any thumbnail and use your mouse to "save image as…"

Texture Screenshot35

Garden Grunge Macro Photos36
This is what the photographer Neil Creek explored in his garden under the macro-objective.

Texture Screenshot37

Urbandirty38 collects the dirty of cities. Virtually, of course, in form of textures. No, this is not beautiful, but real. The collection includes 291 photos in three sizes. Released under the Creative Commons License.

Texture Screenshot39

Free Grunge textures from TextureKing40
A growing collection of grungy textures, available for free download. 319 textures.

Texture Screenshot41

10 Grunge, Rusty and Dirty Tileable Textures42
This is a collection of ten 1000×1000 pixels seamless textures. These textures were created using Filter Forge plugin. And they are free.

Texture Screenshot43

Grunge Textures44
Craig Jewells texture set contains 211 photos on Flickr. Different themes: rock, wood, rust, floors and more.

Texture Screenshot45

24 Free High-Res Textures46
By Bittbox. There is also a set of Photoshop brushes47 made from these grungy textures. There are 12 brushes in the set, and they are all 2500px. Available for CS3, CS1, and in PNG formats.

Texture Screenshot48

Grunge Textures49
Huge choice, (mostly) high quality. For instance in categories Asphalt, Brick, Concrete, Drains, Vents, & Grates, Graffiti & Vandalism, Metal, Mud, Clay & Earth, Old Machinery, Paper & Cardboard, Peeling Paint, Rusted Metal, Spills & Splatter, Stone, Trash & Garbage and Wood Textures. Hotlist50 displays the most popular textures.

Texture Screenshot51

Grungy Paper Textures

Scanned Scrapbook Papers Set 152 with 14 themes, Set 253 with 12 themes.

Texture Screenshot54
Set 2

Lovelamp55 presents 7 textures which look like wallpapers (real wallpapers, not desktop wallpapers).

Texture Screenshot56

PapierScans57 offers more paper scans; 12 images in high resolution.

Texture Screenshot58

4 Free High-Resolution Grungy Paper Textures59
The full-size images are in the 2005x3000px resolution.

Texture Screenshot60

Grungy Brushes, Corners etc.

Jenn B’s Typographic Grunge Brushes
A random collection of grungy, decayed typographic brushes.

Texture Screenshot

Grunge Brushes61
Photoshop set.

Texture Screenshot62

50 Free Vector Grunge Corners63
Formats: AI, EPS, SVG, PNG, Ill8. Source grunge is also included to let you play around with.

Texture Screenshot64

RisingSun Brushes65
This set contains brushes of the size 1280x1024px.

Texture Screenshot66

Grunge Brushes67
Photoshop set.

Texture Screenshot68

Dumpster Brushes69
8 Photoshop brushes created from photos of old dumpsters. All brushes are over 800px.

Texture Screenshot70

Vector Ink & Paint Splatters71
Vector images that would make a niece background touch or even a nice finishing touch to top off a grungy piece of art.

Texture Screenshot72

XiconTexturesX73
15 icon with two large scratchy / grungy textures in .pat (Photoshop Patterns Format).

Texture Screenshot74

Grungy Tutorials

Grunge Photoshop Tutorials75
An overview of grungy Adobe Photoshop tutorials.

Texture Screenshot76

Grungy Cover Design Tutorial77
Learn how to create a nice grungy cover design with grungy textures.

Texture Screenshot78

Is Web 2.0 style here to stay?

What do you think? Please take part in the poll and comment on this article!

Footnotes

  1. 1 http://www.smashingmagazine.com/2006/09/03/webdesign-trends-badges-tag-clouds-enormous-fonts/
  2. 2 http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/
  3. 3 http://generationchurch.org/
  4. 4 http://theletter.co.uk/
  5. 5 http://www.juxtinteractive.com/
  6. 6 http://www.alitabatabaei.com/
  7. 7 http://www.darklightart.com/
  8. 8 http://www.bittbox.com/freebies/5-excellent-free-grunge-fonts/
  9. 9 http://www.bittbox.com/freebies/5-excellent-free-grunge-fonts/
  10. 10 http://www.dafont.com/bleeding-cowboys.font
  11. 11 http://www.dafont.com/bleeding-cowboys.font
  12. 12 http://customize.org/icons/55872
  13. 13 http://customize.org/icons/55872
  14. 14 http://dryicons.com/free-icons/preview/grungy-olive/
  15. 15 http://dryicons.com/free-icons/preview/grungy-olive/
  16. 16 http://dryicons.com/free-icons/preview/grungy-asphalt/
  17. 17 http://dryicons.com/free-icons/preview/grungy-asphalt/
  18. 18 http://iconfactory.com/freeware/preview/lith
  19. 19 http://iconfactory.com/freeware/preview/lith
  20. 20 http://www.flickr.com/groups/564994@N20/
  21. 21 http://www.flickr.com/photos/torley/collections/72157594588432564/
  22. 22 http://www.flickr.com/photos/torley/collections/72157594588432564/
  23. 23 http://browse.deviantart.com/resources/textures/
  24. 24 http://browse.deviantart.com/resources/textures/rust/?order=9&startts=1198310400&endts=1200988800
  25. 25 http://search.deviantart.com/?section=browse&qh=boost%3Apopular+age_sigma%3A24h+age_scale%3A5&q=grunge
  26. 26 http://browse.deviantart.com/resources/textures/wood/?astartts=1200902400&aendts=1200988800&order=9&startts=1198310400&endts=1200988800
  27. 27 http://allisonxx24.deviantart.com/art/Set-01-Stock-Images-72941142
  28. 28 http://ayelie-stock.deviantart.com/art/Flaky-Old-Gold-1-74913153
  29. 29 http://files.w-enter.com/userfiles/aneen/Textures/
  30. 30 http://www.w-enter.com/forum/showthread.php?t=8646
  31. 31 http://files.w-enter.com/userfiles/aneen/Textures/
  32. 32 http://files.w-enter.com/userfiles/aneen/Textures/
  33. 33 http://files.w-enter.com/userfiles/aneen/Textures/
  34. 34 http://www.drweb.de/textures/index.html
  35. 35 http://www.drweb.de/textures/index.html
  36. 36 http://neil.creek.name/blog/2007/10/15/p365-oct10-garden-grunge-macro-photos/
  37. 37 http://neil.creek.name/blog/2007/10/15/p365-oct10-garden-grunge-macro-photos/
  38. 38 http://urbandirty.com/gallery/
  39. 39 http://urbandirty.com/gallery/
  40. 40 http://www.textureking.com/
  41. 41 http://www.textureking.com/
  42. 42 http://www.photoshoproadmap.com/Photoshop-blog/2007/08/14/10-grunge-rusty-and-dirty-tileable-textures/
  43. 43 http://www.photoshoproadmap.com/Photoshop-blog/2007/08/14/10-grunge-rusty-and-dirty-tileable-textures/
  44. 44 http://www.flickr.com/photos/craigjewell/547648571/in/set-72157594475062014/
  45. 45 http://www.flickr.com/photos/craigjewell/547648571/in/set-72157594475062014/
  46. 46 http://www.bittbox.com/freebies/24-free-high-res-textures/
  47. 47 http://www.bittbox.com/freebies/free-high-res-photoshop-brushes-grungy-texture/
  48. 48 http://www.bittbox.com/freebies/24-free-high-res-textures/
  49. 49 http://www.grungetextures.com/
  50. 50 http://www.grungetextures.com/gallery/hotlist.php
  51. 51 http://www.grungetextures.com/
  52. 52 http://allisonxx24.deviantart.com/art/Set-01-Stock-Images-72941142
  53. 53 http://allisonxx24.deviantart.com/art/Set-02-Stock-Images-73426218
  54. 54 http://allisonxx24.deviantart.com/art/Set-01-Stock-Images-72941142
  55. 55 http://lovelamp.deviantart.com/art/loveicon007-51770890
  56. 56 http://www.pixey.de/frohe-weihnacht-adventsgeschenk-nr-4-12-pixey-hi-res-papier-scans/
  57. 57 http://www.pixey.de/frohe-weihnacht-adventsgeschenk-nr-4-12-pixey-hi-res-papier-scans/
  58. 58 http://www.pixey.de/frohe-weihnacht-adventsgeschenk-nr-4-12-pixey-hi-res-papier-scans/
  59. 59 http://www.bittbox.com/freebies/free-high-res-grungy-paper-textures/
  60. 60 http://www.bittbox.com/freebies/free-high-res-grungy-paper-textures/
  61. 61 http://www.brusheezy.com/brush/507-Grunge-Brushes-007
  62. 62 http://www.brusheezy.com/brush/507-Grunge-Brushes-007
  63. 63 http://www.bittbox.com/freebies/50-free-vector-grunge-corners/
  64. 64 http://www.bittbox.com/freebies/50-free-vector-grunge-corners/
  65. 65 http://www.brusheezy.com/brush/507-Grunge-Brushes-007
  66. 66 http://www.brusheezy.com/brush/507-Grunge-Brushes-007
  67. 67 http://www.brusheezy.com/brush/506-Grunge-Brushes-005
  68. 68 http://www.brusheezy.com/brush/506-Grunge-Brushes-005
  69. 69 http://www.brusheezy.com/brush/569-Dumpster-Brushes
  70. 70 http://www.brusheezy.com/brush/569-Dumpster-Brushes
  71. 71 http://www.vecteezy.com/vf/321-Vector-Ink-Paint-Splatters
  72. 72 http://www.vecteezy.com/vf/321-Vector-Ink-Paint-Splatters
  73. 73 http://community.livejournal.com/xicontexturesx/6331.html?thread=36283
  74. 74 http://community.livejournal.com/xicontexturesx/6331.html?thread=36283
  75. 75 http://tutorialblog.org/grunge-photoshop-tutorials/
  76. 76 http://tutorialblog.org/grunge-photoshop-tutorials/
  77. 77 http://remcoverstudio.blogspot.com/2006/04/slovenia-1999-dvd-reconstruction.html
  78. 78 http://remcoverstudio.blogspot.com/2006/04/slovenia-1999-dvd-reconstruction.html

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

Advertisement
  1. 1

    IMPRESSIVE resources!
    Thank you very much for this list and the inspiration.

    0
  2. 52

    Thanks for this impressive list !

    0
  3. 103

    Ah, this is why i so love smashing magazine, really awesome stuff guys.

    0
  4. 154

    great post! impressive!

    0
  5. 205

    Good point in this article.. Who said punk was dead anyway?

    Grunge style definelty wont be popular just like hardcore deathmetal or other extremes, but I think it is an importent thing, cause it will help keep things in balance.

    In this situation it hopefully will get the design away from the pretty plasticcard princess style, that im not a great fan of. Thx again for a great article.. much appreciated.

    0
  6. 256

    Grungy Textures are also available at stock.diwiesign.com, for free.

    0
  7. 307

    A very good style

    0
  8. 358

    I personally am a fan of the glossy approach but only when used appropriately and if the brief calls for it, there will always be designers that just follow a trend rather than create work that is suited to the brief, some of the grungy stuff there is really nice, and can actually harder to pull off convincingly than the glossy ‘web 2.0′ look.

    0
  9. 409

    I think the decision regarding what design style to use should be made based upon what best represents each client. Sometimes that will be what has become tagged as “Web 2.0″ style. Sometimes, whether we personally like the grunge look or not, it is the style best suited to some clients and their products/services. The one mistake I see being made in web design today is the frequent use of either of those styles applied to projects to which they aren’t relevant.

    The key is to represent each unique client appropriately, trying as best we can to disregard our personal style likes and dislikes. I admit it’s not easy to do!

    0
  10. 460

    You know what is boring, when people say web 2.0 is not a style, yes it’s got more to do with how the web is used blah blah etc. But everyone knows what people are talking about when they use web 2.0 as a style reference….

    0
  11. 511

    1. Punk’s hardly dead. And no, I’m not talking about what you’ll find on MTV, either.
    2. Grunge design has been around for a long time as far as modern web design goes, if that makes sense. To say it’s only a trend is ridiculous.
    3. I’m sick of hearing “web 2.0″ and people who don’t know what it’s about. It’s more so about user experience design than glossy buttons. Reflections, glossy buttons, and big text has been out for a long time and many principles of “web 2.0″ has been out for even longer. To relate the two is idiotic.
    4. I feel the vast majority of those designing the true core of websites today, the ones who make the waves, will ultimately mature in their design leaving a path for the rest to follow. You won’t find a vast majority of sites using grunge simply because of the lack of broadband support as someone already mentioned. Once broadband is a standard and dial up is phased out, you’ll find more graphic enriched websites such as any of Blizzard’s websites as a common “trend”.

    -1
  12. 562

    I was really into the grunge brushes so I used them in one of the WordPress themes i designed…

    http://wordpress.jepson.no/wordpress-themes/grungepress/

    0
  13. 613

    Wow, great collection of textures indeed. Amazing. Liked the macro textures

    0
  14. 664

    Ok so everyone has said that “Web 2.0″ is not about design but experience, interactivity etc…..Not to add fuel to the fire (only a little) but in all fairness we have to realize that the term “Web 2.0″ does obviously relate to higher interactivity with the users BUT we can’t fail to realize that it came about with a distinct look as well.

    I’m not saying that the interactivity associated with “Web 2.0″ can only be associated with the style of design (I admit a lot are obnoxious). But the two are not mutually exclusive. Of course you can find sites utilizing the interactivity popularized with Web 2.0 techniques without having the annoying gloss and gradient (the reverse also being true). But you are ignorant if you say that you can not call the glossy buttons and gradients “Web 2.0″ design….because in fact that is what they are called. Lets quit bickering over the terminology because “Web 2.0″ can mean BOTH a switch in user interactivity AND a set of design characteristics….

    0
  15. 715

    I think that a lot of the elements we learned about from the “Web 2.0″ days will consistently show up in design for years to come. However, they will be intertwined with the new concepts being set into design today. Eventually you won’t even notice they are there anymore.

    Long live blink/marquee!!!

    0
  16. 766

    My blog is grounge too?
    imaginepaolo

    0
  17. 817

    Actually, it’s my favorite. weathered and aged

    0
  18. 868

    Ha..ha.. this is very funny
    I recived the link to this page from an friend as our site is listed above a site we designed maybe 4 years ago.

    My two cents

    #1 web 2.0 is not a style yes but there there is a style that has evolved that is associated with web 2.0 and as such according to pop culture there is a design style called web 2.0. like it or not it is a reality.

    #2 grunge as you call it evolved from the punk music movement in the 70’s with it’s origins coming from concert posters being created crudely and then crudely reproduced on fax machines. it has evolved over time David Carson turned it on it’s ear in the ninties and people started associating it with grunge music. In my creative career that spans about 20 years I have seen it flair into popularity 4 or 5 times. It has never gone away but you see it in things like wwf ads and the likes in the down years then it becomes the style of the moment and you start seeing it done mostly poorly all over for a year then fades again.

    There are some brands like http://volcom.com/ which this loose style is in their dna and always will be.

    Don’t get me wrong I would love to see everybody stop copying each others glossy buttons and grunge as you call it may be a natural 180 degree departure for some but it is not new in the slightest.

    personally I believe that grunge is also over played to me fresh is big and graphic black and white or vivid color here is a good example

    http://www.underconsideration.com/speakup/archives/004151.html

    but then again why follow trends thing of something new for yourself invent your own trend.

    anyway no matter what you do make it an adventure and push yourself that is what design is about.

    cheers

    0
  19. 919

    really like this article

    0
  20. 970

    WOW I check/read this site everday and I was amazed to find one of my REM covers on todays story. So cool to be featured on SMASHING!

    0
  21. 1021

    Once again a very great list from you guys, and i think in the Web nothing stays for long so its just a matter of time till a new Trend comes in then Web 2.0 goes bye bye!

    0
  22. 1072

    Great article. No doubt that the “grunge” style originated with punk and moved onto different metal genres.

    0
  23. 1123

    Ohh… I planned redesigning of my site to web 2.0 but now I don’t know… You wrote that web2.0 era is over… Even don’t know what style to choose to use as corporate in this year…. :-(

    0
  24. 1174

    great,i like the icons

    0
  25. 1225

    this site is all-out when serve the review…
    I like this site!

    Grungy style gives me a little of mysterious feeling…

    1
  26. 1276

    This is brilliant, just what I was looking for to explain to a colleague why I didn’t want to do the usualy blog style site!

    0
  27. 1327

    Awsome Job… I guess that grunge style is becoming a new web 2.0 desiging technique..
    Rather than just another fashion stuff…

    0
  28. 1378

    @ Rob (#5)

    While you’re right that “Web2.0″ is’nt a design style, a lot of web 2 sites follow a very distinctive style, ie; gradients, rounded corners, reflect and shine. Creating a shiny looking site doesnt make it “Web 2.0″ but it’s a design trend that’s become synonymous with a lot of web 2 sites out there.

    0
  29. 1429

    awesome thanks!

    0
  30. 1480

    another nice showcase of grunge style would be http://www.lomographik.ro – the blog of one of my friends, Floppy, a talented photographer and graphic designer.

    0
  31. 1531

    i always enjoy fresh designs that are not afraid to defy convention. these ‘grungy’ designs are just that in my eyes. thanks

    0
  32. 1582

    Great article. Grunge is very refreshing. The resources along with this article are fabulous and very inspiring!

    0
  33. 1633

    nice article as usual, thanks :)

    -1
  34. 1684

    oh! Great, goot example!!!!

    0
  35. 1735

    Dallas Web Designer

    February 11, 2008 10:59 pm

    Dang! I was just getting into the Web 2.0 design and now I gotta switch roads…Hmmmmm. Great post!

    0
  36. 1786

    These grunge designs were already done a lot in the weblog scene of ’02-’03. I myself made at least a couple of these designs for my own (already dead) blog. I’d classify the style before the web 2.0 style, but that’s just a matter of perception probably…

    0
  37. 1837

    Excellent collection as usual from Smashing. We put put a texture CD about 10 years ago (texture portfolio), I’ll see if I can find the originals to put online somewhere.

    Anyone know a good place to upload lots of photo’s for this purpose?

    0
  38. 1888

    I love those grunge rss icons. I think this ‘trend’ may have some legs.

    0
  39. 1939

    These are super dooper cool list of Grunge Style! I always fascinated to this kind of style, and I wrote a tutorial related to Grunge Style about a week ago also. The more eratic your design look, then you’ll go rock!!!

    0
  40. 1990

    i like this grunge style, though its been around for a while. I was just reading another post on this site about the rise of patterns. I found it quite interesting as its something i had noticed myself recently. I reckon that trend would be more likely to get popular than the grunge look

    0
  41. 2041

    great article……..
    great design…….
    great for you ……
    thanks alot for give me an idea…… keep moving forward : >

    0
  42. 2092

    see American Eagle’s Website for an example of how corporate America is translating “Grunge” design. (in my opinion anyways… and I mean there’s quite a bit of the MTV slew hipster style incorporated. But they’re like ‘this is how white people do grunge’)

    0
  43. 2143

    What an excellent, comprehensive resource! Thank you very much for this fine post!

    0
  44. 2194

    Every time: great article with much ideas round of design, although is not all my taste ;)

    thanks a lot from germany

    Ralph

    0
  45. 2245

    I like it much more than the glossy stuff.
    Great collection again.

    JM

    0
  46. 2296

    StumbleUpon this blog from our Web Hosting Company Blog and just wanted to say the use of grunge style in modern web design looks refreshing good. To many web designers out there go overboard and make things just messy.

    0
  47. 2347

    I hate grunge… it looks like a pile of sht. and it looks worse when mixed w/ “Web 2.0″. I prefer clean design; Something light-weight and not rusty and dirty and gross looking.

    0
  48. 2398

    Please don’t ever delete this post…it’s great! I have it bookmarked and I come back constantly as a reference.

    0
  49. 2449

    Check out Auto Skinz Online Now and Save 30% on Select designs. Hiqh Quality digitally printed auto graphic kits for any vehicle. Many different designs and sizes to choose from. Made from easy to apply vinyl anybody can do it. http://www.autoskinzonline.com

    0
  50. 2500

    Sweet! I didn’t know before you included my textures on Smashing Magazine. I’m clearly honored to be amongst such inspiring artists. I was using the search engine @ http://www.sachagreif.com/drse/ and happened to find this! Booyeah!

    0

↑ Back to top