Cool Websites

Cool Website: Google Cloud

by Jack
4/2/2020

After focusing on Sobieski, Wed’ze, Dell Gaming Apple, Mercedes, Kinder and Magic Leap, we will focus today on the new 3D experience from Google Cloud Infrastructure!

The Brand:

Google Cloud is one of the most critical parts of Google for Work. Announced in 2008 and launched only in 2011 (I don’t know anymore if 2011 was yesterday or decades ago⏳), it is a range of almost 100 different services that run on the same infrastructure that Google uses internally for its end-user products.

The products are categorized into 7groups:

  • ☁️Cloud Computing (which include Infrastructure)
  • 🤖Analytics and AI
  • 🔐Security
  • 👥Collaboration & Productivity
  • 🗺️Maps
  • 👨‍💻Hardware and software (browser, OS)
  • 🧠Services

Even after research, if you’re like me aka not an engineer, what Google Cloud is can be a bit blurry 😧
That was exactly the challenge that the infrastructure team tackled to create this experience: explain visually how the global network of Google serves 17 regions, 52 zones and over 100 points of presence every day.

The Website:

Regarding structure, the website is made with 3 journeys and a free exploration mode. We will focus our analysis on one of the journey and the free exploration mode 👓

Data analytics: zoom, rails, and isometric camera

It all starts with a zoom in from the Earth to your building and your computer.
Welcome to the first scene: on a complete white plain, a few smooth 3D parallelepipeds with low opacity give us an urban feeling; in the center of the scene, a 3D model of a building is the starting point of our journey. The camera 🎥 starts with an isometric view and will move on rails throughout the entire experience. The second scene is very similar and guides us to Google’s point of presence.

The transition to the third scene is interesting, it starts with a rail movement of the camera and ends with a white crossfade to the data center, still with an immersive isometric angle of the camera. Clicking it let us enter in the data center and shows us the inside of the building, and then the details of the servers: it’s interactive, it’s immersive, you follow the journey of a query from beginning to end 💫

Free exploration mode: 3D model, dragging and animations

The second part of the experience let us flyover 🛸 a globe where you can reveal all the infrastructures and the connections between them. You can freely manipulate the 3D globe by dragging it with the mouse and all the connections are animated which feel even more real. You can visit step by step an example of a data center, from the windmills outside to the water pipes inside!
All the technics used in bold are now available in our last release. Register and start to create!

This experience won an Awwwards prize 🏆 recently and we can quickly get why:

✅ It explains a complex solution with straightforward journeys

✅ There’s a perfect balance between style and performance with a clean design

WebGL and 3D is well used with a dynamic camera (zoom, rails), 3D models and interactivity during the whole experience.

Let us know in the comments if you feel this experience helps you to better understand Google Cloud Infrastructure 👩‍🔬
Try to build your own experience based on this one on our beta, sign up for free here :D

Share