I, like everyone else, was wowed recently by “The Evolution of the Web” - an interactive infographic created by a collaboration of Hyperakt, Google Chrome, and Vizzuality. In this feature, Hyperakt’s Deroy Peraza talks about how the project came to being, and the process behind its design and development. — Daniel Howells
The Evolution of the Web was a true collaboration. The Google Chrome Team had created a static version of the infographic in 2010 with mgmt design and GOOD. They painstakingly researched and identified browser release dates and key technologies and established a visual language that expressed the momentum of innovation, especially over the last few years.
This year, to celebrate Chrome’s third anniversary, Google wanted to pay tribute to the technological achievements achieved on the web over the last 20 years. They asked Hyperakt and Vizzuality to work together to extend and enhance the infographic created in 2010 into a rich interactive experience. Hyperakt’s role in the project was to adapt the piece for the web. After extending the timeline to include the technological developments of the last year, we worked to add clarity to the timeline. We flipped the timeline to begin with the earliest browser, Mosaic, on top, incorporated logos for the browsers and updated the color palette. Most importantly, we added some depth to the timeline content by giving all the browsers and technologies hover and click actions. For the browsers, we added a trip down memory lane. On click, a lightbox slideshow appears containing screen captures of the all the past versions for that browser.
Hyperakt, with assistance from the Google Chrome Team, researched and prepared over 60 captures to illustrate all the browsers. For the technologies, we added a short description on hover for each, and provided external links for further reading on sites like Wikipedia and CanIUse. Beyond design updates and interactions designed within the timeline, Hyperakt designed how the piece works in the context of a browser window. We emphasized the horizontal nature of the visualization by limiting scrolling to the horizontal axis, and added tabs to open and close the copy-heavy description panel, allowing users the option of focusing only on the timeline. Support for multiple languages was integrated via a dropdown menu by the visualization’s title.
As new interactions were being designed for the piece, Hyperakt worked closely with the awesome team at Vizzuality, who brought the design to life with their elegant code. Over the last few years, HTML5 has spurred a rush of new technologies and Vizzuality paid tribute to that by developing in HTML5. They took advantage of SVG browser support to draw the intricate vector shapes over Canvas and used the great Raphaël and JQuery libraries to add subtle animations and interaction, making the user experience feel rich and responsive.