Upload
travis-isaacs
View
319.097
Download
5
Embed Size (px)
Citation preview
BLACK BELT
KEYNOTE
KUNG-FU
Travis Isaacs@tbisaacs
KEYNOTE
KUNG-FUHOW NINJAS WIREFRAME
@tbisaacs
KEYNOTE
KUNG-FUHOW NINJAS WIREFRAME
@tbisaacs
KEYNOTE
KUNG-FUHOW NINJAS WIREFRAME
@tbisaacs
Plans Subdivisions Items Options Trade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing 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
KEYNOTE
KUNG-FUHOW NINJAS WIREFRAME
@tbisaacs
Plans Subdivisions Items Options Trade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing 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
F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children10” x 8”
2: Grandparents10” x 8”
Wall Color
Align Distribute
Image description
Width Heighx
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...
KEYNOTE
KUNG-FUHOW NINJAS WIREFRAME
@tbisaacs
Plans Subdivisions Items Options Trade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing 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
F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children10” x 8”
2: Grandparents10” x 8”
Wall Color
Align Distribute
Image description
Width Heighx
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...
tbisaacsAccounts
Search Timeline
@
10:00 AMCARRIER 3G
axbomhyperlinkI must say, I love wireframing in #keynotekungfu http://uxa.se/kkfu - 2 more pages, then off to #blonski
1 hour
annettepriestprototyping for iPhone and about to compare Mockapp.com with Keynotekungfu.com. Should be an interesting battle.
1 hour
gldnspudVerdict: http://keynotekungfu.com is AWESOME. Thank you @tbisaacs!!!
1 hour
New Tweet
KEYNOTE
KUNG-FUHOW NINJAS WIREFRAME
@tbisaacs
Plans Subdivisions Items Options Trade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing 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
F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
F1: Add Artwork
Mat Dimensions: 27” x 16”
F1: Add Artwork
1: Photo of Children
1: Children10” x 8”
2: Grandparents10” x 8”
Wall Color
Align Distribute
Image description
Width Heighx
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...
tbisaacsAccounts
Search Timeline
@
10:00 AMCARRIER 3G
axbomhyperlinkI must say, I love wireframing in #keynotekungfu http://uxa.se/kkfu - 2 more pages, then off to #blonski
1 hour
annettepriestprototyping for iPhone and about to compare Mockapp.com with Keynotekungfu.com. Should be an interesting battle.
1 hour
gldnspudVerdict: http://keynotekungfu.com is AWESOME. Thank you @tbisaacs!!!
1 hour
New Tweet
slideshare.net/tbisaacs
I got this
Dustin Askins@dustinaskins
It’s what we do. ™
BLACK BELT
SETTING UP YOUR KEYNOTE ENVIRONMENT
Portrait-oriented
Blank
Corporate docs
Project specific
Keynote Kung-Fu
REDACTED
REDACTEDHUGETIME SAVER
This thumbnail comes from the first slide of
the deck.
Every new file starts with the same masters
What if I want to delete this theme?
Blank
Useful when you need a clean starting point, or to capture a one-off idea.
Blank.kth Blank.zip
Blank.kth Blank.zip
51 KB.
These can safely be ignored
3.3 MB for a blank theme!
Dustin’s “Augmented” Toolkit
Window Title
404
Window Title
404
Window Title
link
Window Title
linklink, Y U NO LINK?
What size should I make my theme?
1024x768
320x480
612x792
768x10241280x720
1280x1656
1024x768
320x480
612x792
768x10241280x720
1280x1656
320x480
1280x1656
1024x768
1280x1024612x792
768x1024
1280x720
320x480
1280x1656
1024x768
1280x1024612x792
768x1024
1280x720
320x480
1280x1656
1024x768
1280x1024612x792
768x1024
1280x720
320x480
1280x1656
1024x768
1280x1024612x792
768x1024
1280x720
@jacobmorse uses 1024x768 for iPhone design documentation
1024x768
320x480
612x792
768x10241280x720
1280x1656
1024x768
320x480
612x792
768x10241280x720
1280x1656
1024x768
320x480
612x792
768x10241280x720
1280x1656
Perfectly prints on a standard sheet of paper
1024x768
320x480
612x792
768x10241280x720
1280x1656
Also perfectly prints on a standard sheet of paper
SIMPLETO MAKE
1024x768
1024x768
320x480
612x792
768x10241280x720
1280x1656
Copy Paste
Original slide size
New slide size
Keynote actually comes with over 60 frames
ENABLING EXTRA FRAMES
Resources /BGGraphicInspectorFrames.plist
Blue construction paper texture is EXACTLY what this slide needs.
AMIRIGHT?
BOOM.
The Inspector
I expected to be able to “tear” this off
FAIL
Then one day...
CLICKCLICKCLICKCLICKCLICKCLICKCLICK
7 instances
All I really need
L A N YA R R R DC O N F E R E N C E C O M PA N I O N
L A N YA R R R DC O N F E R E N C E C O M PA N I O N
L A N YA R R R DC O N F E R E N C E C O M PA N I O N
DEMO
IDEATION
Notes Microframes Planning Wireframing Pitch
Notes Microframes Planning
“Ideation”
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?
Notes
Work
&
Microframing
Too big?
Called fortoo much detail
More Rapid
Less Detail
Less Paper
Label Label
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
LANYARRRD
LANYARRRD
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
Wireframe
Video
SiteLaunch
AppLaunch
LANYARRRD
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
Timeline• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app
Wireframe
Video
SiteLaunch
AppLaunch
Notes, Timeline
Work
&
WIREFRAMES & PROTOTYPES
KEYNOTE
KUNG-FU
HOW NINJAS WIREFRAME
@tbisaacs
Let’s review master slides
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!
LESSON 3
Master Slide Content Slide
Most of the work is done in here
Recently we had a BIG project
2 contributors30+ masters118 slides150MB file
2 contributors30+ masters118 slides150MB file
Cumbersome to manage
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
LANYARRRD
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 board”
Storyboard elements become groups of
functionality
Divide & Conquer
CLICK
The required master slides will automatically come
along when you drag
Merged Deck
1
2
3
4
5
Travis’s Deck
1
3
5Dustin’s Deck
2
4
vsworking IN a theme file
working FROM a theme file
vs
vs
preference
Wireframing != Visual Design
10:00 AMCARRIER 3G
Keynote Kung-Fu...Saturday, July 16th, 2011 at 2:00pmKeynote Kung-Fu: Black Belt
You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage:
• Creating motion graphics and animation• Advanced animation controls and timing• Creating your own per-project themes• Creating your own default shape styles• Creating wireframes on the iPad• Porting your prototype to be used in a browser -
Testing a prototype on the iPhone• And many other hidden gems and uses of Keynote
that you didn't know about
LANYARRRD
Back
Check In
10:00 AMCARRIER 3G
Keynote Kung-Fu...Saturday, July 16th, 2011 at 2:00pmKeynote Kung-Fu: Black Belt
You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage:
• Creating motion graphics and animation• Advanced animation controls and timing• Creating your own per-project themes• Creating your own default shape styles• Creating wireframes on the iPad• Porting your prototype to be used in a browser -
Testing a prototype on the iPhone• And many other hidden gems and uses of Keynote
that you didn't know about
LANYARRRD
Back
Check In
10:00 AMCARRIER 3G
Keynote Kung-Fu...Saturday, July 16th, 2011 at 2:00pmKeynote Kung-Fu: Black Belt
You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage:
• Creating motion graphics and animation• Advanced animation controls and timing• Creating your own per-project themes• Creating your own default shape styles• Creating wireframes on the iPad• Porting your prototype to be used in a browser -
Testing a prototype on the iPhone• And many other hidden gems and uses of Keynote
that you didn't know about
LANYARRRD
Back
Check In
10:00 AMCARRIER 3G
Keynote Kung-Fu...Saturday, July 16th, 2011 at 2:00pmKeynote Kung-Fu: Black Belt
You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage:
• Creating motion graphics and animation• Advanced animation controls and timing• Creating your own per-project themes• Creating your own default shape styles• Creating wireframes on the iPad• Porting your prototype to be used in a browser -
Testing a prototype on the iPhone• And many other hidden gems and uses of Keynote
that you didn't know about
LANYARRRD
Back
Check In
This is a native shape, so changing the color is easy.
LANYARRRD
What are you doing?
Check InCancel Check In
Keynote Kung-Fu: Black Belt
Twitter Value
Share
ON
ON
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
But this is a Pictos icon...
LANYARRRD
What are you doing?
Check InCancel Check In
Keynote Kung-Fu: Black Belt
Twitter Value
Share
ON
ON
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
LANYARRRD
What are you doing?
Check InCancel Check In
Keynote Kung-Fu: Black Belt
Twitter Value
Share
ON
ON
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
LANYARRRD
What are you doing?
Check InCancel Check In
Keynote Kung-Fu: Black Belt
Twitter Value
Share
ON
ON
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
LANYARRRD
What are you doing?
Check InCancel Check In
Keynote Kung-Fu: Black Belt
Twitter Value
Share
ON
ON
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
LANYARRRD
What are you doing?
Check InCancel Check In
Keynote Kung-Fu: Black Belt
Twitter Value
Share
ON
ON
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
LANYARRRD
What are you doing?
Check InCancel Check In
Keynote Kung-Fu: Black Belt
Twitter Value
Share
ON
ON
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
Let’s talk about masking..
You could just drop shape from Illustrator, but..
Mail Search Print Radiation
Mail Search Print RadiationWe like just having a single PDF sheet in our toolkit.
Mail Search Print Radiation
Mail Search Print Radiation
Mail Search Print Radiation
Mail Search Print Radiation
Mail Search Print Radiation
Mail Search Print Radiation
Mail Search Print Radiation
Radiation
Arrow Key:Move 1 pixel at a time
Shift+ Arrow Key:Move 10 pixels at a time
Shift+ Drag:Constrain Movement
Shift+ Resize:Resize Proportionally
Option+Resize:Resize from center
Insanely portable
http://www.flickr.com/photos/wicho/4532824380/
http://www.flickr.com/photos/ippei-janine/5804239132/sizes/o/in/photostream/
http://www.flickr.com/photos/jamesreeve/5930449160/sizes/l/in/photostream/
Fully functional*
*if you are working solely on the iPad
The Starbucks factor
You can have any slide size that you want, as long as it’s 1024x768
No “action” builds
No locked objects
No custom master slides
Too bad.
You can’t edit grouped elements
No linking between objects and slides
Button
Button
Button
Button
Button
PROTOTYPING & PRESENTING
We’ve got to show this to someone...how do we do it?
L A N YA R R R DC O N F E R E N C E C O M PA N I O N
forrriPhone
forrriPad
Free to use the app!Free to list your conference!
iPhone Screenshots
iPad Screenshots
Many apps have tried to do this right, Lanyarrrd does it rrrr’ight!
Makes it easier to decide in advance what sessions to attend.
I was able to sort all conferences by “gaming” and find what interests me!
Everyone makes these for iPhones, THANK YOU for an iPad version.
About | Support | Contacta L A N YA R R R D e n d e a v ’ a r r r r
10:00 AM
iPad
Conferences Nearby2:00pm
10:00 AMCARRIER 3G
Conferences Nearby
July 14-16 in Dallas TX
Search For Other Conferences
Search Conferences
I’m There
We’ve got to show this to someone...how do we do it?
We could just press play in Keynote, but that misses the context
It needs to be here
So let’s slice it up!
Travis’s Deck
Normally when wireframing, you focus on creating pages and layouts
Travis’s Deck
Instead of creating pages, create logical groups, or chunks of
functionality
Now we have our slices. Wrap them in some really simple HTML
Travis’s Deck
What about interactivity? Like a modal window for example
Travis’s Deck
Please Register
Travis’s Deck
Please Register
COPY
Just paste into Photoshop as a smart object.
Now, with just a little bit of JS, you have full interactivity
CLICK
Now, with just a little bit of JS, you have full interactivity
CLICK
Please Register
Now, with just a little bit of JS, you have full interactivity
http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/
Presenting on the iPad
Limited by file size
FACEPALM
Dropbox
TAP
The slide action is disruptive to the prototype
Let’s try iBooks!
Let’s try GoodReader
It looks complex upon initial view...
Looks promising.
Looks promising. TAP
Nailed it.
Worth mentioning:
THE PITCH & PROMOTION
DESIGN THINKING
AnnotateAnnotate
Annotate
Annotate
NOT a list
Day of
Before or After
Silhouette
Silhouette
LANYARRRD
LANYARRRD
Responsive Web Design““
LANYARRRD
LANYARRRD
LANYARRRD
TELL A STORY
OutlineWelcome
Advanced AnimationCustom ThemesKeynote on iOS
PrototypingSlide DimensionsDivision of Labor
Hacks & TipsClosing
StorySetting UpIdeationWireframingPrototypingDisplayPitchPromotion
Animation& Keynote Video
LANYARRRD
Management Conference
5,000 Employees
“2 weeks from now”
Management Conference
5,000 Employees
“2 weeks from now”
We dont...video.
Management Conference
5,000 Employees
“2 weeks from now”
LANYARRRD
Builds - In / Out (automated)Transition-like animations
Actions (manual)Everything once on the slide
Actions (manual)Everything once on the slide
Actions (manual)Everything once on the slide
Actions (manual)Everything once on the slide
Actions (manual)Everything once on the slide
Actions (manual)Everything once on the slide
Actions (manual)Everything once on the slide
Actions (manual)Everything once on the slide
Builder Order Draweris your friend
Builder Order Draweris your friend
Builder Order Draweris your friend
Builder Order Draweris your friend
Order...
Start...
Start...
Delay...
Duration...
AMAZING TRANSITION
Sorry, Slideshare. You had to be there for this
one.
AMAZING TRANSITION
(Animation)
You could animate the group...
2:00pm
Keynote Kung-Fu: Black Belt Travis Isaacs & Dustin Askins Trinity Ballroom
Game User Research Heather Desurvire Addison Lecture Hall
Slay The Legacy Code Beast Caleb Jenkins Chinaberry Room
10:00 AM
CARRIER 3G
Big Design Conference
TODAY
2:00pm
Keynote Kung-Fu: Black Belt Travis Isaacs & Dustin Askins Trinity Ballroom
Game User Research Heather Desurvire Addison Lecture Hall
Slay The Legacy Code Beast Caleb Jenkins Chinaberry Room
10:00 AM
CARRIER 3G
Big Design Conference
TODAY
But there a lot of moving parts, could get
messy..
Instead, we like to animate a PDF
PDF Keynote
If this is no big deal to you..
BLACK BELT
BLACK BELT
You might be a black belt already
This can get crazy to manage
slide1
slide2
slide1
slide2This animation actually has two distinct parts
slide1
slide2
slide1
slide2The zoom, and the title
wipe..
slide1
slide2
slide1
slide2
So we’ll split them up over two slides.
slide1
slide2Invisible Transition
This will make the slide auto-advance
The zoom animation stays here
Automatically transition to this slide...
66
5
50
3
3
Keynote Quicktime
You may need iMovie to fade music in/out
L A N YA R R R DC O N F E R E N C E C O M PA N I O N
forrriPhone
forrriPad
Free to use the app!
Free to list your conference!
!
iPhone Screenshots
iPad Screenshots
Many apps have tried to do this right, Lanyarrrd does it rrrr’ight!
Makes it easier to decide in advance what sessions to attend.
I was able to sort all conferences by “gaming” and find what interests me!
Everyone makes these for iPhones, THANK YOU for an iPad version.
About | Support | Contact
a L A N YA R R R D e n d e a v ’ a r r r r
@tbisaacs @dustinaskins @improving keynotekungfu.com
!"#$%#?
@tbisaacs @dustinaskins @improving keynotekungfu.com
!"#$%#?if there’s time...