Fashion Timeline of Web Design

While working on my previous article A Brief History of Web Typography, and inspired by those fashion history timelines, I had this idea of showing the design evolution of websites down the years. The objective was to demonstrate the major role of typography in web design, but there are some inevitable hints of general design trends here and there. Like the pre and post skeuomorphism era; the minimalist design manifested in the last card…

To make it simple, and sorry if you were expecting more, I had to choose a single component to achieve the task. The first that came to mind was cards. It has a fair amount of elements: an image, a pairing of title and text, and a button. Navigate the cards by clicking the numbers:

1. I doubt there was this “standard” notion of cards as a way to layout content at this period, but there you go, If it ever was, this is how it could’ve looked. This is what I referred to as the 2000s system font times.
2. Typeface wise, nothing much changed here, we were still using web safe fonts. This doesn’t necessarily map to one of the highlights in the web typography article, but it was the days where CSS 3 bells and whistles saw widespread adoption. Notably text and box shadows, border radius etc..and boy they were abused, everything had shadows and round corners.
3. This one maps to the Google font beginning with the flattening of web and UI in general. Pioneered by the Apple’s move from skeuomorphism to flat design (and thin typeface at the start).
4. This placement is a bit awkward, nothing special. I hesitated whether I should keep it or not, but I did so just to dedicate a place for a serif font.
5. Clearly this is the new system font era. Cleanliness could be the title of this period. Almost like this: system-ui, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif is the standard way to style fonts on the web.
6. The trend of clean and minimalist UI is reaching places these days few people saw coming. It’s for the best I’d like to say. Here we started to use modern stuff like gradients (like the title of the card above) but only this time, in an elegant way, and not like when we used to abuse them when they first appeared. I was personally guilty of that :)

Tagged in: Web