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

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

    Hi there. I’m Ali Tabatabaei, the designer of http://www.alitabatabaei.com (the 4th web design example mentioned above). I live in Iran and until now I’m working and learning web design on my own. I’m looking forward to work in a creative design group and a fresh work environment in Europe or America. If have a job offer for me or know somebody who does I’ll appreciate if you let me know ;-)

    -1
  2. 102

    awesome stuff. I hope that the grunge style isn’t a passing fad, it’s a great counter to the soft and fuzzy “web 2.0″ style.

    0
  3. 203

    I’m not a big fan of grunge style but I do see the artistic uses for something of that nature.

    To everyone mouthing off about there not being a “visual” web 2.0 style: web 2.0 is about ultra-usability and clear communication, but in order to achieve those goals certain visual elements did have to be taken into account which did lead to a Web 2.0 style. If you copy the visuals without the philosophy you end up with junk, but it will follow a recognized visual style.

    0
  4. 304

    I don’t really call much of that stuff “grunge.” To me real grunge has a dark gothic feel and to say something is “grunge without being dirty” is just a contradiction of terms. It doesn’t even make sense. The essence of grunge is dirt, sleaze, dark, moody design. That is what grunge is.

    You can’t hijack the term and then try to apply it to some new age touchy feely commercial artsy type hybrid concept.

    0
  5. 405

    love the grunge style.. but new styles will always come..
    _____________________________________________
    i think grunge
    i love grunge
    and
    i want a grunge girl
    ……………………………

    1
  6. 506

    Your post is really good & its look nice or good grunge style.

    0
  7. 607

    It is even imagine anything! Here’s just a question of how all this should be potential visitors?

    0
  8. 708

    I’m really happy to see some work that comes from Second Life residents such as Torley’s textures or Kim poster for Kill Bill.

    0
  9. 809

    Eu estou usando esse seu material como fonte de estudos para o projeto que desenvolvo de sites de baixo custo. Trabalho em uma empresa mas digo que o projeto é meu pq abracei a idéia. No site seuguiadecidades.com.br pode ser visto alguns dos meus trabalhos em aventura pelo design. Ainda sou muito ruim é verdade. Acho que estou mais para “meia-colher” (se fosse pedreiro) ou um NO design.
    Mesmo assim muito obrigado.

    Até breve!

    0
  10. 910

    I’m just suprised the grunge web design style is being written about here like it is something new. It was around WAY before this web 2.0 stuff. Grunge resources (brushes, fonts, etc) have been around forever, too. I remember making grunge designs for my websites back in 2000-2001, and the style had been around for at least a couple of years prior to that.

    1
  11. 1011

    Bravo! Great list and sources as always!

    0
  12. 1112

    Great stuff! I love this grunge style. I been designing in it since before it was cool. =P before Juxt.

    0
  13. 1213

    amazing work. thanks for putting this all together!

    0
  14. 1314

    I frequent this site often, but have never replied. Just wanted to say thanks for this post and for the Vivid Imagery In Modern Web Design post! *yay! found what I’ve been looking for, hehe*

    0
  15. 1415

    Benjamin Thompson

    February 19, 2009 5:09 pm

    this website is absolute dog n i hate it it suks my dogs nostrel n if u dnt like it then il suk ur cat n um.

    0
  16. 1516

    Karl Francisco Fernandes

    February 22, 2009 11:01 pm

    An extremely informative and inspiring article… Really influences my design style… Thank you SM!

    0
  17. 1617

    I noticed that the warning above my comment says no advertising, so does this mean I should not suggest a website with some great free grunge icons? Hope not, cause I think people should check out icons.mysitemyway.com. They have lots of icons, adding more all the time, and they are really free. Personally, I am not that much of a fan of grunge stuff, but that is a generational thing, I think, and I am definitely not of that generation….

    0
  18. 1718

    I understand that some people like clean contemporary styles, but as an artist grunge is the way to go! It has character, texture, color, and life. I personally would like to see more out there. Thanks for the article!

    0
  19. 1819

    I like the buttons but I’ve seen better ones

    0
  20. 1920

    I think grunge is a unique style that will last long-term online.. > maybe it’s an expression of the need of an at least natural appearance… and for webdesigners grunge is an easy was to show thier creativity and invidividual abilities.

    0
  21. 2021

    It is an amazing collection…you give more examples to a topic which keeps visitors to stay on your site.

    0
  22. 2122

    Saw some comments saying Web 2.0 is not a style. That’s true from a technical view, but I think there was a new look that was ushered in along with the increasing presence of web2.0.
    But I think the clean simple functional look that become more prevalent with web2.0 sites was a style which also resonated with the more professional corporate look. So we started seeing a lot of it. The grundge look this article discusses is visually interesting, but I would say outside of artistic circles it will not have the presence that the web 2.0 style has enjoyed. So while I am ready for something new, I don’t think this will be it, at least not to the same degree that we’ve seen with the web 2.0 style — whatever that is.

    Enjoyed the article. Thanks

    0
  23. 2223

    Nice article, Found lots of useful information about grunge style.
    That’s kind of stupid to relate design with web 2.0. I wonder what will be web 3.0. I guess we can call grunge style web 3.0. or may be some other styles will emerge with 4.0 or 5.0.
    every time when i read about web2.0 design i make me mad. Web 2.0 is a concept not a design aesthetic

    see this the guy who gave concept of web2.0
    http://​oreilly.​com/​p​u​b​/​a​/​w​e​b​2​/​a​r​c​h​i​v​e​/​w​h​a​t​-​i​s​-​w​e​b​-​2​0​.​h​t​m​l​?​p​age=1

    also check this presentation by Elliot
    http:// ​elliot​jay​stocks.​com/​b​l​o​g​/​d​e​s​t​r​o​y​-​t​h​e​-​w​e​b​-​2​0​- ​l​o​o​k​-​f​u​t​u​r​e​-​o​f​-​w​e​b​-​d​e​s​i​g​n​-​n​e​w​-york/

    0
  24. 2324

    i like style vitor and backgrund too i 1 2 show alot style thank!!!

    0
  25. 2425

    I have been into web designing for many years now. I liked some of the textures that you have shown here in this page. This resource is really great! Can you give me a clue of the resource for the fonts of Grunge styles? we at websys – make RnDs in this mater

    0
  26. 2526

    well its certainly not a fad, i dont think its even a fashion, it is a style which will come and stay, perhaps not on the mass marked but its appeal wont fade very much at all. personally, i think that it looks better on print because it is not the most functional thing for web

    0
  27. 2627

    Its an informative article & we will definitely work on this style of website designing……great article!!

    0
  28. 2728

    I totally agree. It make me mad when i see design with web2.0

    0
  29. 2829

    Gothic is gothic. Grunge is grunge. Grunge, as a cultural form, has rarely been dark – not in music or movies or, as we’re now discussing, design.

    0

↑ Back to top