UX FAIL #3: How Dated Design Trends Can Hurt Your Brand

Dated design trends may come to haunt you like yearbook photos of the past. Are you using the web design equivalent of shoulder pads, acid washed jeans, or teased bangs?
I fear the day my mom will post my old school photos on Facebook when I was rocking the Mary Lou Retton bowl cut and purple/teal/pink oversized sweaters.  No matter howaWeSoMeLy cOoL I thought I looked then with the latest trends in neon stirrup leggings and Blossom hats, times change and I can expect that years from now I'll groan at my choice in big belts, feather earrings, and ombre hair.
Looking back at my own print and web design work from a few years ago resulted in a few similar groans.  My cringe-worthy moments were all from the cheesy Photoshop layer effects I had piled on, thinking the result was awesomely cool.  Behold the bevel!  Bow before the extreme gloss! 
Design styles have been steadily evolving and most of use can't help but be affected by these changes.  Looking through Dribbble's latest uploads, one can't but be overwhelmed by the stitching, ribbons, letterpress typography, and circle avatars.  Even Apple has faced criticism for its overly trendy push of skeumorphism.

Why You Should Care

Dated designs can have negative effects on your business.  With a bad first impression, customers may:
  • Opt to do their business with a competitor instead
  • Feel your site is untrustworthy or unprofessional
  • Think your company doesn't invest in quality and by extension quality of service or product
Whether it's fair or not, people judge your company by the quality of your website.
When approaching a redesign of their own, many businesses joke about how dated their site looks, pointing out the glass buttons, gaudy icons, and extreme gradients.  Let's first look back at some former design trends that aren't AWESOMELY COOLanymore.  If you're pushing for them in your design project, you may want to learn more about some modern alternatives to bring your site into 2012.

Glossy Buttons

The plastic and glass effects on buttons defined the Web 2.0 look for many people.
While still in use, the trend is gradually being abandoned and replaced with more subtle design choices.  Even the extreme glassy UI elements of many mobile applications are iteritively changing to more subdued effects.

Bevel & Emboss

There's nothing that screams 90s design like the good old default bevel treatment.  When Microsoft Word has this as a default style, it's a sign you need to consider how to get the same effect a different way.
Try using the same effects as we did on the make-over of the glossy button but with a smaller inner shadow and a light outer drop shadow.

Dramatic Drop Shadows

Beware the cheesy and fake lighting effects! Big, soft, dark, and distanced drop shadows are the design equivalent of a Glamour Shot lighting.  No one reeeaaally believes it.  Worst yet, anyone with Photoshop can easily recognize the default drop shadow settings when they see them.
There are a million different ways to do drop-shadows nowadays.  With more capabilities in CSS3, you can create more drop shadows that blend in with the background, making the text a tad more realistic.  The trick to drop shadows is to keep them with a minimal contrast.  Let the shadow blend and create a softer edge against the background.

And don't feel like you're restricted to the standard boxy drop shadow.  Curled boxes are all the rage now, from page curled to the mysterious partly bent box.

Tiled Image Backgrounds

Glossy buttons may be the hallmark of Web 2.0, but tiled backgrounds are the poster children of Geocities and MySpace.
With SubtlePatterns.com and a plethora of PSD and CSS freebies out there, there's no need for the eyesore that is repeating images.       
From some strongly visual companies, a large photo background can have a powerful impact.  Using a bit of CSS magic, the image can automatically stretch and crop as the browser resizes.  


Gradients

Gradients are always a useful item in the designer's toolbox.  But gone are the days of rainbow diagonals and gradients with two very different color values.  If I haven't gotten the idea in your head by now, hopefully my theme of subtlety will stick with our discussion of gradients.
We've already used a few gradient examples in our buttons and bevel & emboss.  Gradients can be greater in CSS3 and offer the same amount of granular control as one would have in Photoshop and Illustrator (once you master the shorthand).  A soft radial glow adds a sophisticated effect to page elements, navigation, or background.

LOOKING AHEAD

We've gone through some design trends of the past, but equally beware the design epidemics of today and consider if your next design truly reflects your brand or if it's just a jump on the popularity bandwagon.  Consider how your choices for some current design trends can make your site seem just as retro as acid-washed jeans in a few years.