@tbisaacs #MIMASummit
KEYNOTE KUNG-FU:Streamlining Your Design Workflow
With Keynote.Travis Isaacs
1
@tbisaacs #MIMASummit
I don’t wireframe.
!
2
@tbisaacs #MIMASummit3
@tbisaacs #MIMASummit3
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
SENDSave for later or Cancel
Travis Isaacs555 Maple Street
Anywhere, TX 76054COMPANY LOGO
KIND QTY DESCRIPTION PRICE TOTAL
$100 $0.00HRS
Subtotal $0.00Tax (8.75%) $0.00Freight $0.00Total Due $0.00
Invoice 1411 Due 11/9/2009 (NET 30)
Invoice notes
SENT 10/09/2009
New line
Who is this for? [email protected] Addresses
Convert to estimate
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
Insulate Cielings1870
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
Insulate Cielings1870
CLICK
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
External Doors1450
Add Item Take-off complete
Plumbing Fixtures1200
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
External Doors1450
Add ItemCLICK Take-off complete
Plumbing Fixtures1200
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:
F2: Mats F3: Frames F4: Finishing TOTAL: $212.02F1: Add Artwork
Add artwork to get started!
Image description
Width Heighx
ADD
Add More Artwork
Image typeImage condition
Image size
Mat Dimensions: 11 1/4” x 9 1/4”
1: Photo of Children
1: Children10” x 8”
Wall ColorAlign Distribute
Grandparents
10”x8”
Normal condition Photography
10” 8”
F2: Mats F3: Frames F4: Finishing TOTAL: $212.02F1: Add Artwork
Add artwork to get started!
Image description
Width Heighx
ADD
Add More Artwork
Image typeImage condition
Image size
Mat Dimensions: 11 1/4” x 9 1/4”
1: Photo of Children
1: Children10” x 8”
Wall ColorAlign Distribute
Grandparents
10”x8”
Normal condition Photography
10” 8”
Click
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: Children10” x 8”
2: Grandparents10” x 8”
Wall ColorAlign Distribute
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: Children10” x 8”
2: Grandparents10” x 8”
Wall ColorAlign Distribute
Click
F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children10” x 8”
2: Grandparents10” 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”
F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children10” x 8”
2: Grandparents10” 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...
F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children10” x 8”
2: Grandparents10” 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”
F2: Mats F3: Frames F4: Finishing TOTAL: $490.29F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children10” x 8”
2: Grandparents10” 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
@tbisaacs #MIMASummit15
CLICK
Story told by annotations and interactions
@tbisaacs #MIMASummit16
All Things ConsideredMuybridge: The Man Who Made Pictures Move
SettingsSports TalkMusicRadio By Location
All Things ConsideredNews radio from Washington DC
Add to presets
On live in 3hr 33minfrom 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
132010
Muybridge: The Man Who Made Pictures MoveA 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
132010
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
132010
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
132010
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
132010
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
@tbisaacs #MIMASummit
“What can you do to te! the story with the least amount of deliverables?”- Boon Sheridan
17
@tbisaacs #MIMASummit
EASY FOR CLIENTSTO UNDERSTAND
HARD FOR CLIENTSTO UNDERSTAND
HA
RD
FOR
DE
SIG
NE
RE
AS
Y FO
R D
ES
IGN
ER
WIREFRAME
HI-FIDELITY WIREFRAME
VISUAL COMP
HTMLPROTOTYPE DESIGN
DOCUMENT
18
@tbisaacs #MIMASummit
EASY FOR CLIENTSTO UNDERSTAND
HARD FOR CLIENTSTO UNDERSTAND
HA
RD
FOR
DE
SIG
NE
RE
AS
Y FO
R D
ES
IGN
ER
WIREFRAME
HI-FIDELITY WIREFRAME
VISUAL COMP
HTMLPROTOTYPE DESIGN
DOCUMENT
“Don’t show clients wire$ames. Ever.”
- Famous* Designer* on the Internet
19
@tbisaacs #MIMASummit
EASY FOR CLIENTSTO UNDERSTAND
HARD FOR CLIENTSTO UNDERSTAND
HA
RD
FOR
DE
SIG
NE
RE
AS
Y FO
R D
ES
IGN
ER
WIREFRAME
HI-FIDELITY WIREFRAME
VISUAL COMP
HTMLPROTOTYPE DESIGN
DOCUMENT
Agreed. Hide these
20
@tbisaacs #MIMASummit
EASY FOR CLIENTSTO UNDERSTAND
HARD FOR CLIENTSTO UNDERSTAND
HA
RD
FOR
DE
SIG
NE
RE
AS
Y FO
R D
ES
IGN
ER
WIREFRAME
HI-FIDELITY WIREFRAME
VISUAL COMP
HTMLPROTOTYPE DESIGN
DOCUMENT
Show these early and often
21
@tbisaacs #MIMASummit
EASY FOR CLIENTSTO UNDERSTAND
HARD FOR CLIENTSTO UNDERSTAND
HA
RD
FOR
DE
SIG
NE
RE
AS
Y FO
R D
ES
IGN
ER
WIREFRAME
HI-FIDELITY WIREFRAME
VISUAL COMP
HTMLPROTOTYPE DESIGN
DOCUMENT
Ideal , but can be costly to create
22
@tbisaacs #MIMASummit
EASY FOR CLIENTSTO UNDERSTAND
HARD FOR CLIENTSTO UNDERSTAND
HA
RD
FOR
DE
SIG
NE
RE
AS
Y FO
R D
ES
IGN
ER
WIREFRAME
HI-FIDELITY WIREFRAME
VISUAL COMP
HTMLPROTOTYPE DESIGN
DOCUMENT
Polished, but difficult to describe interaction
23
@tbisaacs #MIMASummit
EASY FOR CLIENTSTO UNDERSTAND
HARD FOR CLIENTSTO UNDERSTAND
HA
RD
FOR
DE
SIG
NE
RE
AS
Y FO
R D
ES
IGN
ER
WIREFRAME
HI-FIDELITY WIREFRAME
VISUAL COMP
HTMLPROTOTYPE DESIGN
DOCUMENT
Enough fidelity, interactive, cheap to create
24
@tbisaacs #MIMASummit
It’s $79 $49 $19
25
@tbisaacs #MIMASummit
Gorgeous Presentations
26
@tbisaacs #MIMASummit27
Crazy Portable
@tbisaacs #MIMASummit
Powerful Drawing Tools
28
@tbisaacs #MIMASummit
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)
By signing as the above minor’s legal guardian I take full responsibility for any legal issues that may take place in reference to the above minor. Also by signing I give Marked for Life Tattoo consent to perform the above modification on the listed minor. I understand that I must be present and sign for any future modifications while the above listed is under the legal age .
I affirm under the penalties of purgery that the foregoing statements are true/correct to the best of my knowledge.
LAST NAME: FIRST NAME:
STREET: CITY: STATE: ZIPCODE:
DAYTIME PHONE: EVENING PHONE:- - - -
IDENTIFICATION: The Indiana Health Department requires a photo identification and a proof of signature:
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.
GUARDIAN SIGNATURE: DATE: - -
DATE OF BIRTH: / /
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...
29
@tbisaacs #MIMASummit
MARKED FOR LIFE TATTOO MODIFICATION INFORMATION
NOTE: The information below is required by the Indiana Health Department. All information will kept confidential.
LAST NAME:1 FIRST NAME:
IʼM GETTING A:2 Tattoo Piercing FROM: Mark Isaacs, Owner Other artist:
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.
GUARDIAN CONSENT (ONLY NEEDED FOR MINORS)
GUARDIAN SIGNATURE: DATE: - -
By signing as the above minor’s legal guardian I take full responsibility for any legal issues that may take place in reference to the above minor. Also by signing I give Marked for Life Tattoo consent to perform the above modification on the listed minor. I understand that I must be present and sign for any future modifications while the above listed is under the legal age .
I affirm under the penalties of purgery that the foregoing statements are true/correct to the best of my knowledge.
3 Please describe your Tattoo(s) or Piercing(s):
http://travisisaacs.com/2008/07/31/information-design-tattoos/
30
@tbisaacs #MIMASummit
Primitive Shapes
31
@tbisaacs #MIMASummit
Solid fill
Gradient fill
Radial gradients
Image fill
Alpha transparency
32
@tbisaacs #MIMASummit
Full-featured type control
33
@tbisaacs #MIMASummit34
wireframe
@tbisaacs #MIMASummit35
interviews
project plan
notes
sketch
wireframe
@tbisaacs #MIMASummit
1
2
3
4
5
Notes
Microframes
Planning
Wireframing
Pitch
36
@tbisaacs #MIMASummit
1
2
3
4
5
Notes
Microframes
Planning
Wireframing
Pitch
37
@tbisaacs #MIMASummit
Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins
BriefAn iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, you have to search when you’re there at the conference wanting to get info, geo-locate! Once you’re there, browse the schedule, get session info, mark sessions you’re interested in, and check-in to sessions once there.
Branding / Logo• Some kind of badge-like logo
• Conference Companion
• Lanyard - already exists!
• LanyarrrdKind of pirate themed?
Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
Website• App store link
• Screenshots
• Promo video
• Testimonials
• Mention that it’s free to use and free to list
To wireframe...• Desktop website
• Mobile website
• iPhone application
• iPad application
• Storyboad the video...
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
38
@tbisaacs #MIMASummit
Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins
BriefAn iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, you have to search when you’re there at the conference wanting to get info, geo-locate! Once you’re there, browse the schedule, get session info, mark sessions you’re interested in, and check-in to sessions once there.
Branding / Logo• Some kind of badge-like logo
• Conference Companion
• Lanyard - already exists!
• LanyarrrdKind of pirate themed?
Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
Website• App store link
• Screenshots
• Promo video
• Testimonials
• Mention that it’s free to use and free to list
To wireframe...• Desktop website
• Mobile website
• iPhone application
• iPad application
• Storyboad the video...
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
Who’s there?
38
@tbisaacs #MIMASummit
Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins
BriefAn iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, you have to search when you’re there at the conference wanting to get info, geo-locate! Once you’re there, browse the schedule, get session info, mark sessions you’re interested in, and check-in to sessions once there.
Branding / Logo• Some kind of badge-like logo
• Conference Companion
• Lanyard - already exists!
• LanyarrrdKind of pirate themed?
Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
Website• App store link
• Screenshots
• Promo video
• Testimonials
• Mention that it’s free to use and free to list
To wireframe...• Desktop website
• Mobile website
• iPhone application
• iPad application
• Storyboad the video...
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
Who’s there?
What’s said?
38
@tbisaacs #MIMASummit
Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins
BriefAn iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, you have to search when you’re there at the conference wanting to get info, geo-locate! Once you’re there, browse the schedule, get session info, mark sessions you’re interested in, and check-in to sessions once there.
Branding / Logo• Some kind of badge-like logo
• Conference Companion
• Lanyard - already exists!
• LanyarrrdKind of pirate themed?
Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
Website• App store link
• Screenshots
• Promo video
• Testimonials
• Mention that it’s free to use and free to list
To wireframe...• Desktop website
• Mobile website
• iPhone application
• iPad application
• Storyboad the video...
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
Who’s there?
What’s said?
What to do?
38
@tbisaacs #MIMASummit39
Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins
BriefAn iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, you have to search when you’re there at the conference wanting to get info, geo-locate! Once you’re there, browse the schedule, get session info, mark sessions you’re interested in, and check-in to sessions once there.
Branding / Logo• Some kind of badge-like logo
• Conference Companion
• Lanyard - already exists!
• LanyarrrdKind of pirate themed?
Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
Website• App store link
• Screenshots
• Promo video
• Testimonials
• Mention that it’s free to use and free to list
To wireframe...• Desktop website
• Mobile website
• iPhone application
• iPad application
• Storyboad the video...
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
@tbisaacs #MIMASummit39
Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins
BriefAn iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, you have to search when you’re there at the conference wanting to get info, geo-locate! Once you’re there, browse the schedule, get session info, mark sessions you’re interested in, and check-in to sessions once there.
Branding / Logo• Some kind of badge-like logo
• Conference Companion
• Lanyard - already exists!
• LanyarrrdKind of pirate themed?
Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
Website• App store link
• Screenshots
• Promo video
• Testimonials
• Mention that it’s free to use and free to list
To wireframe...• Desktop website
• Mobile website
• iPhone application
• iPad application
• Storyboad the video...
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
Drop in images or snippets
@tbisaacs #MIMASummit39
Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins
BriefAn iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, you have to search when you’re there at the conference wanting to get info, geo-locate! Once you’re there, browse the schedule, get session info, mark sessions you’re interested in, and check-in to sessions once there.
Branding / Logo• Some kind of badge-like logo
• Conference Companion
• Lanyard - already exists!
• LanyarrrdKind of pirate themed?
Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
Website• App store link
• Screenshots
• Promo video
• Testimonials
• Mention that it’s free to use and free to list
To wireframe...• Desktop website
• Mobile website
• iPhone application
• iPad application
• Storyboad the video...
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
Drop in images or snippets
Link to the web, or other keynote docs
@tbisaacs #MIMASummit
Notes
Work
40
@tbisaacs #MIMASummit
1
2
3
4
5
Notes
Microframes
Planning
Wireframing
Pitch
41
@tbisaacs #MIMASummit
Microframing
42
@tbisaacs #MIMASummit43
@tbisaacs #MIMASummit
Too big?
44
@tbisaacs #MIMASummit45
@tbisaacs #MIMASummit
Called fortoo much detail
45
@tbisaacs #MIMASummit46
@tbisaacs #MIMASummit46
@tbisaacs #MIMASummit47
@tbisaacs #MIMASummit47
@tbisaacs #MIMASummit48
@tbisaacs #MIMASummit49
@tbisaacs #MIMASummit49
@tbisaacs #MIMASummit50
@tbisaacs #MIMASummit
More Rapid
Less Detail
Less Paper
50
@tbisaacs #MIMASummit
Label Label
51
@tbisaacs #MIMASummit52
@tbisaacs #MIMASummit
1
2
3
4
5
Notes
Microframes
Planning
Wireframing
Pitch
53
@tbisaacs #MIMASummit
Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins
BriefAn iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, you have to search when you’re there at the conference wanting to get info, geo-locate! Once you’re there, browse the schedule, get session info, mark sessions you’re interested in, and check-in to sessions once there.
Branding / Logo• Some kind of badge-like logo
• Conference Companion
• Lanyard - already exists!
• LanyarrrdKind of pirate themed?
Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
Website• App store link
• Screenshots
• Promo video
• Testimonials
• Mention that it’s free to use and free to list
To wireframe...• Desktop website
• Mobile website
• iPhone application
• iPad application
• Storyboad the video...
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
Planning
54
@tbisaacs #MIMASummit55
@tbisaacs #MIMASummit55
@tbisaacs #MIMASummit56
@tbisaacs #MIMASummit57
@tbisaacs #MIMASummit58
@tbisaacs #MIMASummit59
@tbisaacs #MIMASummit60
@tbisaacs #MIMASummit61
@tbisaacs #MIMASummit
Wireframe
Video
SiteLaunch
AppLaunch
62
@tbisaacs #MIMASummit
Notes, Timeline
Work
63
@tbisaacs #MIMASummit
1
2
3
4
5
Notes
Microframes
Planning
Wireframing
Pitch
64
@tbisaacs #MIMASummit
EASY FOR CLIENTSTO UNDERSTAND
HARD FOR CLIENTSTO UNDERSTAND
HA
RD
FOR
DE
SIG
NE
RE
AS
Y FO
R D
ES
IGN
ER
HI-FIDELITY WIREFRAME
65
@tbisaacs #MIMASummit66
@tbisaacs #MIMASummit66
@tbisaacs #MIMASummit67
Option 1Option 2 Option 3
Label:
Yes
No
Option 1
Option 2
Button Button
Please select...
Please Select
Leave a comment:
! Required Field!
JulyJulyJulyJulyJulyJulyJuly
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Inactive TabInactive Tab
Inactive TabActive Tab Inactive Tab
Active Tab
Active Tab Inactive Tab Inactive Tab
Active Menu
Inactive Menu
Inactive Menu
Sub-Menu 1
Sub-Menu 2
Active Tab Inactive Tab Inactive Tab Inactive Tab Inactive Tab
Home » Page 1 » Page 2
Home Page 1 Page 2
Contents
Open Accordion
Closed Accordion
Closed Accordion
Closed Accordion
Best-Sellers (22)
IMAGE
Item
IMAGE
Item
IMAGE
Item
IMAGE
Item
IMAGE
Item
IMAGE
Item
Pages: 1 2 3 4 ... 20 21 Next
Pages: 1 2 3 4 ... 20 21 NextPrevious
Last Name First Name Email
Isaacs Travis [email protected]
Isaacs Travis [email protected]
Isaacs Travis [email protected]
Isaacs Travis [email protected]
Last Name First Name Email
Isaacs Travis [email protected]
Isaacs Travis [email protected]
Isaacs Travis [email protected]
Isaacs Travis [email protected]
Last Name First Name Email
Isaacs Travis [email protected]
Isaacs Travis [email protected]
Isaacs Travis [email protected]
Isaacs Travis [email protected]
IMAGE
16:9
Flickr
Digg
Heading Level 1Heading Level 2
Heading Level 3
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
• List item
• List item
1. Ordered list
2. Ordered list
3. Ordered list
<div id=”keynote”>Kung-Fu</div>
Heading Level 1Heading Level 2Heading Level 3
Heading Level 4
728x90 LEADERBOARD
468x60 BANNER
234x60 HALF-BANNER
250x250SQUARE
125x125SQUARE
120x600SKYSCRAPER
160x600WIDE SKYSCRAPER
120x90BUTTON
120x60BUTTON
120x240VERTICALBANNER
0
10
20
30
40
Jan 2010 Mar 2010 May 2010 Jul 2010 Sep 2010 Nov 2010
Achievements This Year:
YOU:
24Followers
DUSTIN:
334Followers
You and Dustin have 14 followers in common
Party
First Person Shooter
Role Playing
Driving
Sports
0 37.5 75 112.5 150
Notes Heading mm/dd/yyyy First Last / First Last /
Heading Level 3Lorem 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.
• List item
• List item
• List item
1. Ordered list
2. Ordered list
3. Ordered list
Heading Level 3Lorem 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.
• List item
• List item
• List item
1. Ordered list
2. Ordered list
3. Ordered list
Heading Level 3• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
• List item
Just a friendly reminder
Window Title
CLICK HOVER PINCH
13, 334 Likes
20,065 people like this. Be the first of your friends.
Share
27K
! Error:Something bad happened. Here’s what to do about it.
Success:Something good happened. Here’s how awesome that is.
Warning:Something you should be aware of happened. Be careful.!
Search
Label Label Keynote
text input
Label
Label
Option 1
Option 2
Option 3
Option 4
Option 5
0
1
2
3
01
02
03
04
05
DoneButton Button
OFF
ON
ON
Copy Select Select All Paste
http://keynotekungfu.comDo you want to leave this site?
Cancel OK
Button
Button
Button
Button
123
Active Inactive Inactive
Button
Button
Button Button
Button
Button
Button
Button
Active Inactive
Button
iOS 5 AlertFor Lock Screen
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M
.?123 space Search
1 2 3 4 5 6 7 8 9 0
- / : ; ( ) $ & @
.?123 space Search
”
. , ? ! ’
[ ] { } # % ^ * + =
_ \ | ~ < > € £ ¥
ABC space ABC
•
. , ? ! ’
T
button button button button
@tbisaacs #MIMASummit79
@tbisaacs #MIMASummit
What size should I make my theme?
80
@tbisaacs #MIMASummit
1024x768
320x480
612x792
768x10241280x720
1280x1656
81
@tbisaacs #MIMASummit
1024x768
320x480
612x792
768x10241280x720
1280x1656
82
@tbisaacs #MIMASummit
1024x768
82
@tbisaacs #MIMASummit83
@tbisaacs #MIMASummit84
about
1024x768
@tbisaacs #MIMASummit85
1024x768
@tbisaacs #MIMASummit86
@tbisaacs #MIMASummit86
Top (1 of 5)
@tbisaacs #MIMASummit86
Top (1 of 5)
2 of 5
@tbisaacs #MIMASummit86
Top (1 of 5)
2 of 5
2 of 5
@tbisaacs #MIMASummit86
Top (1 of 5)
2 of 5
2 of 5
3 of 5
@tbisaacs #MIMASummit86
Top (1 of 5)
2 of 5
2 of 5
3 of 5
4 of 5
@tbisaacs #MIMASummit86
Top (1 of 5)
2 of 5
2 of 5
3 of 5
4 of 5
5 of 5
@tbisaacs #MIMASummit
1024x768
320x480
612x792
768x10241280x720
1280x1656
87
@tbisaacs #MIMASummit
320x480
87
@tbisaacs #MIMASummit88
@tbisaacs #MIMASummit
1024x768
320x480
612x792
768x10241280x720
1280x1656
89
@tbisaacs #MIMASummit
768x1024
89
@tbisaacs #MIMASummit90
@tbisaacs #MIMASummit
1024x768
320x480
612x792
768x10241280x720
1280x1656
91
@tbisaacs #MIMASummit
612x792
91
@tbisaacs #MIMASummit92
@tbisaacs #MIMASummit
Perfectly prints on a standard sheet of paper
92
@tbisaacs #MIMASummit
1024x768
320x480
612x792
768x10241280x720
1280x1656
93
@tbisaacs #MIMASummit
1280x1656
93
@tbisaacs #MIMASummit94
@tbisaacs #MIMASummit
Also perfectly prints on a standard sheet of paper
94
@tbisaacs #MIMASummit94
@tbisaacs #MIMASummit
SIMPLETO MAKE
95
@tbisaacs #MIMASummit
1024x768
96
@tbisaacs #MIMASummit97
@tbisaacs #MIMASummit97
@tbisaacs #MIMASummit98
@tbisaacs #MIMASummit
1024x768
320x480
612x792
768x10241280x720
1280x1656
99
@tbisaacs #MIMASummit100
@tbisaacs #MIMASummit101
@tbisaacs #MIMASummit
Copy Paste
Original slide size
New slide size
101
@tbisaacs #MIMASummit102
Demo!
@tbisaacs #MIMASummit103
✓ Picking the right size for your deck
✓ Using master slides
✓ Using components
@tbisaacs #MIMASummit104
KEYNOTE
KUNG-FU
HOW NINJAS WIREFRAME
@tbisaacs
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
1
or alt + ⌘ + c
2
or alt + ⌘ + v
3
:)
Group items whenever possible.
Grouped items are easier to move, delete, and manipulate.
Group
Double-click on a grouped element to edit itor alt + ⌘ + g to group
Learn the keyboard shortcuts.
Keyboard shortcuts will save you time and clicks (and impress your boss).
Copy Style
Paste Style
Group
Un-Group
Insert (Choose)
New Slide
Fonts
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.
@tbisaacs #MIMASummit121
@tbisaacs #MIMASummit
2 contributors30+ masters118 slides150MB file
122
@tbisaacs #MIMASummit
2 contributors30+ masters118 slides150MB file
Cumbersome to manage
123
@tbisaacs #MIMASummit
Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins
BriefAn iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, you have to search when you’re there at the conference wanting to get info, geo-locate! Once you’re there, browse the schedule, get session info, mark sessions you’re interested in, and check-in to sessions once there.
Branding / Logo• Some kind of badge-like logo
• Conference Companion
• Lanyard - already exists!
• LanyarrrdKind of pirate themed?
Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
Website• App store link
• Screenshots
• Promo video
• Testimonials
• Mention that it’s free to use and free to list
To wireframe...• Desktop website
• Mobile website
• iPhone application
• iPad application
• Storyboad the video...
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
124
@tbisaacs #MIMASummit
Redacted Redacted
Redacted Redacted
Redacted
Redacted
Redacted
Redacted
Redacted
Redacted
Redacted
PublicPrivate
Published to..
Activity
Redacted Redacted
?
Redacted
?Redacted
?
Activity
Activity
Activity
Redacted
Redacted
Activity
Activity
Activity
Redacted
Redacted
Redacted
Published to..
Activity
RedactedRedacted
Activity
Published to..
Managed by me
Activity
Managed by me
Activity
Redacted
RedactedRedactedRedacted
Product Pages
RedactedRedacted Redacted
Redacted
Browsable
Our notes inform a high-level “story
125
@tbisaacs #MIMASummit125
@tbisaacs #MIMASummit
Storyboard elements become
126
@tbisaacs #MIMASummit
Divide & Conquer
127
@tbisaacs #MIMASummit
Divide & Conquer
127
@tbisaacs #MIMASummit128
@tbisaacs #MIMASummit
CLICK
128
@tbisaacs #MIMASummit
The required master slides will automatically come
along when you drag
129
@tbisaacs #MIMASummit
Merged Deck
My Deck
1
3
5 Your Deck
2
4
130
@tbisaacs #MIMASummit
Merged Deck
1
2
3
4
5
My Deck
1
3
5 Your Deck
2
4
130
@tbisaacs #MIMASummit
1
2
3
4
5
Notes
Microframes
Planning
Wireframing
Pitch
131
@tbisaacs #MIMASummit132
DESIGN THINKING
@tbisaacs #MIMASummit133
Activity LogUpdated 2 hours ago
Skilled Athlete
Meals & Snacks
Weight & Stats
Progress Photo
Today
Sleep ActivityZZZ
Supplements
2
0
1
1
3
2
Vitals 1
Activity LogUpdated 2 hours ago
Skilled Athlete
Meals & Snacks
Weight & Stats
Progress Photo
Today
Sleep ActivityZZZ
Supplements
2
0
1
1
3
2
Vitals 1
Sunday, July 24
July 2011July 2011July 2011July 2011July 2011July 2011July 2011S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Activity LogUpdated 2 hours ago
Skilled Athlete
Today
Blueberries, bbq chicken breast, macadamia nuts.1:11 pm
2
4Ground beef, broccoli, cauliflower, and almonds.8:14 am
ZZZ 17 minute nap10:33 am 0
01 tbsp Nordic Naturals fish oil8:14 am
Yesterday
Blueberries, bbq chicken breast, macadamia nuts.1:11 pm
0
New weigh-in: 145 pounds8:14 am 9
Nice Wireframes, Bro.
Now What?
Record A MealBack Record
Describe your meal
Was meal Paleo?
Did meal have dairy? NO
YES
Sharing
YES
YES
@tbisaacs #MIMASummit134
Turn your wireframes into a presentationWrap your designs in a meaningful story
@tbisaacs #MIMASummit135
Tell The Story
@tbisaacs #MIMASummit136
Tell The Story
✓ Describe (and show) interaction✓ Communicate use cases✓ Support for our design decisions
@tbisaacs #MIMASummit
http://slideshare.net/tbisaacs/influencing-change-through-presentations
137
@tbisaacs #MIMASummit
http://slideshare.net/tbisaacs/influencing-change-through-presentations
137
@tbisaacs #MIMASummit
http://slideshare.net/tbisaacs/influencing-change-through-presentations
137
@tbisaacs #MIMASummit
http://slideshare.net/tbisaacs/influencing-change-through-presentations
137
@tbisaacs #MIMASummit
http://slideshare.net/tbisaacs/influencing-change-through-presentations
137
@tbisaacs #MIMASummit
http://slideshare.net/tbisaacs/influencing-change-through-presentations
137
@tbisaacs #MIMASummit
http://slideshare.net/tbisaacs/influencing-change-through-presentations
137
@tbisaacs #MIMASummit
http://slideshare.net/tbisaacs/influencing-change-through-presentations
137
@tbisaacs #MIMASummit138
Hotel or Agency
Batch upload
Enter Info Select Agency or Property
New user
Verify Email
Confirm Email
Notify Hotelor Agency
Welcome Email
New User
Overview
NEW
Terms & Conditions
@tbisaacs #MIMASummit139
Public Profile Head 2 Head
Following Followers
Groups
My store
PowerUp
Lists
Settings
Recommend
Messages
PublicPrivate
Published to..
Activity
Kongregate Raptr
?
XboxLive
?
PSN
?
Activity
ActivityActivity
Orders
Achievements
Activity
Activity
Activity
Media
My PersonalizedGamestop.com
My Feed
Published to..
Activity
LeaderboardsMy Gamer DNA
Activity
Published to..
Managed by me
Activity
Managed by meActivity
Game Library
Polls BuzzReviews
Product Pages
Discussion Wiki Cheats
“Community”
Browsable
REDACTED
REDACTED
@tbisaacs #MIMASummit140
Visually narrate interface detailsUse your wireframes for gaining consensus and alignment.
Take your audience along with you-show them how you came to a conclusion.
@tbisaacs #MIMASummit
Travis Isaacs
141
@tbisaacs #MIMASummit
Travis Isaacs CLICK
141
@tbisaacs #MIMASummit
Travis Isaacs
Change your nameChange your photoLog out
141
@tbisaacs #MIMASummit
DRAG
142
@tbisaacs #MIMASummit
DRAG
142
@tbisaacs #MIMASummit
CLICK TAP SWIPEPINCH
HOVER
143
@tbisaacs #MIMASummit
Redacted
144
Seriously, go nuts!
@tbisaacs #MIMASummit145
BLACK BELT
KEYNOTE
KUNG-FU
Advanced animation techniques
http://slideshare.net/tbisaacs
@tbisaacs #MIMASummit
Silhouette
146
@tbisaacs #MIMASummit
Silhouette
147
@tbisaacs #MIMASummit148
@tbisaacs #MIMASummit149
@tbisaacs #MIMASummit150
@tbisaacs #MIMASummit151
@tbisaacs #MIMASummit152
@tbisaacs #MIMASummit152
@tbisaacs #MIMASummit153
@tbisaacs #MIMASummit154
@tbisaacs #MIMASummit155
@tbisaacs #MIMASummit156
@tbisaacs #MIMASummit156
@tbisaacs #MIMASummit157
@tbisaacs #MIMASummit158
@tbisaacs #MIMASummit159
@tbisaacs #MIMASummit160
@tbisaacs #MIMASummit160
@tbisaacs #MIMASummit161
@tbisaacs #MIMASummit162
@tbisaacs #MIMASummit163
@tbisaacs #MIMASummit164
@tbisaacs #MIMASummit164
@tbisaacs #MIMASummit165
@tbisaacs #MIMASummit166
Demo!
@tbisaacs #MIMASummit167
Make a Stand-Alone PrototypeKeynote’s powerful linking system allows the creation of completely non-linear, stand-alone prototypes.
@tbisaacs #MIMASummit168
Activity LogUpdated 2 hours ago
Skilled Athlete
Meals & Snacks
Weight & Stats
Progress Photo
Today
Sleep ActivityZZZ
Supplements
2
0
1
1
3
2
Vitals 1
Activity LogUpdated 2 hours ago
Skilled Athlete
Meals & Snacks
Weight & Stats
Progress Photo
Today
Sleep ActivityZZZ
Supplements
2
0
1
1
3
2
Vitals 1
Sunday, July 24
July 2011July 2011July 2011July 2011July 2011July 2011July 2011S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Activity LogUpdated 2 hours ago
Skilled Athlete
Today
Blueberries, bbq chicken breast, macadamia nuts.1:11 pm
2
4Ground beef, broccoli, cauliflower, and almonds.8:14 am
ZZZ 17 minute nap10:33 am 0
01 tbsp Nordic Naturals fish oil8:14 am
Yesterday
Blueberries, bbq chicken breast, macadamia nuts.1:11 pm
0
New weigh-in: 145 pounds8:14 am 9
Record A MealBack Record
Describe your meal
Was meal Paleo?
Did meal have dairy? NO
YES
Sharing
YES
YES
@tbisaacs #MIMASummit169
@tbisaacs #MIMASummit170
@tbisaacs #MIMASummit
Activity LogUpdated 2 hours ago
Skilled Athlete
Meals & Snacks
Weight & Stats
Progress Photo
Today
Sleep ActivityZZZ
Supplements
2
0
1
1
3
2
Vitals 1
Select
4
Always link to a slide number!
@tbisaacs #MIMASummit
Activity LogUpdated 2 hours ago
Skilled Athlete
Meals & Snacks
Weight & Stats
Progress Photo
Today
Sleep ActivityZZZ
Supplements
2
0
1
1
3
2
Vitals 1
Select
2
@tbisaacs #MIMASummit
Activity LogUpdated 2 hours ago
Skilled Athlete
Meals & Snacks
Weight & Stats
Progress Photo
Today
Sleep ActivityZZZ
Supplements
2
0
1
1
3
2
Vitals 1Select
3
@tbisaacs #MIMASummit
1
Record A MealBack Record
Describe your meal
Was meal Paleo?
Did meal have dairy? NO
YES
Sharing
YES
YES
Select Select
@tbisaacs #MIMASummit
@tbisaacs #MIMASummit
@tbisaacs #MIMASummit
@tbisaacs #MIMASummit176
All of your links will be embedded in the PDF
@tbisaacs #MIMASummit177
Demo!
@tbisaacs #MIMASummit
Questions? FOR MORE:
BLACK BELT
KEYNOTE
KUNG-FU
KEYNOTE
KUNG-FU
HOW NINJAS WIREFRAME
@tbisaacs
slideshare.net/tbisaacs178