How To Destroy The Web 2.0 Look

Posted by mao in Inspiration, Reference, Trends | 126 comments

A trend always appears as opposition to another. Detailed Gothic art was replaced with the pure straight lines from  Greek temples in the Renaissance. The tons of hair spray, glitter and multicolor spandex 80′s were demolished by the black & white minimalism from the 90′s.

The web is no exception. In the beginning, there was no light on the web. It was awfully crowded, with dancing marquees, tedious frames, unbearable midis and annoying spinning @’s. It was the dark ages of the web. Then came refreshing empty spaces, vibrant, high contrast colors, lovely gradients, big text, original gloss shine effect, diagonal lines and, of course, reflected logos, came t0 our rescue. Everything was shiny, with that great ‘breand new’ smell. The Web 2.0 look was born.

But guess what?

There are some people getting tired of that. Call them revolutionaries, or trend setters. I call them visionaries. Elliot Jay Stocks is my new hero. He took part in The Future of Web Design event, held in NY, with a talk called “Destroy The Web 2.0 Look.”

In his talk, he demonstrates how the current web style is overdone, making sites look like Dollies (cloned sheep). Mr. Stocks also notes that what makes a site part of the Web 2.0 wave is not the way it looks, but the way it works. He shows how the “Web 2.0″ is not about aesthetics. It has been misunderstood by the web design recruitment industry and marketers, among others, who think the look will translate into success. As a conclusion, the designer invites us to educate people on what Web 2.0 really means, and to learn from the best and try to adapt the trends to our own designs.

I agree with Elliot Jay when he recommends we  adapt trends and to try and educate our clients in the matter. Also, we must agree that despite the obvious clichéd repetitions, there are some characteristics worth preserving, even in the trendiest designs: nice big text, loads of white space and centered alignment, for example.

Now, if the web 2.0 look is already dated and we have been told to destroy it, the remaining question is:

How To Destroy The Web 2.0 Look?

First let’s revisit what makes the Web 2.0 Look

• Vibrant, high contrast colors
• “Special offer” badges
• Gloss/ Sheen
• Beveled edges
• Gradients
• Diagonal Lines
• Shinny Table Reflection Effect

Now, you may agree with me that the resulting combination is an attractive, clean, and neat design, but sometimes it can be almost aseptic, or lack of personality due to its popularity.

I recommend you read an excellent post Why should your site have “personality” made by Robert, a guest blogger. Robert describes how to be honest in design, and the importance of uniqueness and how it should reflect the business’ true personality.

Then I am going to show and describe the common characteristics of some sites I believe are the answer to the cloned, aseptic web styles.

http://www.biola.edu/undergrad/

http://www.bandpush.ca/

http://www.bittbox.com/

http://www.cameronmoll.com/portfolio/

http://darklightart.com/

http://elliotjaystocks.com/

http://eyecandyanimation.com/

http://fisticuffdesign.com/

http://www.jrvelasco.com/

http://www.kcrevolution.org/

http://www.knoxville.org/

http://student.opendoorsuk.org/

http://student.opendoorsuk.org/

http://trojanrecords.com/

http://www.dirtyprettythingsband.com/

As you can see, these sites are the opposite of the current style. Despite this, you can still see some elements that survived, like the big text and the main layouts.

However, in their unique and trendy designs we can see common elements like the retro/vintage look, influence of grunge organic elements, and rich textures.

Let’s identify those elements again:

• Retro-Vintage
• Warm, Dark Color Palette
• Rich and Organic Textures
• Grunge-Retro Fonts
• Rough Edges
• Ornaments
• Stains
• Rich Full Layered Headers

Retro-Vintage

The retro elements is commonplace here, giving a cozy yet evocative feeling. Here we can see an old Polaroid photo (a very nice retro resource). Also notice the old radios in both of the samples, as well a representation of vintage printings.

Warm, Dark Color Palette

The use of dark colors, like dark brown, burgundy and mustard in lots of variations and shades is associated with that retro look. These are clearly different from the brilliant, high contrast colors of the current trend.

Rich Textures

Sometimes organic, simulating wood, stone, stained walls or vintages wallpapers.

Grunge-Retro Fonts

Say goodbye to the typical rounded-corners bold fonts we use today. Say hi to old school fonts and grunge typefaces, full of rough edges and detail.

Rough Edges

This is another grunge feature. It is the uneven finishing effect on boxes, frames or headings. Achieved by replicating the effects of ripped paper or paint splats.

Ornaments

Ornaments have been making a shy appearance on many current web 2.0 designs. But they are even more prominent in the retro designs. I particularly like the clean look of Web 2.0 with some ornaments, like floral patterns.

Stains

This is again a grunge feature, but also vintage. Adding stains like paint splatters gives the illusion of something worn by the passage of time. Something that has been used and abused, resulting in a sense of familiarity.

Rich Full Layered Headers

These headers are design masterpieces, not just big solid areas anymore. The many layers and objects tell a story, speaking with powerful voices about each author or the product sold.

The current web style is going to last for quite some time. But we can’t deny that there are some trend setters who are questing for their own identify, trying to avoid cliches. Of course, if this trend happens to replace the ongoing one, it will turn into a cliche as well, and then another trend will come. I think the secret is to be an early adopter and adapt each one to our needs and design angles.

Related posts:

1. 10 Free Web 2.0 Fonts