Keynote Kung-Fu: How to wireframe like a ninja

KEYNOTE

KUNG-FU

HOW NINJAS WIREFRAME

@tbisaacs

improvingby day

by night

@tbisaacs

app.com

Windows

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

Settings Help Sign OutBlinksale Travis Isaacs

Dashboard ClientsInvoices & EstimatesProjects Team

Invoice theme:

Theme name

Add to invoice:

Expenses

Services

66 hrs

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? name@example.com Addresses

Convert to estimate

SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

7 2010

7 8 9 10 11 12 13

14 2010

14 15 16 17 18 19 20

21 2010

21 22 23 24 25 26 27

28 2010

28 1 2 3 4 5 6

7 2010

7 8 9 10 11 12 13

142010

14 15 16 17 18 19 20

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

7 2010

7 8 9 10 11 12 13

14 2010

14 15 16 17 18 19 20

21 2010

21 22 23 24 25 26 27

28 2010

28 1 2 3 4 5 6

7 2010

7 8 9 10 11 12 13

142010

14 15 16 17 18 19 20

282010

21 22 23 24 25 26 28

DAY WEEK Creative NEWMid-Cities (50)

Beer and 8lb ice

Default image

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

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

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

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

Windows1440

External Doors1450

Add ItemCLICK Take-off complete

Add Items to Frame I Walls and Joist (#1750 - the Venetian)

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 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 More Artwork

Image size

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

Grandparents

10”x8”

10” 8”

Mat Dimensions: 27” x 16”

F1: Add Artwork

Image description

Width Heightx

Add More Artwork

Image size

2: Photo of Grandparents

2: Grandparents10” x 8”

F1: Add Artwork

Image description

Width Heightx

Add More Artwork

Image size

F1: Add Artwork

Image description

Width Heightx

Image size

Add more artwork

Delete

Grandparents

10”x8”

10” 8”

F1: Add Artwork

Image description

Width Heightx

Image size

Add more artwork

Delete

Grandparents

10”x8”

10” 8”

I can make edits here...

F1: Add Artwork

Image description

Width Heightx

Image size

Add more artwork

Delete

Grandparents

10”x8”

10” 8”

...Or by clicking on a dimension

3”4”

F1: Add Artwork

Image description

Width Heightx

Image size

Add more artwork

Delete

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

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)

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

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

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.

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.

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.

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

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

WIREFRAME

HI-FIDELITY COMP

WIREFRAME

HI-FIDELITY COMPPROTOTYPE

WIREFRAME

HI-FIDELITY WIREFRAME

WIREFRAME

WIN:High Fidelity Wireframes

WIREFRAME

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

High Fidelity Wireframes

WIREFRAME

RISKS:

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

picture” concepts.

WIREFRAME

RISKS:

WIREFRAME

RISKS:

My design process

COMPPhotoshop

FIDELITY

My design process

COMPPhotoshop

FIDELITY

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

http://travisisaacs.com/2008/07/31/information-design-tattoos/

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

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

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

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

or alt + ⌘ + c

or alt + ⌘ + v

Group items whenever possible

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

LESSON 6

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

Un-Group

Insert (Choose)

New Slide

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

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

border-radius

text-shadow

box-shadow

-webkit-gradient-moz-linear-gradient

Option 1

Option 2

Option 3

Label:

Option 1

Option 2

Button Button

Please select...

Please Select

Keynote Kung-Fu: How to wireframe like a ninja

Design

Transcript of Keynote Kung-Fu: How to wireframe like a ninja

Wireframe 3 web

Wireframe Models - Enterprise Architect › resources › user-guides › 15... · Wireframe Models - Wireframe Models 7 August, 2019 Android Wireframe Toolbox The 'Android Wireframing'

Wireframe 2a

Datamine Wireframe

061910 vpfd wireframe

Wireframe 1a

website wireframe

Wireframe and wireframe inspiration

Hubstir wireframe

Wireframe exploration

wireframe prototyping

User Guide Series · User Guide - Wireframe Models 26 July, 2018 Wireframe Models The Wireframe Toolbox pages provide a wide range of icons that you can use in wireframe modeling

Slatebot: Wireframe

GoutChoices WireFrame

Wireframe, Mockup, Prototype

Wireframe Prototype Results: Findings fromwikis.ala.org/webplanning/images/9/93/Wireframe... · 2014. 9. 16. · Wireframe Prototype Results: Findings from Walkthrough and Online

Singlepass Wireframe Renderingjanba/Wireframe/Siggraph06.pdf · Singlepass Wireframe Rendering with Hidden Surface Removal Andreas Bærentzen, Steen Lund Nielsen, Mikkel Gjøl, Bent

Wireframe and Surface Page 1 Wireframe and Surfacebndtechsource.ucoz.com/V5_Online_Docs/Mech_Design/... · The Wireframe and Surface workbench allows you to create wireframe construction

Wireframe 1

Wireframe & Surface_Manual