Keynote Kung-Fu: Streamlining Your Design Workflow With Keynote

  • CategoryDesign

  • View102

Report
of 230
Description
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.…
Transcript
  • 1. KEYNOTE KUNG-FU:Streamlining Your Design WorkflowWith Keynote.Travis Isaacs1 @tbisaacs #MIMASummit
  • 2. !I don’t wireframe.2@tbisaacs #MIMASummit
  • 3. 3 @tbisaacs #MIMASummit
  • 4. 3 @tbisaacs #MIMASummit
  • 5. BlinksaleTravis IsaacsSettings HelpSign OutDashboardProjects Invoices & Estimates ClientsTeam NewWho is this for?name@example.com Addresses Travis Isaacs555 Maple StreetCOMPANY LOGO Anywhere, TX 76054 SENDSave for later or CancelSENT 10/09/2009 Add to invoice:Invoice 1411Due 11/9/2009 (NET 30) Hours66 hrs KIND QTY DESCRIPTIONPRICE TOTAL HRS $100$0.00 Expenses $433 New lineSubtotal $0.00 Services Tax (8.75%)$0.00 Freight$0.00 Total Due$0.00Convert to estimate Invoice theme: Theme nameInvoice notesTheme name Theme name
  • 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. 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. Plans SubdivisionsItems OptionsTrade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all options 1200Plumbing Fixtures 1400Frame I Walls and JoistsItem UOMQuant1/2x12 Text 104 Siding EA171/4 x 3/4 Flat screen mouldLF2210x24 Arch Cedar LouverEA 010x24 Rough Cedar Rectangle Vent EA 31-1/2 Joist Hanger Nails 50# EA10012in x 200’ 6 mil Black Poly EA1012x12 Text Fcp Lap EA1012x24 Arch Top Cedar VentEA 51-3/4x14in Level Micro Lamb Ship 2-19’ Pcs LF 01-3/4x16in Level Micro Lamb Ship 3-24’ Pcs LF 0Add ItemTake-off completeSave or Cancel 1440Windows
  • 9. Plans SubdivisionsItems OptionsTrade Partner RequestsTake-offs for #1750 (The Venetian) for all elevations and all options 1200Plumbing Fixtures 1400Frame I Walls and JoistsItem UOMQuant1/2x12 Text 104 Siding EA171/4 x 3/4 Flat screen mouldLF2210x24 Arch Cedar LouverEA 010x24 Rough Cedar Rectangle Vent EA 31-1/2 Joist Hanger Nails 50# EA10012in x 200’ 6 mil Black Poly EA1012x12 Text Fcp Lap EA1012x24 Arch Top Cedar VentEA 51-3/4x14in Level Micro Lamb Ship 2-19’ Pcs LF 01-3/4x16in Level Micro Lamb Ship 3-24’ Pcs LF 0Add Item CLICKTake-off completeSave or Cancel 1440Windows
  • 10. PlansSubdivisions ItemsOptionsTrade Partner RequestsAdd Items to Frame I Walls and Joist (#1750 - the Venetian) ComponentsLabor Rates Fixed-Fee Services Substitution CodeSelect a component class:AppliancesWindows Concrete Drywall FlooringCLICKHardwareLight Fixtures Plumbing Fixtures LumberMasonry
  • 11. F1: Add ArtworkF2: MatsF3: FramesF4: Finishing TOTAL: $212.02AlignDistribute Wall Color1: Photo of ChildrenAdd More Artwork Image Grandparents description 10”x8”size Image Width 10” x Heigh 8” Normalcondition Image conditionImage typePhotographyADDAdd artwork to get started! 1: Children 10” x 8”Mat Dimensions: 11 1/4” x 9 1/4”
  • 12. F1: Add ArtworkF2: MatsF3: FramesF4: Finishing TOTAL: $212.02AlignDistribute Wall Color1: Photo of ChildrenAdd More Artwork Image Grandparents description 10”x8”size Image Width 10” x Heigh 8” Normalcondition Image conditionImage typePhotographykClicADDAdd artwork to get started! 1: Children 10” x 8”Mat Dimensions: 11 1/4” x 9 1/4”
  • 13. F1: Add Artwork F2: Mats F3: FramesF4: Finishing TOTAL: $490.29AlignDistribute Wall Color1: Photo of Children2: Photo of GrandparentsAdd More Artwork Image description Image sizeWidth x Height Image conditionImage type1: Children 2: Grandparents10” x 8” 10” x 8”ADD Mat Dimensions: 27” x 16”
  • 14. F1: Add Artwork F2: Mats F3: FramesF4: Finishing TOTAL: $490.29AlignDistribute Wall Color1: Photo of Children2: Photo of GrandparentsAdd More Artwork Image description Image sizeWidth x Height Image conditionImage type1: Children 2: Grandparents ck10” x 8” Clix 8” 10”ADD Mat Dimensions: 27” x 16”
  • 15. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29AlignDistribute Wall Color 1: Photo of Children 2: Photo of GrandparentsGrandparentsImage description10”x8”sizeImage Width10” x Height 8”4”NormalconditionImage conditionImage type Photography 2” SAVE Delete1: Children 2: Grandparents10” x 8” 10” x 8” Add more artwork4” Mat Dimensions: 27” x 16” 3”
  • 16. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29AlignDistributeI can make editsWall Color 1: Photo of Childrenhere... 2: Photo of GrandparentsGrandparentsImage description10”x8”sizeImage Width10” x Height 8”4”NormalconditionImage conditionImage type Photography 2” SAVE Delete1: Children 2: Grandparents10” x 8” 10” x 8” Add more artwork4” Mat Dimensions: 27” x 16” 3”
  • 17. F1: Add Artwork F2: MatsF3: Frames F4: Finishing TOTAL: $490.29AlignDistributeWall Color 1: Photo of Children2: Photo of Grandparents...Or by clickingGrandparents Image descriptionon a dimension 10”x8”size Image Width 10” x Height8” 4”3” 4”Image typePhotography Normalcondition Image condition2” SAVE Delete1: Children 2: Grandparents10” x 8” 10” x 8”Add more artwork 4” Mat Dimensions: 27” x 16” 3”
  • 18. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29AlignDistribute Wall Color 1: Photo of Children 2: Photo of GrandparentsGrandparentsImage description Or by dragging10”x8”sizeImage Width10” x Height 8”the corners4”NormalconditionImage conditionImage type Photography 2” SAVE Delete1: Children 2: Grandparents10” x 8” 10” x 8” Add more artwork4” Mat Dimensions: 27” x 16” 3”
  • 19. L IC K C Story told by annotations and interactions15@tbisaacs #MIMASummit
  • 20. All Things Considered Muybridge: The Man Who Made Pictures Move KERA 90.1 FM All Things Considered (News)Recent TopicsMore Stations & TimesMuybridge: The Man Who Made Pictures Move APRA new exhibition at the Corcoran Gallery of Art in Washington, 13 D.C., looks at the legacy of Eadweard Muybridge, whoseLISTEN All Things Considered 2010 sequential photographs of horses at a gallop their movementsbroken down frame by frame have become iconic News radio from Washington DC Hosts: Robert Siegel, Michele Norris,Online Cartoonist Wins Pulitzer Melissa BlockMark Fiore is a self-syndicating cartoonist whose irreverent online APRanimations 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 programswork 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.1resumed in The Hague on Tuesday, after months of procedural 13 wrangles. Karadzic faces charges of genocide, crimes againstLISTEN 2010 humanity and war crimes relating to the war in the former Add to presets Yugoslavia during the 1990s. ShareRussian Adoption Case Belies Many Happy Similar Shows: AdoptionsCommentator Eric Weiner says recent adoption scandals involving Weekend Edition SundayAPRRussia and Haiti represent adoption programs poorly. Happy Weekend Edition Saturday 13 families are too often overlooked, and spotlighting only theprograms blemishes hurts potential parents and the children theyLISTEN Wait Wait, Don’t Tell Me2010 love. Its not adoptive children who are being saved; its the Living on Earthadoptive parents who otherwise wouldnt have a child in their lives,he says. Here and Now (NPR)Study: Computer Security Measures Not All Worth ItA new study by a researcher at Microsoft says that many security APRmeasures designed to spare people from computer attacks are a 13 giant waste of time and money. Michele Norris speaks with MarkLISTEN 2010 Pothier, a senior assistant business editor for The Boston Globewho has written about the research.Radio By LocationMusic SportsTalkSettings16 @tbisaacs #MIMASummit
  • 21. “What can you do to te! the story with the least amount of deliverables?” - Boon Sheridan17 @tbisaacs #MIMASummit
  • 22. HARD FOR DESIGNERHTML PROTOTYPEDESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTANDTO UNDERSTAND WIREFRAME WIREFRAME EASY FOR DESIGNER18 @tbisaacs #MIMASummit
  • 23. HARD FOR DESIGNERHTML PROTOTYPE DESIGNDOCUMENT VISUAL COMP “Don’t show clientsEASY FOR CLIENTSTO UNDERSTAND wire$ames. Ever.” HI-FIDELITY WIREFRAMEHARD FOR CLIENTS TO UNDERSTAND WIREFRAME - Famous* Designer EASY FOR DESIGNER* on the Internet19 @tbisaacs #MIMASummit
  • 24. HARD FOR DESIGNERHTML PROTOTYPE DESIGNDOCUMENT VISUAL COMP Agreed. Hide theseEASY FOR CLIENTS HI-FIDELITYHARD FOR CLIENTSTO UNDERSTAND TO UNDERSTAND WIREFRAMEWIREFRAMEEASY FOR DESIGNER20@tbisaacs #MIMASummit
  • 25. HARD FOR DESIGNERHTML PROTOTYPEDESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTANDTO UNDERSTAND WIREFRAME WIREFRAME EASY FOR DESIGNER Show these early and often21 @tbisaacs #MIMASummit
  • 26. HARD FOR DESIGNER Ideal , but can be costly to createHTML PROTOTYPEDESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTANDTO UNDERSTAND WIREFRAME WIREFRAME EASY FOR DESIGNER22 @tbisaacs #MIMASummit
  • 27. HARD FOR DESIGNER Polished, but difficult to describe interactionHTML PROTOTYPEDESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTANDTO UNDERSTAND WIREFRAME WIREFRAME EASY FOR DESIGNER23 @tbisaacs #MIMASummit
  • 28. HARD FOR DESIGNERHTML PROTOTYPEDESIGN DOCUMENT VISUAL COMPEASY FOR CLIENTS HI-FIDELITY HARD FOR CLIENTSTO UNDERSTANDTO UNDERSTAND WIREFRAME WIREFRAME Enough fidelity, interactive, cheap to create EASY FOR DESIGNER24 @tbisaacs #MIMASummit
  • 29. It’s $79 $49 $1925@tbisaacs #MIMASummit
  • 30. Gorgeous Presentations26@tbisaacs #MIMASummit
  • 31. Crazy Portable27@tbisaacs #MIMASummit
  • 32. Powerful Drawing Tools28@tbisaacs #MIMASummit
  • 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 cardStudent ID Calling cardState ID Wholesale membership cardEmployee IDHunting/Fishing licenseOther 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. 4Use the diagram below to indicate where your tattoo(s) or piercing(s) will be located:FRONT BACK RIGHT EARLEFT EAR http://travisisaacs.com/2008/07/31/information-design-tattoos/5SIGNATURE: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. Primitive Shapes31@tbisaacs #MIMASummit
  • 36. Solid fillGradient fill Radial gradientsImage fill Alpha transparency32@tbisaacs #MIMASummit
  • 37. Full-featured type control33@tbisaacs #MIMASummit
  • 38. wireframe34 @tbisaacs #MIMASummit
  • 39. intesketch rvie wswirefra meproject plan notes35@tbisaacs #MIMASummit
  • 40. Notes PlanningPitch 13524 MicroframesWireframing36 @tbisaacs #MIMASummit
  • 41. Notes PlanningPitch 13524 MicroframesWireframing37 @tbisaacs #MIMASummit
  • 42. Conference App Ideas Meeting 07/11/2011Jane 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 CompanionTimeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create videoKind 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. Conference App Ideas Meeting 07/11/2011Jane 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 CompanionTimeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create videoKind 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. Conference App Ideas Meeting 07/11/2011Jane 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 CompanionTimeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create videoKind 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. Conference App Ideas Meeting 07/11/2011Jane 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 CompanionTimeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create videoKind 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. Conference App Ideas Meeting 07/11/2011Jane 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. Conference App Ideas Meeting 07/11/2011Jane 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 orsnippets • 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. Conference App Ideas Meeting 07/11/2011Jane 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 orsnippets • 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. Notes Work40 @tbisaacs #MIMASummit
  • 50. Notes PlanningPitch 13524 MicroframesWireframing41 @tbisaacs #MIMASummit
  • 51. Microframing42@tbisaacs #MIMASummit
  • 52. 43 @tbisaacs #MIMASummit
  • 53. Too big?44@tbisaacs #MIMASummit
  • 54. 45 @tbisaacs #MIMASummit
  • 55. Called for too much detail45 @tbisaacs #MIMASummit
  • 56. 46 @tbisaacs #MIMASummit
  • 57. 46 @tbisaacs #MIMASummit
  • 58. 47 @tbisaacs #MIMASummit
  • 59. 47 @tbisaacs #MIMASummit
  • 60. 48 @tbisaacs #MIMASummit
  • 61. 49 @tbisaacs #MIMASummit
  • 62. 49 @tbisaacs #MIMASummit
  • 63. 50 @tbisaacs #MIMASummit
  • 64. Less Detail More RapidLess Paper50 @tbisaacs #MIMASummit
  • 65. Label Label51 @tbisaacs #MIMASummit
  • 66. 52 @tbisaacs #MIMASummit
  • 67. Notes PlanningPitch 13524 MicroframesWireframing53 @tbisaacs #MIMASummit
  • 68. Conference App Ideas Meeting 07/11/2011Jane 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 CompanionTimeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create videoKind of pirate themed?• Launch website• Launch app Jane, “Love it.”• On the site, “forrr iPhone” “forrr iPad”Website• App store linkPlanning• Screenshots• Promo video• Testimonials• Mention that it’s free to use and free to list54@tbisaacs#MIMASummit
  • 69. 55 @tbisaacs #MIMASummit
  • 70. 55 @tbisaacs #MIMASummit
  • 71. 56 @tbisaacs #MIMASummit
  • 72. 57 @tbisaacs #MIMASummit
  • 73. 58 @tbisaacs #MIMASummit
  • 74. 59 @tbisaacs #MIMASummit
  • 75. 60 @tbisaacs #MIMASummit
  • 76. 61 @tbisaacs #MIMASummit
  • 77. Wireframe Video Site App Launch Launch62 @tbisaacs #MIMASummit
  • 78. Notes, TimelineWork63@tbisaacs #MIMASummit
  • 79. Notes PlanningPitch 13524 MicroframesWireframing64 @tbisaacs #MIMASummit
  • 80. HARD FOR DESIGNEREASY FOR CLIENTS HI-FIDELITYHARD FOR CLIENTSTO UNDERSTANDTO UNDERSTAND WIREFRAME EASY FOR DESIGNER65 @tbisaacs #MIMASummit
  • 81. 66 @tbisaacs #MIMASummit
  • 82. 66 @tbisaacs #MIMASummit
  • 83. 67 @tbisaacs #MIMASummit
  • 84. Label: Leave a comment: !Required Field! YesOption 1 No Option 2Button ButtonPlease Select  Please select... Option 1 Option 2 Option 3 July S M TW TF S1 23 4 56 78 9 10 11 12131415 16  17 18 19202122 23  24 25 26272829 30
  • 85. Active Tab Inactive TabInactive Tab Open Accordion  ContentsActive Tab Inactive TabInactive Tab Closed Accordion  Closed Accordion  Active TabInactive Tab Inactive Tab Closed Accordion  Active Menu  Sub-Menu 1 Inactive Menu  Sub-Menu 2 Inactive Menu  Active TabInactive TabInactive Tab Inactive TabInactive TabHome » Page 1 » Page 2 Best-Sellers (22) Home Page 1 Page 2IMAGE IMAGEIMAGE IMAGE IMAGEIMAGE  Pages: 123 4... 20 21 NextItem Item Item ItemItem ItemPages: Previous1234 ... 20 21 Next
  • 86. Last Name  First Name Email IsaacsTravis hello@travisisaacs.comIsaacsTravis hello@travisisaacs.comIsaacsTravis hello@travisisaacs.comIsaacsTravis hello@travisisaacs.comLast Name  First Name  Email IsaacsTravis hello@travisisaacs.comIsaacsTravis hello@travisisaacs.comIsaacsTravis hello@travisisaacs.comIsaacsTravis hello@travisisaacs.comLast Name  First Name Email IsaacsTravis hello@travisisaacs.comIsaacsTravis hello@travisisaacs.comIsaacsTravis hello@travisisaacs.comIsaacsTravis hello@travisisaacs.com
  • 87. TwitterIMAGE FacebookFlickrLinkedIn16:9 Digg
  • 88. Heading Level 1Heading Level 1Heading Level 2Heading Level 2Heading Level 3Heading Level 3Heading Level 4Heading 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 item1. Ordered list• List item2. Ordered list• List item3. Ordered listKung-Fu
  • 89. 468x60 BANNER 234x60 HALF-BANNER 120x240250x250 VERTICAL120x600 160x600SQUAREBANNERSKYSCRAPER WIDE SKYSCRAPER 120x60 120x90BUTTON 125x125 BUTTON SQUARE 728x90 LEADERBOARD
  • 90. Party YOU:DUSTIN: 24334First Person Shooter Role Playing Followers Followers Driving Sports 0 37.5 75 112.5 150You and Dustin have 14 followers in common Achievements This Year:40302010 0Jan 2010 Mar 2010 May 2010Jul 2010 Sep 2010Nov 2010
  • 91. Notes Heading mm/dd/yyyy First Last / First Last /Heading Level 3Heading Level 3Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibhLorem 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 nibhLorem 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 list1. Ordered list2. Ordered list2. Ordered list3. Ordered list3. 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. Share 13, 334 Likes27K20,065 people like this. Be the first of your friends. Warning:!Something you should be aware of happened. Be careful. KCHCLIC 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. SearchT ButtonButton Buttontext input OFFButton ButtonButton ButtonONLabel ButtonActive InactiveQ W E R T Y U I O PON ButtonLabel Active Inactive InactiveA S D F G H J K LZ X C V B N MLabelLabelKeynoteButton.?123 space SearchCopySelect Select All Paste Button1 2 3 4 5 6 7 8 9 0ButtonButtonButton Done -/: ; ( ) $ & @ ”ButtonOption 1. , ? ! ’ 01Option 2http://keynotekungfu.com002 .?123 space Search Do you want to leave this site?Option 3103Option 4204 Cancel OK[]{ } # % ^ * + =3Option 5 05_| ~ < > € £ ¥ • iOS 5 Alert123For Lock Screen. , ? ! ’ABC spaceABC buttonbuttonbutton button
  • 94. 79 @tbisaacs #MIMASummit
  • 95. What size should I make my theme?80 @tbisaacs #MIMASummit
  • 96. 768x1024 1024x768 1280x720320x480612x7921280x165681@tbisaacs #MIMASummit
  • 97. 768x1024 1024x768 1280x720320x480612x7921280x165682@tbisaacs #MIMASummit
  • 98. 1024x76882@tbisaacs #MIMASummit
  • 99. 83 @tbisaacs #MIMASummit
  • 100. about 1024x76884@tbisaacs #MIMASummit
  • 101. 1024x76885@tbisaacs #MIMASummit
  • 102. 86 @tbisaacs #MIMASummit
  • 103. Top (1 of 5)86@tbisaacs #MIMASummit
  • 104. Top (1 of 5)2 of 586 @tbisaacs #MIMASummit
  • 105. Top (1 of 5)2 of 5 2 of 586 @tbisaacs #MIMASummit
  • 106. Top (1 of 5)2 of 5 2 of 53 of 586 @tbisaacs #MIMASummit
  • 107. Top (1 of 5)2 of 5 2 of 53 of 5 4 of 586 @tbisaacs #MIMASummit
  • 108. Top (1 of 5)2 of 5 2 of 53 of 5 4 of 55 of 586 @tbisaacs #MIMASummit
  • 109. 768x1024 1024x768 1280x720320x480612x7921280x165687@tbisaacs #MIMASummit
  • 110. 320x48087 @tbisaacs #MIMASummit
  • 111. 88 @tbisaacs #MIMASummit
  • 112. 768x1024 1024x768 1280x720320x480612x7921280x165689@tbisaacs #MIMASummit
  • 113. 768x102489@tbisaacs #MIMASummit
  • 114. 90 @tbisaacs #MIMASummit
  • 115. 768x1024 1024x768 1280x720320x480612x7921280x165691@tbisaacs #MIMASummit
  • 116. 612x79291 @tbisaacs #MIMASummit
  • 117. 92 @tbisaacs #MIMASummit
  • 118. Perfectly prints on a standard sheet of paper92 @tbisaacs #MIMASummit
  • 119. 768x1024 1024x768 1280x720320x480612x7921280x165693@tbisaacs #MIMASummit
  • 120. 1280x165693 @tbisaacs #MIMASummit
  • 121. 94 @tbisaacs #MIMASummit
  • 122. Also perfectly prints on astandard sheet of paper94@tbisaacs #MIMASummit
  • 123. 94 @tbisaacs #MIMASummit
  • 124. SIMPLE TO MAKE95 @tbisaacs #MIMASummit
  • 125. 1024x76896@tbisaacs #MIMASummit
  • 126. 97 @tbisaacs #MIMASummit
  • 127. 97 @tbisaacs #MIMASummit
  • 128. 98 @tbisaacs #MIMASummit
  • 129. 768x1024 1024x768 1280x720320x480612x7921280x165699@tbisaacs #MIMASummit
  • 130. 100 @tbisaacs #MIMASummit
  • 131. 101 @tbisaacs #MIMASummit
  • 132. CopyPasteOriginal slide sizeNew slide size101@tbisaacs #MIMASummit
  • 133. Demo!102 @tbisaacs #MIMASummit
  • 134. ✓ Picking the right size for your deck✓ Using master slides✓ Using components103@tbisaacs #MIMASummit
  • 135. KEYNOTEHOW NINJAS WIREFRAMEKUNG-FU@tbisaacs@tbisaacs #MIMASummit104
  • 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. or alt + ⌘ + c1
  • 138. or alt + ⌘ + v2
  • 139. :)3
  • 140. Group items Groupwhenever possible.Grouped items are easier to move, delete,and manipulate.
  • 141. Double-click on a groupedor alt + ⌘ + g to groupelement to edit it
  • 142. Learn the keyboardshortcuts.Keyboard shortcuts will save you time andclicks (and impress your boss).
  • 143. Copy Style
  • 144. Paste Style
  • 145. Group
  • 146. Un-Group
  • 147. Insert (Choose)
  • 148. New Slide
  • 149. Fonts
  • 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. 121 @tbisaacs #MIMASummit
  • 152. 2 contributors30+ masters118 slides150MB file122@tbisaacs #MIMASummit
  • 153. 2 contributors30+ masters Cumbersome to manage118 slides150MB file123@tbisaacs #MIMASummit
  • 154. Conference App Ideas Meeting 07/11/2011Jane 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 CompanionTimeline• Lanyard - already exists! • Two weeks to wireframe• Lanyarrrd • One week to create videoKind of pirate themed?• Launch website• Launch appJane, “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. Private PublicActivity Published to..Redacted Activity Redacted RedactedRedactedRedaManaged by me Redacted Our notes inform a high-level “story Redacted Redacted RedactedActivity Activity Published to.. RedactedPublished to.. RedactedRedactedRedactedActivity RedactedRedacted Managed by me ActivityRedactedRedactedRedacted125@tbisaacs#MIMASummitRedac
  • 156. 125 @tbisaacs #MIMASummit
  • 157. Storyboardelements become126 @tbisaacs #MIMASummit
  • 158. Divide &Conquer127@tbisaacs #MIMASummit
  • 159. Divide &Conquer127@tbisaacs #MIMASummit
  • 160. 128 @tbisaacs #MIMASummit
  • 161. KCLIC128 @tbisaacs #MIMASummit
  • 162. The required master slides will automatically comealong when you drag129@tbisaacs #MIMASummit
  • 163. 12My Deck Your Deck345Merged Deck130@tbisaacs #MIMASummit
  • 164. 12My Deck Your Deck345 1Merged Deck 2 3 4 5130@tbisaacs #MIMASummit
  • 165. Notes PlanningPitch135 24MicroframesWireframing131 @tbisaacs #MIMASummit
  • 166. DESIGN THINKING132 @tbisaacs #MIMASummit
  • 167. Nice Wireframes, Bro.Skilled AthleteSkilled Athlete Skilled AthleteBack Record A MealRecord TodaySunday, July 24Today Activity LogDescribe your mealUpdated 2 hours ago Meals & Snacks 2 2Meals & SnacksJuly 2011 Today S MT W T FSBlueberries, bbq chicken breast, Weight & Stats 0Weight & Stats0macadamia nuts.2121:11 pmWas meal Paleo? YES 34 5 6 7 89Z Progress Photo 1 Progress Photo 1ZZ17 minute nap 0NO 10 11 121314 15 1610:33 amDid meal have dairy?Ground beef, broccoli, cauliflower, Z 1718 19 2021 22 23 and almonds. 4 SharingZZ Sleep Activity 1Z ZZ Sleep Activity 18:14 am 2425 26 2728 29 30FacebookYES1 tbsp Nordic Naturals fish oil 0 Supplements3Supplements 38:14 amTwitter YESNew weigh-in: 145 pounds 98:14 am Vitals 1Vitals1YesterdayActivity Log 2Blueberries, bbq chicken breast,Activity Log 2macadamia nuts.0Updated 2 hours ago Updated 2 hours ago1:11 pmNow What?133 @tbisaacs#MIMASummit
  • 168. Turn your wireframes into apresentationWrap your designs in a meaningful story134 @tbisaacs #MIMASummit
  • 169. Tell The Story135@tbisaacs #MIMASummit
  • 170. Tell The Story✓ Describe (and show) interaction✓ Communicate use cases✓ Support for our design decisions136@tbisaacs #MIMASummit
  • 171. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137@tbisaacs #MIMASummit
  • 172. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137@tbisaacs #MIMASummit
  • 173. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137@tbisaacs #MIMASummit
  • 174. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137@tbisaacs #MIMASummit
  • 175. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137@tbisaacs #MIMASummit
  • 176. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137@tbisaacs #MIMASummit
  • 177. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137@tbisaacs #MIMASummit
  • 178. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations137@tbisaacs #MIMASummit
  • 179. New UserBatch uploadNEWNew user Confirm Email Hotel or AgencyEnter InfoSelect Agency Terms & ConditionsOverviewor Property Welcome Email Verify Email Notify Hotel or Agency138 @tbisaacs #MIMASummit
  • 180. Private Public Browsable “Community” ActivityProduct PagesActivity Published to..OrdersRecommend PowerUp Polls Discussion Reviews Buzz WikiCheats Managed by me My PersonalizedActivity Gamestop.comREDACTED ActivityFollowingFollowersLists Published to..Activity Published to.. Public ProfileHead 2 HeadMy Feed GroupsMedia ActivityGame LibraryActivity Activity Leaderboards My Gamer DNAActivityAchievements Managed by meActivity ActivityMy storeSettings Messages? ??RaptrXboxPSNKongregate REDACTEDLive @tbisaacs #MIMASummit139
  • 181. Visually narrate interfacedetailsUse your wireframes for gaining consensus andalignment.Take your audience along with you-show themhow you came to a conclusion.140 @tbisaacs #MIMASummit
  • 182. Travis Isaacs141 @tbisaacs #MIMASummit
  • 183. Travis Isaacs KCLIC141 @tbisaacs #MIMASummit
  • 184. Travis IsaacsChange your nameChange your photoLog out141 @tbisaacs #MIMASummit
  • 185. GDRA142@tbisaacs #MIMASummit
  • 186. GDRA142@tbisaacs #MIMASummit
  • 187. ER K TAPPECHHOVCLICSWI PIN143 @tbisaacs #MIMASummit
  • 188. Seriously, go nuts!Redacted144@tbisaacs #MIMASummit
  • 189. Advanced animation techniquesKEYNOTEBLACK BELTKUNG-FU http://slideshare.net/tbisaacs145 @tbisaacs #MIMASummit
  • 190. Silhouette146@tbisaacs #MIMASummit
  • 191. Silhouette147@tbisaacs #MIMASummit
  • 192. 148 @tbisaacs #MIMASummit
  • 193. 149 @tbisaacs #MIMASummit
  • 194. 150 @tbisaacs #MIMASummit
  • 195. 151 @tbisaacs #MIMASummit
  • 196. 152 @tbisaacs #MIMASummit
  • 197. 152 @tbisaacs #MIMASummit
  • 198. 153 @tbisaacs #MIMASummit
  • 199. 154 @tbisaacs #MIMASummit
  • 200. 155 @tbisaacs #MIMASummit
  • 201. 156 @tbisaacs #MIMASummit
  • 202. 156 @tbisaacs #MIMASummit
  • 203. 157 @tbisaacs #MIMASummit
  • 204. 158 @tbisaacs #MIMASummit
  • 205. 159 @tbisaacs #MIMASummit
  • 206. 160 @tbisaacs #MIMASummit
  • 207. 160 @tbisaacs #MIMASummit
  • 208. 161 @tbisaacs #MIMASummit
  • 209. 162 @tbisaacs #MIMASummit
  • 210. 163 @tbisaacs #MIMASummit
  • 211. 164 @tbisaacs #MIMASummit
  • 212. 164 @tbisaacs #MIMASummit
  • 213. 165 @tbisaacs #MIMASummit
  • 214. Demo!166 @tbisaacs #MIMASummit
  • 215. Make a Stand-AlonePrototypeKeynote’s powerful linking system allows thecreation of completely non-linear, stand-aloneprototypes.167@tbisaacs #MIMASummit
  • 216. Skilled AthleteSkilled Athlete Skilled AthleteBack Record A MealRecord TodaySunday, July 24Today Activity LogDescribe your mealUpdated 2 hours ago Meals & Snacks 2 2Meals & SnacksJuly 2011 Today S MT W T FSBlueberries, bbq chicken breast, Weight & Stats 0Weight & Stats0macadamia nuts.2121:11 pmWas meal Paleo? YES 34 5 6 7 89Z Progress Photo 1 Progress Photo 1ZZ17 minute nap 0NO 10 11 121314 15 1610:33 amDid meal have dairy?Ground beef, broccoli, cauliflower, Z 1718 19 2021 22 23 and almonds. 4 SharingZZ Sleep Activity 1Z ZZ Sleep Activity 18:14 am 2425 26 2728 29 30FacebookYES1 tbsp Nordic Naturals fish oil 0 Supplements3Supplements 38:14 amTwitter YESNew weigh-in: 145 pounds 98:14 am Vitals 1Vitals1YesterdayActivity Log 2Blueberries, bbq chicken breast,Activity Log 2macadamia nuts.0Updated 2 hours ago Updated 2 hours ago1:11 pm168 @tbisaacs#MIMASummit
  • 217. 169 @tbisaacs #MIMASummit
  • 218. 170 @tbisaacs #MIMASummit
  • 219. Skilled Athlete Today Meals & Snacks 2 Select Weight & Stats 0 Progress Photo 1 ZZZ Sleep Activity 1 4 Supplements3 Vitals 1 Al ways link to aActivity Log 2Updated 2 hours ago slide number! @tbisaacs #MIMASummit
  • 220. SelectSkilled Athlete Today Meals & Snacks 2 Weight & Stats 0 Progress Photo 1 ZZZ Sleep Activity 12 Supplements3 Vitals 1Activity Log 2Updated 2 hours ago@tbisaacs #MIMASummit
  • 221. Skilled Athlete Today Meals & Snacks 2 Weight & Stats 0 Progress Photo 1 ZZZ Sleep Activity 13 Supplements3 Vitals Select 1Activity Log 2Updated 2 hours ago@tbisaacs #MIMASummit
  • 222. Select Select BackRecord A MealRecordDescribe your meal Was meal Paleo? YES Did meal have dairy?NOSharing FacebookYES 1 Twitter YES @tbisaacs #MIMASummit
  • 223. @tbisaacs #MIMASummit
  • 224. @tbisaacs #MIMASummit
  • 225. @tbisaacs #MIMASummit
  • 226. All of yourlinks will beembedded inthe PDF176 @tbisaacs #MIMASummit
  • 227. Demo!177 @tbisaacs #MIMASummit
  • 228. Questions? FOR MORE:KEYNOTEKEYNOTEHOW NINJAS WIREFRAMEKUNG-FU BLACK BELTKUNG-FU@tbisaacsslideshare.net/tbisaacs178 @tbisaacs #MIMASummit