Keynote Kung-Fu: How Ninjas Wireframe

Slide 1

Slide 1 text

KEYNOTE KUNG-FU HOW NINJAS WIREFRAME @tbisaacs

Slide 2

Slide 2 text

improving by day by night @tbisaacs app.com

Slide 3

Slide 3 text

Windows XHTML CSS PHP JavaScript Mac OS X User Interface Design Interaction Design Information Design Data Visualization Photography Information Architecture Design Research

Slide 4

Slide 4 text

My name is Travis, and I make “wireframes” with Keynote.

Slide 5

Slide 5 text

I’m not an IA !

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

New Settings Help Sign Out Blinksale Travis Isaacs Dashboard Clients Invoices & Estimates Projects 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 Isaacs 555 Maple Street Anywhere, TX 76054 COMPANY LOGO KIND QTY DESCRIPTION PRICE TOTAL $100 $0.00 HRS 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

Slide 9

Slide 9 text

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 14 2010 14 15 16 17 18 19 20 MAR 28 2010 21 22 23 24 25 26 28 DAY WEEK Creative NEW Mid-Cities (50) Morning breakfast special 99 cent fountain drinks Morning breakfast special Beer and 8lb ice Default image

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

12 AM 4 AM 8 AM NOON 4 PM 8PM SUN 2/7/10 MON 2/8/10 TUE 2/9/10 WED 2/10/10 THU 2/11/10 FRI 2/12/10 SAT 2/13/10 WEEK DAY Creative NEW Mid-Cities (50) Morning breakfast special 99 cent fountain drinks Morning breakfast special Beer and 8lb ice Default image Edit Schedule SAVE or Cancel Morning breakfast special 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

Slide 14

Slide 14 text

Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options Plumbing Fixtures 1200 Frame I Walls and Joists 1400 Windows 1440 External Doors 1450 Framing Labor 1460 Electrical 1530 HVAC 1550 Insulate Walls 1600 Sheetrock Material 1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint 1800 Stain/Finish Cabinets 1810 Interior Doors & Trim 1830 Interior Trim Labor 1840

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options Save or Cancel Frame I Walls and Joists 1400 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 1-3/4x16in Level Micro Lamb Ship 3-24ʼ Pcs LF 17 22 0 3 100 10 10 5 0 0 Windows 1440 Add Item Take-off complete Plumbing Fixtures 1200

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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 Appliances Windows Concrete Drywall Flooring Hardware Light Fixtures Plumbing Fixtures Lumber Masonry Select a component class:

Slide 19

Slide 19 text

F2: Mats F3: Frames F4: Finishing TOTAL: $212.02 F1: Add Artwork Add artwork to get started! Image description Width Height x ADD Add More Artwork Image type Image condition Image size Mat Dimensions: 11 1/4” x 9 1/4” 1: Photo of Children 1: Children 10” x 8” Wall Color Align Distribute Grandparents 10”x8” Normal condition Photography 10” 8”

Slide 20

Slide 20 text

Slide 21

Slide 21 text

F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 F1: Add Artwork Mat Dimensions: 27” x 16” F1: Add Artwork Image description Width Height x ADD Add More Artwork Image type Image condition Image size 2: Photo of Grandparents 1: Photo of Children 1: Children 10” x 8” 2: Grandparents 10” x 8” Wall Color Align Distribute

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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: Children 10” x 8” 2: Grandparents 10” x 8” Wall Color Align Distribute Image description Width Height x SAVE 2: Photo of Grandparents Image type Image condition Image size Add more artwork Delete 4” 4” 2” 3” Grandparents 10”x8” Normal condition Photography 10” 8”

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

All Things Considered Muybridge: The Man Who Made Pictures Move Radio near Dallas, TX (88 stations) 88.1 FM The One (KNTU) - It’s All About Jazz Public, Denton TX EDGE LISTEN

Slide 28

Slide 28 text

All Things Considered Muybridge: The Man Who Made Pictures Move All Things Considered News radio from Washington DC Add to presets On live in 3hr 33min from KNOW-FM 91.1 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 13 2010 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 ﬁrst 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. LISTEN LISTEN LISTEN

Slide 29

Slide 29 text

My design process WIREFRAME Keynote baby! PROTOTYPE HTML, CSS, jQuery, 960.gs COMP Photoshop SKETCH Pencil & Paper FIDELITY capturing ideas and sketching lo-fi interfaces

Slide 30

Slide 30 text

My design process WIREFRAME Keynote baby! PROTOTYPE HTML, CSS, jQuery, 960.gs COMP Photoshop SKETCH Pencil & Paper FIDELITY Design the foundation (lots of iterating)

Slide 31

Slide 31 text

My design process WIREFRAME Keynote baby! PROTOTYPE HTML, CSS, jQuery, 960.gs COMP Photoshop SKETCH Pencil & Paper FIDELITY Refine the aesthetics

Slide 32

Slide 32 text

My design process WIREFRAME Keynote baby! PROTOTYPE HTML, CSS, jQuery, 960.gs COMP Photoshop SKETCH Pencil & Paper FIDELITY Polish the interactions

Slide 33

Slide 33 text

EASY FOR CLIENTS TO UNDERSTAND HARD FOR CLIENTS TO UNDERSTAND HARD FOR DESIGNER EASY FOR DESIGNER

Slide 34

Slide 34 text

EASY FOR CLIENTS TO UNDERSTAND HARD FOR CLIENTS TO UNDERSTAND HARD FOR DESIGNER EASY FOR DESIGNER WIREFRAME

Slide 35

Slide 35 text

EASY FOR CLIENTS TO UNDERSTAND HARD FOR CLIENTS TO UNDERSTAND HARD FOR DESIGNER EASY FOR DESIGNER WIREFRAME HI-FIDELITY COMP

Slide 36

Slide 36 text

EASY FOR CLIENTS TO UNDERSTAND HARD FOR CLIENTS TO UNDERSTAND HARD FOR DESIGNER EASY FOR DESIGNER WIREFRAME HI-FIDELITY COMP PROTOTYPE

Slide 37

Slide 37 text

EASY FOR CLIENTS TO UNDERSTAND HARD FOR CLIENTS TO UNDERSTAND HARD FOR DESIGNER EASY FOR DESIGNER WIREFRAME HI-FIDELITY WIREFRAME HI-FIDELITY COMP PROTOTYPE

Slide 38

Slide 38 text

EASY FOR CLIENTS TO UNDERSTAND HARD FOR CLIENTS TO UNDERSTAND HARD FOR DESIGNER EASY FOR DESIGNER WIREFRAME HI-FIDELITY WIREFRAME HI-FIDELITY COMP PROTOTYPE WIN: High Fidelity Wireframes

Slide 39

Slide 39 text

EASY FOR CLIENTS TO UNDERSTAND HARD FOR CLIENTS TO UNDERSTAND HARD FOR DESIGNER EASY FOR DESIGNER WIREFRAME HI-FIDELITY WIREFRAME 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

Slide 40

Slide 40 text

EASY FOR CLIENTS TO UNDERSTAND HARD FOR CLIENTS TO UNDERSTAND HARD FOR DESIGNER EASY FOR DESIGNER WIREFRAME HI-FIDELITY WIREFRAME 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

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

My design process WIREFRAME Keynote baby! PROTOTYPE HTML, CSS, jQuery, 960.gs COMP Photoshop SKETCH Pencil & Paper FIDELITY

Slide 44

Slide 44 text

My design process WIREFRAME Keynote baby! PROTOTYPE HTML, CSS, jQuery, 960.gs COMP Photoshop SKETCH Pencil & Paper FIDELITY Lot’s of friction Lot’s of friction

Slide 45

Slide 45 text

Why Keynote?

Slide 46

Slide 46 text

It’s $79 bucks

Slide 47

Slide 47 text

Gorgeous presentations

Slide 48

Slide 48 text

Powerful Drawing Tools

Slide 49

Slide 49 text

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) LAST NAME: FIRST NAME: 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...

Slide 50

Slide 50 text

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 afﬁrm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge. http:/ /travisisaacs.com/2008/07/31/information-design-tattoos/

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Primitive Shapes Pen tool AWESOME! Powerful Drawing Tools

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Full-featured type control Powerful Drawing Tools

Slide 56

Slide 56 text

ޭ෉ MASTER IN 12 EASY LESSONS BECOME A KEYNOTE KUNG-FU

Slide 57

Slide 57 text

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 Conﬁrm Email Notify Hotel or Agency Welc NEW Terms