How Apple’s Teams Prototype iOS Apps Using Only Keynote

Apple maintains a dedicated prototyping team that moves between project groups to produce all prototype work—including animation and interaction—using Keynote as the primary tool.

The approach is demonstrated in the WWDC 2014 session “Prototyping: Fake It Till You Make It,” which shows how to build convincing interactive prototypes with Keynote.

Phase 1: Static Mock‑ups

Start from wireframes or directly layout colored blocks in Keynote, which offers smart alignment and snapping.

Add images, adjust shadows and other basic effects.

Export the slides as images and view them on a phone.

Iterate based on user feedback.

Phase 2: Animation Effects

Use Keynote’s built‑in object animations.

Apply the “magic move” transition to create smooth motion between slides.

Open the presentation on the iPhone with the Keynote app to demonstrate.

Refine the animation after feedback.

Phase 3: Interaction Events

Resize exported images and import them into Xcode.

Write only minimal code that targets the images.

Add simple gesture recognizers to achieve interactive behavior.

Keynote’s alignment and snapping features make static layout faster than most dedicated prototyping tools, and its extensive library of icons eliminates the need to search for assets.

By exporting the slides as images, designers can quickly review many screens on a device.

In the “fake interaction” stage, designers rely on images, object animations, and transition effects to simulate realistic prototypes without writing code, as long as test users follow the intended flow.

Keynote also provides a wide range of adjustable animations, including bounce and delay effects, which can be fine‑tuned to mimic real UI behavior.

Some reports claim that both Hammer Phone and many Apple UI effects were first mocked up in Keynote before engineers implemented them.

One particularly effective technique is the “magic move” transition, which moves or scales objects from one slide to the next, creating a striking visual effect.

When higher fidelity is required, a small amount of Xcode code can be added to the image‑based prototype to achieve more realistic interactions.

Overall, the three‑stage workflow—static layout, animation, and minimal code interaction—allows teams to produce high‑quality, near‑real prototypes using only Keynote.