Reading time: [est_time]
Keynote has recently become my wireframing tool of choice over industry standard Omnigraffle. I have a pretty solid collection of graffle stencils and templates that I can use and know all the keyboard shortcuts by heart. So why switch? It came down to what wireframes are for: a way to communicate complex interactions with different members of a team. The best wireframes only last a few days, as once the design process moves forward there is little need to refer to this early document. I’ve found the best wireframes are quick, rough, and made with as much collaboration as possible.
To this end Keynote really shines. Without all my Omnigraffle stencils to lean on I end up stripping the visuals back and focussing on the functionality of whatever I’m designing. Plus, it’s more likely that whomever I’m working with has Keynote than Omnigraffle. This makes collaboration so much easier, not to mention document handoff. Since I’m freelance these days I try to hand off documents that my clients can use even when I’m not there.
So what do Keynote wireframes look like? I’ve been using the Keynude theme as a base, as it strips away all the standard master slides and styles. I always start with a document header that lists the client, what the wires are for, and some page numbers for wayfinding. My base screens usually look something like this:
This is the Master Slides view in Keynote. Here you can set up anything that you want to appear on every screen in your wires. This particular master slide uses the standard slide “Title Text” as the title for each screen and includes page numbers. Once the master is set up I return to the first slide and set up a frame. For this project I was building wireframes for a web app that had a preexisting navigation and sidebar structure, so I sketched that out first to act as a base for my work. Notice there is tons of space above and below the frame for annotations.
All this is pretty standard wireframe stuff so far, yeah? Make sure your audience knows what this document is, give yourself a space to build screens that is consistent across pages, and leave room for making notes. The Keynote secret sauce is that at the end of the day this is still a deck of slides, which means you have all sorts of animation tools at your disposal. Nothing helps explain a complex interaction like watching it move! I found myself prototyping all sorts of little interactions that I would normally describe with words and it makes communication remarkably easier. Once your wireframes are done you can export the static bits as PDFs and the moving bits as a MOV which can even be converted to a gif. Like so:
I know that other wireframing tools have prototyping functionality but I’ve yet to see one work as well as Keynote to be honest. The animation capability in Keynote is powerful enough to move elements around and create smooth transitions, but is simple enough that you can add little bits of movement without having to learn a new workflow or tinker for hours. The ability to make wires move coupled with how easy collaborating with Keynote is makes it a clear winner, at least in my workflow.
What do you use to make effective wireframes? Think you’ll give Keynote a shot? Let me know your thoughts in 140 characters: @akalindsey.