Menu Search
Jump to the content X
X

The Secrets Of Grunge Design

Advertisement

Shiny and glossy design elements are now officially outdated. Just like retro is becoming trendy again, grungy look appears to rapidly gain on popularity. And there is a damn good reason behind it. In our everyday environment we’re unlikely to find ideal geometric forms or pretty shadow effects as they are manifested by glorious Web 2.0-designs. The reality is different, and Web is definitely not an exception here.

Therefore designers often tend to explore the less ideal and more realistic design solutions which reflect the world we’re living in more accurately and precisely. Result: such elements give the design a more realistic, genuine look, a look one would actually expect in real life.

In such grunge designs dirty stains, torn images, “broken” icons and creased pieces of paper are as popular as hand-drawn elements and dirty textures. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note. And dirty textures are often used as background images for navigation menus, photos and overall layouts. Usually these elements are regular objects from our daily life, replicated in their real form without any glossy effects.

Grunge Style ≠ Dirty Look Link

Few weeks ago we’ve already provided you with grungy fonts, textures, icons and brushes. Since most designers were confused about the purpose of these “dirty”, “graffiti-like”, “urban” elements, it’s important to understand that grunge designs don’t necessarily have a dirty look.

In fact, grungy layouts don’t necessarily consist only of grungy design elements. The latter can as well support the design, giving it a more realistic look without making it look overcrowded or dirty. Take a look at Bart-Jan Verhoef’s blog presented below. Although the design has a number of irregular elements such hand-drawn doodles and dirty background image, it doesn’t feel dirty at all — in fact, the design is rather subtle, clean, elegant and in any case unique.

Screenshot
Although the design has a number of irregular elements such hand-drawn doodles and dirty background image, it doesn’t feel dirty.

Sometimes it’s enough to add just few irregular (or dirty) elements to achieve a more realistic look. In online-shops and corporate projects it simply doesn’t work otherwise. In such cases small details influence the mood and define the perception of the users. Sometimes it’s enough to simply replace the background image of the layout with a dirty texture. This is exactly what Jeremy Zevin has done. Without a dirty texture his weblog would have a typical Web 2.0-design.

Screenshot
Without a dirty texture used as a background image this weblog would have a typical Web 2.0-design.

Grunge Color Palette Link

In most cases grunge designs use subdued, dirty and dull colors. Brown, beige, grey and black are dominating colors. Vibrant shades of vivid colors are being replaced with more natural and subtle colors. The color palette below presents colors which are often used when it comes to grunge designs. The colors have been extracted from the screenshots listed below.

       
       
       
       

For instance, Satsu uses rather subtle colors; the design, however, doesn’t look boring. Hand-drawn elements support the overall design and give it an artistic touch.

Screenshot

However, grunge designs can as well contain more vivid colors; however, in order to fit to the design, they are less striking and more realistic. Dark shades of green, blue and read are usual. Shop Moss and David Hellmann’s blog are examples of a vivid grunge design.

Screenshot

Screenshot

  • Dirty textures and background images are almost essential in every grunge design.

    Screenshot

  • irregular lines and frames

    Screenshot

  • yellowed scotch tape

    Screenshot

  • paper- and photo clips, needles and various pins

    Screenshot

  • coffee rings, spilled out liquids and dirty stains

    Screenshot

  • torn paper and dirty edges

    Screenshot

  • dog-ears

    Screenshot

  • hand-written elements

    Screenshot

Joe Grisham’s site is exemplary for the elements listed above. Multiple grunge elements in use…

Screenshot

…and EXP.TYPO is rather a collage than web design.

Screenshot

red9ine

Screenshot

Mindtwitch

Screenshot

Pain is Good – don’t take it seriously, please.

Screenshot

Olly Hite

Screenshot

Webdesigner Ro

Screenshot

Burn the Fields – for music-related web-sites grunge look fits almost perfectly.

Screenshot

Team Green

Screenshot

Scouting for Girls

Screenshot

Adventure Trekking

Screenshot

dtamas

Screenshot

grantmx/designs

Screenshot

Shaker Designs

Screenshot

Lake Crackenback

Screenshot

Moustache Me

Screenshot

Lataka

Screenshot

Design Sponge

Extreme-Designer Thomas Schostok from Germany

Screenshot

Darklight

Screenshot

nYq

Screenshot

CSS Addict

Screenshot

Trozo Gallery

Screenshot

Liquidesign

Screenshot

loworks. Flash in use.

Screenshot

Dot Comedy

Screenshot

CSS Rockstars

Screenshot

a j miles

Screenshot

Further Resources Link

  • Grunge Style In Modern Web Design
    An overview of grungy free fonts, textures, icons and brushes for free download.

  • Drips, Sprays, and Splatters Part 4
    This is one of those styles that lends itself to a more minimal style. Of course this isn’t always the case, but quite often it is the result.
  • Hand-Drawing Style In Modern Web Design
    The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when colorful, sharp and rounded Web 2.0 elements can be found almost everywhere. Excellent examples of hand-drawing style in modern web design.
  • Photoshop Business Card Tutorial
    This tutorial will walk you through setting up a vertical grungy business card template, front to back and ready to print.
Smashing Book #5

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? For example, Smashing Book 5, packed with smart responsive design patterns and 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 still like it clean :)
    Grunge feels like going back in time, like 2002 or 2003

    0
  2. 2

    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.

    0
  3. 3

    Thomas van Zuijlen

    March 11, 2008 5:26 am

    Hmmm… I noticed before that you seem to be perceiving a trend towards grunge-ish design, but as to the commenters above, to me the grunge style seems like much more of a throwback than a step forward. I doubt the grunge style is as viable a design option as the clean 2.0-style simply because of the lack of site types it might be applied to. The strength of the 2.0-style (most definitely in its more nuanced, sophisticated incarnations) is that it can be applied successfully to smaller and larger (e.g. corporate) cases alike. To me, the examples from the collection in this article actually reflect the relatively narrow focus of grunge.

    0
  4. 4

    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.

    0
  5. 5

    Great round up! Love a bit o’ grunge me… Although, rather like some nice class C drugs out there I reserve this style for my own personal use and try not to push it on my usual clients.

    A single tiny element of grunge can spice up a plain, clean corporate site no end. Add too much though and your heading for trouble. Those corporate types will even warn you that a bit of the auld grunge design can lead to harder stuff!!!

    0
  6. 6

    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?

    0
  7. 7

    Mhm I think too, that the grunge style isn’t that new. I like it but normally I wouldn’t use it for companies, they like it as clean as possible.

    0
  8. 8

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

    0
  9. 9

    The only reason a style looks like it’s part of an age to you is because you are too deeply entrenched into a piece of that age to see what’s happening in the design world clearly. Step out. Stop being a tool of the times and recognize that style is relative to the mood you’re trying to convey, as Arnar has pointed out.

    Kids these days. Sigh. No sense of the conceptual.

    0
  10. 10

    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

    0
  11. 11

    I also have same opinion as zombiebr, Grunge style is out dated. In the present condition we can see people are giving more importance to simple, Smooth color schemes with some vector arts or nature illustrations..

    0
  12. 12

    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!

    0
  13. 13

    Great collection… beautiful… how to define my style? imaginepaolo

    0
  14. 14

    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.)

    0
  15. 15

    It’s interesting to think that web design may have already reached the end of its history. I’ve spent a couple of years wondering, “where do we go next”, and if the answer is “back to where we’ve been”, that leaves us in a unique place in the history of design; we’re the first design discipline to reach a creative plateau after just 14 years.

    The reason for this is obvious, though. Past advertising mediums — print and video, for instance — had prohibitively expensive cost-of-admission, and were used chiefly for commercial interests. A corporation would spend a mint of a print campaign back in the day, and they wanted their money’s worth. Convention and proven techniques ruled the day, leading to very slow stylistic evolution. But with the web, you had tens of thousands of people with no startup costs and no accountability doing everything at once.

    Has it all been done? It’s looking that way right now.

    In a way, it’s a good thing (for designers working commercially, at least), because we have a finished “toolkit”, so to speak. There’s an established style that will suit any client, which lets us do our jobs much more effectively. But it makes you wonder what the future of web design as an art form will look like.

    Maybe increasingly cheap bandwidth and increasingly higher resolutions will give us something new — I hope so, anyway. But right now, I really don’t know where we go from here.

    0
  16. 16

    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 :)

    0
  17. 17

    I tend to agree with the other commenters. Grunge style is played out. There’s not much there left to explore. In my opinion, I feel that the trend in web design will shift more towards warm, humanist design and incorporate natural textures (paper, wood, cork, etc.) into a cleaner and more elegant look than is capable with grunge style. There certainly is a place for grunge design; it just won’t be as ubiquitous as the whole glossy “web 2.0” thing was.
    There are a lot of exciting things happening with typography and print design now. I’m almost bold enough to say that the whole 20th Century modernism / postmodernism pendulum swing is coming to a halt, to allow a new style to emerge. There’s certainly an Arts & Crafts revival happening in the art world now, and it’s bound to have implications on other disciplines as well.

    0
  18. 18

    Bart-Jan Verhoef

    March 11, 2008 7:25 am

    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!

    0
  19. 19

    Great List. Tend to design more on the clean side, but just been inspired to get a little dirty.

    0
  20. 20

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

    0
  21. 21

    I’m glad that everyone else agrees. I really dislike Grunge websites, some of them pull it off but for the most part, they are harder to navigate and put design before content.

    0
  22. 22

    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!

    0
  23. 23

    wow i like it, grunge! more stylish and unique.

    0
  24. 24

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

    0
  25. 25

    It’s funny to see posts with a certain type of design, draw such negative criticisms.
    I’ll have to agree with Ryan, grungy equates realism much of the time.
    If you don’t like realism, you must suck at Photoshop, sorry about your luck.
    Some of the detailed textures in these designs do create larger file sizes, that’s to be expected.
    Great artists don’t paint with the cost of the paint in mind.

    thanks for another inspiring list!
    Rock On!

    0
  26. 26

    WEB 2.0!!!

    0
  27. 27

    Amazing!
    Is this web 2.1?

    Guys you rock!

    0
  28. 28

    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.

    0
  29. 29

    Also, adding to my previous comment, in regards to the “Web 2.0” misnomer and other styles…
    There is no design trend or style that anyone needs to follow, even though this article seems to hint at that.

    Design is not about trends although they do occur. Design is about using the resources that work best for the project at hand. Do not use glossy shiny orbs if your project does not dictate their use. The same goes for “grunge” designs.

    Sticking to trends is the mark of a lazy designer. Don’t settle for less just because its easier to use grunge for everything. Please only use styles where they are needed. It is crazy to see the design world change. Now with automated styles and horrible typefaces that clients have somehow been convinced to let designers use, nearly anyone thinks they are a designer.

    Just because you choose a different typeface than Times New Roman for your Word document, does not make you a designer.
    The current state of design needs a huge overhaul.

    0
  30. 30

    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?

    0

↑ Back to top