Meta Refresh 2016

This is 2016 and every digital product aims to speak to its users. Be it an app which books your cab or a website that manages your finances - everything attempts to be livelier, engaging and more delightful than the inanimate (text + image) combo. A bit of internet research will reveal that Motion Design had been an unexplored teritory in the past. But now, the tables have turned and people all over the world are busy building lively and ‘cool looking’ products. But how cool should a product be? At times while browsing some visually heavy apps and websites, I get so engrossed in appreciating the mesmerising motions that I ended up ignoring the content. The key is to create the right balance between content and visuals and this is what I m going to speak about, along with an introduction to animations in After Effects and its implementation in CSS.

Outline

• Introduction (Comparing Motion Design with a real life incident)
• Attention span of users
• What you build vs What users see (Blurred Eye Test)
• Types of Motion in UI with examples
• Real life case study (Buying Guide for Housing.com)
• Adobe After Effects (Key Elements)
• Demo animation with basic animatable properties
• Executing it in CSS
• Spicing up the animations (duration, easing, bezier curves)
• Real life example
• Questions

Speaker bio

Product Designer at @ZetaIndia | Ex @Housing | Ex Project Manger | Occasional Writer | Teetotaler | IITian

Links

• https://dribbble.com/saptarshipr

Slides

http://www.slideshare.net/saptarshipr/ux-choreography-motion-in-ui-metarefresh-2016