Download pdf - Keynote Kung-Fu: How to wireframe like a ninja

KEYNOTE

KUNG-FU

HOW NINJAS WIREFRAME

@tbisaacs

improvingby day

by night

@tbisaacs

app.com

Windows

XHTML

CSS

PHP

JavaScript

Mac OS X

User Interface Design

Interaction Design

Information Design

Data Visualization

Photography

Information Architecture

Design Research

My name is Travis, and I make

“wireframes” with Keynote.

I’m not an IA

!

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

SEND

Save for later or Cancel

Travis Isaacs555 Maple Street

Anywhere, TX 76054COMPANY LOGO

KIND QTY DESCRIPTION PRICE TOTAL

$100 $0.00HRS

Subtotal $0.00

Tax (8.75%) $0.00

Freight $0.00

Total 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

mailto:[email protected]

mailto:[email protected]

SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

FEB

7 2010

7 8 9 10 11 12 13

FEB

14 2010

14 15 16 17 18 19 20

FEB

21 2010

21 22 23 24 25 26 27

FEB

28 2010

28 1 2 3 4 5 6

MAR

7 2010

7 8 9 10 11 12 13

MAR

142010

14 15 16 17 18 19 20

MAR

282010

21 22 23 24 25 26 28

DAY WEEK Creative NEWMid-Cities (50)

Morning breakfast special

99 cent fountain drinks


Beer and 8lb ice

Default image

SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

FEB

7 2010

7 8 9 10 11 12 13

FEB

14 2010

14 15 16 17 18 19 20

FEB

21 2010

21 22 23 24 25 26 27

FEB

28 2010

28 1 2 3 4 5 6

MAR

7 2010

7 8 9 10 11 12 13

MAR

142010

14 15 16 17 18 19 20

MAR

282010

21 22 23 24 25 26 28

DAY WEEK Creative NEWMid-Cities (50)




Beer and 8lb ice

Default image

CLICK

12 AM 4 AM 8 AM NOON 4 PM 8PM

SUN2/7/10

MON2/8/10

TUE2/9/10

WED2/10/10

THU2/11/10

FRI2/12/10

SAT2/13/10

WEEKDAY Creative NEWMid-Cities (50)




Beer and 8lb ice

Default image


SUN2/7/10

MON2/8/10

TUE2/9/10

WED2/10/10

THU2/11/10

FRI2/12/10

SAT2/13/10





Beer and 8lb ice

Default image

CLICK


SUN2/7/10

MON2/8/10

TUE2/9/10

WED2/10/10

THU2/11/10

FRI2/12/10

SAT2/13/10





Beer and 8lb ice

Default image

Edit Schedule

SAVE or Cancel


Start at: Midnight for 3 hours

12:00 am to 3:00 am

Repeats: Weekly

Repeats forever

Repeats until:

S M T W T F S

Start date: 2/12/2010

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





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



Save or Cancel


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


17

22

0

3

100

10

10

5

0

0

Windows1440

External Doors1450

Add Item Take-off complete




Save or Cancel


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



17

22

0

3

100

10

10

5

0

0

Windows1440

External Doors1450

Add ItemCLICK Take-off complete



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 Heightx

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”


Add artwork to get started!

Image description

Width Heightx

ADD

Add More Artwork


Image size

Mat Dimensions: 11 1/4” x 9 1/4”




Grandparents

10”x8”


10” 8”

Click


Mat Dimensions: 27” x 16”

F1: Add Artwork

Image description

Width Heightx

ADD

Add More Artwork


Image size

2: Photo of Grandparents



2: Grandparents10” x 8”




F1: Add Artwork

Image description

Width Heightx

ADD

Add More Artwork


Image size






Click



F1: Add Artwork





Image description

Width Heightx

SAVE



Image size

Add more artwork

Delete

4”

4”

2”

3”

Grandparents

10”x8”


10” 8”



F1: Add Artwork





Image description

Width Heightx

SAVE



Image size

Add more artwork

Delete

4”

4”

2”

3”

Grandparents

10”x8”


10” 8”

I can make edits here...



F1: Add Artwork





Image description

Width Heightx

SAVE



Image size

Add more artwork

Delete

4”

4”

2”

3”

Grandparents

10”x8”


10” 8”

...Or by clicking on a dimension

3”4”



F1: Add Artwork





Image description

Width Heightx

SAVE



Image size

Add more artwork

Delete

4”

4”

2”

3”

Grandparents

10”x8”


10” 8”Or by dragging the corners

All Things ConsideredMuybridge: The Man Who Made Pictures Move

Radio By Location

Radio near Dallas, TX (88 stations)

88.1 FM The One (KNTU) - It’s All About JazzPublic, Denton TX

88.5 FM KEOM - Your Community Leader70’s, Mesquite TX

89.3 FM KNON - The Voice of The PeopleCommunity, Dallas TX

89.7 FM POWER FM (KVRK) - The Christian....Christian Rock, Sanger TX

NOW: Adrian Hummel

90.1 FM KERAPublic, Dallas TX

NOW: All Things Considered

90.5 FM KAWZ - Where God’s Word is HeardChristian, Irving TX

NOW: KCBI Music Marathon

90.9 FM KCBIChristian Contemporary, Dallas TX

91.7 FM KXT - Music to the CoreEclectic, Dallas TX

NOW: KXT Afternoon-Evening Show

92.5 FM Lone Star 92.5 (KZPS)Classic Rock, Dallas TX

EDGE

3G

3G

WIFI

3G

WIFI

EDGE

3G

3G

LISTEN

LISTEN

All Things ConsideredMuybridge: The Man Who Made Pictures Move

Radio 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

My design process

WIREFRAMEKeynote baby!

PROTOTYPE HTML, CSS, jQuery, 960.gs

COMPPhotoshop

SKETCHPencil & Paper

FIDELITY

capturing ideas and sketching lo-fi interfaces

My design process



COMPPhotoshop


FIDELITY

Design the foundation (lots of iterating)

My design process



COMPPhotoshop


FIDELITY

Refine the aesthetics

My design process



COMPPhotoshop


FIDELITY

Polish the interactions

EASY FOR CLIENTSTO UNDERSTAND

HARD FOR CLIENTSTO UNDERSTAND

HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER



HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

WIREFRAME



HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

WIREFRAME

HI-FIDELITY COMP



HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

WIREFRAME

HI-FIDELITY COMPPROTOTYPE



HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

WIREFRAME

HI-FIDELITY WIREFRAME




HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

WIREFRAME



WIN:High Fidelity Wireframes



HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

WIREFRAME



WIN:

Relatively cheap to create Easy to throw awayEnough fidelity for clients to visualize the end-resultLess time describing functionality

High Fidelity Wireframes



HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

WIREFRAME



RISKS:

Wireframes that are “too designed” distract the client from the “big

picture” concepts.

WIN




HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

WIREFRAME



RISKS:



WIN




HA

RD

FOR

DE

SIG

NE

RE

AS

Y FO

R D

ES

IGN

ER

WIREFRAME



RISKS:



WIN


My design process



COMPPhotoshop


FIDELITY

My design process



COMPPhotoshop


FIDELITY

Lot’s of friction

Lot’s of friction

Why Keynote?

It’s $79 bucks

Gorgeous presentations

Powerful Drawing Tools

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



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):




Dr. Newsom 12 orders waiting to be sent

LEFT FOOT RIGHT FOOT

SCAN SCAN

NEW SCAN FOR: Patient name (you can change this later) LOOKUP CANCEL SCAN

Primitive Shapes

Pen toolAWESOME!


Solid fill

Gradient fill

Radial gradients

Image fill

Alpha transparency

Instant Web 2.0OMG BBQ

Drop shadowand text shadow, woohoo!


Full-featured type control


功夫MASTERIN 12 EASY LESSONS

BECOME A KEYNOTE KUNG-FU

Tell a story

Use your wireframes for gaining consensus and alignment.

Take your audience along with you - show them how you came to a conclusion.

LESSON 1

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

http://slideshare.net/tbisaacs/influencing-change-through-presentations








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

Describe how I get from point A to B

Visually narrate the interface details

Imagine that your wireframes are a flip-book. Walk your audience through each interaction frame-by-frame.

LESSON 2

Travis Isaacs

Travis Isaacs CLICK

Travis Isaacs

Change your name

Change your photo

Log out

DRAG

Show Page Movement

DRAG

Show Page Movement

CLICK TAP SWIPEPINCH

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

Create a library of components

Store common UI components like buttons, form controls, tabs, text treatments, etc.

LESSON 4

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

LESSON 5

1

or alt + ⌘ + c

2

or alt + ⌘ + v

3

:)

Group items whenever possible

Grouped items are easier to move, delete, and manipulate.

LESSON 6

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

LESSON 7

Copy Style

Paste Style

Group

Un-Group

Insert (Choose)

New Slide

Fonts

Tables are for more than just data

Tables make great guides. Use them to evenly divide areas.

Oh, they are great for data too (ever tried to mockup a table in Photoshop?)

LESSON 8

88.1 FM The One (KNTU) - It’s All About JazzPublic, Denton TX

88.5 FM KEOM - Your Community Leader70’s, Mesquite TX

89.3 FM KNON - The Voice of The PeopleCommunity, Dallas TX

89.7 FM POWER FM (KVRK) - The Christian....Christian Rock, Sanger TX

NOW: Adrian Hummel

90.1 FM KERAPublic, Dallas TX

NOW: All Things Considered

90.5 FM KAWZ - Where God’s Word is HeardChristian, Irving TX

NOW: KCBI Music Marathon

90.9 FM KCBIChristian Contemporary, Dallas TX

91.7 FM KXT - Music to the CoreEclectic, Dallas TX

NOW: KXT Afternoon-Evening Show

92.5 FM Lone Star 92.5 (KZPS)Classic Rock, Dallas TX

SettingsSports

TalkMusicRadio By Location

SettingsSports

TalkMusicRadio By Location

SettingsSports TalkMusicRadio By Location

SettingsSports TalkMusicRadio By Location

Add text to shape layer whenever possible

Add text directly inside the shape instead of creating a shape and creating text. It’s easier to adjust the size and it’s one less group that you have to worry about.

LESSON 9

Shape and text are separate layers

Text is in shape layer

Keep your theme lean

Delete unused master slides to reduce the size of your .key file.

LESSON 10

Swap between Photoshop/Illustrator with ease

Need to make some edits that can’t be done in Keynote? Just copy and paste your object or group into Illustrator or Photoshop.

Pasted items become smart objects in Photoshop, or paths in Illustrator.

LESSON 11

Don’t limit yourself to gray boxes

Capture your ideas in whatever fidelity that tells your story. Don’t be afraid to add some visual appeal to your wireframes.

LESSON 12

Submit

Submit

Submit

border-radius

text-shadow

box-shadow

-webkit-gradient-moz-linear-gradient

Option 1

Option 2

Option 3

Label:

Yes

No

Option 1

Option 2

ON

OFF

Button Button

Please select...

Please Select

Leave a comment:

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

Last Name First Name Email

Isaacs Travis [email protected]




Last Name First Name Email





Window Title

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.

These are mainly just to copy styles from (option + ⌘ + c)

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 2

Heading Level 3

Heading Level 4

IMAGE

HD VIDEO

CLICK TAP

SWIPE

PINCHJust a friendly reminder

Window Title

at keynotekungfu.comONLY $12

@tbisaacstravisisaacs.comslideshare.net/tbisaacs