Using motion to compare different design iterations

Playing around with a set of potential Google logos, I experimented with the idea of comparing design iterations using animation

  • #keynote
  • #motion
  • #branding

A glimpse into Google

When Google launched its new logo and branding, their blog post, Evolving the Google Identity, contianed a photo of a few designers looking at various logo iterations they were considering.

A photo of Google designers reviewing various iterations of the logo. (Just to be clear, I had no part in designing these.)

I was inspired by some of the bold choices they had tried and took it as an exercise to try and recreate some of the logos in Sketch.

Using motion to show changes over time

As I re-made the logos in Sketch, an idea came to mind of using motion to show the differences between each concept. Since Material design emphasizes using motion to imply meaning and relationships, I wondered what that would like if I took it to the extreme and imagined each logo iteration literally morphing into one another.

And so I continued my exercise by bringing the logos into Keynote and making a quick (and to be honest, over the top) series of animations to imagine the various logo iterations morphing into one another.

Google designers exploring various options
Exploring what logo design variations would look like if they transformed into one another between interations

In the end, it was a fun experiment and a good exercise to explore motion but not really anything practical.

A lot of these animations and transitions just wouldn't be effective in a real world setting to compare designs but it was fun to imagine and it did give each design a life of its own.