Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Keynote Kung-Fu: How Ninjas Wireframe

Travis Isaacs
September 26, 2011

Keynote Kung-Fu: How Ninjas Wireframe

Keynote is a cheap, friction-free tool to create elegant wireframes in a format that’s perfect for presentations, pitches, and hand-offs.

Get the toolkit here: http://keynotekungfu.com

Travis Isaacs

September 26, 2011
Tweet

More Decks by Travis Isaacs

Other Decks in Design

Transcript

  1. Windows XHTML CSS PHP JavaScript Mac OS X User Interface

    Design Interaction Design Information Design Data Visualization Photography Information Architecture Design Research
  2. 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? [email protected] Addresses Convert to estimate
  3. 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
  4. 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 CLICK
  5. 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
  6. 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 CLICK
  7. 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
  8. 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
  9. 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 CLICK
  10. 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
  11. 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 CLICK Take-off complete Plumbing Fixtures 1200
  12. 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:
  13. 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”
  14. 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” Click
  15. 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
  16. 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 Click
  17. 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”
  18. 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” I can make edits here...
  19. 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” ...Or by clicking on a dimension 3”4”
  20. 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” Or by dragging the corners
  21. 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
  22. 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 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. LISTEN LISTEN LISTEN
  23. 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
  24. My design process WIREFRAME Keynote baby! PROTOTYPE HTML, CSS, jQuery,

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

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

    960.gs COMP Photoshop SKETCH Pencil & Paper FIDELITY Polish the interactions
  27. EASY FOR CLIENTS TO UNDERSTAND HARD FOR CLIENTS TO UNDERSTAND

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

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

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

    HARD FOR DESIGNER EASY FOR DESIGNER WIREFRAME HI-FIDELITY WIREFRAME HI-FIDELITY COMP PROTOTYPE
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. My design process WIREFRAME Keynote baby! PROTOTYPE HTML, CSS, jQuery,

    960.gs COMP Photoshop SKETCH Pencil & Paper FIDELITY
  37. 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
  38. 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...
  39. 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. http:/ /travisisaacs.com/2008/07/31/information-design-tattoos/
  40. 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
  41. 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
  42. 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 Hotel or Agency Welc NEW Terms
  43. Hotel or Agency Batch upload Enter Info Select Agency or

    Property New user Verify Email Confirm Email Notify Hotel or Agency Welcome Email New User Overview NEW Terms & Conditions Describe how I get from point A to B
  44. Visually narrate the interface details Imagine that your wireframes are

    a flip-book. Walk your audience through each interaction frame-by-frame. LESSON 2
  45. 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
  46. Create a library of components Store common UI components like

    buttons, form controls, tabs, text treatments, etc. LESSON 4
  47. 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
  48. Learn the keyboard shortcuts Keyboard shortcuts will save you time

    and clicks (and impress your boss). LESSON 7
  49. 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 Jazz Public, 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 Humm 90.1 FM KERA Public, Dallas TX NOW: All Things Con 90.5 FM KAWZ - Where God’s Word is Heard Christian, Irving TX NOW: KCBI Music M 90.9 FM KCBI Christian Contemporary, Dallas TX 91.7 FM KXT - Music to the Core Eclectic, Dallas TX NOW: KXT Afternoo 92.5 FM Lone Star 92.5 (KZPS) Classic Rock, Dallas TX
  50. 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
  51. Keep your theme lean Delete unused master slides to reduce

    the size of your .key file. LESSON 10
  52. 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
  53. 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
  54. Option 1 Option 2 Option 3 Label: Yes No Option

    1 Option 2 ON OFF Button Button Please select... Please Select  Leave a comment:      
  55. Inactive Tab Inactive Tab Inactive Tab Active 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
  56. Last Name  First Name  Email  Isaacs Travis

    [email protected] Isaacs Travis [email protected] Isaacs Travis [email protected] Isaacs Travis [email protected] Last Name  First Name  Email  Isaacs Travis [email protected] Isaacs Travis [email protected] Isaacs Travis [email protected] Isaacs Travis [email protected]
  57. 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) 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 1 Heading Level 2 Heading Level 3 Heading Level 4