Blast From the Past: Web Design Trends You’ll Never Forget

What’s your very first memory of the World Wide Web?

Maybe you searched the web using Excite or AltaVista, or typed in an AOL keyword you’d heard in a TV commercial. Or maybe you vividly remember your first personal home page on Geocities, complete with frames, animated gifs, and a blinking marquee in Comic Sans. Or if you started using the web later on, you might remember the glossy, bevelled buttons of the “Web 2.0” era that ruled before 2010.

Chances are, your first memories of the web can easily pinpoint the year you started going online. Just like the rapidly changing trends of the fashion world, web design trends are continually evolving.

We’ve come a long way from the flashy style of early websites. Today, a more flat and minimalist look is preferred, and many designs are made to look as good on smartphones and tablets as they do on desktops.

Of course, just because a trend has fallen out of style doesn’t mean it’s wrong to use it. Plenty of people still use Comic Sans and are puzzled about all the hate, and animated gifs are seeing a resurgence on Twitter and other social media sites.

Still, it’s hard to use blinking text, frames, or glossy buttons without looking a little dated and out of touch. There’s a often a good reason trends have gone out of style. Flashy designs, for example, can distract from your content, and even annoy visitors enough to hit the back button before they read a word.

If you’re designing a modern, professional website, you want to avoid the pitfalls of yesterday’s cliche design trends. But you may be surprised at how many of those old trends are making a subtle resurgence. Check the graphic below to see all the old trends you want to avoid, and more modern alternatives you can use instead.

web-design-trends

Blast From the Past: Web Design Trends You’ll Never Forget

The web sure has come a long way since the early 1990s, but you can still see the roots of early trends in some of today’s web design.

Comic Sans

  • Once highly popular, this font fell by the wayside years ago in favor of more modern designs.
    • Default font in Microsoft Windows 95 and above.
  • Still beloved by a small group–it even has its own subreddit–it may make a comeback on the Internet.
    • http://www.reddit.com/r/comicsans
  • Someone loved it so much, they gave it a makeover!
    • Comic Neue is an updated version of the old Comic Sans, aimed at reviving the font back into the mainstream.

Under Construction Logos

  • Once the best way to tell visitors you were still building your site, this is now looked down upon by most of the web design world.
    • It’s been replaced by the more mature “Coming Soon” page that allows users to opt-in to your email list.
  • It’s not dead yet–there’s still an old school website online dedicated to Under Construction graphics.

Drop Shadows, Bevel and Emboss, Glossy Buttons, & Gradients

  • Drop shadows were once an incredibly cool way to show off your Photoshop® Just a few clicks of a button, and bam! You’ve got an awesome looking graphic.
    • Today’s web design uses cousins of the drop shadow.
      • Subtle Shadow
      • Hard Edged Shadow
      • Layered Shadow
  • Bevel and Emboss
    • Today’s web design trends call for flat design, which pushes bevel and emboss into the dark abyss of bad web design.
  • Glossy Buttons
    • The Bevel and Emboss with a twist–this adds gloss to create a plastic/glass look to the buttons, making them look like shiny objects you just can’t resist clicking.
    • Once so popular they became over used, these too, have fallen prey to the new flat design trend.
  • Gradients
    • Another feature in early web design that reached such popularity heights that it became overused.
      • This trend has also fallen victim to flat design, but, is still used subtly to bring life to buttons.
        • It’s replaced the glossy button, and when done right, can be used in today’s web design.

Frames

  • HTML frames were used to break a page into multiple “frames” that would each display a different URL. The majority of early websites used them in some capacity or another.
    • Obsolete in HTML5, except for iframes.
      • iframes allow you to pull web pages from external sites into your page.
    • Hurt SEO as search engines have a hard time reading frames.
    • Adds to the number of pages you must update
    • Adds to page load time
      • This is bad for both SEO and the user experience.

Marquees/Scrolling Text

  • Does any part of your website feature scrolling text? Then you’ve got a marquee.
    • This tag/feature was cool in the 1990s, and often combined with the Comic Sans offense.
    • Your website is not a news network! Don’t treat it like one.
  • If you’re still using a marquee on your website, you look like you’re stuck in 1996.
    • Google recommends against it, because it hurts your search engine optimization (SEO).
      • Shows a limited amount of information to the search engines.
    • Do your users need to see the information?
      • Yes: Put it on the page in a different way, above the fold, to make sure it’s visible.
      • No: Remove it!

Animated GIFs

  • An amazingly popular trend of the ‘90s, it seems everyone was using animated GIFs.
    • The dancing 7-UP® spot
    • The spinning earth
    • The dancing baby
  • They are in use today in email marketing from major brands like:
    • Bed Bath and Beyond®
    • Starbucks®
    • West Elm
  • They are making a comeback, but if you’re going to use them, keep these things in mind:
    • They are not a replacement for video.
    • Keep them subtle.
    • Use only a few colors.
    • Remember file size.
      • The bigger the file size, the longer it takes to load.
      • 3% of Americans are still using dial-up Internet!

Overused Stock Imagery

  • Stock imagery is still rampant today, but certain images were overused, such as:
    • The handshake
    • Happy family
    • Group of friends
  • Stock imagery doesn’t make you look “real.”
    • Instead, use photos that echo your voice and your personality.
    • Use photos of people who look less than perfect.
    • The more real your photos look, the more trust you’ll build with your audience.
  • If clients request this, stop the maddness!
    • Show alternatives that will help them convey their message, without the fake stock photos.

Visit Counters

  • The early webmaster attempt used to collect traffic data, these were often inaccurate.
    • Odometer style counters that count “up” each time the website is loaded.
  • Though not widely used today, there’s still an argument for the use of free counters on your website.
    • Creates trust as users see that many others have visited the website.
  • Instead of a visit counter, rely on Google Analytics to give you traffic data, and use a Call to Action to entice your customers.

Flash Splash Pages

  • These were once popular because of how cool it was to animate your site with Flash. Thanks to the discovery that Flash isn’t the best option for search engine optimization (SEO) these have all but disappeared.
  • Splash pages are still in use today, for many reasons:
    • Disclaimers, as required by law before entering a site
      • Example: Alcoholic beverage/cigarette websites
    • Additional form of advertising
    • Select the language they want to view the website in, so as to direct users to the correct one.
    • Though the Flash aspect may be dead, we’re starting to see more splash pages come back.

Even decades after the dawn of the World Wide Web, we still see the big early design trends playing a role in how we design websites today.

Sources

Download this infographic.

Embed Our Infographic On Your Site!

Get Exclusive "Subscribers Only" Content

Join our newsletter & be first to hear when we publish new posts.

Get Exclusive "Subscribers Only" Content

Join our newsletter & be first to hear when we publish new posts.

Twitter Facebook

Discussion

What Do You Think?

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>