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