Applied Interaction Design: Card Transitions

- [Tom] Well hello there, my name is Tom Green, and welcome to this first installment of Applied Interaction Design. When it comes to designing interactions between the user and the screen, sweating the details of those interactions, like a tap or a click, can be the difference between an okay interaction or a successful project. In this installment, I walk through the process of the user tapping on a card in an iPad project, and focusing on the transition to the subject of that card which is on another screen. We start by wireframing the two screens in Illustrator. You will discover how Illustrator, through the use of artboards and mobile documents, can make your life incredibly easy. I will show you how to create a library of wireframe symbols and how to share that library with the rest of the team, either through a shared Creator Cloud account, or as a separate Illustrator document which can be made available to the team. Once the wireframes are created in Illustrator, we move them into Apple's Keynote to rough out the timing and nature of the transition between screens. From there, the wireframes are brought to life in Adobe Experience Design. In this application, we will explore how to create the interactive prototype which concentrates on the nature of the transition and its timing. From there, the XD artboards are exported into Adobe After Effects, where the eases and timing are further refined by using the Graph Editor. From there, I will show how to create a QuickTime movie that can then be shared with your development team, or any other stakeholder involved in the project. The essence of this installment lies in the fact you simply can't talk about an interactive transition, you need to show it. And this way, everybody involved clearly understands how the user gets from here to there, so let's get started.