Applied Interaction Design: Accordion Folds
29mIntermediate2020-03-11
Authors

Tom Green
Teacher, Author, Professor
Course details
Accordion folds are space-saving features that can hide content until the user clicks to reveal more. However, this popular design pattern still requires some customization, as the interaction designer needs to decide how and when sections—called “cards”—collapse or expand. In this course, you can experience the hands-on workflow of prototyping accordion folds with instructor Tom Green. Learn how to develop a static wireframe for the accordion fold pattern, make changes based on user testing and content, and add interactivity and animation—all with Adobe Experience Design (XD). Plus, learn how to achieve more granular control over the motion and easing of your animation by exporting your XD project to After Effects.
Skills covered
Adobe XDInteraction DesignPhotoshopUser ExperienceProjectAdobe
Concepts
0. Introduction
- 01 - Master the accordion design pattern
1. Accordion Fold Design Pattern
- 02 - Designing the accordion fold pattern
- 03 - Develop the static wireframe
- 04 - Create a medium fidelity wireframe
- 05 - Add interactivity and animation to the menu
- 06 - Export to After Effects
Related courses
- Applied Interaction Design: Card Transitions
- Applied Interaction Design: Managing Comments
- 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