Friction-Free Wireframes

Once you use Apple’s Keynote for wireframing, you’ll roundhouse kick your other wireframe tools. Keynote Kung-fu allows your wireframes to tell a story in a way that no other tool can. $12 could save you 12 hours.

Includes dozens of hand-crafted web, desktop, and iPad/iPhone UI elements!
Forms

Form inputs, scrollbars, date picker

Navigation

Tabs, bread crumbs, menus, carousel

Misc

Loading/progress bars, sliders, annotations

Tables

Tables for tabular data

iOS UI Elements

iOS UI Elements

iPad keyboard layouts

iPad keyboard layouts

iPhone keyboard layouts

iPhone keyboard layouts

Text

Text style guide

Modal

Modal window

960 Grid System

960 grid system

Ad units

Popular ad-unit sizes

Buzz

Wireframing with Keynote is a reasonable pitch—it’s affordable, rapid, and uploading to iWork.com makes annotating and collaboration easy.

— Cameron Moll

One of our favorite sessions from the Big D Conference […]

— Jared Spool (@jmspool)

If Keynote had built–in email, I’d never leave. Case in point—get your Keynote Kung-Fu on…

— Michael Lopp (@rands) [1] [2]

Designing With Keynote?

Dan Benjamin is joined by Luke Wroblewski and Travis Isaacs to discuss agile prototyping and designing using Keynote rather than traditional tools.

Watch the entire video on 5by5.tv →

“Shamwow Moment” @tbisaacs shares his Keynote Wireframing Toolkit

— Stephen P. Anderson (@stephenanderson)

As someone who uses Keynote as his primary design tool, I’m very excited about the $12 Keynote Wireframe Toolkit!

— Chris Messina (@chrismessina)

The more I think about it, the more I realize how ingenious 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…

— Nathan Smith (@nathansmith)

If you’re a designer or developer of UI, UX, IA, or anything web related, you need this

— Aaron Martin (@iamaaronmartin)

Don’t mock it! Embrace it! Keynote is a great wireframing tool!

— Mark Kraemer (@Kraemer)

I’ve been a Keynote UX outlaw for a while, but this guy is Jesse James!

— Ryan Feeley (@ryanfeeley)

@tbisaacs Thanks, I love this. Love it. Much faster than Illustrator, but still works the way I’m used to.

— Jason Putori (@putori)

Wireframing with @tbisaacs' Keynote wireframe toolkit […] I’m not an IA, I’m a finance guy in marketing. He makes it that easy!

— Marcello Somers (@marcellosomers)

Being adventurous and attempting to wireframe for the first time tonight. Thank you @tbisaacs for this.

— Courtney Hernandez (@courtsinsession)

@tbisaacs awesome presentation on http://keynotekungfu.com -- #bigd10 just paid for itself in future time savings!

— Marshall Yount (@marshallyount)

When you combine Keynote with Keynotekungfu, it sort of becomes magical. Thank you @tbisaacs.

— Felix Bengtsson (@Filleb08)

Step away from the OmniGraffle and hit light speed in wireframing with Keynote Kung Fu 2.0.

— Joe Dyer (@joeplanet)

Frequently Asked Questions

Can I use this with Keynote on my iPad?

It depends on your threshold for pain. Keynote for the iPad is an amazing product, but I don’t feel it provides the level of control and fidelity needed to take advantage of the toolkit. There’s also no way (that I can find) to manipulate master slides, which is crucial to the toolkit. A possible workaround may be to place all of the toolkit elements into regular slides.

If you find a solution to this, drop me a line.

Can I change the slide size?

The default 1024–768 slide size provides a realistic viewable area for most web users. I recommend breaking your wireframes up across multiple slides to accommodate longer pages.

If you resize your slide deck, Keynote will attempt to scale everything up to fit the new slide size. If you want a bigger slide size, here is what to do:

  1. Create a new slideshow using the default “White” theme.
  2. Delete all of the master slides except for the blank slide.
  3. Copy and paste all of the toolkit elements into this new slide size.
  4. If you plan on using the new slide size again, save it as a theme (File > Save Theme).
Will there be a PowerPoint version?
No, sorry. And for the record, Keynote is worth buying a Mac for.
I have iWork ’08—will this work?
Yes—but I do not distribute the ’08 version with the download because of it’s file size. Just ask me if you need it.
Are updates free?
Updates are free forever. I’ll e-mail you when an update is available.

Tips & Tricks

1

Tell A Story.

Use your wireframes for gaining consensus and aligning goals. Take your audience along with you—show them how you came to your conclusions.

2

Visually Narrate Interface Details.

Imagine that your wireframes are a flip book. Walk your audience through each interaction frame by frame using animation, transitions, and annotations.

3

Use master slides for page layouts and types.

Avoid endless copy-and-paste by putting static elements like navigation, backgrounds, and common site elements in master slides.

4

Create a library of components.

Store common UI components like buttons, form controls, tabs, text treatments, etc in master slides for easy reuse.

5

Copy and Paste styles & properties to save time.

Copy Style (Option + Command + C) will copy all of an element’s properties including: fill, border, font face, font size, font color, stroke, and stroke style.

6

Group items whenever possible.

Grouped items are easier to move, delete, and manipulate. Double-clicking on an item inside a group makes that item editable. Score!

7

Learn the keyboard shortcuts.

Keyboard shortcuts can save you time and clicks (and even impress your boss).

Here are some of my favorites:

  • Copy style (Option + Command + C)
  • Paste style (Option + Command + V)
  • Group items (Option + Command + G)
  • Un-Group items (Shift + Option + Command + G)
  • Insert image (Shift + Command + V)
  • New slide (Shift + Command + N)
8

Tables are for more than just data.

Tables make great guides—use them to evenly divide areas.

9

Add text directly to a shape layer.

Try adding text directly inside a shape instead of creating a shape and placing text on top of it. It’s easier to adjust the size and it's one fewer group to worry about.

10

Keep your theme lean.

Deleting unused master slides can reduce the size of your .key file.

11

Swap between Photoshop/Illustrator/Fireworks with ease.

Need to make some edits that can’t be done in Keynote? Just copy and paste your object or group into Illustrator or Photoshop.

Pasted items become smart objects in Photoshop or paths in Illustrator.

12

Don’t limit yourself to gray boxes.

Capture your ideas in whatever fidelity that best tells your story. Don’t be afraid to add visual detail to your wireframes if they help convey your ideas.