Keynote Wireframe Toolkit
Hypothetically, if someone told me I should wireframe web page layouts using PowerPoint, I would probably laugh. If I actually thought this person was serious, I would probably have some concerns regarding his sanity and well-being.
To be honest, this was my initial gut reaction when told by Travis Isaacs that he himself uses Keynote to build wireframes and do rapid prototyping. However, I suspended disbelief long enough to let him make his case. That's when I realized the fallacy of my first assumption. Keynote is most definitely not PowerPoint.
— Enter the Keynote Wireframe Toolkit
Having worked with Travis before, and seen some of the amazing client pitches and presentations that he's put together in Keynote, I should have been more open to the idea. I just couldn't initially wrap my head around using a presentation tool to pitch design ideas. But really, that's what we do as designers all the time.
Whereas PowerPoint is geared towards a more Enterprise™ crowd, as is Microsoft's Visio wireframe tool, Keynote definitely feels more design centric. I have used it for slides in a number of speaking engagements. It feels intuitive and gets out of my way, enabling me to conceptualize ideas without fighting against it.
Travis simply went a step further, creating a suite of UI elements to quickly take a design from ideation to realization. The more I think about it, the more I realize how ingenius the idea is. Going over a mental checklist of what makes for a good wireframing and/or prototyping tool, Keynote seems to fit the bill nicely…
- Supports varying canvas sizes
- Supports drawing vector shapes
- Enables quick rearrangement of UI
- Enables click-thru for clients
- Snap-to-grid functionality
- Can do high-fi and low-fi
- Can toggle rulers on/off
- Can export a PDF deck
- Can export PNG, JPG
- Bonus - iWork.com
Travis covered much of this at the Big Design Conference, which I'm sad to say I missed because I was on vacation in Japan. From what I gather, the presentation went over extremely well. Thankfully, he put the slides online…
https://slideshare.net/tbisaacs/keynote-kungfu-how-to-wireframe-like-a-ninja
Another nice aspect of Travis' Keynote Wireframe Toolkit is that it includes the 12, 16, and 24 column measurements from the 960 Grid System. I am of course biased, but I think it makes for an excellent starting point if you anticipate using that as your codebase. It makes for a continuous — I dare say seamless — workflow from wireframing into building out your freshly designed pages.
In his talk, Travis mentions being able to cut and paste fluidly between Photoshop and Keynote. As an avid user of Adobe Fireworks, I can attest that transitioning back and forth between FW and Keynote also works effortlessly.
Finely tuned design aspects can be done in either Photoshop or Fireworks, and then ported into Keynote - and vice versa. This allows more reuse of visual assets, rather than pouring time into wireframes to eventually be thrown away due to being too low-fi for inclusion in a finalized production project.
If this sounds interesting, I encourage you to check it out.