Keynote Kung-Fu: Black Belt

KEYNOTEBLACK BELT KUNG-FU

Travis Isaacs@tbisaacs

KEYNOTE INJAS WIREFRAME HOW N KUNG-FU@tbisaacs

Plans Subdivisions Items Options Trade Partner Req uests Take-offs for #175 0 (The Venetian) for a ll elevations and a ll options 1200 Plumbing Fixtures 1400 Frame I Walls and J oists 1440 Windows KEYNOTE EFRAME 1450 External Doors 1460 1530 INJAS WIR HOW N KUNG-FU Framing Labor Electrical 1550 HVAC 1600 Insulate Walls 1610 Sheetrock Materia l 1630 Sheetrock Hang, T ape, Bed, and Textu re 1800 Paint 1810 Stain/Finish Cabin ets 1830 Interior Doors & T rim 1840 Interior Trim L abor@tbisaacs 1870 Insulate Cielin gs

F1: Add Artwork F2: Mats F3: Frames F4: Finishing Plans Subdivisions Items Options TOTAL: $49 Trade Partner Req uests Align Take-offs for #175 0 Distribute (The Venetian) for a I canWall ake mColor 1: Photo of Children ll eleveditnshe d a atio s an e... optio 1200 r ll ns Plumbing Fixtures 2: Photo of Grandparen ts 1400 Frame I Walls and Image J oists Grandparents description 1440 Windows KEYNOTE Im”x e 10ag8”size Wid” 10 th x Heigh 8” EFRAME 1450 External Doors INJAS WIR 4” HOW N KUNG-FU Imrmal condition Noage condition 1460 Framing Labor Imagogtype y Phot e raph 1530 Electrical 2” 1: Children SAVE 10” x 8” 2: Grandparents D 1550 HVAC 10” x 8” Add more artwork 1600 Insulate Walls 1610 Sheetrock Materia 4” l 1630 Sheetrock Hang, T ape, Bed, and Textu re Mat Dimensions: 27” x 1800 Paint 16” 3” 1810 Stain/Finish Cabin ets 1830 Interior Doors & T rim 1840 Interior Trim L abor@tbisaacs 1870 Insulate Cielin gs

F1: Add Artwork F2: Mats F3: Frames F4: Finishing Plans Subdivisions Items Options TOTAL: $49 Trade Partner Req uests Align Take-offs for #175 0 Distribute (The Venetian) for a I canWall ake mColor 1: Photo of Children ll eleveditnshe d a atio s an e... optio 1200 CARRIER 3G r ll 10:00 AM ns Plumbing Fixtures 2: Photo of Grandparen Accounts tbisaacs New Tweet ts 1400 Frame I Walls and Image J oists Search Timeline Grandparents description 1440 Windows KEYNOTE axbomhyperlink Im”x e 10ag8”size Wid” 10 th x Heigh 8” EFRAME I must say, I love wireframing in 1450 External Doors 1 hour INJAS WIR #keynotekungfu http://uxa.se/kkfu - 2 more pages, then 4” to #blonski off HOW N KUNG-FU Imrmal condition Noage condition 1460 Framing Labor Imagogtype y Phot e raph annettepriest prototyping for iPhone and about to 1530 Electrical 2” 1: Children compare Mockapp.com with 1 hour SAVE 10” x 8” 2: Grandparents Keynotekungfu.com. Should be an D interesting battle. 1550 HVAC 10” x 8” Add more artwork 1600 Insulate Walls gldnspud Verdict: http://keynotekungfu.com is 1 hour AWESOME. Thank you @tbisaacs!!! 1610 Sheetrock Materia 4” l 1630 Sheetrock Hang, T ape, Bed, and Textu re Mat Dimensions: 27” x @ 1800 Paint 16” 3” 1810 Stain/Finish Cabin ets 1830 Interior Doors & T rim 1840 Interior Trim L abor@tbisaacs 1870 Insulate Cielin gs

F1: Add Artwork F2: Mats F3: Frames F4: Finishing Plans Subdivisions Items Options TOTAL: $49 Trade Partner Req uests Align Take-offs for #175 0 Distribute (The Venetian) for a I canWall ake mColor 1: Photo of Children ll eleveditnshe d a atio s an e... optio 1200 CARRIER 3G r ll 10:00 AM ns Plumbing Fixtures 2: Photo of Grandparen Accounts tbisaacs New Tweet ts 1400 Frame I Walls and Image J oists Search Timeline Grandparents description 1440 Windows KEYNOTE axbomhyperlink Im”x e 10ag8”size Wid” 10 th x Heigh 8” EFRAME I must say, I love wireframing in 1450 External Doors 1 hour INJAS WIR #keynotekungfu http://uxa.se/kkfu - 2 more pages, then 4” to #blonski off HOW N KUNG-FU slideshare.net/tbisaacs Imrmal condition Noage condition 1460 Framing Labor Imagogtype y Phot e raph annettepriest prototyping for iPhone and about to 1530 Electrical 2” 1: Children compare Mockapp.com with 1 hour SAVE 10” x 8” 2: Grandparents Keynotekungfu.com. Should be an D interesting battle. 1550 HVAC 10” x 8” Add more artwork 1600 Insulate Walls gldnspud Verdict: http://keynotekungfu.com is 1 hour AWESOME. Thank you @tbisaacs!!! 1610 Sheetrock Materia 4” l 1630 Sheetrock Hang, T ape, Bed, and Textu re Mat Dimensions: 27” x @ 1800 Paint 16” 3” 1810 Stain/Finish Cabin ets 1830 Interior Doors & T rim 1840 Interior Trim L abor@tbisaacs 1870 Insulate Cielin gs

I got this

Dustin Askins@dustinaskins

It’s what we do. ™

BLACK BELT

NVIRONMENT R KEYNOTE ES ETTING UP YOU

Portrait-oriented

Corporate docs

Project specific

Keynote Kung-Fu

REDACTEDREDACTED HUGE TIME SAVER

This thumbnail comesfrom the first slide of the deck.

Every new file starts with the same masters

What if I want todelete this theme?

Useful when you need a clean starting point, or to capture a one-off idea.

Blank.kth Blank.zip

51 KB.

These can safely be ignored

3.3 MB for a blank theme!

Dustin’s “Augmented”Toolkit

Window Title404

Window Titlelink

Window Title linklink, Y U NO LINK?

What size should I make my theme?

768x10241024x768 1280x720 320x480 612x792 1280x1656

320x48 0 768x10241024x768 1280x720 612x79 1280x1024 1280x165 2 6

320x48 0 768x10241024x768 1280x720 @jacobmorse uses 1024x768 for iPhone design 612x79 1280x1024 1280x165 documentation 2 6

768x10241024x768 1280x720 320x480 612x792 1280x1656

Perfectly prints on astandard sheet of paper

768x10241024x768 1280x720 320x480 612x792 1280x1656

Also perfectly prints on astandard sheet of paper

SIMPLETO MAKE

1024x768

768x10241024x768 1280x720 320x480 612x792 1280x1656

Copy PasteOriginal 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?

The Inspector

I expected to be able to “tear” this off

Then one day...

CK I LIKCLCC

7 instances

All I really need

L A N YA R R R D C O N F E R E N C E C O M PA N I O N

DEMO L A N YA R R R D C O N F E R E N C E C O M PA N I O N

IDE ATION

Notes Microframes Planning Wireframing Pitch

“Ideation”Notes Microframes Planning

Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin AskinsBrief To wireframe...An iPhone or Android, preferably iPhone, application that can be used to ﬁnd • Desktop websiteconferences beforehand and day of when attending--so many apps get this part wrong, • Mobile website What to do?you have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone application Who’s there?Once you’re there, browse the schedule, get session info, mark sessions you’re • iPad applicationinterested in, and check-in to sessions once there. • Storyboad the video...Branding / Logo• Some kind of badge-like logo• Conference Companion Timeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.”• On the site, “forrr iPhone” “forrr iPad” What’s said?Website• App store link• Screenshots• Promo video• Testimonials• Mention that it’s free to use and free to list

Notes&Work

Microframing

Too big?

Called fortoo much detail

Less DetailMore Rapid Less Paper

Label Label

Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin AskinsBrief To wireframe...An iPhone or Android, preferably iPhone, application that can be used to ﬁnd • Desktop website Dconferences R LANY A R R beforehand and day of when attending--so many apps get this part wrong, • Mobile websiteyou have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone applicationOnce you’re there, browse the schedule, get session info, mark sessions you’re • iPad applicationinterested in, and check-in to sessions once there. • Storyboad the video...Branding / Logo• Some kind of badge-like logo• Conference Companion Timeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.”• On the site, “forrr iPhone” “forrr iPad”Website• App store link Planning• Screenshots• Promo video• Testimonials• Mention that it’s free to use and free to list

Timeline wireframe • Two weeks to create video • One week to D ARRRLANY • Launch web site • Launch app

Timeline wireframe • Two weeks to create video • One week to D ARRRLANY • Launch web site • Launch app WireframeVideo Site App Launch Launch

Timeline• Two weeks to wireframe• One week to create video• Launch website• Launch app WireframeVideo Site App Launch Launch

Notes, Timeline & Work

PROTOTYPESW IREFRAMES &

Let’s review master slides KEYNOTEHOW NINJAS WIREFRAME KUNG-FU

LESSON 3Use master slides for pagelayouts/typesAvoid endless cut-and-paste by puttingstatic elements, like navigation,backgrounds, and site “chrome” in masterslides.Master slides are free, use as many as youwant!

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+ masters Cumbersome to manage118 slides150MB file

Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin AskinsBrief To wireframe...An iPhone or Android, preferably iPhone, application that can be used to ﬁnd • Desktop website Dconferences R LANY A R R beforehand and day of when attending--so many apps get this part wrong, • Mobile websiteyou have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone applicationOnce you’re there, browse the schedule, get session info, mark sessions you’re • iPad applicationinterested in, and check-in to sessions once there. • Storyboad the video...Branding / Logo• Some kind of badge-like logo• Conference Companion Timeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app 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

Private Public Activity Published to.. Redacted Activity Redacted Redacted Redacted Reda Managed by me RedactedOur notes inform a high- Redacted level “story board” Activity Redacted Redacted Activity Published to.. Redacted Published to.. Redacted Redacted Redacted Activity Redacted Redacted Managed by me Activity Redacted Redacted Redacted Redac

Storyboard elements become groups of functionality

Divide &Conquer

The required master slides will automatically come along when you drag

1 23 4 Travis’s Deck Dustin’s Deck5 1 2 Merged Deck 3 4 5

wo rking IN a theme file vsworking FROM a theme file

preference

Wireframing != Visual Design

D ARRRLANY CARRIER 3G 10:00 AM Back Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now its 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 didnt know about Check In

This is a native shape, so changing the color is easy. D ARRRLANY CARRIER 3G 10:00 AM Back Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now its 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 didnt know about Check In

D ARRRLANY Cancel Check In Check In Keynote Kung-Fu: Black Belt What are you doing? But this is a Pictos icon... Share Facebook ON Twitter ON Twitter Value 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

D ARRRLANY Cancel Check In Check In Keynote Kung-Fu: Black Belt What are you doing? Share Facebook ON Twitter ON Twitter Value 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

We like just having a single Mail Search Print Radiation PDF sheet in our toolkit.

Mail Search Print Radiation

Radiat

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 fromcenter

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 slidesize 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 betweenobjects and slides

Button

& PRES ENTINGPROTOTYPING

We’ve got to show this tosomeone...how do we do it?

iPad 10:00 AM Conferenc es Nearby We’ve got to show this to 2:00pm someone...how do we do it?CARRIER 3G 10:00 AM Conferences Nearby forrr iPhone forrr iPad L A N YA R R R D July 14-16 in Dallas TX CONFERE NCE COM PA N I O N  Free to use th e app! Free to list yo ur conference ! iPhone Scree nshots I’m There Many apps h ave tried to d Lanyarrrd d o this right, oes it rrrr’ig ht! iPad Screens hots Makes it easi nces er to decide in Search For Other Confere what session s to attend. advance rch Conferences I was able

We could just press play in Keynote, but that misses the context

It needs to be here

So let’s slice it up!

Normally when wireframing, youfocus on creating pages and layouts Travis’s Deck

Instead of creating pages, create logical groups, or chunks of functionality Travis’s Deck

Now we have our slices. Wrap them in some really simple HTML

What about interactivity? Like a modal window for example Travis’s Deck

Please Register Travis’s Deck

PYPlease Register CO Travis’s Deck

Just paste into Photoshop as a smart object.

Now, with just a little bit of JS, you have full interactivity

Now, with just a little bit of JS, you have full interactivity C LI CK

Now, with just a little bit of JS, you have full interactivityPlease Register C LI CK

Presenting on the iPadhttp://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/

Limited by file size

FACEPALM

Dropbox

The slideaction isdisruptive tothe prototype

Let’s try iBooks!

Let’s try GoodReader

It looks complex upon initial view...

Looks promising.

Looks promising. TAP

Nailed it.

Worth mentioning:

PROM OTIONTHE PITCH &

DESIGN THINKING

AnnotateAnnotate Annotate Annotate

NOT a list

Day of

Before or After

Silhouette

D ARRRLANY

D ARRRLANY “ “ Responsive Web Design

D ARRRLANY

TELL A STORY

Outline Story Welcome Setting UpAdvanced Animation Ideation Custom Themes Wireframing Keynote on iOS Prototyping Prototyping Display Slide Dimensions Pitch Division of Labor Promotion Hacks & Tips Closing

Animation& Keynote Video

D ARRRLANY

Management Conference 5,000 Employees “2 weeks from now”

Management Conference We dont... 5,000 video. Employees “2 weeks from now”

Management Conference 5,000 Employees “2 weeks from now”

D ARRRLANY

Builds - In / Out (automated)Transition-like animations

Actions (manual)Everything once on the slide

Builder Order Draweris your friend

Order...

Start...

Delay...

Duration...

Sorry, Slideshare. You had to be there for this one.AMAZING TRANSITION

AMAZING TRANSITION

(Animation)

You could animate the group...

10:00 AMCARRIER 3G Big Design Conference TODAY2: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

But there AMlot of 10:00 a moving parts, could getCARRIER 3G messy.. Big Design Conference TODAY2: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

Instead, we like to animate a PDF

PDF Keynote

If this is no big deal to you..

BLACK BELT

You might be a black belt alreadyBLACK BELT

This can get crazy to manage

slide2

This animation actually has two distinct parts slide2

slide2

The zoom, and the title wipe.. slide2

slide2

So we’ll split them up over two slides. slide2

Invisible Transition slide2

This will make the slide auto-advance

The zoom animation stays here

Automaticallytransition to this slide...

6655033

Keynote Quicktime

You may need iMovie to fade music in/out

forrr forrr iPhone iPad L A N YA R R R D C O N F E R E N C E C O M PA N I O N ! Free to use the app! Free to list your conference!iPhone Screenshots Many apps have tried to do this right, Lanyarrrd does it rrrr’ight!

?@tbisaacs @dustinaskins @improving keynotekungfu.com

if there’s time... ?@tbisaacs @dustinaskins @improving keynotekungfu.com

http://keynotekungfu.com	149319
http://blog.slideshare.net	2173
http://www.keynoteclassroom.com	870
http://www.lucamascaro.info	372
http://nickfloro.com	329
http://localhost:4000	219
http://translate.googleusercontent.com	202
http://keynoteclassroom.com	77
http://www.conseilsmarketing.fr	31
http://blog.frontdeskhq.com	27
http://localhost	23
http://admin.lvh.me:9000	22
http://172.16.143.137	22
http://abtasty.com	18
http://feeds.feedburner.com	9
http://twitter.com	8
http://soup.sindre.at	8
http://tweets.travisisaacs.com	7
http://posterous.com	7
http://www.conseilsmarketing.com	6
http://webcache.googleusercontent.com	5
http://207.46.192.232	4
http://960grid.ru	3
http://ideasgarden.posterous.com	3
http://765-338-6048.www.markedforlifetattoo.com	3
https://twitter.com	3
http://www.KeynoteClassroom.com.	2
http://bo.lt	2
http://131.253.14.66	2
http://www.sososnap.com	2
http://crossfitenclave.com	2
http://tweetedtimes.com	2
http://127.0.0.1:4000	2
http://sandiego.frontdeskhq.com	2
http://alexw.me	1
http://pop.keynotekungfu.com	1
http://paper.li	1
http://wodeshenghuo.com	1
http://mail.markedforlifetattoo.com	1
http://slides.diigo.com	1
http://www.linkedin.com	1
http://snapshot.soso.com	1
http://blog.slideshare.com	1
http://prlog.ru	1
http://san-diego.frontdeskhq.com	1
http://www.diffbot.com&_=1354924928504 HTTP	1
http://www.techgig.com	1
http://98.139.168.220	1
http://keynotekungfu.com HTTP	1
http://zootool.com	1
http://www.google.com	1

Keynote Kung-Fu: Black Belt

by Travis Isaacs

Accessibility

Categories

Upload Details

Usage Rights

57 Embeds 153K

Statistics

Keynote Kung-Fu: Black Belt Presentation Transcript