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:
- 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).
- 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.
- 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.
- 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
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.
Materials (brushes, textures, fonts & others)
Next week we will develop and create a grunge-style layout using Photoshop. Don’t miss it!
Other articles in our guide:
- Styles in webdesign: the features of corporate/business layout | How to create a corporate style website?
- Styles in webdesign: the features of a grunge layout | How to create a grunge style layout?
- Styles in webdesign: the features of a web 2.0 layout | How to create a web 2.0 style layout?
- Styles in webdesign: the features of a vintage layout | How to create a vintage style layout?
- Styles in webdesign: the features of a magazine layout |
L'immagine principale dell'articolo è stata fornita da @Fotolia