Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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

As Web 2.0 style passes way, it’s time for something new. Few weeks ago we’ve written about the hand-drawing style1 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 Link

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 Screenshot2
Web 2.0 meets Grunge.

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

Texture Screenshot4
Visually appealing design with grunge elements.

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

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

Grungy Free Fonts Link

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

Texture Screenshot8

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

Texture Screenshot10

Grungy Icons Link

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 Icons11
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 Screenshot12

Grungy Olive Icons13
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 Screenshot14

Grungy Asphalt Icons15
Another set, in a different color.

Icons Screenshot16

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

Icons Screenshot18

Grungy Textures Link

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

Texture Screenshot

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

Texture Screenshot21

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

Texture Screenshot26
Example: Flaky Old Gold27

Textures Download
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 Screenshot

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

Texture Screenshot29

Urbandirty30 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 Screenshot31

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

Texture Screenshot33

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

Texture Screenshot35

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

Texture Screenshot37

24 Free High-Res Textures38
By Bittbox. There is also a set of Photoshop brushes39 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 Screenshot40

Grungy Paper Textures Link

Scanned Scrapbook Papers Set 141 with 14 themes, Set 242 with 12 themes.

Texture Screenshot43
Set 2

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

Texture Screenshot45

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

Texture Screenshot47

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

Texture Screenshot49

Grungy Brushes, Corners etc. Link

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

Texture Screenshot

Grunge Brushes50
Photoshop set.

Texture Screenshot51

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

Texture Screenshot53

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

Texture Screenshot55

Grunge Brushes56
Photoshop set.

Texture Screenshot57

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

Texture Screenshot59

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

Texture Screenshot61

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

Texture Screenshot63

Grungy Tutorials Link

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

Texture Screenshot65

Footnotes Link

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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

Advertisement
  1. 1

    I totally agree with you. Web 2.0 is not about a visual trend…

    1
  2. 2

    I think Grunge doesn’t look good for most sites . I mean you don’t want to use it for a shopping site or even a portfolio site. On the other hand it does look good if combined with a clean colorful look like this. In general, i find the dark dirty look annoying and childish

    -2
  3. 3

    one of those trends/styles i cant stand.

    0
  4. 4

    Graphic Design Studio

    January 29, 2008 9:27 am

    Great Collection. Keep up the good work

    2
  5. 5

    another great article.

    these make a nice change from the current clean/simple design trend

    0
  6. 6

    I’m disappointed you mention a “Web 2.0 style” since there is no such thing. It’s impossible to create such a style since “Web 2.0” has nothing to do in any way with styling.

    0
  7. 7

    Jessica D. Mack

    January 29, 2008 9:50 am

    This is my absolute favorite style. So raw and earthy!

    0
  8. 8

    The “web 2.0 style” just looks childish to me. The trend will hopefully die soon.

    -4
  9. 9

    Great list of grungy things, definitely a bookmark article. Always good to have some nice grunge inspiration and resources.

    0
  10. 10

    Braintrove.com

    January 29, 2008 10:07 am

    I’m not a big fan of the grunge style. It’s more often not done very well. Though it does have its place, and if done properly can be very effective. I’ve dabbled with it before, but prefer other styles.

    0
  11. 11

    grunge and dirty styles were long in use before this whole “web 2.0” thing came about.

    0
  12. 12

    I have been a huge fan/maker of grungy designs for a while now. However, I have continued to see it become more popular in web and print design. You said that the grunge look will most likely not become a trend, but I beg to differ. Many artists are using the grunge style when showcasing their portfolios. Perhaps it won’t reach to the global and multi-million dollar companies. However, it already has reached the artist community and is on the rise.

    1
  13. 13

    Well, some of this textures quite look great. But I’m not a fan of this style. I love simplicity in webdesign and this grunge style isn’t simple. It really catches the eye, but it catches too much! The real content is no more the first member.

    0
  14. 14

    I agree that there were recognizable themes in many Web 2.0 apps that came out between 2004-2006. And I’ve seen the grunge style emerge during that same time. But I don’t see this style in web apps, I see it on portfolio sites, brochureware sites, band sites, etc. The Web 2.0 style was created by web app designers for web apps. I have a hard time envisioning using a grunge style for a web app that is designed for ease-of-use by a broad demographic. Not saying the grunge style isn’t cool. Just saying I don’t see it as a replacement for the current web app style. Apples and oranges.

    0
  15. 15

    @Rob,
    Couldn’t be more true that web 2.0 has nothing to do with styling, however I think many people would agree that there are many elements such as the above mentioned “glossy buttons, colorful reflections, 3D-effects, rounded corners and xx-large font sizes” and the like have become synonymous with web 2.0, therefore earning this style the name “web 2.0 style” and unfortunatley, I think it’s a bit late to change it.
    Go folk style!

    0
  16. 16

    Be sure to check out a href=”http://grunge-style.com” title=”Grunge Style”> Grunge Style for a growing list of grunge style resources.

    0
  17. 17

    Great post!

    The web in year 2000 was plenty of microtext and pixel fonts with ultra-small sizes. Ultra neat & tidy minimalist white websites where everywhere too. Today fonts are huge and webs are dirty. Trends evolve and change very fast. Just wondering what we’ll be doing in 5 or 10 years from now!!

    Keep up the good work!

    0
  18. 18

    I see web2.0 becoming more of a niche, with new styles (like grunge) adding to the available genre’s for web designers. I don’t think it will ever leave, just become less popular.

    0
  19. 19

    Grunge style allows the designer to captivate a specific audience on a modern medium. It gives a contemporary web presence without alienating the target audience, and possibly more important, the branding of your website. I could see this style implemented well on, say, Jeep’s website, or any outdoor gear/sports site’s front page.

    But don’t confuse Grunge with a “Web 2.0 Style.” If Web 2.0 had a style, it would most certainly adhere to usability and portability (almost like semantics). A grunge style allows you to embed usable applications to your website. But this style would most certainly not work to define an entire web service.

    In short: Grunge works for front pages and blogs. These include small ‘widgets’ like comment systems, email forms, etc. Actual, multi-page web applications need usable interfaces. That’s where a web 2.0 style would come in to play.

    0
  20. 20

    Hello.

    Thank you very much for including my Rss Grunge Icons in your great List.

    And i am thinking that a new Trend will come. Because tastes change. That was always like that and will also always like that be.

    0
  21. 21

    “grunge” style is nothing new – it was being done years ago.

    0
  22. 22

    Very nice post for resources.

    Thanks.

    Bart

    0
  23. 23

    I think this style is commonly known as “distressed”. Grunge, pfff! ;-)

    0
  24. 24

    And punk is not dead !
    Nice post once again (I ramble on…)

    0
  25. 25

    Grunge style can also be used in unattended websites: I mean, for example, in a food-blog… Have a look to the blog (in Italian) made by a friend of mine: http://fabien.wordpress.com He also won prizes for his grungy pictures… cool
    P.S. Fabien, you owe me at least a pizza for this comment :)))

    0
  26. 26

    This is a great post! Looks like there are many cool things shown here that I will have to spend a couple hours to.

    About 2.0 “style” versus “grunge.” Web 2.0 started not as a style but more about new interactivity. But as time has gone by the web community seems to have adopted a “style” that is now called the web 2.0 style. That being said I don’t think that a grungy style can’t be considered “web 2.0” just by its appearance.

    So in short: there is “web 2.0” and “web 2.0 style” Grunge can be “web 2.0” but not so much a “web 2.0 style”

    Thanks again Smashing

    0
  27. 27

    Joseph Maguire

    January 29, 2008 11:33 am

    Well, I dislike the style but that said This is one helluva resource for all of that information.

    Great job once again.

    0
  28. 28

    Hi SM,

    Thank you very much for including DryIcons.com icons in two of your most recent posts: this one, and “Best of January 2008”. We’ve been developing our sets for 4 months now and giving them for free. This recognition by you guys at SM is truly awarding and keeps us going.

    So, a big thank you from Dryicnons Team!

    0
  29. 29

    It’s great to see this article here. I’ve just written a chapter on grunge style in my eBook about Blogger template customization, so now I can link my readers here to see even more examples of this style.

    I’ve always thought the grunge style is like Marmite: you either love it or hate it! Personally I love the grunge style. But it doesn’t work for all sites. Excellent resources here, thank you for publishing this article :)

    2
  30. 30

    Thanks for the resources,
    but the news are old, examples of this style appeared as early
    as 1998…
    and it already made it to mainstream a while ago:
    http://www.nbc.com/The_Office/ etc.
    I don’t think its a “new” trend, just another side side of the
    “web style” coin.

    0
  31. 31

    No trend on the web sticks around forever, and 90% of what is called “Web 2.0” is simply a shinier minimalist style with a contemporary twist. A lot of the style is reminiscent of the 60’s modernist movement in print. And, to be honest, the last few clients I’ve worked for we haven’t done anything “Web 2.0” styled for because it wasn’t right for the client. I’d like to think that this is where the future is going to be, where designers go, “Yeah, that is really pretty, however it’s not at all for you” and then go on to suggest a style that is more effective for the message. Web 2.0 is great for major corporations, but an indie band?

    What’s more, Web 2.0 ISN’T about visuals. It’s about interaction on the web and the enhanced communication between the user, the interface and the back-end in a way that makes the technical side complex but only so the usable side can be highly simplistic. And even this will change. It will become even more so than it is now, people will start doing even more with the web. It won’t stay because something new is always coming.

    0
  32. 32

    So that’s what it’s called! Funny how you can like an artistic style without knowing it’s name (actually, it’s not funny at all. not even surprising). I love the grunge patterns. It has a very unofficial feel so it’s obviously more suited for private websites or compaines targeted at the teen/young adult demographic.

    Also, it’s worth noting that the widespread advent of broadband is mostly what made grunge possible because this style requires many large images with a wide palette, so I guess that does tie it in a little bit with web2.0 (IMO broadband is a significant factor in web2.0)

    Also also, thanks for all the great resources!

    0
  33. 33

    I think Grunge is overdone, even though my own personal style relies on it, but I think you’ve come up with some decent items here. Grunge can be done VERY badly in the wrong hands.

    The only thing I disagree with is the grunge fonts. Anyone should be able to make their own grunge fonts using a printer and a scanner. Or you can use the brushes and textures here to manipulate fonts to make them grungy. There’s no excuse for defaulting to grunge fonts.

    0
  34. 34

    looks emo

    0
  35. 35

    Great list, awesome resources. Thanks a heap!

    0
  36. 36

    I’m not that found of the grunge style. I’m not really found of the shiny-web2.0 style either.
    What I would love to see in the next years is something that would fake real-life materials : paper, smoothed wood, stone … (a little bit like the link posted by Mirza, but cleaner)
    Now I just have to cross my finger and wait. :)

    0
  37. 37

    I love all of the examples, look nice and real grunge style ;)

    0
  38. 38

    I love the grunge design and the web 2.0 design, but I agree. Web 2.0 is slowly dying, and I would love to see grunge take over.

    0
  39. 39

    wow, I could spend a week browsing through those links. why must there always be soomeone waiting for some work to get done?

    Thanks heaps

    0
  40. 40

    You just gave me so many ideas for my band’s website? (click on my link, say if you like the music)

    0

↑ Back to top