keynote screen design

Using keynote as an organizer for your thoughts during the design process:

  • Create an outline or screen inventory towards the story I’d like to tell.
  • As I’m working through the wireframes, I’ll record my thoughts as bullets into the keynote
  • Formatting your thoughts – keep it simple, go high level then break out specific UI elements.
  • Most importantly – always be ready to present your ideas, at any stage in the process.

Formalizing designs in a presentation has it’s advantages:

  • Keeps you focused
  • Keeps the audience focused
  • Is portable – can be emailed later w/out lengthy explanation
  • Is progressive – once begun, you can simply layer increasing information on top of the first presentation.
  • Is repeatable – once done, you can leverage the same presentation style for other projects.

 

Pro-tip: I work almost exclusively in Adobe Illustrator when wire-framing. It works great for layering increasing detail/resolution on the design from functional wireframes to final designs. Since the most recent Keynote software update, Keynote has issues copying vector designs from Illustrator directly to the page. Before you copy an element from Adobe Illustrator, outline the text (Command + Shift + “O”) in Adobe Illustrator, then copy to Keynote. It adds a step in the process, but is quicker than going between Illustrator > Photoshop, and the Keynote/PDF you result with is high quality with a smaller file size. Small file size is key if you’re uploading multiple version to Basecamp or sharing in email.