Design & Prototype Motion Driven User Interfaces: Beginners Workshop | Online

About this workshop

Have you ever wondered how some of the apps you use on a daily basis seem so fluid and easy to use? For example the most recent version of the Uber app is very motion driven and animated and your experience with it is quick and fluid -Voila!

We are seeing a shift to software applications that are becoming more fluid, rich and interactive by the day. The skills and understanding required to design and build these rich interfaces are very different and require learning new tools and ways of thinking. This introductory workshop is designed to give you an overview and understanding of this type of application design and how you can start to make your applications more rich and compelling for your users.

This workshop will explore the fundamental concepts of animation and interaction design for interfaces as a foundation for understanding dynamic motion driven interfaces. We will look at changing your thinking from thinking about static screen mocks that move from page to page from the web era, to thinking about interfaces as a series of objects in motion. An overview of springs, physics and velocity will be provided and how they apply to interfaces.

We will explore some industry leading examples of well crafted rich and fluid interfaces as case studies and learn how these interfaces were designed and prototyped. We will explore practical approaches & methodologies you can take back to your product teams to assist in conceptualising and prototyping and testing these kinds of interfaces. We will look at the design process from how you go from idea, to prototype and then discuss methods and working relationships that can be effective with working with engineers in product teams to get these interfaces implemented correctly and in a performant way.

Finally we will end with an introductory look at a prototyping tool called Origami and Quartz Composer for being able to rapidly prototype, test and communicate your interface ideas. Quick live iterative ways will be shown on how you can tune and polish your animations with your product team before any lines of code are written.

More information about Origami can be found here: https://facebook.github.io/origami/

Takeaways

• Animation principles & physics and springs and how they apply to user interfaces
• How to design/concept and prototype app interactions
• How to deconstruct interactions, fine tune them so they feel right and understand how they work under the hood
• How to work with your product teams to implement these kinds of interfaces, and actually ship them in real apps.

Prereqs & Preparation

None as it’s the beginners workshop.