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.
Web 2.0 meets Grunge.
Notice the clear, rigid structure of the site blocks, supported by the grunge style.
Visually appealing design with grunge elements.
Not that visually appealing, however unique and unusual. Wood in use.
Grunge can be used not only in personal web-sites, but also in galleries and blogs.
Grungy Free Fonts Link
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.
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.
Grungy Textures Link
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.
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…"
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.
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.
Grungy Paper Textures Link
Grungy Brushes, Corners etc. Link
Jenn B’s Typographic Grunge Brushes
A random collection of grungy, decayed typographic brushes.
Grungy Tutorials Link
- 1 https://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/
- 2 http://generationchurch.org/
- 3 http://theletter.co.uk/
- 4 http://www.juxtinteractive.com/
- 5 http://www.alitabatabaei.com/
- 6 http://www.darklightart.com/
- 7 http://www.bittbox.com/freebies/5-excellent-free-grunge-fonts/
- 8 http://www.bittbox.com/freebies/5-excellent-free-grunge-fonts/
- 9 http://www.dafont.com/bleeding-cowboys.font
- 10 http://www.dafont.com/bleeding-cowboys.font
- 11 http://customize.org/icons/55872
- 12 http://customize.org/icons/55872
- 13 http://dryicons.com/free-icons/preview/grungy-olive/
- 14 http://dryicons.com/free-icons/preview/grungy-olive/
- 15 http://dryicons.com/free-icons/preview/grungy-asphalt/
- 16 http://dryicons.com/free-icons/preview/grungy-asphalt/
- 17 http://iconfactory.com/freeware/preview/lith
- 18 http://iconfactory.com/freeware/preview/lith
- 19 http://www.flickr.com/groups/564994@N20/
- 20 http://www.flickr.com/photos/torley/collections/72157594588432564/
- 21 http://www.flickr.com/photos/torley/collections/72157594588432564/
- 22 http://browse.deviantart.com/resources/textures/
- 23 http://browse.deviantart.com/resources/textures/rust/?order=9&startts=1198310400&endts=1200988800
- 24 http://search.deviantart.com/?section=browse&qh=boost%3Apopular+age_sigma%3A24h+age_scale%3A5&q=grunge
- 25 http://browse.deviantart.com/resources/textures/wood/?astartts=1200902400&aendts=1200988800&order=9&startts=1198310400&endts=1200988800
- 26 http://allisonxx24.deviantart.com/art/Set-01-Stock-Images-72941142
- 27 http://ayelie-stock.deviantart.com/art/Flaky-Old-Gold-1-74913153
- 28 http://neil.creek.name/blog/2007/10/15/p365-oct10-garden-grunge-macro-photos/
- 29 http://neil.creek.name/blog/2007/10/15/p365-oct10-garden-grunge-macro-photos/
- 30 http://urbandirty.com/gallery/
- 31 http://urbandirty.com/gallery/
- 32 http://www.textureking.com/
- 33 http://www.textureking.com/
- 34 http://www.photoshoproadmap.com/Photoshop-blog/2007/08/14/10-grunge-rusty-and-dirty-tileable-textures/
- 35 http://www.photoshoproadmap.com/Photoshop-blog/2007/08/14/10-grunge-rusty-and-dirty-tileable-textures/
- 36 http://www.flickr.com/photos/craigjewell/547648571/in/set-72157594475062014/
- 37 http://www.flickr.com/photos/craigjewell/547648571/in/set-72157594475062014/
- 38 http://www.bittbox.com/freebies/24-free-high-res-textures/
- 39 http://www.bittbox.com/freebies/free-high-res-photoshop-brushes-grungy-texture/
- 40 http://www.bittbox.com/freebies/24-free-high-res-textures/
- 41 http://allisonxx24.deviantart.com/art/Set-01-Stock-Images-72941142
- 42 http://allisonxx24.deviantart.com/art/Set-02-Stock-Images-73426218
- 43 http://allisonxx24.deviantart.com/art/Set-01-Stock-Images-72941142
- 44 http://lovelamp.deviantart.com/art/loveicon007-51770890
- 45 http://www.pixey.de/frohe-weihnacht-adventsgeschenk-nr-4-12-pixey-hi-res-papier-scans/
- 46 http://www.pixey.de/frohe-weihnacht-adventsgeschenk-nr-4-12-pixey-hi-res-papier-scans/
- 47 http://www.pixey.de/frohe-weihnacht-adventsgeschenk-nr-4-12-pixey-hi-res-papier-scans/
- 48 http://www.bittbox.com/freebies/free-high-res-grungy-paper-textures/
- 49 http://www.bittbox.com/freebies/free-high-res-grungy-paper-textures/
- 50 http://www.brusheezy.com/brush/507-Grunge-Brushes-007
- 51 http://www.brusheezy.com/brush/507-Grunge-Brushes-007
- 52 http://www.bittbox.com/freebies/50-free-vector-grunge-corners/
- 53 http://www.bittbox.com/freebies/50-free-vector-grunge-corners/
- 54 http://www.brusheezy.com/brush/507-Grunge-Brushes-007
- 55 http://www.brusheezy.com/brush/507-Grunge-Brushes-007
- 56 http://www.brusheezy.com/brush/506-Grunge-Brushes-005
- 57 http://www.brusheezy.com/brush/506-Grunge-Brushes-005
- 58 http://www.brusheezy.com/brush/569-Dumpster-Brushes
- 59 http://www.brusheezy.com/brush/569-Dumpster-Brushes
- 60 http://www.vecteezy.com/vf/321-Vector-Ink-Paint-Splatters
- 61 http://www.vecteezy.com/vf/321-Vector-Ink-Paint-Splatters
- 62 http://community.livejournal.com/xicontexturesx/6331.html?thread=36283
- 63 http://community.livejournal.com/xicontexturesx/6331.html?thread=36283
- 64 http://remcoverstudio.blogspot.com/2006/04/slovenia-1999-dvd-reconstruction.html
- 65 http://remcoverstudio.blogspot.com/2006/04/slovenia-1999-dvd-reconstruction.html
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.