Accordion Interactions

The Articulate e-Learning Heroes Challenge of the week #147 was to demonstrate how accordion interactions can be used in e-Learning.

Click on the image below to view the demo;

The background

My initial design for this challenge didn’t start off in this topic. So while I was thinking of another idea, it was on the news the shortlist for the prestigious 2016 Royal Institute of British Architects (RIBA) Stirling Prize for the UK’s best new building.

So, I thought it was a great idea to explore more about the entries for the Award and design it in an Accordion style.

I couldn’t include the winner as it was announced on the day after I shared the design online. So if anyone wonders who the winner is, it was Caruso St John’s Newport Street Gallery wins 2016 RIBA Stirling Prize for the best building of the year.

The design process

I have used slide layers, animations and motion paths as shown in the screenshots below:

Accordion design step 1

Accordion design step 2

Leave a Comment

Your email address will not be published. Required fields are marked *