The Emergence of Gradient Grunge Design

---

The Merging of Styles

It's common for styles to merge, especially dominant styles. As grunge rises in popularity on the web more designers (who are used to working in web 2.0 methodologies) will experiment with grunge. There is a crossover point where these styles merge. This is where Gradient Grunge design emerges.

For quite some time grunge graphics were at the periphery of web design. They have risen to mainstream. More and more websites have adopted grunge styles. In most cases, it isn't a matter of a designer wholeheartedly grabbing the next trend. Designers tend to experiment and get inspiration from many sources. Bringing grunge elements into ones design work is a gradual process.

This is typically the way designers working in the trenches change their normal output. They find one project here or there that they can do something different on. They try new types of designs. When web 2.0 style designs are the dominant trend, designers develop workflows and habits built around creating this style quickly, as with any popular design that clients would request.

Many of these designers would simply merge grunge design styles into there existing workflows. It's a common practice when moving from one dominant stylistic trend to another in design. There will be overlap. The combination of web 2.0 styles and grunge graphics is Gradient Grunge.

Some Details about Gradient Grunge Style

Let's look at some specifics. Sure, some aspects of web 2.0 aren't as cool as they used to be, like reflections. However, the use of some web 2.0 styles are still rampant. Review the Web 2.0 design guide to get an overview of this style to decide for yourself what elements are still popular today. Some notable trends still practiced are: Solid Areas of Screen Real Estate, Simple Navs, Bold Logos, Strong Colors, Gradients, and others. Combine these styles with textures and worn imagery and you have a new take on grunge graphics.

This new aesthetic doesn't emulate nature, but rather it stylizes nature. Bright plastic doesn't degrade as paper in real life, but it certainly can in Gradient Grunge, and it looks cool doing it. Typically, Gradient Grunge is brightly colored, though it could be applied with a more subdued palette. In web design, it often combines the use of gradients and other web 2.0 elements with the look and feel of stylized worn texture.

Gradient Grunge at it's more extreme end is the pure combination of Grunge and Gradients. Many examples of this style are of brightly colored gradients blending with textures.

Examples of Gradient Grunge in the Wild on the Net

Nothing explains a style better than to show some example of it out there in on the net. Let's check out some graphics that show a merging of both web 2.0 styles and grunge graphics. Also, we'll look at some Gradient Grunge that is made of gradients merged colorfully into a grunge aesthetic. Following are some Gradient Grunge designers and designs.

Maciej Hajnrich AKA Valp Nietylko

I had the pleasure to interview this designer and digital illustrator over at PSDTUTS. Since then I try to keep track of what he's up to. And he's been making some great Gradient Grunge style work. Check out his Flickr Photostream's Portfolio: Graphic Design Set. He has some brand new work up. Valp has a strong Gradient Grunge style permeating much of his work. The website below shows how he carries this style into web design. Notice the Gradient Grunge badges in the design below. This is a characteristic web 2.0 element given a new stylistic treatment.

Notice how he combines gradients and grunge in such a highly saturated colorful way in his illustrations. For more of his illustration work visit his portfolio.

Sleek Design Tutorial

This tutorial Collis wrote called "Create a Sleek, High-End Web Design from Scratch," has a great Gradient Grunge style. It follows a similar spacious website layout as web 2.0 sites, only it adds in a good mix of gradients and texture.

Notice how a Gradient is drawn over the textured background. The watercolor texture itself has a Gradient Grunge feel to it as well. This top area of the design is pure Gradient Grunge.

Outlaw Design Blog

The Outlaw Design Blog is a graphic design blog that has a grunge style design. While it's not over saturated with color (it's more subdued), it still combines some web 2.0 elements with grunge graphics in an interesting way. Notice the gradients applied to the background designs behind the main layout.

The Gradient Grunge icons below are an example of applying grunge textures directly to web 2.0 style cute icons.

No Ripcord

No Ripcord is a website design project I worked on where I started thinking a lot about this style, and experiment with it as well. The design below is a screenshot from the live website, so it was the choice made by the client. Originally, three options where presented for review.

Notice how unnatural it is for these gradient heavy and color saturated designs to appear worn like this. They wouldn't break down like this in reality, but they certainly can in Gradient Grunge style.

Here is a close-up of the logo design. Notice how an opacity grunge texture is applied within the lime green of the "0" in No Ripcord. Also, all the words have the type being ripped into with the same style of texture. This type of texturing is applied throughout the design. A strong over-saturated green gradient is often broken by this texture fusing in a Gradient Grunge style.

Below is Option two presented to the client. Notice the Gradient Grunge style being applied predominately to the top navigation bar and again to the logo.

Option three is a more news inspired layout. It's tight, concise, and holds more information above the fold than the other designs. Again, the Gradient Grunge style is applied to the top navigation bar, but also notice the top left edge. In this case, a gradient is applied directly to texture.

In the bottom of the design below you'll notice there is even a web 2.0 style reflection of the texture. That is probably going to far, but it shows how web 2.0 style and grunge style can be fused in a design. This is my least favorite of the three designs, probably because the reflection is tacky. I'm glad they chose Option one.

GoBand Tutorial for GoMedia

This is a tutorial I wrote for GoMedia. It's a long 6 part series that starts with creating the design. Then takes that design all the way through theming a Drupal 5 website. There is some characteristic Gradient Grunge style presented here. If you're interested in learning how to achieve some of these effects in Illustrator then check out the tutorial. The full site design is below.

Notice how the header has both gradients and different textures applied. There are both vector textures and photo based textures applied. Notice the opacity of the texture applied to the winged logos, that's vector grunge at work. Overall the combinations of Gradient and Grunge elements fuse in this design.

Conclusion

Let me know if you have any questions about this style, as I plan to write a follow up to this article. I'll point out more examples and discuss additional characteristics of this style. Feel free to link to any examples you feel fit Gradient Grunge in the comments.