How to design wireframe like a ninja: Short guide

High Fidelity Wireframes: Relatively cheap to create. Easy to throw away Enough fidelity for clients to visualize the endresult. Less time describing functionality. Use your wireframes for gaining consensus and alignment. Take your audience along with you show them how you came to a conclusion Imagine that your wireframes are a flipbook. Walk your audience through each interaction framebyframe.

KUNG-FU

HOW NINJAS WIREFRAME

@tbisaacs

Design Research

My name is Travis, and I make

“wireframes” with Keynote.

I’m not an IA

!

Settings Help Sign Out

Dashboard Projects Invoices & Estimates Clients Team

Invoice theme:

Theme name Theme name Theme name

Add to invoice:

Hours Expenses Services

SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

Morning breakfast special

99 cent fountain drinks Morning breakfast special Beer and 8lb ice

Default image

SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

Morning breakfast special

99 cent fountain drinks Morning breakfast special Beer and 8lb ice

Default imageCLICK

Morning breakfast special

99 cent fountain drinks Morning breakfast special Beer and 8lb ice

Default image

Morning breakfast special

99 cent fountain drinks Morning breakfast special Beer and 8lb ice

Default imageCLICK

Morning breakfast special

99 cent fountain drinks Morning breakfast special Beer and 8lb ice

Default imageEdit Schedule

Morning breakfast special

Start at: Midnight for 3 hours

12:00 am to 3:00 am

Repeats: Weekly

Repeats foreverRepeats until:

Start date: 2/12/2010

Plans Subdivisions Items Options Trade Partner Requests

Take-offs for #1750 (The Venetian) for all elevations and all options

Plans Subdivisions Items Options Trade Partner Requests

Take-offs for #1750 (The Venetian) for all elevations and all options

Plans Subdivisions Items Options Trade Partner Requests

Take-offs for #1750 (The Venetian) for all elevations and all options

1/4 x 3/4 Flat screen mould LF

10x24 Rough Cedar Rectangle Vent EA

1-1/2 Joist Hanger Nails 50# EA

12in x 200ʼ 6 mil Black Poly EA

12x24 Arch Top Cedar Vent EA

17 22 0 3 100 10 10 5 0 0

Plans Subdivisions Items Options Trade Partner Requests

Take-offs for #1750 (The Venetian) for all elevations and all options

1/4 x 3/4 Flat screen mould LF

10x24 Rough Cedar Rectangle Vent EA

1-1/2 Joist Hanger Nails 50# EA

12in x 200ʼ 6 mil Black Poly EA

12x24 Arch Top Cedar Vent EA

17 22 0 3 100 10 10 5 0 0

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

Select a component class:

F2: Mats F3: Frames F4: Finishing TOTAL: $212.02

Normal condition Photography

F2: Mats F3: Frames F4: Finishing TOTAL: $212.02

Normal condition Photography

Click

F2: Mats F3: Frames F4: Finishing TOTAL: $ 490.29

Image size

2: Photo of Grandparents 1: Photo of Children

F2: Mats F3: Frames F4: Finishing TOTAL: $ 490.29

Image size

2: Photo of Grandparents 1: Photo of Children

F2: Mats F3: Frames F4: Finishing TOTAL: $490.29

Normal condition Photography

F2: Mats F3: Frames F4: Finishing TOTAL: $490.29

Normal condition Photography

I can make edits here

F2: Mats F3: Frames F4: Finishing TOTAL: $490.29

Normal condition Photography

Or by clicking

on a dimension

3”4”

F2: Mats F3: Frames F4: Finishing TOTAL: $490.29

Normal condition Photography

Or by dragging the corners

All Things Considered

Muybridge: 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 KERA

90.5 FM KAWZ - Where God’s Word is Heard

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 Considered

News radio from Washington DC

Add to presets

On live in 3hr 33min

from KNOW-FM 91.1

Similar Shows:

Weekend Edition Sunday

Weekend Edition Saturday

Wait Wait, Don’t Tell Me

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

Muybridge: The Man Who Made Pictures Move

A 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

13

2010

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

13

2010

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

adoptive parents who otherwise wouldn't have a child in their lives,

he says

APR

13

2010

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

capturing ideas and

sketching lo-fi interfaces

EASY FOR CLIENTS

EASY FOR CLIENTS

EASY FOR CLIENTS

COMP

EASY FOR CLIENTS

PROTOTYPE

EASY FOR CLIENTS

HI-FIDELITY COMP

PROTOTYPE

EASY FOR CLIENTS

HI-FIDELITY COMP

PROTOTYPE

WIN:

High Fidelity Wireframes

EASY FOR CLIENTS

HI-FIDELITY COMP

PROTOTYPE

WIN:

Relatively cheap to create

Easy to throw away

Enough fidelity for clients to visualize the end-result

Less time describing functionality

High Fidelity Wireframes

EASY FOR CLIENTS

HI-FIDELITY COMP

PROTOTYPE

RISKS:

Wireframes that are “too designed”

distract the client from the “big

picture” concepts.

WIN

Relatively cheap to create

Easy to throw away

Enough fidelity for clients to visualize the end-result

Less time describing functionality

EASY FOR CLIENTS

HI-FIDELITY COMP

PROTOTYPE

RISKS:

Wireframes that are “too designed”

distract the client from the “big

picture” concepts.

WIN

Relatively cheap to create

Easy to throw away

Enough fidelity for clients to visualize the end-result

Less time describing functionality

EASY FOR CLIENTS

HI-FIDELITY COMP

PROTOTYPE

RISKS:

Wireframes that are “too designed”

distract the client from the “big

picture” concepts.

WIN

Relatively cheap to create

Easy to throw away

Enough fidelity for clients to visualize the end-result

Less time describing functionality

Why Keynote?

It’s $79 bucks

Gorgeous presentations

Powerful Drawing Tools

MARKED FOR LIFE TATTOO CUSTOMER INFORMATION

State ID Employee ID Other photo ID:

Signature ID provided (check one):

Credit/Debit card Calling card

Wholesale membership card Hunting/Fishing license

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

MARKED FOR LIFE TATTOO MODIFICATION INFORMATION

NOTE: The information below is required by the Indiana Health Department All information will kept confidential.

LAST NAME:

IʼM GETTING A:

4 Use the diagram below to indicate where your tattoo(s) or piercing(s) will be located:

FRONT BACK RIGHT EAR LEFT EAR

SIGNATURE:

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

Dr Newsom 12 orders waiting to be sent

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

Solid fill Gradient fill Radial gradients

Image fill

Alpha transparency

Instant Web 2.0

OMG BBQ

Drop shadow

and text shadow, woohoo!

Powerful Drawing Tools

Full-featured

type control

Powerful Drawing Tools

功夫 MASTER

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

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

Hotel or Agency

Batch upload

Enter Info Select Agency

or Property New user

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

CLICK

Travis Isaacs

Change your name Change your photo Log out

Show Page Movement

Show Page Movement

CLICK TAP SWIPE PINCH

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

or alt + ⌘ + c

or alt + ⌘ + v

:)

Group items whenever

Double-click on a grouped

element to edit it

or 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 Leader

70’s, Mesquite TX

89.3 FM KNON - The Voice of The People

Community, 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 Core

Eclectic, Dallas TX NOW: KXT Afternoon-Evening Show 92.5 FM Lone Star 92.5 (KZPS)Classic Rock, Dallas TX

Settings Sports Talk

Music Radio By Location

Settings Sports Talk

Music Radio By Location

Settings Sports Talk

Music Radio By Location

Settings Sports Talk

Music Radio 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 border-radius

text-shadow

box-shadow -webkit-gradient

-moz-linear-gradient

Inactive Tab Inactive Tab

Home » Page 1 » Page 2

Home Page 1 Page 2

Last Name  First Name  Email 

Window Title

Heading Level 1

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

HD VIDEO

at keynotekungfu.com

ONLY $5

travisisaacs.com

slideshare.net/tbisaacs