Keynote Kung-Fu: Streamlining Your Design Workflow With Keynote

275,067 views

Published on

Travis Isaacs, cre­ator of Keynotekungfu​.com, will teach you how Keynote can accel­er­ate your entire design workflow—from dis­cov­ery, to wire­frames, to pro­to­type. Keynote not only gives you the advan­tage of speed during the design process, but also makes com­mu­ni­cat­ing design think­ing through sto­ry­telling an effort­less task.

Published in: Design, Business, Technology

Keynote Kung-Fu: Streamlining Your Design Workflow With Keynote

  1. 1. KEYNOTE KUNG-FU: Streamlining Your Design Workflow With Keynote. Travis Isaacs1 @tbisaacs #MIMASummit
  2. 2. ! I don’t wireframe.2 @tbisaacs #MIMASummit
  3. 3. 3 @tbisaacs #MIMASummit
  4. 4. 3 @tbisaacs #MIMASummit
  5. 5. Blinksale Travis Isaacs Settings Help Sign Out Dashboard Projects Invoices & Estimates Clients Team NewWho is this for? name@example.com Addresses Travis Isaacs 555 Maple Street COMPANY LOGO Anywhere, TX 76054 SEND Save for later or Cancel SENT 10/09/2009 Add to invoice: Invoice 1411 Due 11/9/2009 (NET 30) Hours 66 hrs KIND QTY DESCRIPTION PRICE TOTAL HRS $100 $0.00 Expenses $433 New line Subtotal $0.00 Services Tax (8.75%) $0.00 Freight $0.00 Total Due $0.00 Convert to estimate Invoice theme: Theme name Invoice notes Theme name Theme name
  6. 6. Plans Subdivisions Items Options Trade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all options 1200 Plumbing Fixtures 1400 Frame I Walls and Joists 1440 Windows 1450 External Doors 1460 Framing Labor 1530 Electrical 1550 HVAC 1600 Insulate Walls 1610 Sheetrock Material 1630 Sheetrock Hang, Tape, Bed, and Texture 1800 Paint 1810 Stain/Finish Cabinets 1830 Interior Doors & Trim 1840 Interior Trim Labor
  7. 7. Plans Subdivisions Items Options Trade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all options 1200 Plumbing Fixtures 1400 Frame I Walls and Joists CLICK 1440 Windows 1450 External Doors 1460 Framing Labor 1530 Electrical 1550 HVAC 1600 Insulate Walls 1610 Sheetrock Material 1630 Sheetrock Hang, Tape, Bed, and Texture 1800 Paint 1810 Stain/Finish Cabinets 1830 Interior Doors & Trim 1840 Interior Trim Labor
  8. 8. Plans Subdivisions Items Options Trade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all options 1200 Plumbing Fixtures 1400 Frame I Walls and Joists Item UOM Quant 1/2x12 Text 104 Siding EA 17 1/4 x 3/4 Flat screen mould LF 22 10x24 Arch Cedar Louver EA 0 10x24 Rough Cedar Rectangle Vent EA 3 1-1/2 Joist Hanger Nails 50# EA 100 12in x 200’ 6 mil Black Poly EA 10 12x12 Text Fcp Lap EA 10 12x24 Arch Top Cedar Vent EA 5 1-3/4x14in Level Micro Lamb Ship 2-19’ Pcs LF 0 1-3/4x16in Level Micro Lamb Ship 3-24’ Pcs LF 0Add Item Take-off complete Save or Cancel 1440 Windows
  9. 9. Plans Subdivisions Items Options Trade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all options 1200 Plumbing Fixtures 1400 Frame I Walls and Joists Item UOM Quant 1/2x12 Text 104 Siding EA 17 1/4 x 3/4 Flat screen mould LF 22 10x24 Arch Cedar Louver EA 0 10x24 Rough Cedar Rectangle Vent EA 3 1-1/2 Joist Hanger Nails 50# EA 100 12in x 200’ 6 mil Black Poly EA 10 12x12 Text Fcp Lap EA 10 12x24 Arch Top Cedar Vent EA 5 1-3/4x14in Level Micro Lamb Ship 2-19’ Pcs LF 0 1-3/4x16in Level Micro Lamb Ship 3-24’ Pcs LF 0Add Item CLICK Take-off complete Save or Cancel 1440 Windows
  10. 10. Plans Subdivisions Items Options Trade Partner RequestsAdd Items to Frame I Walls and Joist (#1750 - the Venetian) Components Labor Rates Fixed-Fee Services Substitution CodeSelect a component class: Appliances Windows Concrete Drywall Flooring CLICK Hardware Light Fixtures Plumbing Fixtures Lumber Masonry
  11. 11. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $212.02 Align Distribute Wall Color 1: Photo of Children Add More Artwork Image Grandparents description 10”x8”size Image Width 10” x Heigh 8” Normalcondition Image condition Image type Photography ADD Add artwork to get started! 1: Children 10” x 8” Mat Dimensions: 11 1/4” x 9 1/4”
  12. 12. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $212.02 Align Distribute Wall Color 1: Photo of Children Add More Artwork Image Grandparents description 10”x8”size Image Width 10” x Heigh 8” Normalcondition Image condition Image type Photography k Clic ADD Add artwork to get started! 1: Children 10” x 8” Mat Dimensions: 11 1/4” x 9 1/4”
  13. 13. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents Add More Artwork Image description Image size Width x Height Image condition Image type 1: Children 2: Grandparents 10” x 8” 10” x 8” ADD Mat Dimensions: 27” x 16”
  14. 14. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents Add More Artwork Image description Image size Width x Height Image condition Image type 1: Children 2: Grandparents ck 10” x 8” Clix 8” 10” ADD Mat Dimensions: 27” x 16”
  15. 15. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents Grandparents Image description 10”x8”size Image Width 10” x Height 8” 4” Normalcondition Image condition Image type Photography 2” SAVE Delete 1: Children 2: Grandparents 10” x 8” 10” x 8” Add more artwork 4” Mat Dimensions: 27” x 16” 3”
  16. 16. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute I can make edits Wall Color 1: Photo of Children here... 2: Photo of Grandparents Grandparents Image description 10”x8”size Image Width 10” x Height 8” 4” Normalcondition Image condition Image type Photography 2” SAVE Delete 1: Children 2: Grandparents 10” x 8” 10” x 8” Add more artwork 4” Mat Dimensions: 27” x 16” 3”
  17. 17. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents ...Or by clicking Grandparents Image description on a dimension 10”x8”size Image Width 10” x Height 8” 4” 3” 4” Image type Photography Normalcondition Image condition 2” SAVE Delete 1: Children 2: Grandparents 10” x 8” 10” x 8” Add more artwork 4” Mat Dimensions: 27” x 16” 3”
  18. 18. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents Grandparents Image description Or by dragging 10”x8”size Image Width 10” x Height 8” the corners 4” Normalcondition Image condition Image type Photography 2” SAVE Delete 1: Children 2: Grandparents 10” x 8” 10” x 8” Add more artwork 4” Mat Dimensions: 27” x 16” 3”
  19. 19. L IC K C Story told by annotations and interactions15 @tbisaacs #MIMASummit
  20. 20. All Things Considered Muybridge: The Man Who Made Pictures Move KERA 90.1 FM All Things Considered (News) Recent Topics More Stations & Times Muybridge: The Man Who Made Pictures Move APR A new exhibition at the Corcoran Gallery of Art in Washington, 13 D.C., looks at the legacy of Eadweard Muybridge, whose LISTEN All Things Considered 2010 sequential photographs of horses at a gallop their movements broken down frame by frame have become iconic News radio from Washington DC Hosts: Robert Siegel, Michele Norris, Online Cartoonist Wins Pulitzer Melissa Block Mark Fiore is a self-syndicating cartoonist whose irreverent online APR animations appear on the San Francisco area news site For two hours every weekday, hosts Robert Siegel, Michele Norris and 13 SFGate.com. Fiore won a Pulitzer yesterday, one of the first two LISTEN 2010 Pulitzers ever awarded to nontraditional media. Judges said his Melissa Block present the programs work set a high standard for an emerging form of commentary. trademark mix of news, interviews, commentaries, reviews, and offbeat At just enough fidelity features. Karadzic Genocide Trial Opens After Months Of Delay On live in 3hr 33min The trial of the former Bosnian Serb leader Radovan Karadzic APR from KNOW-FM 91.1 resumed in The Hague on Tuesday, after months of procedural 13 wrangles. Karadzic faces charges of genocide, crimes against LISTEN 2010 humanity and war crimes relating to the war in the former Add to presets Yugoslavia during the 1990s. Share Russian Adoption Case Belies Many Happy Similar Shows: Adoptions Commentator Eric Weiner says recent adoption scandals involving Weekend Edition Sunday APR Russia and Haiti represent adoption programs poorly. Happy Weekend Edition Saturday 13 families are too often overlooked, and spotlighting only the programs blemishes hurts potential parents and the children they LISTEN Wait Wait, Don’t Tell Me 2010 love. Its not adoptive children who are being saved; its the Living on Earth adoptive parents who otherwise wouldnt have a child in their lives, he says. Here and Now (NPR) Study: Computer Security Measures Not All Worth It A new study by a researcher at Microsoft says that many security APR measures designed to spare people from computer attacks are a 13 giant waste of time and money. Michele Norris speaks with Mark LISTEN 2010 Pothier, a senior assistant business editor for The Boston Globe who has written about the research. Radio By Location Music Sports Talk Settings16 @tbisaacs #MIMASummit
  21. 21. “What can you do to te! the story with the least amount of deliverables?” - Boon Sheridan17 @tbisaacs #MIMASummit
  22. 22. HARD FOR DESIGNER HTML PROTOTYPE DESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTAND TO UNDERSTAND WIREFRAME WIREFRAME EASY FOR DESIGNER18 @tbisaacs #MIMASummit
  23. 23. HARD FOR DESIGNER HTML PROTOTYPE DESIGN DOCUMENT VISUAL COMP “Don’t show clientsEASY FOR CLIENTSTO UNDERSTAND wire$ames. Ever.” HI-FIDELITY WIREFRAME HARD FOR CLIENTS TO UNDERSTAND WIREFRAME - Famous* Designer EASY FOR DESIGNER * on the Internet19 @tbisaacs #MIMASummit
  24. 24. HARD FOR DESIGNER HTML PROTOTYPE DESIGN DOCUMENT VISUAL COMP Agreed. Hide theseEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTAND TO UNDERSTAND WIREFRAME WIREFRAME EASY FOR DESIGNER20 @tbisaacs #MIMASummit
  25. 25. HARD FOR DESIGNER HTML PROTOTYPE DESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTAND TO UNDERSTAND WIREFRAME WIREFRAME EASY FOR DESIGNER Show these early and often21 @tbisaacs #MIMASummit
  26. 26. HARD FOR DESIGNER Ideal , but can be costly to create HTML PROTOTYPE DESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTAND TO UNDERSTAND WIREFRAME WIREFRAME EASY FOR DESIGNER22 @tbisaacs #MIMASummit
  27. 27. HARD FOR DESIGNER Polished, but difficult to describe interaction HTML PROTOTYPE DESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTAND TO UNDERSTAND WIREFRAME WIREFRAME EASY FOR DESIGNER23 @tbisaacs #MIMASummit
  28. 28. HARD FOR DESIGNER HTML PROTOTYPE DESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTAND TO UNDERSTAND WIREFRAME WIREFRAME Enough fidelity, interactive, cheap to create EASY FOR DESIGNER24 @tbisaacs #MIMASummit
  29. 29. It’s $79 $49 $1925 @tbisaacs #MIMASummit
  30. 30. Gorgeous Presentations26 @tbisaacs #MIMASummit
  31. 31. Crazy Portable27 @tbisaacs #MIMASummit
  32. 32. Powerful Drawing Tools28 @tbisaacs #MIMASummit
  33. 33. MARKED FOR LIFE TATTOO CUSTOMER INFORMATION NOTE: The information below is required by the Indiana Health Department. All information will kept confidential.1 LAST NAME: FIRST NAME:2 STREET: CITY: STATE: ZIPCODE: DAYTIME PHONE: - - EVENING PHONE: - - Where this whole34 Keynote thing started... IDENTIFICATION: The Indiana Health Department requires a photo identification and a proof of signature: Photo ID provided (check one): Signature ID provided (check one): Driver’s License Credit/Debit card Student ID Calling card State ID Wholesale membership card Employee ID Hunting/Fishing license Other photo ID: Other: Please attach your ID’s to this form so they can be photocopied. / /5 DATE OF BIRTH: ! If you are under 18, a guardian will need to sign for you (below)6 SIGNATURE: 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) http:/ /travisisaacs.com/2008/07/31/information-design-tattoos/ LAST NAME: FIRST NAME:29 @tbisaacs #MIMASummit
  34. 34. 4 Use the diagram below to indicate where your tattoo(s) or piercing(s) will be located: FRONT BACK RIGHT EAR LEFT EAR http:/ /travisisaacs.com/2008/07/31/information-design-tattoos/5 SIGNATURE: DATE: - -30 @tbisaacs #MIMASummit I hereby affirm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge.
  35. 35. Primitive Shapes31 @tbisaacs #MIMASummit
  36. 36. Solid fill Gradient fill Radial gradients Image fill Alpha transparency32 @tbisaacs #MIMASummit
  37. 37. Full-featured type control33 @tbisaacs #MIMASummit
  38. 38. wirefra me34 @tbisaacs #MIMASummit
  39. 39. inte sketch rvie ws wirefra me project plan notes35 @tbisaacs #MIMASummit
  40. 40. Notes Planning Pitch 1 3 5 2 4 Microframes Wireframing36 @tbisaacs #MIMASummit
  41. 41. Notes Planning Pitch 1 3 5 2 4 Microframes Wireframing37 @tbisaacs #MIMASummit
  42. 42. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin AskinsBrief To wireframe...An iPhone or Android, preferably iPhone, application that can be used to find • Desktop websiteconferences beforehand and day of when attending--so many apps get this part wrong, • Mobile websiteyou have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone applicationOnce you’re there, browse the schedule, get session info, mark sessions you’re • iPad applicationinterested in, and check-in to sessions once there. • Storyboad the video...Branding / Logo• Some kind of badge-like logo• Conference Companion Timeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.”• On the site, “forrr iPhone” “forrr iPad”Website• App store link• Screenshots• Promo video• Testimonials• Mention that it’s free to use and free to list38 @tbisaacs #MIMASummit
  43. 43. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin AskinsBrief To wireframe...An iPhone or Android, preferably iPhone, application that can be used to find • Desktop websiteconferences beforehand and day of when attending--so many apps get this part wrong, • Mobile websiteyou have to search when you’re there at the conference wanting to get info, geo-locate!Once you’re there, browse the schedule, get session info, mark sessions you’re • iPhone application • iPad application Who’s there?interested in, and check-in to sessions once there. • Storyboad the video...Branding / Logo• Some kind of badge-like logo• Conference Companion Timeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.”• On the site, “forrr iPhone” “forrr iPad”Website• App store link• Screenshots• Promo video• Testimonials• Mention that it’s free to use and free to list38 @tbisaacs #MIMASummit
  44. 44. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin AskinsBrief To wireframe...An iPhone or Android, preferably iPhone, application that can be used to find • Desktop websiteconferences beforehand and day of when attending--so many apps get this part wrong, • Mobile websiteyou have to search when you’re there at the conference wanting to get info, geo-locate!Once you’re there, browse the schedule, get session info, mark sessions you’re • iPhone application • iPad application Who’s there?interested in, and check-in to sessions once there. • Storyboad the video...Branding / Logo• Some kind of badge-like logo• Conference Companion Timeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.”• On the site, “forrr iPhone” “forrr iPad” What’s said?Website• App store link• Screenshots• Promo video• Testimonials• Mention that it’s free to use and free to list38 @tbisaacs #MIMASummit
  45. 45. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin AskinsBrief To wireframe...An iPhone or Android, preferably iPhone, application that can be used to find • Desktop websiteconferences beforehand and day of when attending--so many apps get this part wrong, • Mobile website What to do?you have to search when you’re there at the conference wanting to get info, geo-locate!Once you’re there, browse the schedule, get session info, mark sessions you’re • iPhone application Who’s there? • iPad applicationinterested in, and check-in to sessions once there. • Storyboad the video...Branding / Logo• Some kind of badge-like logo• Conference Companion Timeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.”• On the site, “forrr iPhone” “forrr iPad” What’s said?Website• App store link• Screenshots• Promo video• Testimonials• Mention that it’s free to use and free to list38 @tbisaacs #MIMASummit
  46. 46. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief To wireframe... An iPhone or Android, preferably iPhone, application that can be used to find • Desktop website conferences beforehand and day of when attending--so many apps get this part wrong, • Mobile website you have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone application Once you’re there, browse the schedule, get session info, mark sessions you’re • iPad application interested in, and check-in to sessions once there. • Storyboad the video... Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app Branding / Logo • Some kind of badge-like logo • Conference Companion • Lanyard - already exists! • Lanyarrrd Kind of pirate themed? Jane, “Love it.” • On the site, “forrr iPhone” “forrr iPad” Website • App store link • Screenshots • Promo video • Testimonials39 Mention that it’s free to use and free to list @tbisaacs #MIMASummit •
  47. 47. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief To wireframe... An iPhone or Android, preferably iPhone, application that can be used to find • Desktop website conferences beforehand and day of when attending--so many apps get this part wrong, • Mobile website you have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone application Once you’re there, browse the schedule, get session info, mark sessions you’re • iPad application interested in, and check-in to sessions once there. • Storyboad the video... Drop in imagesTimeline or snippets • Two weeks to wireframe • One week to create video • Launch website • Launch app Branding / Logo • Some kind of badge-like logo • Conference Companion • Lanyard - already exists! • Lanyarrrd Kind of pirate themed? Jane, “Love it.” • On the site, “forrr iPhone” “forrr iPad” Website • App store link • Screenshots • Promo video • Testimonials39 Mention that it’s free to use and free to list @tbisaacs #MIMASummit •
  48. 48. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief To wireframe... An iPhone or Android, preferably iPhone, application that can be used to find • Desktop website conferences beforehand and day of when attending--so many apps get this part wrong, • Mobile website you have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone application Once you’re there, browse the schedule, get session info, mark sessions you’re • iPad application interested in, and check-in to sessions once there. • Storyboad the video... Drop in imagesTimeline or snippets • Two weeks to wireframe • One week to create video • Launch website • Launch app Branding / Logo • Some kind of badge-like logo • Conference Companion • Lanyard - already exists! • Lanyarrrd Kind of pirate themed? Link to the web, or Jane, “Love it.” other keynote docs • On the site, “forrr iPhone” “forrr iPad” Website • App store link • Screenshots • Promo video • Testimonials39 Mention that it’s free to use and free to list @tbisaacs #MIMASummit •
  49. 49. Notes Work40 @tbisaacs #MIMASummit
  50. 50. Notes Planning Pitch 1 3 5 2 4 Microframes Wireframing41 @tbisaacs #MIMASummit
  51. 51. Microframing42 @tbisaacs #MIMASummit
  52. 52. 43 @tbisaacs #MIMASummit
  53. 53. Too big?44 @tbisaacs #MIMASummit
  54. 54. 45 @tbisaacs #MIMASummit
  55. 55. Called for too much detail45 @tbisaacs #MIMASummit
  56. 56. 46 @tbisaacs #MIMASummit
  57. 57. 46 @tbisaacs #MIMASummit
  58. 58. 47 @tbisaacs #MIMASummit
  59. 59. 47 @tbisaacs #MIMASummit
  60. 60. 48 @tbisaacs #MIMASummit
  61. 61. 49 @tbisaacs #MIMASummit
  62. 62. 49 @tbisaacs #MIMASummit
  63. 63. 50 @tbisaacs #MIMASummit
  64. 64. Less Detail More Rapid Less Paper50 @tbisaacs #MIMASummit
  65. 65. Label Label51 @tbisaacs #MIMASummit
  66. 66. 52 @tbisaacs #MIMASummit
  67. 67. Notes Planning Pitch 1 3 5 2 4 Microframes Wireframing53 @tbisaacs #MIMASummit
  68. 68. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin AskinsBrief To wireframe...An iPhone or Android, preferably iPhone, application that can be used to find • Desktop websiteconferences beforehand and day of when attending--so many apps get this part wrong, • Mobile websiteyou have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone applicationOnce you’re there, browse the schedule, get session info, mark sessions you’re • iPad applicationinterested in, and check-in to sessions once there. • Storyboad the video...Branding / Logo• Some kind of badge-like logo• Conference Companion Timeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.”• On the site, “forrr iPhone” “forrr iPad”Website• App store link Planning• Screenshots• Promo video• Testimonials• Mention that it’s free to use and free to list54 @tbisaacs #MIMASummit
  69. 69. 55 @tbisaacs #MIMASummit
  70. 70. 55 @tbisaacs #MIMASummit
  71. 71. 56 @tbisaacs #MIMASummit
  72. 72. 57 @tbisaacs #MIMASummit
  73. 73. 58 @tbisaacs #MIMASummit
  74. 74. 59 @tbisaacs #MIMASummit
  75. 75. 60 @tbisaacs #MIMASummit
  76. 76. 61 @tbisaacs #MIMASummit
  77. 77. Wireframe Video Site App Launch Launch62 @tbisaacs #MIMASummit
  78. 78. Notes, Timeline Work63 @tbisaacs #MIMASummit
  79. 79. Notes Planning Pitch 1 3 5 2 4 Microframes Wireframing64 @tbisaacs #MIMASummit
  80. 80. HARD FOR DESIGNEREASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER65 @tbisaacs #MIMASummit
  81. 81. 66 @tbisaacs #MIMASummit
  82. 82. 66 @tbisaacs #MIMASummit
  83. 83. 67 @tbisaacs #MIMASummit
  84. 84. Label: Leave a comment:   ! Required Field! Yes Option 1 No Option 2   Button ButtonPlease Select  Please select... Option 1 Option 2 Option 3 July  S M T W T F S 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16  17 18 19 20 21 22 23  24 25 26 27 28 29 30  
  85. 85. Active Tab Inactive Tab Inactive Tab Open Accordion  Contents Active Tab Inactive Tab Inactive Tab Closed Accordion  Closed Accordion  Active Tab Inactive Tab Inactive Tab Closed Accordion  Active Menu  Sub-Menu 1 Inactive Menu  Sub-Menu 2 Inactive Menu  Active Tab Inactive Tab Inactive Tab Inactive Tab Inactive TabHome » Page 1 » Page 2 Best-Sellers (22) Home Page 1 Page 2 IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE  Pages: 1 2 3 4 ... 20 21 Next Item Item Item Item Item ItemPages: Previous 1 2 3 4 ... 20 21 Next
  86. 86. Last Name  First Name  Email Isaacs Travis hello@travisisaacs.comIsaacs Travis hello@travisisaacs.comIsaacs Travis hello@travisisaacs.comIsaacs Travis hello@travisisaacs.comLast Name  First Name  Email Isaacs Travis hello@travisisaacs.comIsaacs Travis hello@travisisaacs.comIsaacs Travis hello@travisisaacs.comIsaacs Travis hello@travisisaacs.comLast Name  First Name  Email Isaacs Travis hello@travisisaacs.comIsaacs Travis hello@travisisaacs.comIsaacs Travis hello@travisisaacs.comIsaacs Travis hello@travisisaacs.com
  87. 87. TwitterIMAGE Facebook Flickr LinkedIn 16:9 Digg
  88. 88. Heading Level 1 Heading Level 1Heading Level 2 Heading Level 2Heading Level 3 Heading Level 3Heading Level 4 Heading Level 4Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenitLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolorsit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt utlaoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quisnostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodoconsequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit essemolestie consequat, vel illum dolore eu feugiat nulla facilisis.Hypertext link• List item 1. Ordered list• List item 2. Ordered list• List item 3. Ordered list<div id=”keynote”>Kung-Fu</div>
  89. 89. 468x60 BANNER 234x60 HALF-BANNER 120x240 250x250 VERTICAL 120x600 160x600 SQUARE BANNERSKYSCRAPER WIDE SKYSCRAPER 120x60 120x90 BUTTON 125x125 BUTTON SQUARE 728x90 LEADERBOARD
  90. 90. Party YOU: DUSTIN: 24 334 First Person Shooter Role Playing Followers Followers Driving Sports 0 37.5 75 112.5 150 You and Dustin have 14 followers in common Achievements This Year:40302010 0Jan 2010 Mar 2010 May 2010 Jul 2010 Sep 2010 Nov 2010
  91. 91. Notes Heading mm/dd/yyyy First Last / First Last /Heading Level 3 Heading Level 3Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenitLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sitamet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt utlaoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrudexerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 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, Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis. vel illum dolore eu feugiat nulla facilisis.• List item • List item• List item • List item• List item • List item1. Ordered list 1. Ordered list2. Ordered list 2. Ordered list3. Ordered list 3. Ordered list • List item • List item • List itemHeading Level 3 • List item • List item • List item• List item • List item • List item • List item• List item • List item • List item • List item• List item • List item • List item • List item• List item • List item • List item • List item• List item • List item • List item • List item• List item • List item • List item • List item• List item • List item • List item • List item• List item • List item • List item • List item• List item • List item • List item • List item• List item • List item • List item • List item
  92. 92. Share 13, 334 Likes 27K 20,065 people like this. Be the first of your friends. Warning: ! Something you should be aware of happened. Be careful. K CHCLIC HOVER PIN ! Error: Something bad happened. Here’s what to do about it. Just a friendly reminder Success: Something good happened. Here’s how awesome that is. Window Title
  93. 93. Search T Button Button Buttontext input OFF Button Button Button Button ONLabel  Button Active Inactive Q W E R T Y U I O P ON ButtonLabel  Active Inactive Inactive A S D F G H J K L Z X C V B N M Label Label Keynote Button .?123 space Search Copy Select Select All Paste Button 1 2 3 4 5 6 7 8 9 0 Button Button Button Done - / : ; ( ) $ & @ ” Button Option 1 . , ? ! ’ 01 Option 2 http://keynotekungfu.com 0 02 .?123 space Search Do you want to leave this site? Option 3 1 03 Option 4 2 04 Cancel OK [ ] { } # % ^ * + = 3 Option 5 05 _ | ~ < > € £ ¥ • iOS 5 Alert 123 For Lock Screen . , ? ! ’ ABC space ABC button button button button
  94. 94. 79 @tbisaacs #MIMASummit
  95. 95. What size should I make my theme?80 @tbisaacs #MIMASummit
  96. 96. 768x1024 1024x768 1280x720 320x480 612x792 1280x165681 @tbisaacs #MIMASummit
  97. 97. 768x1024 1024x768 1280x720 320x480 612x792 1280x165682 @tbisaacs #MIMASummit
  98. 98. 1024x76882 @tbisaacs #MIMASummit
  99. 99. 83 @tbisaacs #MIMASummit
  100. 100. about 1024x76884 @tbisaacs #MIMASummit
  101. 101. 1024x76885 @tbisaacs #MIMASummit
  102. 102. 86 @tbisaacs #MIMASummit
  103. 103. Top (1 of 5)86 @tbisaacs #MIMASummit
  104. 104. Top (1 of 5) 2 of 586 @tbisaacs #MIMASummit
  105. 105. Top (1 of 5) 2 of 5 2 of 586 @tbisaacs #MIMASummit
  106. 106. Top (1 of 5) 2 of 5 2 of 5 3 of 586 @tbisaacs #MIMASummit
  107. 107. Top (1 of 5) 2 of 5 2 of 5 3 of 5 4 of 586 @tbisaacs #MIMASummit
  108. 108. Top (1 of 5) 2 of 5 2 of 5 3 of 5 4 of 5 5 of 586 @tbisaacs #MIMASummit
  109. 109. 768x1024 1024x768 1280x720 320x480 612x792 1280x165687 @tbisaacs #MIMASummit
  110. 110. 320x48087 @tbisaacs #MIMASummit
  111. 111. 88 @tbisaacs #MIMASummit
  112. 112. 768x1024 1024x768 1280x720 320x480 612x792 1280x165689 @tbisaacs #MIMASummit
  113. 113. 768x102489 @tbisaacs #MIMASummit
  114. 114. 90 @tbisaacs #MIMASummit
  115. 115. 768x1024 1024x768 1280x720 320x480 612x792 1280x165691 @tbisaacs #MIMASummit
  116. 116. 612x79291 @tbisaacs #MIMASummit
  117. 117. 92 @tbisaacs #MIMASummit
  118. 118. Perfectly prints on a standard sheet of paper92 @tbisaacs #MIMASummit
  119. 119. 768x1024 1024x768 1280x720 320x480 612x792 1280x165693 @tbisaacs #MIMASummit
  120. 120. 1280x165693 @tbisaacs #MIMASummit
  121. 121. 94 @tbisaacs #MIMASummit
  122. 122. Also perfectly prints on a standard sheet of paper94 @tbisaacs #MIMASummit
  123. 123. 94 @tbisaacs #MIMASummit
  124. 124. SIMPLE TO MAKE95 @tbisaacs #MIMASummit
  125. 125. 1024x76896 @tbisaacs #MIMASummit
  126. 126. 97 @tbisaacs #MIMASummit
  127. 127. 97 @tbisaacs #MIMASummit
  128. 128. 98 @tbisaacs #MIMASummit
  129. 129. 768x1024 1024x768 1280x720 320x480 612x792 1280x165699 @tbisaacs #MIMASummit
  130. 130. 100 @tbisaacs #MIMASummit
  131. 131. 101 @tbisaacs #MIMASummit
  132. 132. Copy Paste Original slide size New slide size101 @tbisaacs #MIMASummit
  133. 133. Demo!102 @tbisaacs #MIMASummit
  134. 134. ✓ Picking the right size for your deck ✓ Using master slides ✓ Using components103 @tbisaacs #MIMASummit
  135. 135. KEYNOTE HOW NINJAS WIREFRAME KUNG-FU@tbisaacs @tbisaacs #MIMASummit104
  136. 136. Copy/Paste styleproperties to savetime.To add to your toolbar:Right click on the toolbar, click customizeCopy style will copy all of the element’sproperties, including: fill, border, font face,font size, font color, stroke, stroke style.But... it doesn’t copy line-height, letterspacing, paragraph spacing, or insetmargin.SAD TROMBONE
  137. 137. or alt + ⌘ + c1
  138. 138. or alt + ⌘ + v2
  139. 139. :)3
  140. 140. Group items Groupwhenever possible.Grouped items are easier to move, delete,and manipulate.
  141. 141. Double-click on a groupedor alt + ⌘ + g to group element to edit it
  142. 142. Learn the keyboardshortcuts.Keyboard shortcuts will save you time andclicks (and impress your boss).
  143. 143. Copy Style
  144. 144. Paste Style
  145. 145. Group
  146. 146. Un-Group
  147. 147. Insert (Choose)
  148. 148. New Slide
  149. 149. Fonts
  150. 150. Swap betweenPhotoshop/Illustrator/Fireworks with ease.Need to make some edits that can’t bedone in Keynote? Just copy and paste yourobject or group into Illustrator orPhotoshop.Pasted items become smart objects inPhotoshop, or paths in Illustrator.
  151. 151. 121 @tbisaacs #MIMASummit
  152. 152. 2 contributors 30+ masters 118 slides 150MB file122 @tbisaacs #MIMASummit
  153. 153. 2 contributors 30+ masters Cumbersome to manage 118 slides 150MB file123 @tbisaacs #MIMASummit
  154. 154. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin AskinsBrief To wireframe...An iPhone or Android, preferably iPhone, application that can be used to find • Desktop websiteconferences beforehand and day of when attending--so many apps get this part wrong, • Mobile websiteyou have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone applicationOnce you’re there, browse the schedule, get session info, mark sessions you’re • iPad applicationinterested in, and check-in to sessions once there. • Storyboad the video...Branding / Logo• Some kind of badge-like logo• Conference Companion Timeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.”• On the site, “forrr iPhone” “forrr iPad”Website• App store link• Screenshots• Promo video• Testimonials• Mention that it’s free to use and free to list124 @tbisaacs #MIMASummit
  155. 155. Private Public Activity Published to.. Redacted Activity Redacted Redacted Redacted Reda Managed by me Redacted Our notes inform a high-level “story Redacted Redacted Redacted Activity Activity Published to.. Redacted Published to.. Redacted Redacted Redacted Activity Redacted Redacted Managed by me Activity Redacted Redacted Redacted125 @tbisaacs #MIMASummit Redac
  156. 156. 125 @tbisaacs #MIMASummit
  157. 157. Storyboard elements become126 @tbisaacs #MIMASummit
  158. 158. Divide & Conquer127 @tbisaacs #MIMASummit
  159. 159. Divide & Conquer127 @tbisaacs #MIMASummit
  160. 160. 128 @tbisaacs #MIMASummit
  161. 161. K CLIC128 @tbisaacs #MIMASummit
  162. 162. The required master slides will automatically come along when you drag129 @tbisaacs #MIMASummit
  163. 163. 1 2 My Deck Your Deck 3 4 5 Merged Deck130 @tbisaacs #MIMASummit
  164. 164. 1 2 My Deck Your Deck 3 4 5 1 Merged Deck 2 3 4 5130 @tbisaacs #MIMASummit
  165. 165. Notes Planning Pitch 1 3 5 2 4 Microframes Wireframing131 @tbisaacs #MIMASummit
  166. 166. DESIGN THINKING132 @tbisaacs #MIMASummit
  167. 167. Nice Wireframes, Bro. Skilled Athlete Skilled Athlete Skilled Athlete Back Record A Meal Record Today Sunday, July 24 Today Activity Log Describe your meal Updated 2 hours ago Meals & Snacks 2 2 Meals & Snacks July 2011  Today S M T W T F S Blueberries, bbq chicken breast, Weight & Stats 0 Weight & Stats 0 macadamia nuts. 2 1 2 1:11 pm Was meal Paleo? YES 3 4 5 6 7 8 9 Z Progress Photo 1 Progress Photo 1 ZZ 17 minute nap 0 NO 10 11 12 13 14 15 16 10:33 am Did meal have dairy? Ground beef, broccoli, cauliflower, Z 17 18 19 20 21 22 23 and almonds. 4 Sharing ZZ Sleep Activity 1 Z ZZ Sleep Activity 1 8:14 am 24 25 26 27 28 29 30 Facebook YES 1 tbsp Nordic Naturals fish oil 0 Supplements 3 Supplements 3 8:14 am Twitter YES New weigh-in: 145 pounds 9 8:14 am Vitals 1 Vitals 1 Yesterday Activity Log 2 Blueberries, bbq chicken breast, Activity Log 2 macadamia nuts. 0 Updated 2 hours ago Updated 2 hours ago 1:11 pm Now What?133 @tbisaacs #MIMASummit
  168. 168. Turn your wireframes into a presentation Wrap your designs in a meaningful story134 @tbisaacs #MIMASummit
  169. 169. Tell The Story135 @tbisaacs #MIMASummit
  170. 170. Tell The Story ✓ Describe (and show) interaction ✓ Communicate use cases ✓ Support for our design decisions136 @tbisaacs #MIMASummit
  171. 171. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137 @tbisaacs #MIMASummit
  172. 172. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137 @tbisaacs #MIMASummit
  173. 173. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137 @tbisaacs #MIMASummit
  174. 174. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137 @tbisaacs #MIMASummit
  175. 175. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137 @tbisaacs #MIMASummit
  176. 176. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137 @tbisaacs #MIMASummit
  177. 177. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137 @tbisaacs #MIMASummit
  178. 178. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137 @tbisaacs #MIMASummit

×