The Wayback Machine

5 months ago on March 21st

Cyberspace

Pixeline

So browsing the Internet, I discovered the Wayback Machine. Thanks to Internet Archive, you can see what web sites looked in their early days and see each month of progress. Mainly, let's take a look at Alexa's Top Sites worldwide on the Internet to see how each one has changed over the years. We won't be looking deeply into the purpose, but rather design and usability upgrades.

6. Wikipedia

In Wikipedia's early days, not much thought was put towards design. A simple 100% width layout using only black for text, and blue for links displays one of the least styled web pages.

Wikipedia (September 2002)

Wikipedia (September 2002)

A little over a year later, they've kept the same topics but separated them and color-coded them for easy reading. Design is coming into play little by little.

Wikipedia (January 2004)

Wikipedia (January 2004)

Today's design seems to focus more on global reach with the globe graphic in the middle surrounded by the multiple languages Wikipedia currently has articles in. This is emphasized further with an endless list of languages and dialects on the bottom, including too many to count. It kept the same basic white and black text, but has taken away the default serif font.

Wikipedia (March 2010)

Wikipedia (March 2010)

5. Live (Bing)

Microsoft's Live branding project was released after MSN as a way to connect Windows users to a more familiar search engine. Their initial page gives off a simplistic look with familiar logos and symbols placed. It resembles Google's earlier and current design of simply a search box and search types.

Live (January 2007)

Live (January 2007)

Not much changed in a year except some color was taken away and more promotional text was added.

Live (January 2008)

Live (January 2008)

One year and a half later, Microsoft decides to re-brand a re-brand and releases Bing. This time, it focuses more on visual effects than anything, including a different daily picture background.

Bing (March 2010)

Bing (March 2010)

4. YouTube

The trend at the time was sites with graphical borders around them, as a blue background with a graphical menu make YouTube's initial visual appeal quite minimal.

YouTube (April 2005)

YouTube (April 2005)

Quickly excess colors and images were taken away. A more search-engine-friendly menu replaces images with actual text links. As the content on the site grows, so do side and top menus.

YouTube (January 2006)

YouTube (January 2006)

By this time, the more popular sites have moved to using as little images as possible focusing more on search- and mobile-friendly designs. YouTube is no exception.

YouTube (March 2010)

YouTube (March 2010)

3. Yahoo!

As early as 1997, Yahoo! seems to be one of the originators of plain designs, as the only part of the page that seems to have images is the top menu.

Yahoo! (January 1997)

Yahoo! (January 1997)

Content has grown quite a bit in seven years, as we now see news and other feeds. Advertising has now been put into place quite heavily.

Yahoo! (January 2004)

Yahoo! (January 2004)

The side menus have grown tremendously. Top stories are now displayed on a scrolling JavaScript box allowing you to easily browse through titles quickly. Every search engine now seems to take on a search box with a few category links on the top.

Yahoo! (March 2010)

Yahoo! (March 2010)

2. Facebook

Facebook also shows off a plain design, but with more color and rounded letters than Yahoo!'s initial design. The only dynamic part of the page is the login box.

Facebook (August 2005)

Facebook (August 2005)

By December, Facebook cuts out unnecessary information providing only a login or register button and a few lines of information.

Facebook (December 2005)

Facebook (December 2005)

The same information is now spread out across the entire page, the registration form is now on the home page--eliminating one step from obtaining new users. More language support is added as new design colors are rolled out.

Facebook (March 2010)

Facebook (March 2010)

1. Google

Google's early design featured only text and background-fills. It had a few more options than present-day as it's index was still growing.

Google (November 1998)

Google (November 1998)

Withing two years, it spreads out it's content a bit more and features the most simplistic design it would only alter slightly from here on out.

Google (January 2001)

Google (January 2001)

Present-day Google hasn't changed much from it's last re-design. Except the bottom menus have now been moved to the top and expanded 100% to the stage width.

Google (March 2010)

Google (March 2010)

From Here

As technology and the Internet advances, so have many re-designs. These have gone from using images as part of layouts, content not optimized for search, and overall no styling to what they have become now. It seems these days it's all about utilizing as little images as possible, focusing more on usability and search optimization. They've all maintained default white as a background, and black text on the foreground. It's now harder to find a web site with default serif font (thank goodness).

All design is reflected in media. In the 60s and 70s it was plain white sans-serif font with no style at all. In the 80s it was cursive with thick strokes and shadows. The 90s seem to have featured wacky colors and crazy font. Now the past decade has shown to be moving more into simplistic designs; where do they go from here?

Short URL: http://mayavps.com/a10
If you enjoyed this post, please subscribe to new ones via e-mail, RSS, or Twitter.
1 0 0

1 Comment

I like the way everything is moving toward a cleaner layout and allowing for a lot more personalization. It makes me feel more comfortable - random, unnecessary things aren't being shoved in my face. Or at least that's how I feel, and I am sure that is what marketing was hoping for.

Additionally, that first google design??? Hideous

0

What's on your mind?

Gravatar

HTML not converted, links begin with http://, and UTF-8 (unicode) characters accepted.
Code blocks should be wrapped in [code][/code], inline code snippets in [ic][/ic], and bold elements in [b][/b] identifiers.