If you were old enough to see, browse and work with the web in its early stages, then fasten your seatbelt, and prepare to fill yourself with nostalgia. If not, and if you’re one of the many like me who still have yet to see the state of the web circa the 90’s to the 00’s, then prepare to fill yourself with awe, and join in as we go way back.
A while ago, Things Like Whoa showed the world the original designs of today’s top websites. Today, we break them down pixel by pixel.
Google’s home page back then was simple and straightforward. Its design featured the common centered layout, just like many of the top websites back then, and the use of Times as the page’s main font reflected with Google’s colorful, serif logo. Of course, back then, we didn’t have the beautiful subpixel-rendering to look at, so the look and feel of the (often despised) default serif font on the page didn’t really matter.
Even for its pre-web-modernistic design, Apple’s homepage featured a complex, yet simplified layout of its products, news and information. The sidebar navigation was the de facto standard for most websites back then, so the world’s largest company’s 1997 homepage implemented that. Again, just like Google’s and many other websites back then, the use of the default serif font was prominent for chunks of information, and a sans-serif for titles. The hyperlinks remained in the brower’s default color.
The New York Times
Known as one of the many popular and greatest news outlets, The New York Times brought the news to the web, featuring almost the same complex layout since 1996. The readable, distinct headlines were big enough (for the huge, 640px screens) to catch some attention, and the mediocre quality of the photographs brought the news to life. Just like Apple’s 1997 homepage, the combination of serifs and sans-serifs, and the complex logo (we all know and love) give The New York Times’ 90’s webpage a good look.
Featuring the old ‘Amazon-river’ logo, Amazon.com originally started as an online bookstore, selling over a million titles through its website. Unlike the image-laden homepage as it is today, the 1998 webpage featured chunks of text, huge serif small-cap titles, and a bucketload of hyperlinks everywhere. The page featured a justified, flexible layout, however the long lines of text weren’t as readable back then with the ancient-hinted fonts of the 90’s.
Also known as the company that bought Geocities back in 1999, Yahoo! originally started in 1994 as a “hierarchical web portal” (it was originally named “Jerry’s Guide to the World Wide Web”) featuring a directory-based webpage browsing system. The 1996 homepage featured a directory listing of website categories, linking to many of the popular websites back then. The centered, pixelated header and links also used the default serif font instead of the sans-serif, giving users back then a sense of familiarity. In summary, Yahoo! was once simple and straightforward in webpage design.
Shown in many bits and pieces (even in code!) in ‘The Social Network,’ Facebook originally launched in 2004 featuring an almost-modern look featuring Verdana, hues of blue, and a complex network system. Just like almost every website in the 00’s, Facebook implemented a banner header and a simplified, centered footer. The 2004 homepage also featured an onboarding pitch to bring more users into the service.
Twitter began life as a social service that brought friends together through short message updates. The service used the web as a platform for consuming and browsing through other people’s updates. Featuring text-message colloquials and graffiti-style graphics, Twitter looked like it was solely aimed at teens and young adults. Which, in fact, remains its largest demographic today.
If you’re looking for the signature birdie, look closely at the ‘r’ in the logo. If you’re looking for the Twitter bird logo in this original design, then you should know that it was never there until Iconfactory’s Twitteriffic app brought the “tweeting” and “bird” conventions to the Twitter brand.
One of the many popular websites today, YouTube began as a directory for uploaded videos, featuring a simple, centered layout, a video highlights gallery and a Facebook-esque footer. The website also implemented a tag cloud linking to many of the popular terms on the website, and a header that encouraged users to create and manage accounts, and upload videos. Contrary to the design it has today, the 2005 YouTube homepage (right before it was acquired by Google) was simple, though unattractive. Not to mention, uploaded videos weren’t displayed front and center.
Right before Dan Cederholm’s responsive redesign of the website, Dribbble featured a 3-tile-horizontal layout, a browsing sidebar and a list featuring newly drafted Dribbble ‘players’ called ‘Rookies.’ There was no sign up option either, (today, the website features a ‘prospect’ sign up feature, however the account is limited) and the subtle hues of blue contrasted with Dribbble’s pink basketball logo. However, many small details, like the hues of blue, changed right up until today’s current design. Also, the shots back then once had a bottom-right drop shadow to mimic a page flap.
What did we learn?
Now that we have some knowledge on how webpages were design back in the early days of the web, let’s contrast that with the things we know and practice today. We have webfonts, customizable scripts, powerful web browsers, high-resolution (retina) displays, mobile viewports, media queries, stylesheets with nearly infinite possibilities, vector graphics, screen typography, beautiful icons and graphics, and even millions of colors— all for us to use.
These last 20 years of the web reflected what we could do, what kind of things we can create and the possibilities of innovation. But those years were only the beginning, and as we create with the tools we have, and the technology that evolves with our craft, let’s look forward to the next 20 years of design on the web – wherever it may been by then.