Styles in webdesign: the features of a grunge layout

Now that we have looked at the characteristics of the corporate style and created a layout in Photoshop, today we will look at a style that has become a long-standing trend, Grunge. It’s easy to spot a website that has grunge designs incorporated in its pages. What might be less easy to spot are the various characteristics and details which make up this awesome style: let’s look at them together!

Grunge web design: what is it?

“Grunge” derives from “grungy” meaning that it is dirty. It was first coined to stand for a specific type of music, a style that is influenced by punk, rock and heavy metal.

Given its definition, it shouldn’t surprise you if grunge is usually associated with a design that is aggressive, disorganized, and dirty.

When is it appropriate to create a layout using the grunge style?

Grunge –especially when it incorporates urban, graffiti or skater elements – is perfect for websites that are by definition anti-conventional and quite radical. These could be profile pages of artists or singers as well as restaurant or clothing stores. The important thing here is to use grunge in a way that a visitor can appreciate a website for its originality and its desire to challenge common perceptions about what’s considered good taste.

Now let’s take a look at the characteristics that make up the grunge style in webdesign, which are:

  1. Opaque colors: In grunge design, vibrant and lively colors are replaced with a more neutral and less involved color palette. A typical grunge-color palette would have beige, brown, black and grey. One should avoid using shadings, subtle tones, as well as pastel colors, which are typical of the web 2.0 style (and also the corporate style).
  2. Textures and patterns: Textures and patterns play a pivotal role in defining this design style. One could use pretty much anything such as steel bars, ripped jeans, or an old wood sweater to create a great visual background. The only important thing is to make it feel ‘experienced’ and as realistic as possible.
  3. Realistic details: Grunge, like in the hand-drawn style, is full of realistic graphic elements that give the website a more authentic look. These could be stickers, polaroids, wrinkled-up paper, scotch paper, post-it notes or pin-ups. Any one of these would make for an eccentric design, which also appears complete.
  4. Handwritten font: Adding some handwritten text to a website can make it feel more original and real. If you have a hard time looking for a grunge font (meaning faded, twisted or scratched) there’s always the handwriting font that can help you with its spontaneous, asymmetrical, and disorganized look.

In a nutshell: One of the most creative and amusing styles that you can use to design a website layout is the grunge style. It allows you to experiment and test out different graphic elements without having to adhere to a precise set of rules.

Keywords here are: invent, and experiment! The only risk is creating a confusing website, one that disorients a user and makes him flee instead of captivating him with an awesome design. Our advice is: don’t exaggerate, and use less-aggressive graphics for the text and navigation sections. You can unleash your creativity on the background and on elements that do not compromise the text and other functions of the website.

Some examples of grunge web design

Resources

You can find other great sources of information in our previous article “Resources: fonts, tutorials, icons, textures and templates for a fantastic grunge style”. If this is not enough for you, here’s a list of some very interesting pages.

Inspiration

Inspiration grunge: layout, logodesign & tutorial

30 beautiful examples of grunge in webdesign

Grunge web design: best practices

Tutorials

Design a cartoon grunge layout

How to create a grunge webdesign

Posters, backgrounds and typography: tutorials in grunge style

Materials (brushes, textures, fonts & others)

20 grunge fonts every designer should have

Massive collection: ultimate resources for grunge design

42 grunge wallpapers for your background

Recommended readings

Grunge style in modern webdesign

Next week we will develop and create a grunge-style layout using Photoshop. Don’t miss it!

Other articles in our guide:

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Web designer, has been working in the field of graphics and web development for six years and at the moment besides collaborating with a web agency successfully manages her freelance activity under the name of mascara design. Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Author's web site | Other articles written by

Related Posts

Other articles

Here are some other articles you might find interesting:

    19 comments

    1. logophile

    Trackback e pingback

    1. uberVU - social comments
      Social comments and analytics for this post... This post was mentioned on Twitter by HubRiZ: RT @YIW Styles in webdesign: the …
    2. You are now listed on FAQPAL
      Styles in webdesign: the features of a grunge layout... Now that we have looked at the characteristics of the corporate style …
    3. 傳雄管理顧問股份有限公司 » Blog Archive » A few articles ago,
      [...] few articles ago, we looked at the trends and features of grunge style; today we’ll create, step by step, …
    4. How to create an amazing grunge layout | Your Inspiration Web
      [...] few articles ago, we looked at the trends and features of grunge style; today we’ll create, step by step, …
    5. How to create an amazing grunge layout » DesignYelp – yelp and design
      [...] to create an amazing grunge layout A few articles ago, we looked at the trends and …
    6. Styles in webdesign: the features of corporate/business layout | Your Inspiration Web
      [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
    7. Styles in webdesign: the features of a web 2.0 layout | Your Inspiration Web
      [...] already analyzed two (web)design styles: corporate/business and grunge; we’ve also created two great-looking layouts using Photoshop that display the trends and …
    8. The features of the vintage style | Your Inspiration Web
      [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
    9. Styles in web design: the characteristics of a site made with magazine style | Your Inspiration Web
      [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
    10. How to design a layout in magazine style? tutorial and psd | Your Inspiration Web
      [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
    11. How to design a corporate/business layout? | Your Inspiration Web
      [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]
    12. The styles in the web design: the features of the organic style | Your Inspiration Web
      [...] equivalent to a choice of colours and graphic elements that under certain aspects is similar to the grunge and …
    13. How to design a web 2.0 layout? tutorial and psd | Your Inspiration Web
      [...] Styles in webdesign: the features of a grunge  layout | How to create a grunge style layout? [...]

    Leave a Reply

    Current month ye@r day *