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.cameronmoll.com/portfolio/
http://student.opendoorsuk.org/
http://student.opendoorsuk.org/
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.
Popularity: 25% [?]
Follow me on Twitter | Subscribe by RSS feed or by Email
Related posts:
- Elliot Jay Stocks, The guy who told us to “Destroy the web 2.0 look”
- 10 Free Web 2.0 Fonts
- 10 Best and Worst Looking Sites From The Web
- Free Personal Web Server. Host Your Site Yourself
- 15 Free High Resolution Web Stock Icons
Tags: 163 Comments
Well, nothing new. Back to grunge, eh? I’d say let’s not go back several years but maybe several decades? 60-70th retro look is much fresher that this. So I’d vote for that retro-vintage.
…or even better… something ENTIRELY NEW and never seen before?
[...] – and everyone around had nicer blog layouts (number one priority) instead of the photocopied Web 2.0 style (which I hope will extinguish soon). Bubbles and shiny blobs and simplicity. One site ends up [...]
[...] aber zum Rebellen, der am Web2.0-Design-Imperium kratzen möchte: mao erklärt in seinem Artikel, welche Design-Richtlinien zu wählen sind, wenn man eben keinen Web2.0-Look erzielen [...]
Amazing article and tips. The websites you have talked about all look so artistic and beautiful. :D
[...] Veröffentlicht in Uncategorized by Sascha Göbel am Februar 1st, 2008 How To Destroy The Web 2.0 Look Tagged with: Gallery, Tutorial, Web [...]
such a genius article and I read it so late!
well done mao, as always a very good read
A very good compilation!
it’s very cool. let me try.
OK, so you are replacing:
* Vibrant, high contrast colors
* “Special offer” badges
* Gloss/ Sheen
* Bevelled edges
* Gradients
* Diagonal Lines
* Shinny Table Reflection Effect
with:
* Retro-Vintage
* Warm Dark Color Palette
* Rich and Organic Textures
* Grunge-Retro Fonts
* Rough Edges
* Ornaments
* Stains
* Rich Full Layered Headers
Maybe you could call it the Web 2.1 look??
I hate to think of design as just pretty graphics. I think designers should believe they do more than that for us to have real innovation in the things we use.
Hi, great article – reall enjoyed rading it, and also it helped with putting together some thoughts concerning some jobs I’m trying to finish at the moment.
Best greetings and keep up
tartanproject.com
Amazing artistic view, it’s really great to get in touch with foreseen stuff. Very cool
Its difficult to find someone who is is gifted as both a designer and developer – not to mention, a Visionary, or Revolutionary!! I’d like to be, but one without the other is really nothing at all.
great article!
Nice article, although I’m no fancy webdesigner and build my sites with old fashioned HTML codes, but they are defenitely ‘retro’ ;)
In the article i kind of missed the ‘throw mess on the page’ technique, like a coin, a burned match, stains etc.
Also I love adding frilly 1930s white borders to my photos.
Well said. Too much gradient… the torn paper, grunge, and visually intense designs can be much more stimulating. I do fear however, that many people find the soothing, chubby, rounded look of Web 2.0 comfortable!
I’m totally on board, destroy the web 2.0 look. Nice.
[...] out there need to memorize this site. There are some good examples and guide lines to follow too.read more | digg [...]
wow, what a flash back to circa 1995 when we built our first company website using pieces of paper and coffee circles, trying to get away from the stark white or grey backgrounds that most sites had back then.
Then of course a few years later when adding the rough black edges around photos to make them look like they had actually been developed and werent just digitals…
come on guys, if this isnt the future of design it is the past…
[...] Snap2Objects.com – How to Destroy the Web 2.0 Look [...]
I believe that nobody can dictate the rules to make web! as I am convinced that nobody can dictate rules in art, I come first of all from the world of art and then I approached the web, and I know that art loves the personality of the artist, as it is singular and unique, create rules in making art, means kill her, and so for the web..
Diego
All these designs are as similar to each other as the slick web 2.0 designs, just uglier.
[...] snap2objects – How To Destroy The Web 2.0 Look [...]
[...] How To Destroy the Web 2.0 Look – I was thinking of doing this for my next design (coming in 2008, after Christmas). What do you think? [...]
[...] Sample 1 Sample 2 Sample 3 [...]
[...] Sample 1 Sample 2 Sample 3 [...]
cool blog, I really like how you have gone into such detail about each aspect and characteristic of the new 2.0 design.
Alot of people see this new look as quickly becoming another designer cliche. however I really like the majority of it, like the shiny gloss appearance and the vibrant contrasting, colours. In all the personal or ‘fun’ websites I make I tend to go with a ‘retro look’ and full blown headers, but rarely get the chance to design a web where you get to add characteristics due to mainly working with corporate clients.
I can only hope that this look won’t just become another cliche.
Thanks
[...] How To Destroy The Web 2.0 Look I kind of disagree – they aren’t destroying, they’re twisting it. It’s still glossy, polished, transparency ridden, IE6 destroying design. (tags: artists comparison cool culture inspiration retro web2.0 design webdesign) [...]
The way “Web 2.0″ sites are created makes them quick to load and very easy to manipulate due to the various building blocks they are made of.
“Web 2.0″ sites are simple, bold and obvious. They are designed to flow. Big arty banners and grunge just distracts the eyes and makes you look at the minor details.
A “Web 2.0″ site will often make a subtitle larger than the branding. The subtitle says “need help?” or something such message. That’s because to an end user, your logo and imagery is an irrelevance.
The user is on the site to find something. So you make the important parts the most impacting. Clever positioning and impact will cause the user’s eyes to flow along the page in a certain pattern. Art follows this principle, and all art needs focal points.
The sites you’ve given examples of look pretty… But most of them have an irrelevant focal point or none at all… So even as art they fail to make the bill…
The internet is not an art competition, it is a source of information…
I do like the DarkLight and Elliot Jay Stocks sites though…
an excellent list, i am just in the process of designing a new site, im gonna stick it to web 2.0. my corporate company has shaped me and im gonna fight it. Watch this space.
Seems to me that you’re promoting a switch from web 2.0 design to just another cliche direction with textures and grunge brushes, beause that’s what all your exmaples have in common…sigh
Everyone goes around saying web 2.0 logo, web 2.0 logo, but really web 2.0 logo means style of logo that is designed from a web2.0 (Social site)
Nice Post!
I would take the Glossy Web 2.0 Look, over this “Grungy” rubbish anyday.
This is old……… organic has no place in a digital medium.
Organic as far is this torn-pissed-on-paper look above.
THINK CLEAN! THINK SHARP!
Onyx is right. The whole idea of web 2.0 designs is about expressing yourself as a web designer, it’s about serving the visitor, whether it by looks or features.
Most of the designs that are promoted here are just total clutter.
Mind you, I’m saying this as an artist, who likes to draw and paint every day and who even has a popular related web site.
Web designers should stop thinking about their ego first. It’s pretty sad when we have those tons of sites with design galleries that only compare looks and most definitely NOT functionality. For years they have been designing for “looks” and now we see a trend in the right directions and suddenly we’re going to promote that old stuff again? And if you can’t design a web site, regardless of what web 2.0 standards stand for, that is fast, easy to navigate, not cluttered, etc, then you shouldn’t be a designer to being with!
All these sites have really good design styles, the web 2.0 look in my eyes isn’t completely future proof though.
Pitty bittbox has ditched the grunge look :-/ Starting to look a little smashingmag like…
Excellent, you know the web 2.0 look promised so much and im a big fan. It time that web 2.0 is brought back. keep a look out for my company site. re-design coming soon, web 2.0 in mind. (www.crearecommunications.co.uk)
What’s old is new. Web 2.0 look came about from the abundance and overuse of “paint splat” effects.
Following all these “tips’ again will just lead to a bunch of sites that look like 2000 all over again!
The fact that people are all happy about this new kewl “grunge” look is baffling!
Maybe I am old, but I was around during the first wave of “grunge” and it mercifully is gone.
Last I checked, good web design is readability, ease of use and communicates the need of the client. All this wankery over ripped edges and retro fonts is more appalling than web 2.0’s mantra of clean and simple.
It all about incorporating high levels of graphic design with modern social network friendly functionality.
Keep up the good work.
[...] on the web. However these designs are quickly identified, categorized and published on “design blogs” for more Photoshop users to be “inspired by”. That’s the thing with all [...]
Awesome. Talk about a How-To guide to pretty sites. Delicious-ed!
[...] interpretation of who I am. After reading ‘Why should your site have personality?’ and ‘How To Destroy The Web 2.0 Look’ I decided to take a different design approach. No more rounded corners, bright gradients or [...]
[...] som sa naučil robiť krásny pastelový “web button” s odleskom a už som narazil na článok, z ktorého som sa dozvedel, že sa vlastne učím zastaralé [...]
What do you SERIOUSLY think of my header? Is it too simple? Is it innovative? Do you like the way that it blends with the background? (IE7 or above, or another browser like FF)? Seriously, what do you think?
i think you completely misunderstood this presentation. you’re still referring to the web two point oh look. jesus.
very good… Thanks you very much !
[...] WEB2.0デザインの壊し方ということで、汚れを生かしたレトロなサイトが挙げられています。こういったサイトデザインは個人的なはかなり好みなんですが、作るにはかなりのレベルが必要になるんじゃないでしょうか？どれもかっこいいサイトばかりです。How To Destroy The Web 2.0 Look [...]
The whole versioning thing is ridiculous. There is no 1.0, 2.0, 3.0. It’s all marketing. Rounded corners and reflections have nothing to do with so-called 2.0… it’s just a design trend… like the dreaded Kai Page Curl from the ’90’s (Web Beta 0.9?) or the David Carson layered and destroyed look of Ray Gun. Design should always strive to be a unique solution to a unique problem. Style is a crutch for those who lack creativity.
I’m totally on board, destroy the web 2.0 look. Nice.
Really interesting article, shame that your photobucket account has exceeded its bandwidth though. I agree with you, that web 2.0 is more than just looks it’s also the way it functions.