Keynote Kung-Fu: Black Belt

BLACK BELT

KEYNOTE

KUNG-FU

Travis Isaacs@tbisaacs

KEYNOTE

KUNG-FUHOW NINJAS WIREFRAME

@tbisaacs

KEYNOTE


@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


@tbisaacs



Windows1440

External Doors1450

Framing Labor1460

Electrical1530

HVAC1550

Insulate Walls1600



Paint1800





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


@tbisaacs



Windows1440

External Doors1450

Framing Labor1460

Electrical1530

HVAC1550

Insulate Walls1600



Paint1800






F1: Add Artwork


F1: Add Artwork




Wall Color

Align Distribute

Image description

Width Heighx

SAVE



Image size

Add more artwork

Delete

4”

4”

2”

3”

Grandparents

10”x8”


10” 8”


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


@tbisaacs



Windows1440

External Doors1450

Framing Labor1460

Electrical1530

HVAC1550

Insulate Walls1600



Paint1800






F1: Add Artwork


F1: Add Artwork




Wall Color

Align Distribute

Image description

Width Heighx

SAVE



Image size

Add more artwork

Delete

4”

4”

2”

3”

Grandparents

10”x8”


10” 8”


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

http://slideshare.net/tbisaacs

http://slideshare.net/tbisaacs

I got this

Dustin Askins@dustinaskins

It’s what we do. ™

http://improvingux.com

































































































http://improvingenterprises.com














































































































































































































































































http://keynotekungfu.com/








BLACK BELT

SETTING UP YOUR KEYNOTE ENVIRONMENT

Portrait-oriented

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?

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 Title

404

Window Title

link

Window Title

linklink, Y U NO LINK?

What size should I make my theme?

1024x768

320x480

612x792

768x10241280x720

1280x1656

320x480

1280x1656

1024x768

1280x1024612x792

768x1024

1280x720

320x480

1280x1656

1024x768

1280x1024612x792

768x1024

1280x720

@jacobmorse uses 1024x768 for iPhone design documentation

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?

The Inspector

I expected to be able to “tear” this off

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


DEMO

keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110715-dka-001.key

keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110715-dka-001.key

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










• Screenshots

• Promo video

• Testimonials



• Mobile website






• Launch website

• Launch app

Planning

LANYARRRD

LANYARRRD



• Launch website

• Launch app

Wireframe

Video

SiteLaunch

AppLaunch

LANYARRRD



• Launch website

• Launch app



• 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










• Screenshots

• Promo video

• Testimonials



• Mobile website






• 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

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

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

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

Facebook

Twitter

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...

keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11



LANYARRRD

What are you doing?

Check InCancel Check In

Keynote Kung-Fu: Black Belt

Facebook

Twitter

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

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

PROTOTYPING & PRESENTING

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


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


CLICK

Please Register


http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/

Presenting on the iPad



Limited by file size

FACEPALM

Dropbox

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

LANYARRRD

LANYARRRD

Responsive Web Design““

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”


5,000 Employees


We dont...video.


5,000 Employees


LANYARRRD

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

Actions (manual)Everything once on the slide

Builder Order Draweris your friend

Order...

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

slide2

slide2This animation actually has two distinct parts

slide2

slide2The zoom, and the title

wipe..

slide2

slide2

So we’ll split them up over two slides.

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


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

http://www.youtube.com/watch?v=ahaW8eficzo























@tbisaacs @dustinaskins @improving keynotekungfu.com

!"#$%#?

@tbisaacs @dustinaskins @improving keynotekungfu.com

!"#$%#?if there’s time...

Keynote Kung-Fu: Black Belt

Design

Transcript of Keynote Kung-Fu: Black Belt