Video here: http://vimeo.com/15379723
Keynote is a cheap, friction-free tool to create elegant wireframes in a format that’s perfect for presentations, pitches, and hand-offs.
Get the toolkit here: http://keynotekungfu.com
3. User Interface Design
Windows
Interaction Design
XHTML
CSS Information Design
PHP
Photography
Information
Architecture
JavaScript
Mac OS X
Data Visualization
Design Research
4. My name is Travis, and I make
“wireframes” with Keynote.
8. Blinksale Travis Isaacs Settings Help Sign Out
Dashboard Projects Invoices & Estimates Clients Team New
Who is this for? name@example.com Addresses
Travis Isaacs
555 Maple Street
COMPANY LOGO Anywhere, TX 76054
SEND
Save for later or Cancel
SENT 10/09/2009
Add to invoice:
Invoice 1411 Due 11/9/2009 (NET 30)
Hours 66 hrs
KIND QTY DESCRIPTION PRICE TOTAL
HRS $100 $0.00 Expenses $433
New line Subtotal $0.00
Services
Tax (8.75%) $0.00
Freight $0.00
Total Due $0.00 Convert to estimate
Invoice theme:
Theme name
Invoice notes Theme name
Theme name
9. Mid-Cities (50) DAY WEEK Creative NEW
SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY Morning breakfast special
FEB 99 cent fountain drinks
7
2010
7 8 9 10 11 12 13 Morning breakfast special
FEB
Beer and 8lb ice
14
2010
14 15 16 17 18 19 20
Default image
FEB
21
2010
21 22 23 24 25 26 27
FEB
28
2010
28 1 2 3 4 5 6
MAR
7
2010
7 8 9 10 11 12 13
MAR
14
2010
14 15 16 17 18 19 20
MAR
28
2010
21 22 23 24 25 26 28
10. K
Mid-Cities (50) CLIC
DAY WEEK Creative NEW
SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY Morning breakfast special
FEB 99 cent fountain drinks
7
2010
7 8 9 10 11 12 13 Morning breakfast special
FEB
Beer and 8lb ice
14
2010
14 15 16 17 18 19 20
Default image
FEB
21
2010
21 22 23 24 25 26 27
FEB
28
2010
28 1 2 3 4 5 6
MAR
7
2010
7 8 9 10 11 12 13
MAR
14
2010
14 15 16 17 18 19 20
MAR
28
2010
21 22 23 24 25 26 28
11. Mid-Cities (50) DAY WEEK Creative NEW
12 AM 4 AM 8 AM NOON 4 PM 8PM Morning breakfast special
99 cent fountain drinks
SUN
2/7/10
Morning breakfast special
MON Beer and 8lb ice
2/8/10
Default image
TUE
2/9/10
WED
2/10/10
THU
2/11/10
FRI
2/12/10
SAT
2/13/10
12. Mid-Cities (50) DAY WEEK Creative NEW
12 AM 4 AM 8 AM NOON 4 PM 8PM Morning breakfast special
K
CLIC 99 cent fountain drinks
SUN
2/7/10
Morning breakfast special
MON Beer and 8lb ice
2/8/10
Default image
TUE
2/9/10
WED
2/10/10
THU
2/11/10
FRI
2/12/10
SAT
2/13/10
13. Mid-Cities (50) DAY WEEK Creative NEW
12 AM 4 AM 8 AM NOON 4 PM 8PM Morning breakfast special
99 cent fountain drinks
SUN Edit Schedule
2/7/10
Morning breakfast special
Start date: 2/12/2010 Morning breakfast special
MON Beer and 8lb ice
2/8/10
Start at: Midnight for 3 hours
Default image
12:00 am to 3:00 am
TUE
2/9/10 Repeats: Weekly
S M T W T F S
Repeats forever
WED
2/10/10 Repeats until:
THU SAVE or Cancel
2/11/10
FRI
2/12/10
SAT
2/13/10
14. Plans Subdivisions Items Options Trade Partner Requests
Take-offs for #1750 (The Venetian) for all elevations and all options
1200 Plumbing Fixtures
1400 Frame I Walls and Joists
1440 Windows
1450 External Doors
1460 Framing Labor
1530 Electrical
1550 HVAC
1600 Insulate Walls
1610 Sheetrock Material
1630 Sheetrock Hang, Tape, Bed, and Texture
1800 Paint
1810 Stain/Finish Cabinets
1830 Interior Doors & Trim
1840 Interior Trim Labor
15. Plans Subdivisions Items Options Trade Partner Requests
Take-offs for #1750 (The Venetian) for all elevations and all options
1200 Plumbing Fixtures
1400 Frame I Walls and Joists
CLICK
1440 Windows
1450 External Doors
1460 Framing Labor
1530 Electrical
1550 HVAC
1600 Insulate Walls
1610 Sheetrock Material
1630 Sheetrock Hang, Tape, Bed, and Texture
1800 Paint
1810 Stain/Finish Cabinets
1830 Interior Doors & Trim
1840 Interior Trim Labor
16. Plans Subdivisions Items Options Trade Partner Requests
Take-offs for #1750 (The Venetian) for all elevations and all options
1200 Plumbing Fixtures
1400 Frame I Walls and Joists
Item UOM Quant
1/2x12 Text 104 Siding EA 17
1/4 x 3/4 Flat screen mould LF 22
10x24 Arch Cedar Louver EA 0
10x24 Rough Cedar Rectangle Vent EA 3
1-1/2 Joist Hanger Nails 50# EA 100
12in x 200ʼ 6 mil Black Poly EA 10
12x12 Text Fcp Lap EA 10
12x24 Arch Top Cedar Vent EA 5
1-3/4x14in Level Micro Lamb Ship 2-19ʼ Pcs LF 0
1-3/4x16in Level Micro Lamb Ship 3-24ʼ Pcs LF 0
Add Item Take-off complete Save or Cancel
1440 Windows
17. Plans Subdivisions Items Options Trade Partner Requests
Take-offs for #1750 (The Venetian) for all elevations and all options
1200 Plumbing Fixtures
1400 Frame I Walls and Joists
Item UOM Quant
1/2x12 Text 104 Siding EA 17
1/4 x 3/4 Flat screen mould LF 22
10x24 Arch Cedar Louver EA 0
10x24 Rough Cedar Rectangle Vent EA 3
1-1/2 Joist Hanger Nails 50# EA 100
12in x 200ʼ 6 mil Black Poly EA 10
12x12 Text Fcp Lap EA 10
12x24 Arch Top Cedar Vent EA 5
1-3/4x14in Level Micro Lamb Ship 2-19ʼ Pcs LF 0
1-3/4x16in Level Micro Lamb Ship 3-24ʼ Pcs LF 0
Add Item
CLICK Take-off complete Save or Cancel
1440 Windows
18. Plans Subdivisions Items Options Trade Partner Requests
Add Items to Frame I Walls and Joist (#1750 - the Venetian)
Components Labor Rates Fixed-Fee Services Substitution Code
Select a component class:
Appliances Windows Concrete Drywall Flooring
CLICK
Hardware Light Fixtures Plumbing Fixtures Lumber Masonry
19. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $212.02
Align Distribute Wall Color 1: Photo of Children
Add More Artwork
Image description
Grandparents
10”x8” size
Image Width
10” x Height
8”
Image condition
Normal condition Photography
Image type
ADD
Add artwork to get started!
1: Children
10” x 8”
Mat Dimensions: 11 1/4” x 9 1/4”
20. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $212.02
Align Distribute Wall Color 1: Photo of Children
Add More Artwork
Image description
Grandparents
10”x8” size
Image Width
10” x Height
8”
Image condition
Normal condition Photography
Image type
ADD k
Add artwork to get started! Clic
1: Children
10” x 8”
Mat Dimensions: 11 1/4” x 9 1/4”
21. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
Align Distribute Wall Color 1: Photo of Children
2: Photo of Grandparents
Add More Artwork
Image description
Image size Width x Height
Image condition Image type
1: Children 2: Grandparents
10” x 8” 10” x 8”
ADD
Mat Dimensions: 27” x 16”
22. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
Align Distribute Wall Color 1: Photo of Children
2: Photo of Grandparents
Add More Artwork
Image description
Image size Width x Height
Image condition Image type
1: Children 2: Grandparents
ck
10” x 8” Clix 8”
10”
ADD
Mat Dimensions: 27” x 16”
23. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
Align Distribute Wall Color 1: Photo of Children
2: Photo of Grandparents
Image description
Grandparents
10”x8” size
Image Width
10” x Height
8”
4”
Image condition
Normal condition Photography
Image type
2” SAVE Delete
1: Children 2: Grandparents
10” x 8” 10” x 8” Add more artwork
4”
Mat Dimensions: 27” x 16”
3”
24. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
Align Distribute I canWall Color
make 1: Photo of Children
edits here...
2: Photo of Grandparents
Image description
Grandparents
10”x8” size
Image Width
10” x Height
8”
4”
Image condition
Normal condition Photography
Image type
2” SAVE Delete
1: Children 2: Grandparents
10” x 8” 10” x 8” Add more artwork
4”
Mat Dimensions: 27” x 16”
3”
25. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
Align Distribute Wall Color 1: Photo of Children
2: Photo of Grandparents
...Or by clicking Image description
Grandparents
on a dimension
10”x8” size
Image Width
10” x Height
8”
4”
3”4”
Image condition Photography
Image type
Normal condition
2” SAVE Delete
1: Children 2: Grandparents
10” x 8” 10” x 8” Add more artwork
4”
Mat Dimensions: 27” x 16”
3”
26. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
Align Distribute Wall Color 1: Photo of Children
2: Photo of Grandparents
Image description
Grandparents
Or by dragging
10”x8” size
Image Width
10” x Height
8”
the corners
4”
Image condition
Normal condition Photography
Image type
2” SAVE Delete
1: Children 2: Grandparents
10” x 8” 10” x 8” Add more artwork
4”
Mat Dimensions: 27” x 16”
3”
27. All Things Considered
Muybridge: The Man Who Made Pictures Move
Radio near Dallas, TX (88 stations)
88.1 FM The One (KNTU) - It’s All About Jazz EDGE LISTEN
Public, Denton TX
28. All Things Considered
Muybridge: The Man Who Made Pictures Move
KERA 90.1 FM All Things Considered (News)
Recent Topics More Stations & Times
Muybridge: The Man Who Made Pictures Move
APR
A new exhibition at the Corcoran Gallery of Art in Washington,
13 D.C., looks at the legacy of Eadweard Muybridge, whose LISTEN
All Things Considered 2010 sequential photographs of horses at a gallop their movements
broken down frame by frame have become iconic
News radio from Washington DC
Hosts: Robert Siegel, Michele Norris, Online Cartoonist Wins Pulitzer
Melissa Block
Mark Fiore is a self-syndicating cartoonist whose irreverent online
APR
animations appear on the San Francisco area news site
For two hours every weekday, hosts
Robert Siegel, Michele Norris and 13 SFGate.com. Fiore won a Pulitzer yesterday, one of the first two LISTEN
2010 Pulitzers ever awarded to nontraditional media. Judges said his
Melissa Block present the program's
work set a high standard for an emerging form of commentary.
trademark mix of news, interviews,
commentaries, reviews, and offbeat
features.
Karadzic Genocide Trial Opens After Months Of Delay
On live in 3hr 33min The trial of the former Bosnian Serb leader Radovan Karadzic
APR
from KNOW-FM 91.1 resumed in The Hague on Tuesday, after months of procedural
13 wrangles. Karadzic faces charges of genocide, crimes against LISTEN
2010 humanity and war crimes relating to the war in the former
Add to presets Yugoslavia during the 1990s.
Share
29. My design process
capturing ideas and
sketching lo-fi interfaces PROTOTYPE
HTML, CSS, jQuery, 960.gs
SKETCH WIREFRAME
Pencil & Paper Keynote baby!
COMP
Photoshop
FIDELITY
30. My design process
Design the foundation
(lots of iterating) PROTOTYPE
HTML, CSS, jQuery, 960.gs
SKETCH WIREFRAME
Pencil & Paper Keynote baby!
COMP
Photoshop
FIDELITY
31. My design process
PROTOTYPE
HTML, CSS, jQuery, 960.gs
SKETCH WIREFRAME Refine the aesthetics
Pencil & Paper Keynote baby!
COMP
Photoshop
FIDELITY
32. My design process
Polish the interactions
PROTOTYPE
HTML, CSS, jQuery, 960.gs
SKETCH WIREFRAME
Pencil & Paper Keynote baby!
COMP
Photoshop
FIDELITY
33. HARD FOR DESIGNER
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
EASY FOR DESIGNER
34. HARD FOR DESIGNER
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER
35. HARD FOR DESIGNER
HI-FIDELITY
COMP
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER
36. HARD FOR DESIGNER
HI-FIDELITY
PROTOTYPE
COMP
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER
37. HARD FOR DESIGNER
HI-FIDELITY
PROTOTYPE
COMP
HI-FIDELITY
WIREFRAME
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER
38. High
WIN: Fidelity Wireframes
HARD FOR DESIGNER
HI-FIDELITY
PROTOTYPE
COMP
HI-FIDELITY
WIREFRAME
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER
39. High
WIN: Fidelity Wireframes
HARD FOR DESIGNER
HI-FIDELITY
PROTOTYPE
Relatively cheap to create
COMP
Easy to throw away
Enough fidelity for clients to visualize the end-result
Less time describing functionality
HI-FIDELITY
WIREFRAME
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER
40. WIN
HARD FOR DESIGNER
HI-FIDELITY
PROTOTYPE
Relatively cheap to create
COMP
Easy to throw away
Enough fidelity for clients to visualize the end-result
Less time describing functionality
HI-FIDELITY
WIREFRAME
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER RISKS:
Wireframes that are “too designed”
distract the client from the “big
picture” concepts.
41. WIN
HARD FOR DESIGNER
HI-FIDELITY
PROTOTYPE
Relatively cheap to create
COMP
Easy to throw away
Enough fidelity for clients to visualize the end-result
Less time describing functionality
HI-FIDELITY
WIREFRAME
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER RISKS:
Wireframes that are “too designed”
distract the client from the “big
picture” concepts.
42. WIN
HARD FOR DESIGNER
HI-FIDELITY
PROTOTYPE
Relatively cheap to create
COMP
Easy to throw away
Enough fidelity for clients to visualize the end-result
Less time describing functionality
HI-FIDELITY
WIREFRAME
EASY FOR CLIENTS HARD FOR CLIENTS
TO UNDERSTAND TO UNDERSTAND
WIREFRAME
EASY FOR DESIGNER RISKS:
Wireframes that are “too designed”
distract the client from the “big
picture” concepts.
43. My design process
PROTOTYPE
HTML, CSS, jQuery, 960.gs
SKETCH WIREFRAME
Pencil & Paper Keynote baby!
COMP
Photoshop
FIDELITY
44. My design process
Lot’s of friction
PROTOTYPE
HTML, CSS, jQuery, 960.gs
SKETCH WIREFRAME Lot’s of friction
Pencil & Paper Keynote baby!
COMP
Photoshop
FIDELITY
49. MARKED FOR LIFE TATTOO CUSTOMER INFORMATION
NOTE: The information below is required by the Indiana Health Department. All information will kept confidential.
1 LAST NAME: FIRST NAME:
2 STREET: CITY: STATE: ZIPCODE:
DAYTIME PHONE: - - EVENING PHONE: - -
Where this whole
3
4
Keynote thing started...
IDENTIFICATION: The Indiana Health Department requires a photo identification and a proof of signature:
Photo ID provided (check one): Signature ID provided (check one):
Driver’s License Credit/Debit card
Student ID Calling card
State ID Wholesale membership card
Employee ID Hunting/Fishing license
Other photo ID: Other:
Please attach your ID’s to this form so they can be photocopied.
/ /
5 DATE OF BIRTH: ! If you are under 18, a guardian will need to sign for you (below)
6 SIGNATURE: DATE: - -
I hereby affirm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge.
GUARDIAN CONSENT (ONLY NEEDED FOR MINORS)
http:/
/travisisaacs.com/2008/07/31/information-design-tattoos/
LAST NAME: FIRST NAME:
50. 4 Use the diagram below to indicate where your tattoo(s) or piercing(s) will be located:
FRONT BACK RIGHT EAR LEFT EAR
http:/
/travisisaacs.com/2008/07/31/information-design-tattoos/
5 SIGNATURE: DATE: - -
I hereby affirm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge.
51. NEW SCAN FOR: Patient name (you can change this later) LOOKUP CANCEL SCAN
LEFT FOOT RIGHT FOOT
SCAN SCAN
Dr. Newsom 12 orders waiting to be sent
54. Powerful Drawing Tools
Solid fill
Gradient fill
Radial gradients
Image fill
Drop shadow
and text shadow, woohoo!
Instant Web 2.0
OMG BBQ
Alpha
transparency
57. LESSON 1
Tell a story Batch upload
Use your wireframes for gaining
consensus and alignment.
Take your audience along with you - show
them how you came to a conclusion.
NEW
New user Confirm Email
Hotel or Agency Enter Info Select Agency Terms
or Property
Verify Email
Notify Hotel Welc
or Agency
66. Describe how I get from point A to B
New User
Batch upload
NEW
New user Confirm Email
Hotel or Agency Enter Info Select Agency Terms & Conditions
Overview
or Property
Verify Email
Notify Hotel Welcome Email
or Agency
67. LESSON 2
Visually narrate the
interface details
Imagine that your wireframes are a
flip-book. Walk your audience through
each interaction frame-by-frame.
74. LESSON 3
Use master slides for page
layouts/types
Avoid endless cut-and-paste by putting
static elements, like navigation,
backgrounds, and site “chrome” in master
slides.
Master slides are free, use as many as you
want!
78. LESSON 4
Create a library of
components
Store common UI components like
buttons, form controls, tabs, text
treatments, etc.
79.
80.
81. LESSON 5
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
96. LESSON 8
Tables are for more than just
data
88.1 FM The One (KNTU) - It’s All About Jazz
Public, Denton TX
Tables make great guides. Use them to
evenly divide areas. 88.5 FM KEOM - Your Community Leader
70’s, Mesquite TX
89.3 FM KNON - The Voice of The People
Oh, they are great for data too (ever tried Community, Dallas TX
to mockup a table in Photoshop?) 89.7 FM POWER FM (KVRK) - The Christian.... NOW: Adrian Humm
Christian Rock, Sanger TX
90.1 FM KERA NOW: All Things Con
Public, Dallas TX
90.5 FM KAWZ - Where God’s Word is Heard NOW: KCBI Music M
Christian, Irving TX
90.9 FM KCBI
Christian Contemporary, Dallas TX
91.7 FM KXT - Music to the Core NOW: KXT Afternoo
Eclectic, Dallas TX
92.5 FM Lone Star 92.5 (KZPS)
Classic Rock, Dallas TX
101. LESSON 9
Add text to shape layer
whenever possible
Add text directly inside the shape instead
of creating a shape and creating text. It’s
easier to adjust the size and it’s one less
Shape and text are separate layers
group that you have to worry about.
Text is in shape layer
102. LESSON 10
Keep your theme lean
Delete unused master slides to reduce the
size of your .key file.
103.
104.
105. LESSON 11
Swap between Photoshop/
Illustrator 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.
106. LESSON 12
Don’t limit yourself to gray
boxes
Capture your ideas in whatever fidelity
that tells your story. Don’t be afraid to add
some visual appeal to your wireframes.
117. Heading Level 1 Heading Level 1 These are mainly just
to copy styles from
(option + ⌘ + c)
Heading Level 2 Heading Level 2
Heading Level 3 Heading Level 3
Heading Level 4 Heading Level 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis.
Hypertext link
• List item 1. Ordered list
• List item 2. Ordered list
• List item 3. Ordered list
<div id=”keynote”>Kung-Fu</div>