Glossy and shiny design elements used in so many websites can be dull sometimes, as the result; grungy designs are gaining popularity today. And there is a very good reason behind it. In real world, we don’t always see the pretty shadow effect and ideal geometric forms as manifested by sleek Web 2.0 designs. Consequently, some designers seek to explore more realistic and less ideal design style, which reflect the physical environments we are living in more realistically and accurately. Good grungy elements should be able to offer a more genuine, realistic look; a look one would find in real life. As the result, many websites with grunge design use dirty background images and textures. Examples of grungy websites are exptypo.com and jeremyzevin.com. These are common visual elements of grungy websites:
- Hand-drawn elements
- Dirty edges and torn papers
- Liquid stains, such as spray marks, spilled out drinks or coffee rings.
- Photo- and paper clips; and other small stationeries
- Old, yellowed objects such as photographs, papers and scotch tape
- Irregular frames and lines.
When designing a grungy websites, you should cleverly blend creased papers, “broken” icons, torn images, dirty stains and other visual elements. You may also include hand-drawn elements to convey an individual and a personality note. Dirty textures are often used on photographs, navigation menus and overall layouts. Good grungy elements should be regular objects we find in environment and replicated realistically without any glossy effect.
Should grunge websites look dirty and dilapidated?
There is confusion among web designers about the purpose of old, dirty, urban and graffiti-like elements. It is necessary to note that grungy websites don’t have to look dirty. In fact, successful grungy websites don’t always contain grunge visual elements. These elements can support the content and layout without making the website looks dirty or overcrowded. In fact, you can make the design looks elegant, clean and rather subtle by incorporating grunge elements.
Just like in other design tasks, you shouldn’t overdo it. You may only need to add a few dirty, grunge elements to get more realistic looks. However, you shouldn’t add these elements on online stores and traditionally ‘clean’ websites for healthcare organization, government agencies and others. In such cases, small details can define user perception and influence the mood. Sometimes, you can make a grungy website simply by replacing the background of a clean Web 2.0 design, with a ‘dirty’ one. Jeremyzevin.com is a good example of this simple method, without the dirty background, it would look like a common Web 2.0 website.
Grunge color palette
In general, a grunge design should have dull, dirty and subdued colors. Black, grey, beige and brown are common dominant colors. Vivid colors with their vibrant shades commonly used in Web 2.0 websites should be replaced with more subtle and natural colors. In some cases, you can use vivid colors in grunge designs, however to blend with the design these colors should be more realistic and less striking, such as darker shades of red, green and blue.