Skip to content

Prototyping using Apple Keynote

Inspired by watching Amir Khella video "Keynote Prototyping Essentials" I played around with Keynote to see if it's really that simple. I have to say – it's awesome.

Keynote prototype
You can download my example Keynote prototype and do whatever you want with it. The font I used for the icons is FontAwesome.

Reasons why Keynote rocks for prototyping webapps (don't know about other stuff but I guess it works nice as well):

  • Very simple UI:
    I love playing with rounded rectangle, tables, gradients, shadows and font-icons
  • Does what I want:
    Aligning and resizing objects is eazy and the way it should be.
  • Helps me to get going quickly:
    Copying styles and reusing previously created buttons/menu bars etc. helps me a lot when trying out different ideas quickly.
  • Prototypes look professional and not like a presentation

But as in almost any tool there is a drawback (or lets call it a possible improvement).

  • No good HTML export:
    I'd like show others a webapp prototype in a browser so it feels like 'the real thing'.
    There is a discussion on Quora about exporting presentations using HTML and CSS3. So far no progress, but we'll see.

So far I'm pretty happy with prototyping in Keynote and I'll definitely use it for some real client wok.

© 2020 by Adrian Philipp