Dive into another hands-on interaction design project. Discover how to prototype an accordion fold using Adobe XD.
- [Tom] Whether you're working in the mobile or web spaces, screen real estate is always at a premium. This explains the popularity of the accordion menu design pattern. You can stuff a lot of information into a relatively small element that opens to reveal the items and closes when the user dismisses the items. In this installment of Applied Interaction Design, we walk through the decisions that have to be made during the planning process and then create a simple wire frame showing the open and close states of the menu in Adobe Experience Design. From there I walk you through the evolution of the project from wire frame to medium fidelity prototype as problems are identified and fixed. When that is out of the way, you will discover how easy it is to add motion and interactivity to your project by using the powerful components features of XD. We finish up by exporting the menu to After Effects. Bottom line, there is a lot more to creating this design pattern than simply tossing an accordion fold into the prototype, so let's get started.