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"> </td>
<td id="0" bgcolor="#3366cc" align="center" width="120" nowrap=""><font color="#ffffff" size="-1"><b>Web</b></font></td>
<td width="15"> </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"> </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"> </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"> </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!