Google Material: Meaningful Animation

Posted by on Apr 12, 2015

style_color_introduction

This past week, I spent a few days at Google’s campus in New York learning about the new Material Design spec. Material focuses on four main points, with one being the most consistent across all interfaces and devices: animation. As more apps incorporate flat design into their aesthetic and architecture, meaningful animation begins to pick up communication value where skeuomorphic design offer contextual hints based on real world objects. Instead now, the conceptual framework has shifted to a subtle environmental physics. When Apple initially offer up the flat design redesign of iOs 7, one of the striking features was the emphasis on animation to simulate space, depth, and transitions. Apps suddenly shifted slightly with the movement of the phone, eliciting the perceptions that they are floating in an imaginary space. It is there, in that imaginary space behind the screen of the phone or tablet that Material lives.

calculatorrender

Two key elements have ushered in this new trend in design. The first is user adoption of mobile technology, with an increasing emphasis on a technology focused culture fewer people need the realistic context that was introduced in the original mobile design spec by Apple. The other core ingredient are fast reliable devices that can handle the number crunching for fast crisp 60fps animations. Rather than have a vague sense of movements, todays phones can provide beautiful user feedback on screen and through the myriad of sensors onboard phones today.

material-design

Every designer knows the challenges of communicating animation in an accurate and meaningful way. No static design tools are specialized for animation, and animation programs like After Effects are difficult to learn and harder to handoff with others. Personally my design tool of choice is Sketch App. Truly it is the design tool I have always been waiting for. It is specialized for interface design the way Photoshop is specialized for image manipulation. Sketch has a partner program called Framer Studio which luckily for Photoshop users also has a PS exporter. Framer is a great tool because is has the same technical limitations as a javascript webpage. Framer is designed for an optimized coffeescript environment with automatic exports of design files to web assets. Everything is converted to an object model, and divs are placed for each group in a file. Framer can be buggy and obtuse though for designers with limited coding experience, which is to as most designers.

material-design-sketch-template

Many people have also suggested Keynote as a solutions, and while this is great for fast demos, it does not solve for user testing.

Below is one of the first prototypes I made with Sketch and Framer. The interaction was a pull-down tab for a speed reading feature we were testing on The Huffington Post iOs app. This prototype helped communicate the touch area for the tab, and allowed us to test with users before we entered