Tracking the Evolution of UX Through Google's Homepage, Over the Years

Google is well know for its minimal design of its homepage, but has it always been this way?

Google became the world’s largest search engine, with over 70% of all searches performed through its search engine.

“Focus on the user and all else will follow. With this in mind, we seek to design experiences that inspire and enlighten our users.”

This post is going to explore how the google homepage has changed over years. Since the homepage can change many times daily, and varies per device and viewport size, I have looked at this with a desktop viewport, and opted to perform comparisons when Google have used their standard logo, no special event logos.

1998 — Google! Beta

Google Homepage 1998

Google actually served content on google.com before this, but it was just a holding page. This is the first instance they started functioning as a search engine. They had the I’m feeling lucky button from the start, which I’ve always personally liked.

1999 — Lets have a minimal look

Google Homepage 1999

Around this time, table based designs were used all over the web, but it looks like Google decided to remove the table underneath and opt for a simple minimal approach. If you compare the 1999 Google homepage to present times, you will notice that actually very little has changed in terms of the way it looks.

2000 — Lets put links to the Right

Google Homepage 2000

One of the major changes in 2000 was the introduction of the links to the right of the logo. This is what we would now consider as a nav bar, but back then it was a single image with clickable areas, using a map:

<center>
  <img src="/web/20000407062157im_/http://www.google.com/images/Title_HomPg2.gif" width="600" height="130" border="0" usemap="#map1" alt="Google">
  <map name="map1">
<area shape="RECT" coords="493,58,595,103" href="jobs.html" alt="We're Hiring!">
<area shape="rect" coords="381,57,488,104" href="about.html" alt="About Google" title="About Google">
  </map>
</center>

It really is interesting how layouts similar to what we use now, existed back then, and the methods that were used to make them work.

2001 — Google web directory

Google Homepage 2001

Something different appeared in 2001, a link called Google Web Directory, which linked to the page below.

Google Web Directory

A web directory or link directory is an online list or catalog of websites. That is, it is a directory on the World Wide Web of the World Wide Web. Historically, directories typically listed entries on people or businesses, and their contact information; such directories are still in use today

Web directories were very common years ago, if you had a website which you wanted to be indexed by google or other search engines, it was common place to submit a link to you site to one of these types on indexes.

2002 — Introduction of tabs

Google Homepage 2002

In 2002 google split the search engine into categories. The also used what looks like tabs, except this is no single page app! They don’t function as you would expect tabs to work these days, each tab when clicked would re-render the whole page. They were also built up using tables, and only the text clickable:

<table border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td width="15">&nbsp;</td>
            <td id="0" bgcolor="#3366cc" align="center" width="120" nowrap=""><font color="#ffffff" size="-1"><b>Web</b></font></td>
            <td width="15">&nbsp;</td>
            <td id="1" bgcolor="#efefef" align="center" width="120" nowrap=""><a id="1a" class="q" href="/web/20020222235749/http://www.google.com/imghp?hl=en"><font size="-1">Images</font></a></td>
            <td width="15">&nbsp;</td>
            <td id="2" bgcolor="#efefef" align="center" width="120" nowrap=""><a id="2a" class="q" href="/web/20020222235749/http://www.google.com/grphp?hl=en"><font size="-1">Groups</font></a></td>
            <td width="15">&nbsp;</td>
            <td id="3" bgcolor="#efefef" align="center" width="120" nowrap=""><a id="3a" class="q" href="/web/20020222235749/http://www.google.com/dirhp?hl=en"><font size="-1">Directory</font></a></td>
            <td width="15">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="10" bgcolor="#3366cc"><img width="1" height="1" alt=""></td>
        </tr>
    </tbody>
</table>

2003 — Introduction of news

Google Homepage 2003

In 2003, the tabs still existed, except this time you were able to click any part of the tab, and not just the text. Google News was also added.

Google News was not minimalistic, and easy on the eyes like the search engine home page was, but I guess this would have been quite difficult to display so much information and keep it minimal. The styling across the home page and news was not consistent also.

Google News

2004 — Introduction of Froogle

Google Homepage 2004

A new link was added to the homepage, Froogle.

Froogle, a pun on the term “frugal”, was eventually rebranded to Google Product Search and then Google Shopping.

The original name was dropped due to concerns surrounding internationalization, and people not understanding the pun or understanding what the service was actually about.

Froogle

2005 — Introduction of Local

Google Homepage 2005

A new link was added to the homepage, Local.

Local is what eventually would be called maps.

Google Local

Unlike some of Google’s other acquisitions, in terms of style, they managed to keep it consistent with the search engine landing page.

Google Local map view

2006 — Page count has gone missing

Google Homepage 2006

In 2006, Google stopped displaying the amount of pages it had within its index.

Here is an approximation of how the page index grew from 1999 to 2005 (based on displayed index size throughout those years

Google Index Size

Its hard to get a rough size of how large Googles index is, I have seen many quotes which state:

The Google Search index contains hundreds of billions of webpages and is well over 100,000,000 gigabytes in size

2007 — Introduction of Google Maps on homepage

Google Homepage 2007

The launch of Google Maps was first announced on the Google Blog on February 8, 2005, but it was only in 2007 when it made it onto the homepage of the search engine giant.

Google maps

2008 — Nav links, iGoogle and Sign in

Google Homepage 2008

The tabs are gone, and the nav links at the top of the page are here!

The links were anchors and redirected to other Google applications.

The option to sign in appeared, and so did iGoogle.

iGoogle

iGoogle (formerly Google Personalized Homepage) was a customizable Ajax-based start page or personal web portal launched by Google in May 2005. It was discontinued on November 1, 2013

iGoogle allowed you to add widgets to a dashboard, that was personalised to how you wanted it to look. It was pretty cool

2009 — Nothing really changed

Google Homepage 2009

In 2009, the homepage looked very similar to pretty much all of 2008, apart from when they replaced the logo with artworks for special occasions!

A few facts about the homepage at this time:

• The google logo was only 9KB
• The google logo was gif format
• The structure of the page was formatted using tables

2010 — Finally the shadow behind the logo was reduced

Google Homepage 2010

Looking back at the Google homepage, one of the common features was the drop shadow behind the Google logo. In 2010, they reduced the use of this shadow, and although some still remained, it was only a very small amount.

2011 — Introduction of the dark nav bar

Google Homepage 2011

In 2011, the nav bar looked less like a list of anchor tags, and much more like a navigation bar.

Instead of tables, an ordered list was used for the layout.

2012 — Introduction of Google+

Google Homepage 2012

The style of the homepage stayed pretty similar, but they introduced a link to Google+

Google+ was a social network owned and operated by Google. The network was launched on June 28, 2011, in an attempt to challenge other social networks, linking other Google products like Google Drive, Blogger and YouTube.

Goggle Plus

2013 — Flattened logo

Google Homepage 2013

Towards the end of 2013, the flat logo, with no shadow was introduced as the default.

Comparing this to previous logos, it looks cleaner, more modern and easier to read.

2014 — Did someone forget to update the copyright?

Google Homepage 2014

The style again stayed pretty similar, I guess they were very happy with what they had at this point.

A fun fact thought, is the copyright tag at the bottom of the screen was only updated to the year 2014, half way through December 2013. Pretty much all of 2014 had the copyright year set as 2013

2015 — Time to change the logo font

Google Homepage 2015

In 2015, the font of the Google logo was changed.

How about a summary of how it looked over the years:

1997–1998

1998–1999

1999–1999

1999–2010

2010–2013

2013–2015

2015+

2016 — No major changes

Google Homepage 2016

In 2016, the homepage looked very similar to pretty much all of 2015

A few facts about the homepage at this time:

The google logo was only 5KBThe google logo was png formatThe size of the logo was 272 x 92

2017 — Again, no major changes

Google Homepage 2017

Google must have just been happy with the homepage, its simple, clean and to the point.

2018 — Flat buttons and shadows on input

Google Homepage 2018

In 2018 shadows were added onto the input field. This was a very popular style choice at the time

2019 — Rounded input

Google Homepage 2019

In 2019, the shadow input was switched for an input containing rounded corners. This kind of effect is so simple to do with css compared to in the past when developers would try to use different techniques to achieve this, such as images or strange hacks to css.

2020 — Shadow on input

Google Homepage 2020

Here we are, the modern day!

The rounded corners are still here, but this time the shadow is behind the input. Personally, I think it looks pretty awesome.

After 20 years of evolution, what has actually changed?

Not much, really. The way it looks from a design perspective is actually quite similar from 20 years ago. In terms of features, although it looks simple there is quite a lot of functionality underneath!

One thing that has remained consistent is that the world’s most viewed webpage is very small in terms of code size, I guess due to the amount of bandwidth this must consume globally on a daily basis!