[GIF] Using Keynote to create basic app demos

tl;dr
One of Keynote’s abilities is adding ‘actions’ to elements on a slide. You can order a series of actions into something resembling a timeline which makes Keynote useful for creating animations such as basic app demos. Whole phone GIF attached.

——————

App demos are commonly made in After Effects. While I have it, I wanted to use a more accessible program which doesn’t require someone to have an Adobe subscription. In this case I’m using Keynote which is simple to use and is now free for many people. Yes, Keynote doesn’t have the power of After Effects, but it does a pretty good job for what it is.

I’ve previously written about using Keynote for designing. Keynote also has ‘actions’ which are various ways to add animation to elements on a slide. Actions can be set to fire concurrently or sequentially with other actions. This makes it possible to arrange several actions into a timeline of sorts.

This shot is an example of the start of a basic demo. All the app images were made in Sketch but could have easily been made in Keynote as well. All the screens and actions are on one slide. Once done, the presentation was exported as a Quicktime movie which I then converted to an animated GIF for this shot.

Once you get the hang of it, it’s a relatively easy and accessible method and if you keep adding more finesse to the actions and tweak the timing they can become quite good. I’ve been playing around with keyboard entry as well which I’ll post at some stage.

————

The app in the GIF is just some screens I’ve been playing around with. I use the ASB Mobile banking app regularly and it makes me want to gouge my eyes out every time I do, so, I play around a little with some designs whenever I feel inclined.