Presented at UX London 2012
Ready to leave the boring world of wireframes and design documentation behind?
Create clickable, high-fidelity prototypes for web, desktop, or mobile apps using Keynote in less time than it takes to create a just a wireframe in your old wireframing tool. All without any coding or learning a complex and expensive new tool.
14. New
Settings Help Sign OutBlinksale Travis Isaacs
Dashboard ClientsInvoices & EstimatesProjects Team
Invoice theme:
Theme name
Theme name
Theme name
Add to invoice:
Hours
Expenses
Services
66 hrs
$433
SEND
Save for later or Cancel
Travis Isaacs
555 Maple Street
Anywhere, TX 76054COMPANY LOGO
KIND QTY DESCRIPTION PRICE TOTAL
$100 $0.00HRS
Subtotal $0.00
Tax (8.75%) $0.00
Freight $0.00
Total Due $0.00
Invoice 1411 Due 11/9/2009 (NET 30)
Invoice notes
SENT 10/09/2009
New line
Who is this for? name@example.com Addresses
Convert to estimate
15. Plans Subdivisions Items Options Trade Partner Requests
Take-offs for #1750 (The Venetian) for all elevations and all options
Plumbing Fixtures1200
Frame I Walls and Joists1400
Windows1440
External Doors1450
Framing Labor1460
Electrical1530
HVAC1550
Insulate Walls1600
Sheetrock Material1610
Sheetrock Hang, Tape, Bed, and Texture1630
Paint1800
Stain/Finish Cabinets1810
Interior Doors & Trim1830
Interior Trim Labor1840
16. Plans Subdivisions Items Options Trade Partner Requests
Take-offs for #1750 (The Venetian) for all elevations and all options
Plumbing Fixtures1200
Frame I Walls and Joists1400
Windows1440
External Doors1450
Framing Labor1460
Electrical1530
HVAC1550
Insulate Walls1600
Sheetrock Material1610
Sheetrock Hang, Tape, Bed, and Texture1630
Paint1800
Stain/Finish Cabinets1810
Interior Doors & Trim1830
Interior Trim Labor1840
CLICK
17. Plans Subdivisions Items Options Trade Partner Requests
Take-offs for #1750 (The Venetian) for all elevations and all options
Save or Cancel
Frame I Walls and Joists1400
Item UOM Quant
1/2x12 Text 104 Siding EA
1/4 x 3/4 Flat screen mould LF
10x24 Arch Cedar Louver EA
10x24 Rough Cedar Rectangle Vent EA
1-1/2 Joist Hanger Nails 50# EA
12in x 200’ 6 mil Black Poly EA
12x12 Text Fcp Lap EA
12x24 Arch Top Cedar Vent EA
1-3/4x14in Level Micro Lamb Ship 2-19’ Pcs LF
1-3/4x16in Level Micro Lamb Ship 3-24’ Pcs LF
17
22
0
3
100
10
10
5
0
0
Windows1440
Add Item Take-off complete
Plumbing Fixtures1200
18. Plans Subdivisions Items Options Trade Partner Requests
Take-offs for #1750 (The Venetian) for all elevations and all options
Save or Cancel
Frame I Walls and Joists1400
Item UOM Quant
1/2x12 Text 104 Siding EA
1/4 x 3/4 Flat screen mould LF
10x24 Arch Cedar Louver EA
10x24 Rough Cedar Rectangle Vent EA
1-1/2 Joist Hanger Nails 50# EA
12in x 200’ 6 mil Black Poly EA
12x12 Text Fcp Lap EA
12x24 Arch Top Cedar Vent EA
1-3/4x14in Level Micro Lamb Ship 2-19’ Pcs LF
1-3/4x16in Level Micro Lamb Ship 3-24’ Pcs LF
17
22
0
3
100
10
10
5
0
0
Windows1440
Add ItemCLICK Take-off complete
Plumbing Fixtures1200
19. Plans Subdivisions Items Options Trade Partner Requests
Add Items to Frame I Walls and Joist (#1750 - the Venetian)
CLICK
Components Labor Rates Fixed-Fee Services Substitution Code
Appliances Windows Concrete Drywall Flooring
Hardware Light Fixtures Plumbing Fixtures Lumber Masonry
Select a component class:
20. F2: Mats F3: Frames F4: Finishing TOTAL: $212.02F1: Add Artwork
Add artwork to get started!
Image description
Width Heightx
ADD
Add More Artwork
Image typeImage condition
Image size
Mat Dimensions: 11 1/4” x 9 1/4”
1: Photo of Children
1: Children
10” x 8”
Wall ColorAlign Distribute
Grandparents
10”x8”
Normal condition Photography
10” 8”
21. F2: Mats F3: Frames F4: Finishing TOTAL: $212.02F1: Add Artwork
Add artwork to get started!
Image description
Width Heightx
ADD
Add More Artwork
Image typeImage condition
Image size
Mat Dimensions: 11 1/4” x 9 1/4”
1: Photo of Children
1: Children
10” x 8”
Wall ColorAlign Distribute
Grandparents
10”x8”
Normal condition Photography
10” 8”
Click
22. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
Image description
Width Heightx
ADD
Add More Artwork
Image typeImage condition
Image size
2: Photo of Grandparents
1: Photo of Children
1: Children
10” x 8”
2: Grandparents
10” x 8”
Wall ColorAlign Distribute
23. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
Image description
Width Heightx
ADD
Add More Artwork
Image typeImage condition
Image size
2: Photo of Grandparents
1: Photo of Children
1: Children
10” x 8”
2: Grandparents
10” x 8”
Wall ColorAlign Distribute
Click
24. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children
10” x 8”
2: Grandparents
10” x 8”
Wall ColorAlign Distribute
Image description
Width Heightx
SAVE
2: Photo of Grandparents
Image typeImage condition
Image size
Add more artwork
Delete
4”
4”
2”
3”
Grandparents
10”x8”
Normal condition Photography
10” 8”
25. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children
10” x 8”
2: Grandparents
10” x 8”
Wall ColorAlign Distribute
Image description
Width Heightx
SAVE
2: Photo of Grandparents
Image typeImage condition
Image size
Add more artwork
Delete
4”
4”
2”
3”
Grandparents
10”x8”
Normal condition Photography
10” 8”
I can make edits
here...
26. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children
10” x 8”
2: Grandparents
10” x 8”
Wall ColorAlign Distribute
Image description
Width Heightx
SAVE
2: Photo of Grandparents
Image typeImage condition
Image size
Add more artwork
Delete
4”
4”
2”
3”
Grandparents
10”x8”
Normal condition Photography
10” 8”
...Or by clicking
on a dimension
3”4”
27. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children
10” x 8”
2: Grandparents
10” x 8”
Wall ColorAlign Distribute
Image description
Width Heightx
SAVE
2: Photo of Grandparents
Image typeImage condition
Image size
Add more artwork
Delete
4”
4”
2”
3”
Grandparents
10”x8”
Normal condition Photography
10” 8”
Or by dragging
the corners
28. Have you played these games?
All Platforms Xbox 360 PS3 Wii DS PSP PC Xbox PS2 More Platforms find a game
Box Art
Played It!
Red Dead Redemption
Box Art
Played It!
Red Dead Redemption
Box Art
Played It!
Red Dead Redemption
Box Art
Played It
Red Dead Redemption
Box Art
Played It!
Red Dead Redemption
Box Art
Played It
Red Dead Redemption
Your Gamer DNA™ See other gamers like you
Games Played
96
Rookie
75% of members have played
more games than you.
See leaderboards for more
Gamer Type
Zombie killing
social butterfly
You like games that involve
zombies and that are multiplayer
or massively-multiplayer.
Favorite Platform Favorite Genres Community Stats
Member since: 8/10/2010
Games you’ve rated: 0
Comments: 0
Forum posts: 0
Following: 0 invite friends
Followers: 0
Xbox 360
PS3
Wii
DS
PSP
PC
Horror
FPS
Driving
Football
Party
30. Singularity by Activision
Played it? Rate it!
Playstation 3 for XBox 360 Nintendo Wii
Average Rating
Based on 345 ratings
9.5
10.0
9.0
8.0
7.0
Store Pickup
In stock as of 8am EST at these locations.
Shops of Southlake
Southlake , TX 76092
Pick Up Here
View more locations »
BUY NEW
$59.99
Usually ships in 24 hours details
ADD TO CART
BUY PRE-OWNED
$49.99
Guaranteed to work!
ADD TO CART
Add to wish list
Share 27K
Buzz News Game Details Polls GameStop WikiJUMP TO
31. @tbisaacs
10:00 AMCARRIER 3G
Wednesday 2/29
West Side
WorkshopsClasses Appointments
8:00 AM
Elements
Katie DeLuca
9:00 AM
NorCal On Ramp
Chrissy Gower
9:00 AM
Elements
Katie DeLuca
32. @tbisaacs
GPS
N
13.991 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
CURRENT (MPH) 15.99 AVG.
22.29 MAX.
SPLIT OVERALL ELAPSED
+13s -1m 33s 1h 44m 33s
645 FT Climb 985 Calories Burned
53° SE at 11mph
33. @tbisaacs
Crafting (43)
Cross Stitch and
Needle Work (10)
Exclusively New (22)
Knit and Crochet (39)
Papercrafting (13)
Quilting (4)
Recipes (18)
My Stuff
Featured Projects
Featured Projects
Double-Take Helmet Set
to Crochet
IMAGE
12 pages
$12
Chocolate Brownie Bump
Ice Cream
IMAGE
4 pages
$9
Patriotic Flip-Flops
IMAGE
2 pages
$2
Double-Take Helmet Set
to Crochet
IMAGE
12 pages
$12
Chocolate Brownie Bump
Ice Cream
IMAGE
4 pages
$9
Patriotic Flip-Flops
IMAGE
2 pages
$2
Double-Take Helmet Set
to Crochet
IMAGE
12 pages
$12
Chocolate Brownie Bump
Ice Cream
IMAGE
4 pages
$9
Patriotic Flip-Flops
IMAGE
2 pages
$2
TAP
34. @tbisaacs
Search flights, hotels, cars, and more
Starting to question if we need this
drawer
Hotel Statler Hilton
$579
Hilton Garden Inn
$449
Activities
Hotels
Near You
This is the app’s default page. We’ll ask
for the current location upon startup.
The default sort for hotels is proximity,
but we could also intermingle top
secret and travelocity picks.
“filmstrip” list of activities—although our
current provider is really weak outside
of top travel markets...
Offer a global search with a
voice button. (more later)
Sign In / Up
Nav:
Nearby
Flights
Hotels
Cars
Favorites/History
my trips
get app
find gas
contact us
full site
faq
flifo
destinations
REDACTED
35. @tbisaacs
Gamestop search for games or accessories
Store Locator Order Lookup Weekly Ad
BOX
Call of Duty:
Black Ops
Xbox 360
Average User Rating:
8.0
BUY NEW
Usually Ships in 24 hrs
BUY PRE-OWNED
Online Price Only
Guaranteed To Play
Buy at your local Gamestop:
$49.99
$39.99
334Share:
REDACTED
REDACTED
39. @tbisaacs
All Things Considered
Muybridge: The Man Who Made Pictures Move
SettingsSports TalkMusicRadio By Location
All Things Considered
News radio from Washington DC
Add to presets
On live in 3hr 33min
from KNOW-FM 91.1
Similar Shows:
Weekend Edition Sunday
Weekend Edition Saturday
Wait Wait, Don’t Tell Me
Living on Earth
Here and Now (NPR)
Share
All Things Considered (News)KERA 90.1 FM
Hosts: Robert Siegel, Michele Norris,
Melissa Block
For two hours every weekday, hosts
Robert Siegel, Michele Norris and
Melissa Block present the program's
trademark mix of news, interviews,
commentaries, reviews, and offbeat
features.
Recent Topics More Stations & Times
APR
13
2010
Muybridge: The Man Who Made Pictures Move
A new exhibition at the Corcoran Gallery of Art in Washington,
D.C., looks at the legacy of Eadweard Muybridge, whose
sequential photographs of horses at a gallop their movements
broken down frame by frame have become iconic
APR
13
2010
Online Cartoonist Wins Pulitzer
Mark Fiore is a self-syndicating cartoonist whose irreverent online
animations appear on the San Francisco area news site
SFGate.com. Fiore won a Pulitzer yesterday, one of the first two
Pulitzers ever awarded to nontraditional media. Judges said his
work set a high standard for an emerging form of commentary.
APR
13
2010
Karadzic Genocide Trial Opens After Months Of Delay
The trial of the former Bosnian Serb leader Radovan Karadzic
resumed in The Hague on Tuesday, after months of procedural
wrangles. Karadzic faces charges of genocide, crimes against
humanity and war crimes relating to the war in the former
Yugoslavia during the 1990s.
APR
13
2010
Russian Adoption Case Belies Many Happy
Adoptions
Commentator Eric Weiner says recent adoption scandals involving
Russia and Haiti represent adoption programs poorly. Happy
families are too often overlooked, and spotlighting only the
programs' blemishes hurts potential parents and the children they
love. It's not adoptive children who are being saved; it's the
adoptive parents who otherwise wouldn't have a child in their lives,
he says.
APR
13
2010
Study: Computer Security Measures Not All Worth It
A new study by a researcher at Microsoft says that many security
measures designed to spare people from computer attacks are a
giant waste of time and money. Michele Norris speaks with Mark
Pothier, a senior assistant business editor for The Boston Globe
who has written about the research.
LISTEN
LISTEN
LISTEN
LISTEN
LISTEN
At just enough fidelity
67. @tbisaacs
MARKED FOR LIFE TATTOO CUSTOMER INFORMATION
LAST NAME:1 FIRST NAME:
STREET:2 CITY: STATE: ZIPCODE:
DAYTIME PHONE:3 EVENING PHONE:- - - -
IDENTIFICATION: The Indiana Health Department requires a photo identification and a proof of signature:4
Photo ID provided (check one):
Driver’s License
Student ID
State ID
Employee ID
Other photo ID:
Signature ID provided (check one):
Credit/Debit card
Calling card
Wholesale membership card
Hunting/Fishing license
Other:
Please attach your ID’s to this form so they can be photocopied.
SIGNATURE:6 DATE: - -
I hereby affirm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge.
DATE OF BIRTH:5 / / If you are under 18, a guardian will need to sign for you (below)!
GUARDIAN CONSENT (ONLY NEEDED FOR MINORS)
LAST NAME: FIRST NAME:
NOTE: The information below is required by the Indiana Health Department. All information will kept confidential.
http://travisisaacs.com/2008/07/31/information-design-tattoos/
Where this whole
Keynote thing started...
68. @tbisaacs
4 Use the diagram below to indicate where your tattoo(s) or piercing(s) will be located:
FRONT BACK RIGHT EAR LEFT EAR
SIGNATURE:5 DATE: - -
I hereby affirm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge.
http://travisisaacs.com/2008/07/31/information-design-tattoos/
83. @tbisaacs
EASY FOR CLIENTS
TO UNDERSTAND
HARD FOR CLIENTS
TO UNDERSTAND
HARDFORDESIGNEREASYFORDESIGNER
WIREFRAME
INTERACTIVE
WIREFRAME
VISUAL COMP
HTML
PROTOTYPE DESIGN
DOCUMENT
84. @tbisaacs
EASY FOR CLIENTS
TO UNDERSTAND
HARD FOR CLIENTS
TO UNDERSTAND
HARDFORDESIGNEREASYFORDESIGNER
WIREFRAME
INTERACTIVE
WIREFRAME
VISUAL COMP
HTML
PROTOTYPE DESIGN
DOCUMENT
“Don’t show clients
wire"ames. Ever.”
- Internet Famous Designer
85. @tbisaacs
EASY FOR CLIENTS
TO UNDERSTAND
HARD FOR CLIENTS
TO UNDERSTAND
HARDFORDESIGNEREASYFORDESIGNER
WIREFRAME
INTERACTIVE
WIREFRAME
VISUAL COMP
HTML
PROTOTYPE DESIGN
DOCUMENT
Agreed. Hide these
86. @tbisaacs
EASY FOR CLIENTS
TO UNDERSTAND
HARD FOR CLIENTS
TO UNDERSTAND
HARDFORDESIGNEREASYFORDESIGNER
WIREFRAME
INTERACTIVE
WIREFRAME
VISUAL COMP
HTML
PROTOTYPE DESIGN
DOCUMENT
Show these early and often
87. @tbisaacs
EASY FOR CLIENTS
TO UNDERSTAND
HARD FOR CLIENTS
TO UNDERSTAND
HARDFORDESIGNEREASYFORDESIGNER
WIREFRAME
INTERACTIVE
WIREFRAME
VISUAL COMP
HTML
PROTOTYPE DESIGN
DOCUMENT
Ideal, but can be costly to create
88. @tbisaacs
EASY FOR CLIENTS
TO UNDERSTAND
HARD FOR CLIENTS
TO UNDERSTAND
HARDFORDESIGNEREASYFORDESIGNER
WIREFRAME
INTERACTIVE
WIREFRAME
VISUAL COMP
HTML
PROTOTYPE DESIGN
DOCUMENT
Polished, but difficult to describe interaction
89. @tbisaacs
EASY FOR CLIENTS
TO UNDERSTAND
HARD FOR CLIENTS
TO UNDERSTAND
HARDFORDESIGNEREASYFORDESIGNER
WIREFRAME
INTERACTIVE
WIREFRAME
VISUAL COMP
HTML
PROTOTYPE DESIGN
DOCUMENT
Enough fidelity, interactive, cheap to create
103. @tbisaacs
Environment Setup
Working With Shapes & Objects
Visual Design
Linking, Animations, and Interactions
Testing On-Device
Prototyping Exercise
Show & Tell
104. @tbisaacs
Environment Setup
Working With Shapes & Objects
Visual Design
Linking, Animations, and Interactions
Testing On-Device
Prototyping Exercise
Show & Tell
Keynote
Basics
105. @tbisaacs
Environment Setup
Working With Shapes & Objects
Visual Design
Linking, Animations, and Interactions
Testing On-Device
Prototyping Exercise
Show & Tell
The Fun
Stuff
113. @tbisaacs
tbisaacsAccounts
Search Timeline
@
10:00 AMCARRIER 3G
axbomhyperlink
I must say, I love wireframing in
#keynotekungfu http://uxa.se/kkfu -
2 more pages, then off to #blonski
1 hour
annettepriest
prototyping for iPhone and about to
compare Mockapp.com with
Keynotekungfu.com. Should be an
interesting battle.
1 hour
gldnspud
Verdict: http://keynotekungfu.com is
AWESOME. Thank you @tbisaacs!!!
1 hour
New Tweet
Includes device chrome,
meant to be displayed
on screen
114. @tbisaacs
tbisaacsAccounts
Search Timeline
@
10:00 AMCARRIER 3G
axbomhyperlink
I must say, I love wireframing in
#keynotekungfu http://uxa.se/kkfu -
2 more pages, then off to #blonski
1 hour
annettepriest
prototyping for iPhone and about to
compare Mockapp.com with
Keynotekungfu.com. Should be an
interesting battle.
1 hour
gldnspud
Verdict: http://keynotekungfu.com is
AWESOME. Thank you @tbisaacs!!!
1 hour
New Tweet
No chrome, meant to be shown on the device
189. @tbisaacs
tbisaacsAccounts
Search Timeline
10:00 AMCARRIER 3G
@
axbomhyperlink
I must say, I love wireframing in
#keynotekungfu http://uxa.se/kkfu -
2 more pages, then off to #blonski
1 hour
annettepriest
prototyping for iPhone and about to
compare Mockapp.com with
Keynotekungfu.com. Should be an
interesting battle.
1 hour
gldnspud
Verdict: http://keynotekungfu.com is
AWESOME. Thank you @tbisaacs!!!
1 hour
New Tweet
Prototype
197. @tbisaacs #MIMASummit
1
Record A MealBack Record
Describe your meal
Was meal Paleo?
Did meal have dairy? NO
YES
Sharing
Facebook
Twitter
YES
YES
Select Select
198. @tbisaacs
10:00 AMCARRIER 3G
My Places
Downtown
12345 Maple Drive, Dallas, TX 76051
West Side
12345 Maple Drive, Dallas, TX 76051
Midway
12345 Maple Drive, Dallas, TX 76051
199. @tbisaacs
10:00 AMCARRIER 3G
My Places
Super Secret Menu
Downtown
12345 Maple Drive, Dallas, TX 76051
West Side
12345 Maple Drive, Dallas, TX 76051
Midway
12345 Maple Drive, Dallas, TX 76051
200. @tbisaacs
10:00 AMCARRIER 3G
My Places
Super Secret Menu
Downtown
12345 Maple Drive, Dallas, TX 76051
West Side
12345 Maple Drive, Dallas, TX 76051
Midway
12345 Maple Drive, Dallas, TX 76051
201. @tbisaacs
10:00 AMCARRIER 3G
My Places
Super Secret Menu
Downtown
12345 Maple Drive, Dallas, TX 76051
West Side
12345 Maple Drive, Dallas, TX 76051
Midway
12345 Maple Drive, Dallas, TX 76051
202. @tbisaacs
10:00 AMCARRIER 3G
My Places
Super Secret Menu
Downtown
12345 Maple Drive, Dallas, TX 76051
West Side
12345 Maple Drive, Dallas, TX 76051
Midway
12345 Maple Drive, Dallas, TX 76051
253. Copy/Paste style
properties to save
time.
To add to your toolbar:
Right click on the toolbar, click customize
Copy style will copy all of the element’s
properties, including: fill, border, font face,
font size, font color, stroke, stroke style.
But... it doesn’t copy line-height, letter
spacing, paragraph spacing, or inset
margin.
SAD TROMBONE
LESSON 6
259. @tbisaacs
Select Photo
Select a FB
Photo
Log In Timeline Camera
Upload
Edit Photo
Edit photo
information
Share To
Facebook
Photo
Let’s imagine Instagram with more Facebook:
• You can now log in using Facebook Connect
• “My Facebook Photos” becomes a photo source
• Extended Facebook sharing options:
• Post photo to a specific album (not just “Instagram Photos”)
• Enhanced privacy controls (friends, friends of friends, private)
• Tag a Facebook friend (ooh, facial recognition?!)
• Make this photo my Facebook Profile Photo
• Comments post on Facebook are aggregated into Instagram