Smashing Magazine - we smash you with the information that will make your life easier. really.
Grunge Style In Modern Web Design
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?
As Web 2.0 style passes way, it’s time for something new. Few weeks ago we’ve written about the hand-drawing style 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.
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
5 Excellent Free Grunge Fonts
A selection of free “grunge” or “eroded” typefaces.
Bleeding Cowboys Font
Free for personal use. PC / Mac OS X.
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 Icons
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 Icons
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 Asphalt Icons
Another set, in a different color.
Litho System
A bright and well-worn system replacement icon set. This collection contains 99 individual icons with large resources for Vista & Leopard.
Grungy Textures
The Best Textures Flickr Group offers excellent textures, among them also pretty colorful grunge textures. More than 900 images offered in a variety of sizes.
Torley Textures presents 11 sets with quite impressive images in the size 512×512 — available in the .png-format.
DeviantArt: Textures is probably one of the largest sources for textures. For instance you can find excellent textures by searching for rust, grunge or wood. The choice is enormous, so you better take a portion of patience with you: advertisements are annoying, but the search is worth it.
Example: Flaky Old Gold
W-Enter Textures
Three excellent collections of grungy textures. Preview (links on that page don’t work, use this link to download the textures)
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…"
Garden Grunge Macro Photos
This is what the photographer Neil Creek explored in his garden under the macro-objective.
Urbandirty 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.
Free Grunge textures from TextureKing
A growing collection of grungy textures, available for free download. 319 textures.
10 Grunge, Rusty and Dirty Tileable Textures
This is a collection of ten 1000×1000 pixels seamless textures. These textures were created using Filter Forge plugin. And they are free.
Grunge Textures
Craig Jewells texture set contains 211 photos on Flickr. Different themes: rock, wood, rust, floors and more.
24 Free High-Res Textures
By Bittbox. There is also a set of Photoshop brushes 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.
Grunge Textures
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. Hotlist displays the most popular textures.
Grungy Paper Textures
Scanned Scrapbook Papers Set 1 with 14 themes, Set 2 with 12 themes.
Set 2
Lovelamp presents 7 textures which look like wallpapers (real wallpapers, not desktop wallpapers).
PapierScans offers more paper scans; 12 images in high resolution.
4 Free High-Resolution Grungy Paper Textures
The full-size images are in the 2005×3000px resolution.
Grungy Brushes, Corners etc.
Jenn B’s Typographic Grunge Brushes
A random collection of grungy, decayed typographic brushes.
Grunge Brushes
Photoshop set.
50 Free Vector Grunge Corners
Formats: AI, EPS, SVG, PNG, Ill8. Source grunge is also included to let you play around with.
RisingSun Brushes
This set contains brushes of the size 1280×1024px.
Grunge Brushes
Photoshop set.
Dumpster Brushes
8 Photoshop brushes created from photos of old dumpsters. All brushes are over 800px.
Vector Ink & Paint Splatters
Vector images that would make a niece background touch or even a nice finishing touch to top off a grungy piece of art.
XiconTexturesX
15 icon with two large scratchy / grungy textures in .pat (Photoshop Patterns Format).
Grungy Tutorials
Grunge Photoshop Tutorials
An overview of grungy Adobe Photoshop tutorials.
Grungy Cover Design Tutorial
Learn how to create a nice grungy cover design with grungy textures.
Is Web 2.0 style here to stay?
What do you think? Please take part in the poll and comment on this article!
The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.
(No votes yet)
Loading ...- 124 Comments
- 1
- 2January 29th, 2008 9:27 am
Great Collection. Keep up the good work
- 3January 29th, 2008 9:32 am
Hello, thanks for including my 1000×1000 textures in this amazing guide.
I’m trying to digg it but for some reason I can’t connect to Digg right now.I also have some rusty (rustic, dirty, whatever) high resolution textures at my site:
http://www.photoshoproadmap.com/Photoshop-downloads/info/Backgrounds-and-Textures/Download-Photomorphix-backgroundsThanks again,
Enrique Flouret
The Photoshop Roadmap - 4January 29th, 2008 9:46 am
another great article.
these make a nice change from the current clean/simple design trend
- 5January 29th, 2008 9:46 am
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.
- 6January 29th, 2008 9:50 am
This is my absolute favorite style. So raw and earthy!
- 7January 29th, 2008 10:01 am
The “web 2.0 style” just looks childish to me. The trend will hopefully die soon.
- 8January 29th, 2008 10:03 am
I totally agree with you. Web 2.0 is not about a visual trend…
- 9January 29th, 2008 10:05 am
Great list of grungy things, definitely a bookmark article. Always good to have some nice grunge inspiration and resources.
- 10January 29th, 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.
- 11January 29th, 2008 10:09 am
grunge and dirty styles were long in use before this whole “web 2.0″ thing came about.
- 12January 29th, 2008 10:09 am
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.
- 13January 29th, 2008 10:09 am
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.
- 14January 29th, 2008 10:17 am
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.
- 15January 29th, 2008 10:21 am
@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! - 16January 29th, 2008 10:25 am
Be sure to check out a href=”http://grunge-style.com” title=”Grunge Style”> Grunge Style for a growing list of grunge style resources.
- 17January 29th, 2008 10:34 am
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!
- 18January 29th, 2008 10:35 am
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.
- 19January 29th, 2008 10:36 am
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.
- 20January 29th, 2008 10:49 am
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.
- 21January 29th, 2008 10:59 am
“grunge” style is nothing new – it was being done years ago.
- 22January 29th, 2008 10:59 am
Very nice post for resources.
Thanks.
Bart
- 23January 29th, 2008 11:02 am
I think this style is commonly known as “distressed”. Grunge, pfff! ;-)
- 24January 29th, 2008 11:06 am
And punk is not dead !
Nice post once again (I ramble on…) - 25January 29th, 2008 11:10 am
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 :))) - 26January 29th, 2008 11:29 am
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
- 27January 29th, 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.
- 28January 29th, 2008 11:41 am
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!
- 29January 29th, 2008 12:00 pm
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 :)
- 30January 29th, 2008 12:13 pm
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. - 31January 29th, 2008 12:26 pm
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.
- 32January 29th, 2008 12:58 pm
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!
- 33January 29th, 2008 1:18 pm
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.
- 34January 29th, 2008 1:31 pm
looks emo
- 35January 29th, 2008 1:57 pm
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
- 36January 29th, 2008 2:02 pm
Great list, awesome resources. Thanks a heap!
- 37January 29th, 2008 3:04 pm
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. :) - 38January 29th, 2008 3:37 pm
I love all of the examples, look nice and real grunge style ;)
- 39January 29th, 2008 3:41 pm
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.
- 40January 29th, 2008 5:41 pm
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
- 41January 29th, 2008 10:33 pm
You just gave me so many ideas for my band’s website? (click on my link, say if you like the music)
- 42January 29th, 2008 10:36 pm
Nice grunge collection! You guys are always on a top! Keep it smashing!
- 43January 29th, 2008 11:12 pm
dont know, this style is good for some things, 2.0 style is good for others, in depends on the product your work with. I think 2.0 will live a bit longer, until some really nice and neat design is found different to it, but nice and neat style will always be alive, my first post , love the blog
- 44January 29th, 2008 11:53 pm
It can also be call ‘rustic’
- 45January 30th, 2008 12:31 am
Call it whatever, but that style is simply inadequate for the web due to the graphics heaviness. Keep it simple, keep it clean, I say.
- 46January 30th, 2008 1:02 am
Nice! Very nice!
- 47January 30th, 2008 1:06 am
thx for this list an backlink. ;)
- 48January 30th, 2008 2:07 am
I so love these sites, i’ve been searching for such collections for months, love to see more interesting articles like this
- 49January 30th, 2008 2:18 am
Great list
Love the free fonts
Don’t forget the free dirt texture at http://www.pokedstudio.com/photoshop_dirt_filters.html
- 50January 30th, 2008 3:02 am
These are great examples of grungy designs that aren’t necessarily dirty. I love the raw & artsy feel of them.
- 51January 30th, 2008 3:30 am
IMPRESSIVE resources!
Thank you very much for this list and the inspiration. - 52January 30th, 2008 3:40 am
Thanks for this impressive list !
- 53January 30th, 2008 4:51 am
Ah, this is why i so love smashing magazine, really awesome stuff guys.
- 54January 30th, 2008 6:55 am
great post! impressive!
- 55January 30th, 2008 8:39 am
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.
- 56
- 57January 30th, 2008 9:34 am
A very good style
- 58January 30th, 2008 9:55 am
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.
- 59January 30th, 2008 10:01 am
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!
- 60January 30th, 2008 10:04 am
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….
- 61January 30th, 2008 10:57 am
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”. - 62January 30th, 2008 11:34 am
I was really into the grunge brushes so I used them in one of the Wordpress themes i designed…
- 63January 30th, 2008 12:08 pm
Wow, great collection of textures indeed. Amazing. Liked the macro textures
- 64January 30th, 2008 12:09 pm
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….
- 65January 30th, 2008 12:23 pm
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!!!
- 66
- 67January 30th, 2008 2:01 pm
Actually, it’s my favorite. weathered and aged
- 68January 30th, 2008 4:47 pm
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
- 69January 30th, 2008 7:25 pm
really like this article
- 70January 30th, 2008 7:36 pm
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!
- 71January 30th, 2008 10:41 pm
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!
- 72January 31st, 2008 12:32 am
Great article. No doubt that the “grunge” style originated with punk and moved onto different metal genres.
- 73January 31st, 2008 5:38 am
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…. :-(
- 74January 31st, 2008 6:01 am
great,i like the icons
- 75January 31st, 2008 7:20 am
this site is all-out when serve the review…
I like this site!Grungy style gives me a little of mysterious feeling…
- 76January 31st, 2008 1:41 pm
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!
- 77February 1st, 2008 4:27 am
Awsome Job… I guess that grunge style is becoming a new web 2.0 desiging technique..
Rather than just another fashion stuff… - 78February 1st, 2008 9:08 am
@ 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.
- 79February 1st, 2008 12:02 pm
awesome thanks!
- 80February 2nd, 2008 11:16 am
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.
- 81February 2nd, 2008 9:12 pm
i always enjoy fresh designs that are not afraid to defy convention. these ‘grungy’ designs are just that in my eyes. thanks
- 82February 6th, 2008 3:48 pm
Great article. Grunge is very refreshing. The resources along with this article are fabulous and very inspiring!
- 83February 8th, 2008 12:52 am
nice article as usual, thanks :)
- 84February 10th, 2008 10:15 pm
oh! Great, goot example!!!!
- 85February 11th, 2008 10:59 pm
Dang! I was just getting into the Web 2.0 design and now I gotta switch roads…Hmmmmm. Great post!
- 86February 13th, 2008 4:09 am
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…
- 87February 13th, 2008 9:46 am
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?
- 88February 14th, 2008 3:05 pm
I love those grunge rss icons. I think this ‘trend’ may have some legs.
- 89February 14th, 2008 8:21 pm
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!!!
- 90February 15th, 2008 6:52 am
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
- 91February 22nd, 2008 12:31 am
great article……..
great design…….
great for you ……
thanks alot for give me an idea…… keep moving forward : > - 92February 28th, 2008 11:33 am
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’)
- 93February 28th, 2008 12:14 pm
What an excellent, comprehensive resource! Thank you very much for this fine post!
- 94February 29th, 2008 10:02 am
Every time: great article with much ideas round of design, although is not all my taste ;)
thanks a lot from germany
Ralph
- 95March 3rd, 2008 1:03 am
I like it much more than the glossy stuff.
Great collection again.JM
- 96March 6th, 2008 4:17 pm
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.
- 97March 23rd, 2008 11:56 am
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.
- 98March 25th, 2008 1:11 pm
Please don’t ever delete this post…it’s great! I have it bookmarked and I come back constantly as a reference.
- 99March 30th, 2008 3:30 am
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
- 100April 11th, 2008 1:15 pm
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!
- 101April 14th, 2008 2:59 am
Well, I dislike the style but that said This is one helluva resource for all of that information.
Great job once again.
Citec.in - 102April 29th, 2008 6:35 am
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 ;-)
- 103May 30th, 2008 12:52 pm
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.
- 104June 10th, 2008 1:18 pm
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.
- 105June 20th, 2008 8:50 pm
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.
- 106June 27th, 2008 12:15 pm
love the grunge style.. but new styles will always come..
_____________________________________________
i think grunge
i love grunge
and
i want a grunge girl
…………………………… - 107July 29th, 2008 12:35 am
Your post is really good & its look nice or good grunge style.
- 108September 22nd, 2008 9:48 pm
It is even imagine anything! Here’s just a question of how all this should be potential visitors?
- 109October 19th, 2008 10:21 am
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.
- 110October 22nd, 2008 1:23 pm
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!
- 111November 17th, 2008 7:10 am
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.
- 112December 30th, 2008 9:36 pm
Bravo! Great list and sources as always!
- 113January 22nd, 2009 4:52 pm
Great stuff! I love this grunge style. I been designing in it since before it was cool. =P before Juxt.
- 114January 27th, 2009 8:41 am
amazing work. thanks for putting this all together!
- 115February 14th, 2009 3:49 pm
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*
- 116February 19th, 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.
- 117February 22nd, 2009 11:01 pm
An extremely informative and inspiring article… Really influences my design style… Thank you SM!
- 118March 9th, 2009 11:54 am
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….
- 119April 1st, 2009 2:21 pm
Thanks for your post we got some great ideas when developing the Name Art Site http://www.haljaffenameart.com Look into it when you get a chance and tell me what you think, maybe a good example to post
- 120April 9th, 2009 11:16 am
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!
- 121May 23rd, 2009 11:31 pm
I like the buttons but I’ve seen better ones
- 122June 11th, 2009 12:45 pm
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.
- 123July 28th, 2009 8:51 pm
It is an amazing collection…you give more examples to a topic which keeps visitors to stay on your site.
- 124November 20th, 2009 2:52 pm
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
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- @ilmv oh ok then ;)
- @ilmv no, the SM Book will not be out of date :) We made sure it contains universal design, usability and marketing principles.
- Apple ad bombing Windows 7 on Google - http://bit.ly/28ctPq
- Atatonic - a fresh CSS framework - http://bit.ly/4oOV2w (via @umutm)
- @HrvojeKC yes, that's an interesting idea. Maybe when the waiting is over, we'll write a detailed post about it.
- @benbeltran thanks, Ben, your support means a lot to us.
one of those trends/styles i cant stand.