Build prototypes with Adobe XD

Build prototypes with Adobe XD
(Image credit: Future)

In contemporary web and app design there are often times when the interaction doesn't open a whole new page or screen. The modern approach to creating interactive content requires transitions between design interface elements so that the user is surprised and wowed by the experience of changing content. This all happens on the same screen or page, without a refresh. Designing these kinds of interactions and refining them to work properly can take time, but it's worth doing before writing your code. 

This is what Adobe XD has spent the last few months of development getting right. Create content in one state on one screen, move that content to the new state on the new screen and simply choose the 'Auto-Animate' option to transition. All the content that is the same on both screens automatically animates from one position to another. If you don't want all the content visible on both screens, make the content invisible on the first and it will transition into place. 

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Mark Shufflebottom

Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto, Canada. Highlights from Mark's extensive industry practice include a top four (worldwide) downloaded game for the UK launch of the iPhone in December 2007. Mark created the title sequence for the BBC’s coverage of the African Cup of Nations. He has also exhibited an interactive art installation 'Tracier' at the Kube Gallery and has created numerous websites, apps, games and motion graphics work.