Smashing Magazine - we smash you with the information that will make your life easier. really.

I agree. I think grunge should stay on the band websites, cleaner is modern, give it time and grunge will be back in, it always comes crawling back.

Good article, plenty of information here, and eye-candy of course! I myself am a designer, trying to get used to the new styles now.

Use whatever style fits the site you are working on. Using a style simply because it is trendy won’t produce a good looking website.

Just imagine corporate sites such as apple or adobe in grunge … horrible, right?

Surprised not to see Elliot Jay Stocks’ website in the list.

I came across Bart-Jan Verhoef’s site the other day, very nice. It struck me that I’ve never seen a font as clean as Din used in a grungy/distressed context before. I think it works really well in this instance

I still like clean designs – I also wasn’t such s fan of pure 2.0-Designs. I think there is a special solution for every client. Of course there are new trends every year but good design will be long-lasting and memorable.

But anyway this article comes very handy for an actual project .. :)
Thanks for the good quality of content!

Thank you for quantifying “grunge”, it really cleared things up for me. I had been subconsciously equating it to dirty, but, like you say, it’s really not. With regards to “grunge” being outdated, it seems to be the word is outdated, not the styles of the samples shown here. The samples shown are very modern, they combine “clean” elements with grungy elements. Granted, it wouldn’t make sense for many sites to have any grungy elements (gotta keep the audience in mind, right?), but in some instances this style poignantly expresses the overall tone/mood/feeling of a site and its “brand”. It’s great to see the backlash against the shiny look of a few years ago, but these designs borrowed some of the other “2.0″ elements that made sense (clean layout, whitespace, big type.)

Grunge is a nice form of design, but it inreases the loading time of a site enormously ~> much pictures instead of web 2.0-gradients (1px * 150px for example)

>> Just imagine corporate sites such as apple or adobe in grunge … horrible, right?
Yeah.. that would be horrible :)

Obviously, the grunge look is not always a solution, just as the ‘web 2.0′ (or any other visual style) isn’t. It all depends on the specific project.

Personally, I love the grunge style. Not just to look at, but also to create. It’s so much fun to create half a design (or just some details) with your bare hands, instead of doing everyting digitally!

You’ve missed http://www.e-knjige.net/ :-)

Hey, great article! Thanks for the mention.

I agree that the recent grunge resurgence is due in part to a backlash against the web2.0 style. Will it become as pervasive as 2.0 seems to be? Most likely not as it does have a narrower scope of sites that can utilize it effectively.

To me, grungy and realistic details are classic design elements. A classic never goes out of style if used appropriately!

The next time I hear web 2.0 I am going to jump off a bridge.

WEB 2.0!!!

The grunge typeface used in the “Burn The Fields” band website is WAY WAY WAY TOO OVERUSED. It needs to never see the light of day again. It has been abused and misused to the point that it needs retiring. I believe it is either “Downcome” or “Dirty Ego” from misprintedtype. No offense to misprintedtype. The typeface could be used correctly, but I have not seen yet a good application of the font, other than the way it is shown on misprintedtype’s website.

web 2.0 web 2.0 web 2.0!!
! Woot! Go ajax!

nOOOOO

Well it seems that the Radial is now overused. Great, thanx, I loved that shape. Oh look at me I’m a logo that needs a radial to focus on my icon. Wooooo

What’s next. The fashion design theme, or is it the jittery coffee tea filled designer? And how do Coders promote themselves on the web?

I agree, grunge is for bands, although I would use it for an old fashion car repair place (dunno the exact word in english, bear with me!), I think one of the sites was for that.

Congrats, you’ve started a nice discussion here. Seems to be an emotional topic. Interesting…
Thanks, Christine

tzGrungz ..eh a couple of dodgy, sweeping statements there Picasso!

It may be hip.. it may be coool.. but I don’t want to look down a toilet bowl when I’m trying to book a flight online. Each design to it’s own place – Some places may be more ‘trendy’ than others but gritty realism will never sell that much stuff!

Personally i dont like the grunge style, or the way that other designers treat it.

Grunge is good for the print but for the web it suck. Users need information, not the beauty (or the dirt in this style).

Grunge is based on to much grafic and a lack of white space. On all the example sites above the text is hard to read and to interpret. And also i dont think that Grunge style is gaining popularity

grunge? new trend? haha! please, wake up people!

Great article, grunge works for blogs, arty sites.

Love this stuff.

Blasphemy: I’m doing my own design just because I like to tinker. I’m striving for a Steampunk design, but see a lot of grunge ideas that I would like to incorporate.
(If you look, do it in FF, IE is borked.)

Fun to see what real designers are doing!

Grunge is, I think, more an way to make the web look a bit more humanistic, to give it some texture and depth. Not that this can’t be accomplished in other ways. Sometimes that little big of dirtiness makes a website feel more like a real thing, rather than a bunch of boxes rendered out in different colors.

Then again, maybe it’s because my own desk is a mess.

Grunge design is great and necessary to help keep “clean” design honest. But I think it’s even more fun when the lines blur.

Grunge is synonymous with Pearl Jam, the mid-90s and teenage angst and is therefore giving commenters angst.

Design has definitely become more hand-tooled, tactile, and organic. Classic and formal typography, authentic textures, old-world newspaper layouts seem to be coming back in.

Computer graphics (and all computer-based expression) has consistently moved from cold/mechanical to warm/human since the early 90s. Graphic design then was dominated by the constraints of new technology: colors, textures, and type were all simpler — constrained by slow processors, complicated color correction and printing processes, and analog camera.

oh, and a severe lack of alpha channels.

Early online graphics had to be simple — mostly due to poor markup and low bandwidth. Flash, rigid grids, solid colors, and a more Modern design sense became prevalent.

Since the early 2000s, however, constraints have be lifted by better software, faster hardware, cheap bandwidth, CSS, digital cameras, etc. Designers also seem better read and are (re)exploring the trade’s roots — especially in typography. The result is that more artists are better able to recreate the complexity and authenticity of the real world — carving out a visual space that feels (sur)real.

grunge is not back – do some homework.

I love the grunge look, but I’ve never like the yellowed tape effect–always looks way to forced.

I think grunge is good in a small site. But not in a long long page which is like Blog. I think it will also makes our eye very tired while readying on a complicated textured background.

I still prefer simplicity.

Accidentally I resently searched for grunge styles. So thanks to the collector!
But in my humble opinion, isn’t it a little bit old-fashioned? Or is it retro?

hei, you forget to mention Matt Brett.

Great collection and article! Thanks! Very interesting!

Allways using those stickers etc. is boring and cheap. It´s fantastic photoshop work, but the final result is low-effect. Sorry :) Vivat le SM

I don’t like a single one of those designs… I think keeping it clean is still the way forward!

Thanks for the article.

While I personally tend to want to work with designs that are “clean”, there is definitely a place for grungy design, and for that matter all manner of designs. The great thing about web dev is that it is constantly in flux, what worked for everyone 6 months ago, may not work now. There are certain standards that make a site useful and useable, but whether clean or grungy, good design is good design (or conversely as I have been know to say before “Crappy knows crappy”)

On another note, I just wanted to give a shout to Smashing for always providing amazing resources for developers.

I have used the content here extensively to help “teach” some of the print designers I work with how to design for web. Great stuff, and because of it we just launched a new site focused on entrepreneurship and startups in New Orleans that I hope you will all check out and provide your feedback on.

Some very good examples of grungy design work there, but at the same time there are some examples which look like the designer is trying a little bit too hard and has given the site a grungy look and feel because someone told them or they read it was the in-thing to do.

The grunge look and feel most certainly has it’s place and I am a fan, but at the same time I’m also a fan of very clean minimal sites, when reviewing these designs we should consider how the aesthetic of an individual piece compliments the brand and content its portraying and whether it is fitting or not, it’s this that makes a successful design rather than rather than a look and feel that fits with the current trend.

I think there’s a bit of lag occurring in regards to web design these days. A few years ago designers were going nuts over grunge but it wasn’t hitting home with certain businesses. Now I think a lot of these businesses are trying to capture a more youthful audience on the web and they’re requesting more grunge designs because of the impression that it resonates with youth.

grunge is cool, but usage of grunge is definitely limited to non-company/organization websites.
hope to see more entry related to clean design.

The thought of geeky designers doing ‘grunge’ is amusing in itself. The idea that these are somehow more ‘naturalistic’ or ‘hand-crafted’ than, erm, other designs is equally absurd – have you tried CSSing graphics of this complexity? It’s a technical nightmare.

Can’t we have a 1996 geocities revival? That would be more fun. And can’t graphic designers keep to print?

Well, “grunge-design”… Doesn’t it sound stupid? It’s nothing but kitschy artistic approach to creating visuals. What is web 2.0? Series of rules for those without any real design knowledge by which they can recycle one and the same page over and over again. Sorry, but I don’t see anything beauty full in it. People who call it grunge-design, web 2.0-design… Argh! You can only talk about style. Don’t mistake it with design because you obviously don’t know what the word means. Style and design don’t have and must not have anything in common because they are two totally opposite things. Word style can only be used in terms of art. Design isn’t art. People who put design in museums are idiots. Good design is something subtle and invisible to normal eye because it’s well made to be useful and without any ornament or style. The rest is nothing but kitsch. Kitsch!

The grunge look is definitely where it’s at. I can’t wait until I start seeing some decent flash homepages using this look, with mesh overlays and stuff.

If you haven’t seen it already, the USPS has a temporary design up right now that fits perfectly in with this topic. It looks great.

http://www.usps.com/

I Disagree with the first sentence too, I think the glossy and shiny style still have more room to be explored. Grunge style arising again so fast, to me, appears more like just a breath / pause, because since web 2.0 style starts, everybody thrown in, deep and fast. Perhaps it`s a sign showing that this main style (glossy-shiny w2.0) starts to be revised and, maybe, go in another way / improvement.

I like grunge style, but I think that if the designer work rules, every style can have pretty good highlights to be showed.

Grunge is simply too slow. I know every designer want to show of sometimes but as webapps developer i suggest to get a grip with reality. try to optimise grungy layout for bandwidth efficiency. You have to remember that when site loads >10-20s you are loosing visitors and thats the way it is…

We have always been a fan. I love greasy, filthy web sites.

I love grunge design, but I do not agree that cleaner, slicker design is dead. Why limit art/visual expression in such a way??? One of the defining characteristics of a truly good artist is his/her ability to create in different styles. Especially in graphic design, the ability to respond to the needs and tastes of a client is paramount, but does not mean we can’t end with a great design regardless of style!

I loved each and every of these designs… I think its good when its tough, even better when its toughest

Thanks for the article.

grunge is cool, but usage of grunge is definitely limited to non-company/organization websites.

Grunge is cool but not proffesional. If you have a big company website you can`t use this style.

I thought that most of the sites showcased here were very pleasant looking and well thought out and well put together except for one. I had the unfortunate situation of coming upon the “Extreme-Designer Thomas Schostok from Germany” page through StumbleUpon (just as I got to this page) and I felt disgusted. I think the page is just ugly. Some of the elements are very artistic, but it is just put together very slapdash, unorganized and I feel like my eyes were burning when I was forced to look at it until StumbleUpon was kind enough to show me another page.

I’ve used what I suppose you would call a sort of grungy style on my latest portfolio site, its more based around my interest in Graffiti culture and street art though olliekav.com

Apple did use grunge in a few of its iPod commercials, which I thought personally were beautiful, and professionally didn’t break any sort of visual indicator that it was Apple. I think that grunge as a design “element” is very powerful. especially when people are usually beat over the head with HORRIBLE websites. To see such flourishes in grunge style is oddly refreshing, which is why I think it is coming back.

i love the texture and dirty wrongness of grungey design. i understand that it should be used in varying degrees for different things, because just a touch can go a long way.

i think if you won’t even consider any grunge elements in your design, than you’re limiting yourself.

I agree with Hori. It just depends on the project which style to use.

thank you

For the record photocomma.com

wery nice

…much pictures instead of web 2.0-gradients (1px * 150px for example)

Argh!! Never use an image that’s only 1px wide – it’s a huge performance hit for browsers*. You know when sometimes you come across a page that won’t scroll properly (really jerky/low refresh rate)? If it’s not ‘too many’ instances of Flash, check the background image – more than likely it’s a tiled 1×1 image.

If you’re using a GIF, you can go up to about 200px wide with a negligible increase in filesize due to the type of compression GIF uses. That’ll be 200 times fewer repetitions for the browser to deal with – more than 2 orders of magnitude.

(*IIRC because of the way they store repeated images in memory – each repeat consumes more memory than just the pixels it represents.)

PS for SM: Are threaded comments on the agenda at all? ;)

Most of you would like to design web 2.0 because it loads faster than grungish website, flash websites. Well web designing hasn’t reached its history yet, who knows after several years who would have to consider internet speed?

Technology improves every year or maybe every second. When the time comes that internet connection is as fast as browsing your local folders would you think large scale companies would want to have those “1px x 150px repeating images” over a full flash website? I guess not.

Grunge is a great design, although it should probably not be used in corporate websites, as it gives a more casual feel to the whole site. So, yes, probably better for personal websites. Unless of course, you design grunge artwork, and your site promotes it. Then, I think, grunge is a great design and it should be used. I prefer working with cleaner cut designs myself, but adding a bit of grunge does sometimes, if used right, break the monotony.

I like dirty textures and playing with background images.

Another great post… I especially liked nyq and Darklight… Smashing stuff this…

Aj miles is a good design. It can be applied to both sides as well as business cards. Thanks for the idea.

A very nice and useful article. I like new textures – Grunge Is Cool !!!

is make you crazy but great