I’m not ashamed to admit that I came of age during the 90s. It’s also when my design career started. So sometimes I find it rejuvenating (and somewhat amusing) to take a trip back to those days. Most of the time, it comes in the form of listening to some of my favorite music from the decade (grunge and Britpop, please). But every so often I get the urge to revisit some of those old web design trends.
And, as we’ve seen, just about every design fad is cyclical. The 90s are no exception, what with the recent popularity of brutalism. Of course, back in the day we designed things that way because we were limited in both web design tools and knowledge. But it is interesting to see younger designers pay homage to the web’s early days.
Not surprisingly, CodePen is just full of 90s-inspired goodness. So I’ve scoured their archives and have found 10 snippets that properly represent those awesome vibes:
Those Little Rugrats
There was a time in the 90s when Rugrats actually became one of the more popular animated television shows. It even spawned a movie. This snippet does a nice job of capturing the look of the show’s title, complete with pulsating animation.
It’s Wavy, Dude
Television in the 90s was much more of a shared experience than we see today (remember, there was no Netflix). Developer Bobby Korec created this homage to some of the people and moments that shaped the decade. And he’s done so in a most time-appropriate design.
Be the Navigator
I will always have a special place in my heart for Netscape Navigator. It was the first browser to make it big, and pushed the web forward in ways we are still feeling to this day. Here we have a completely retro club invitation sporting the browser itself and a page design that certainly goes with the time period.
Like One of Those Screensavers
If you had yourself a PC or Mac back in the day, you probably had a screensaver installed. They were intended to prevent screen burn-in, but I’m not sure how big of a problem that actually was. And, true story: I used to set my screensaver to only go on after an hour, so nobody in the office would notice that I was taking longer-than-allotted snack breaks. As for this example, well, it reminds me of a screensaver!
There came a time in every young person’s life when they were addicted to AOL Instant Messenger (AIM). The one-on-one chat application was a major improvement over IRC and was simple enough that just about anyone could use it. With this React.js example, you can get a pretty darn authentic AIM experience.
A T-Shirt That Changes Color?
Indeed, there used to be this thing called Hypercolor. Essentially, it was clothing that changed color with heat. So placing your hand on it would lead to a color change. But now you can have this very experience, right here in your browser (well, apparently not the latest version of Firefox). Chrome users have fun, though.
I don’t know if any television show in the 90s had better design than Frasier. The simplicity of its logo and scene titles were something that were not widely adopted by web designers until years later. Here we have a faithful representation of the animated Seattle skyline in all its glory (with theme music).
Steve Nailed It
This example is definitely an accurate depiction of what the web looked like back in the day. And it actually reminds me a bit of my first personal site (thanks, Geocities!) Except mine wasn’t quite this well-thought-out.
Waiting for New Artwork
The days before broadband required a whole lot of waiting. You had to dial in to your ISP, which could take several tries. And when you finally got online, there were frustrating load times to deal with. Perhaps no example in this collection better represents the 90s online experience than this slow-loading picture of Bill Murray.
Don’t Look Back in Anger
Looking back at the design and technology of the 90s provides an even greater appreciation of how far we’ve come. Without every design disaster or slow-as-heck download, we might not have evolved quite so well over the years.
So crack open a Surge and take a moment to reflect on what once was. Then, be thankful we don’t have to wait 10 minutes for a photo to download.
- 8 Creative CSS & JS Snippets for Creating Pixelated Backgrounds
- 10 Dramatic Examples of Splash Screens in Web Design
- 8 Fantastic Onboarding Carousel HTML & CSS Snippets
- Show Me Emoji: Iconic Code Snippets