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 button from the start, which I’ve always personally liked. I’m feeling lucky 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: Web Images Groups Directory 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 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" 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" 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" 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 Search contains hundreds of billions of webpages and is well over 100,000,000 gigabytes in Google index 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!

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

Too Long; Didn't Read

Companies Mentioned

@digitalbeardy

RELATED STORIES