I got to thinking today about all the trends I’ve shamefully exploited in my years as a designer. It’s not that I was trying to be trendy (actually I’ve never been into following trends), but that in the real world, you have to be competitive with other websites, and your clients often want to be trendy. When you look back through the years, it’s pretty amusing. Ladies and gentlemen, may I present to you (yet another) nostalgic blog post that nobody will find interesting.

Notepad & Netscape Era (RIP 1994-1997)
During this time, nobody really built websites in Photoshop. Typically, you built the website first using Notepad, then spread around some graphics you made in Paint Shop Pro regardless of how well they fit together. Perl, or at least CGI, was pretty much your only backend option, and servers weren’t fast enough to run every page of your site like that. Javascript was around, but wasn’t very compatible in IE, there was no DOM, and so it didn’t really do much. Frames were extremely popular.
As far as design, there really wasn’t much to speak of. Graphics were mostly an afterthought, as images, backgrounds, and fonts had just been introduced to HTML. Usually there was a heavily-compressed banner, a tiled background, an “email me” icon, and would be it. Comic Sans and Arial were the only alternatives to Times and Courier (and we liked it!).

Tables & Photoshop Slicing Era (RIP 1998-2001)
At this point, Photoshop was becoming the standard for web mockups. However, due to limitations of CSS1, we would slice up the images in Photoshop, then export them directly as tables. As far as I know, you can still do this in Photoshop, but nobody is dumb enough to do that anymore. The problem with tables, of course, was that it was a nightmare for semantics, and they were a little tricky to edit directly. Also, there was very little you could override with CSS.
During this time, the dark “cyberpunk” look was huge. Backgrounds were almost always black with white or neon text. It was also popular to use Japanese text for no reason at all, both as the cyberpunk look and because anime was at its peak of popularity. In this era, we found ourselves spending more time editing the website in Photoshop than actually using the HTML. WYSIWYG editors were also popular at the time, but they all quietly went the way of the dinosaur.

Flash Era (RIP 2002-2005)
Also known endearingly as the “Web 1.5” Era. Flash had been around before this, but it really started taking over around this time, stemming from cross-browser frustrations and a desire for interactivity that Javascript, at the time, was incapable of. Flash moved on from splash screens and menus to running entire websites. This of course was bad SEO, but nobody cared. We all spent our time in online arcades playing Flash games. Video was finally working on the web using Flash.
Throughout these years, the designs were typically flat-shaded, abstract Illustrator creations (like what you’d see on a hipster t-shirt), as well as Photoshop manipulated people and landscapes. It was common to see art that was complicated and “overprocessed”-looking.

Web 2.0 Era (RIP 2006-2009)
Although Flash was still being used sporadically, this was the first real coming-of-age for web design. Javascript frameworks started becoming more prevalent. IE5.5 was dead and CSS2 was now much easier to utilize. Table layouts were officially dead. XHTML was the new standard, and AJAX was the new way of hooking into the backend. Tons of new backend languages were being introduced. The iPhone introduced a new way of thinking about mobile websites. The headset hottie was behind every corner.
Because most of the designs in this era were running in CMS’s now, and CSS2 still didn’t enjoy 100% support, websites were incredibly clean and simple. Backgrounds were always white, and the glossy glassy gradient look was popular to say the least. Also, nearly every website was a wholesale ripoff of Apple’s. Flash started dying out during this time due to many factors, the biggest factor being it was not allowed on Apple devices, so it was no longer the silver bullet for animation it once was.

Framework Era (RIP 2010-)
During this time, designers were growing impatient with HTML5’s slow adoption, and decided to take matters into their own hands. In order to get HTML5 working in all browsers, however, it required your Javascript framework of choice and polyfills such as HTML5Shiv or Modernizr. Also during this time is the adoption of CSS fonts, CSS preprocessors, CSS grid frameworks, which led to the popularity of boilerplate templates such as Twitter Bootstrap to ease the installation and integration of all these crazy add-ons.
Designs that dominate in this era are the handmade/indie movie poster look, cut paper look, and stitched leather look. Which is ironic considering the frameworks are now doing much of what used to be done “by hand”.

Predictions
Since these trends all seem to come in 4 year blocks, I predict 2013 will continue in the Framework Era, keeping the same indie look with handmade sketches and shiny happy animals all over the place. Trends such as the “massive wall of text” and “giant photograph” look will continue to get popular. In 2014, I expect to see a new era in which canvas, SVG, and retina graphics up the ante, and some library may come around to tightly integrate Javascript on the front and back, allowing a much more application-like experience, like where we left off during the Flex days.