Applied Interaction Design: Card Transitions
27mAdvanced2019-09-05
Authors

Tom Green
Teacher, Author, Professor
Course details
Designing elegant and simple screen interactions such as taps and clicks can make the difference between a project that is truly successful and one that is mundane. Join instructor Tom Green as he shows you how to create UX prototypes starting with simple static wireframes in Adobe Illustrator. Tom demonstrates how to import wireframes into Apple Keynote, create a rough animation concept, block out the transition in Adobe XD, export the XD file into After Effects, fine-tune animation characteristics, and ultimately create a QuickTime movie you can share with stakeholders.
Learning objectives
Creating an interface wireframe
Mocking up a transition prototype
Experimenting with rough animation concepts
Adjusting timing and placement
Planning a transition
Blocking out placeholders for the card UI
Adjusting motion of a card transition
Fine-tuning animation
Previewing an animated concept
Sharing prototypes with others
Learning objectives
Creating an interface wireframe
Mocking up a transition prototype
Experimenting with rough animation concepts
Adjusting timing and placement
Planning a transition
Blocking out placeholders for the card UI
Adjusting motion of a card transition
Fine-tuning animation
Previewing an animated concept
Sharing prototypes with others
Skills covered
Adobe XDInteraction DesignAfter EffectsUser ExperienceProjectAdobe
Concepts
0. Introduction
- 01 - Prototyping interface motion
1. Transitioning Cards
- 02 - Creating the interface wireframe
- 03 - Rough animation concepts
- 04 - Blocking out the transition
- 05 - Fine-tuning the animation
Related courses
- Applied Interaction Design: Managing Comments
- Applied Interaction Design: Accordion Folds
- Agentic AI Human-Agent Collaboration Design Patterns
- Using Spatial Data in AI Workflows
- Hands-On AI: Build an Autonomous Agent with the Claude Agent SDK
- Python: Advanced Design Patterns
- Applied AI: Projects That Stack the Best Tools
- Programming Generative AI: From Variational Autoencoders to Stable Diffusion with PyTorch and Hugging Face
Related learn paths
- Exploring a Career in Interaction Design
- Exploring a Career in User Experience Design
- Advance Your Skills in User Experience Design
- Explore a Career in Data Analysis
- Become a Data Scientist
- Mastering Executive-Level Data Analytics
- Starting Your Career in Tech: Data Science
- Getting Started as a Business Analyst