Jarrod Medrano // Aug 18 2008
Recently I was poking around a few design blogs and noticed something interesting. It seems like the trends and styles that were so popular only a year ago are starting to fall out of favor. Smashing Magazine and Web Designer Wall have all but declared web 2.0′s glossy style dead. Last year, or maybe two years ago, I got a lot of inspiration from this page, as I’m sure many others did. If you’re wondering what I mean by web 2.0 (and yes, I hate those words, but what else do you call it?), read that page. Looking at it now, it does seem a little dated. What happened? Overuse, mostly. The simplicity and ease to which you can design a website in this style has lead many a novice to replicate it. All you have to do is grab a shiny button Photoshop template, slap a gradient down, and voila, web 2.0! For me, the death knell was sounded when I went to start a new account with Qwest and was greeted with this:
What words come to mind when you look at this? Corporate? Safe? Sterile? Neutered? Not to knock whoever designed the website, it does look very professional and very… Qwesty. But it doesn’t look that great. It looks like a door knob: functional and appropriate, but completely lifeless. Come to think of it, it looks like Windows Vista. Not that anyone has ever looked to Qwest for setting trends in design.
But wait, you say, isn’t this the same style that Apple, Mozilla, et al. use? Not really. Not anymore, anyway. The glassy buttons do look almost exactly like Apple’s did; two years ago. Likewise, Mozilla used to be the poster child for this style, but look at it today.
Very different! Trends in web design, as in everything, are fleeting. What looked good yesterday rarely passes muster today. This is why I never purchase web design books. However, there are a few web 2.0 design conventions that have always looked rather stale to me, and I’m glad they’re slowly disappearing. Here are a few things that are best to avoid, and if you do use them, use them sparingly.
Glass buttons are quickly becoming the bevel and embossed buttons of yesteryear. Ever since they first appeared on Apple’s navigation the internet has been inundated with tutorials on how to make those cool, jelly tabs, and every twelve year old with a pirated version of Photoshop has followed suit. They will never be as ugly as bevel/emboss, but their increasing prevalence has started to make them look tired and old hat.
Gradients. Gradients gradients gradients. A long while ago, gradients started to replace the flat, solid colored backgrounds of old. I don’t think gradients will ever go away. In fact, we use a gradient background on this site, and it looks fine. There’s nothing wrong with gradients, per se, but they are everywhere! A lot of sites nowadays are moving in a more illustrative direction, which may be inappropriate for our site, or Qwest’s site, but that doesn’t make the designs any less beautiful.
The average user’s internet speed is rapidly increasing, allowing for larger, more detailed images. I particularly enjoy the emphasis on hand-drawn elements, which easily separates the real artists from the stylists. If you are a designer and you can’t draw, it might be a good time to start learning.
Like I said, styles like these may not be viable for every company, but they are another option to consider besides the good old gradient or solid color. Never settle on the first solution that comes to mind. Try a pattern, a drawing, or a photograph as a background. And never use gradients on every element of your design.
This effect doesn’t look bad, and in fact, Apple and other companies still use it. But like the other devices in this list, it is becoming overused. My main problem with this trick is that turning something upside down and fading it out is not really what a reflection looks like. If you are going to use it, try looking at an object on a real mirror and attempt to replicate that effect. You can even render the reflection or shadow in a 3D program. In this way you will separate your designs from the amateurs. To illustrate this point, take a look at this image I swiped from Nike’s website. I created the first, wrong image. Nike did it correctly.
A lot of websites use stripes in some way or another. There is even a tool to create these for you. Without the learning curve of Photoshop, I expect we’ll be seeing many more websites using stripes in the future. There’s nothing wrong with stripes, but can you think of a more interesting way to use them than as a tiled background?
These have become almost de rigueur in recent years. Every website has some RSS, Digg, StumbleUpon, or Facebook icon somewhere. Before just slapping the icon on your site, consider other methods of displaying them. You are not required by law to use the little orange RSS button (though I do think you should keep it orange). Try different variations on the theme, while still keeping the icon recognizable. Here are some clever examples:
Make the icon a part of your design, rather than an extraneous element.
When I was in school, they taught me that sans-serif fonts were for the screen and serif fonts were for the books. But what I’m realizing now is that serif fonts can look just as gorgeous as their footless cousins. Take a gander at the I Love Typography site. I have no trouble reading the type and it’s all in serif. You can’t make your whole site in Adobe Garamond, but how about using it for a logo or your headers?
Just don’t use these. Ever. If you have used them in the past, I pardon you, just like Ralph Fiennes pardoned that kid in Schindler’s list.
Before you throw your Web 2.0 out the window, remember that there are some trends that will never fully vanish. What aspects of the web 2.0 era will endure? The clean, simple layouts; the larger, more readable text; the bright colors, the emphasis on the user and not the designer. Always put the needs of the client and the end-user before your own artistic preference. If glass buttons are what Qwest wants, that is what Qwest will get. But there is always a way to do a fresh take on an old recipe. Be aware of trends, but do not allow them to dictate your own style. Otherwise, you will quickly become yesterday’s news.
Jarrod is an interactive designer at Portent Interactive, a Seattle internet marketing company. He looks nothing like the picture at the top of this article
Jarrod has lent his extensive experience in web design, HTML, CSS and more to Portent for over 6 years. Read More