Official Pendulum’s website was relaunched last year and now it has brand new backgrounds. Nothing more to say, just take a look.

Browse all images in my showcase.

Related posts:
Advanced Photoshop #62, Music Industry Design feature
Photoshop Tutorial: Pendulum’s Immersion album cover art step-by-step
Immersion Interview @ Digital Arts

Web 2.0 as a style is not dead, far from it. Styles don’t die. If anything they percolate and then fuse into other styles. They get absorbed by the forward movement of design trends. Web 2.0 styles are mixed with grunge designs in many websites and graphics today. This style is Gradient Grunge. Let’s take a look at some of the characteristics that make up this growing design trend today.

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.

I have just finished graphic designs for Duke is Back website which was recently launched. My role was to deliver graphics (attached above) based on main image with Duke and some aliens. All scene in header and content was designed using photo manipulation and matte painting skills. Online version has some animations included so it’s worth of checking in.

About Duke, for sure: “Super confident and overly aggressive by nature, aliens fear him, and women fawn on him. Duke Nukem is the ultimate bad ass! When the Earth Defense Force faces its toughest challenges, they only call on one man to get the job done right the first time! When all else fails, Duke doesn’t!“

This one is a shameless self promotion, so forgive me that . I’ve just found a brilliant post at Six Revisions called 30 Beautiful Examples of Grunge in Web Design with Cogitatur‘s site spotted on top of all. I am very glad that guys appreciated grunge designs in the age of web 2-point-0 which are available all over the internet. It’s also hard to compare this two styles – clear, glossy effects excludes dirty/grunge graphics however this is a good moment to think about (not) following trends.

I’m honoured to find my web design on top of this post as well as on main page, and this post is a great award for Cogitatur‘s site. Thanks once again!

I’ve been working for Creatures of Intimate Noise, a rock band from Belgium, on their new identity = illustration and website screenshot above.

Also check out online www.creaturesofintimatenoise.com and listen to their first single!

Web design, illustrations, and code (without flash).

www.beltaine.pl

Few months ago I was working for Dj Peter Worth‘s new website. I made few backgrounds to fit his layout and, obvoiusly, music mood. Fresh mix – Brain Candy – a definately must have for your next house party.

Click thumbnails above to see full size screenshots.