Keynote Kung-Fu: Black Belt

Design

travis-isaacs
  • BLACK BELT KEYNOTE KUNG-FU
  • Travis Isaacs @tbisaacs
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing Fixtures1200 Frame I Walls and Joists 1400 Windows1440 External Doors1450 Framing Labor1460 Electrical1530 HVAC1550 Insulate Walls1600 Sheetrock Material1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint1800 Stain/Finish Cabinets1810 Interior Doors & Trim1830 Interior Trim Labor1840 Insulate Cielings1870
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing Fixtures1200 Frame I Walls and Joists 1400 Windows1440 External Doors1450 Framing Labor1460 Electrical1530 HVAC1550 Insulate Walls1600 Sheetrock Material1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint1800 Stain/Finish Cabinets1810 Interior Doors & Trim1830 Interior Trim Labor1840 Insulate Cielings1870 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 Heighx 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...
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing Fixtures1200 Frame I Walls and Joists 1400 Windows1440 External Doors1450 Framing Labor1460 Electrical1530 HVAC1550 Insulate Walls1600 Sheetrock Material1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint1800 Stain/Finish Cabinets1810 Interior Doors & Trim1830 Interior Trim Labor1840 Insulate Cielings1870 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 Heighx 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... tbisaacsAccounts Search Timeline @ 10:00 AMCARRIER 3G axbomhyperlink I must say, I love wireframing in #keynotekungfu http://uxa.se/kkfu - 2 more pages, then off to #blonski 1 hour annettepriest prototyping for iPhone and about to compare Mockapp.com with Keynotekungfu.com. Should be an interesting battle. 1 hour gldnspud Verdict: http://keynotekungfu.com is AWESOME. Thank you @tbisaacs!!! 1 hour New Tweet
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing Fixtures1200 Frame I Walls and Joists 1400 Windows1440 External Doors1450 Framing Labor1460 Electrical1530 HVAC1550 Insulate Walls1600 Sheetrock Material1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint1800 Stain/Finish Cabinets1810 Interior Doors & Trim1830 Interior Trim Labor1840 Insulate Cielings1870 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 Heighx 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... tbisaacsAccounts Search Timeline @ 10:00 AMCARRIER 3G axbomhyperlink I must say, I love wireframing in #keynotekungfu http://uxa.se/kkfu - 2 more pages, then off to #blonski 1 hour annettepriest prototyping for iPhone and about to compare Mockapp.com with Keynotekungfu.com. Should be an interesting battle. 1 hour gldnspud Verdict: http://keynotekungfu.com is AWESOME. Thank you @tbisaacs!!! 1 hour New Tweet slideshare.net/tbisaacs http://slideshare.net/tbisaacs http://slideshare.net/tbisaacs
  • I got this
  • Dustin Askins @dustinaskins
  • It’s what we do. ™ http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com
  • http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/
  • BLACK BELT
  • SETTING UP Y OUR KEYNOT E ENVIRONM ENT
  • Portrait-oriented
  • Blank
  • Corporate docs
  • Project specific
  • Keynote Kung-Fu
  • REDACTED REDACTED HUGE TIME SAVER
  • This thumbnail comes from the first slide of the deck.
  • Every new file starts with the same masters
  • What if I want to delete this theme?
  • Blank
  • Useful when you need a clean starting point, or to capture a one-off idea.
  • Blank.kth Blank.zip
  • Blank.kth Blank.zip
  • 51 KB.
  • These can safely be ignored
  • 3.3 MB for a blank theme!
  • Dustin’s “Augmented” Toolkit
  • Window Title 404
  • Window Title 404
  • Window Title link
  • Window Title link link, Y U NO LINK?
  • What size should I make my theme?
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • 320x48 0 1280x165 6 1024x768 1280x1024612x79 2 768x1024 1280x720
  • 320x48 0 1280x165 6 1024x768 1280x1024612x79 2 768x1024 1280x720
  • 320x48 0 1280x165 6 1024x768 1280x1024612x79 2 768x1024 1280x720
  • 320x48 0 1280x165 6 1024x768 1280x1024612x79 2 768x1024 1280x720 @jacobmorse uses 1024x768 for iPhone design documentation
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • Perfectly prints on a standard sheet of paper
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • Also perfectly prints on a standard sheet of paper
  • SIMPLE TO MAKE
  • 1024x768
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • Copy Paste Original slide size New slide size
  • Keynote actually comes with over 60 frames
  • ENABLING EXTRA FRAMES
  • Resources / BGGraphicInspectorFrames.plist
  • Blue construction paper texture is EXACTLY what this slide needs. AMIRIGHT?
  • BOOM.
  • The Inspector
  • I expected to be able to “tear” this off
  • FAIL
  • Then one day...
  • CLICKCLIC K CLICKCLICKCLICKCLICKCL ICK
  • 7 instances
  • All I really need
  • L A N YA R R R D C O N F E R E N C E C O M PA N I O N
  • L A N YA R R R D C O N F E R E N C E C O M PA N I O N
  • L A N YA R R R D C O N F E R E N C E C O M PA N I O N DEMO keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110715-dka-001.key keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110715-dka-001.key
  • IDEATION
  • Notes Microframes Planning Wireframing Pitch
  • Notes Microframes Planning “Ideation”
  • Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief An iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, 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 interested in, and check-in to sessions once there. 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 • Testimonials • Mention that it’s free to use and free to list To wireframe... • Desktop website • Mobile website • iPhone application • iPad application • Storyboad the video... Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app Who’s there? What’s said? What to do?
  • Notes Work &
  • Microframing
  • Too big?
  • Called for too much detail
  • More Rapid Less Detail Less Paper
  • Label Label
  • Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief An iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, 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 interested in, and check-in to sessions once there. 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 • Testimonials • Mention that it’s free to use and free to list To wireframe... • Desktop website • Mobile website • iPhone application • iPad application • Storyboad the video... Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app Planning LANYAR RRD
  • LANYAR RRD Timeline • Two weeks to wiref rame • One week to create video • Launch website • Launch app
  • Wireframe Video Site Launch App Launch LANYAR RRD Timeline • Two weeks to wiref rame • One week to create video • Launch website • Launch app
  • Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app Wireframe Video Site Launch App Launch
  • Notes, Timeline Work &
  • WIREFRAMES & PROTOTYP ES
  • KEYNOTE KUNG-FU HOW NINJAS WIREFRAME @tbisaacs Let’s review master slides
  • Use master slides for page layouts/types Avoid endless cut-and-paste by putting static elements, like navigation, backgrounds, and site “chrome” in master slides. Master slides are free, use as many as you want! LESSON 3
  • Master Slide Content Slide
  • Most of the work is done in here
  • Recently we had a BIG project
  • 2 contributors 30+ masters 118 slides 150MB file
  • 2 contributors 30+ masters 118 slides 150MB file Cumbersome to manage
  • Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief An iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, 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 interested in, and check-in to sessions once there. 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 • Testimonials • Mention that it’s free to use and free to list To wireframe... • Desktop website • Mobile website • iPhone application • iPad application • Storyboad the video... Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app LANYAR RRD
  • Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted PublicPrivate Published to.. Activity Redacted Redacted ? Redacted ? Redacted ? Activity Activity Activity Redacted Redacted Activity Activity Activity Redacted Redacted Redacted Published to.. Activity Redacted Redacted Activity Published to.. Managed by me Activity Managed by me Activity Redacted Redacted RedactedRedacted Product Pages Redacted Redacted Redacted Redacted Browsable Our notes inform a high- level “story board”
  • Storyboard elements become groups of functionality
  • Divide & Conquer
  • CLICK
  • The required master slides will automatically come along when you drag
  • Merged Deck 1 2 3 4 5 Travis’s Deck 1 3 5 Dustin’s Deck 2 4
  • vs working IN a theme file working FROM a theme file
  • vs
  • vs
  • preference
  • Wireframing != Visual Design
  • 10:00 AMCARRIER 3G Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage: • Creating motion graphics and animation • Advanced animation controls and timing • Creating your own per-project themes • Creating your own default shape styles • Creating wireframes on the iPad • Porting your prototype to be used in a browser - Testing a prototype on the iPhone • And many other hidden gems and uses of Keynote that you didn't know about LANYAR RRD Back Check In
  • 10:00 AMCARRIER 3G Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage: • Creating motion graphics and animation • Advanced animation controls and timing • Creating your own per-project themes • Creating your own default shape styles • Creating wireframes on the iPad • Porting your prototype to be used in a browser - Testing a prototype on the iPhone • And many other hidden gems and uses of Keynote that you didn't know about LANYAR RRD Back Check In
  • 10:00 AMCARRIER 3G Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage: • Creating motion graphics and animation • Advanced animation controls and timing • Creating your own per-project themes • Creating your own default shape styles • Creating wireframes on the iPad • Porting your prototype to be used in a browser - Testing a prototype on the iPhone • And many other hidden gems and uses of Keynote that you didn't know about LANYAR RRD Back Check In
  • 10:00 AMCARRIER 3G Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage: • Creating motion graphics and animation • Advanced animation controls and timing • Creating your own per-project themes • Creating your own default shape styles • Creating wireframes on the iPad • Porting your prototype to be used in a browser - Testing a prototype on the iPhone • And many other hidden gems and uses of Keynote that you didn't know about LANYAR RRD Back Check In This is a native shape, so changing the color is easy.
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search But this is a Pictos icon... keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • Let’s talk about masking..
  • You could just drop shape from Illustrator, but..
  • Mail Search Print Radiation
  • Mail Search Print RadiationWe like just having a single PDF sheet in our toolkit.
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Radiation
  • Arrow Key: Move 1 pixel at a time
  • Shift+ Arrow Key: Move 10 pixels at a time
  • Shift+ Drag: Constrain Movement
  • Shift+ Resize: Resize Proportionally
  • Option+Resize: Resize from center
  • Insanely portable
  • http://www.flickr.com/photos/wicho/4532824380/ http://www.flickr.com/photos/wicho/4532824380/ http://www.flickr.com/photos/wicho/4532824380/
  • http://www.flickr.com/photos/ippei-janine/5804239132/sizes/o/in/photostream/
  • http://www.flickr.com/photos/jamesreeve/5930449160/sizes/l/in/photostream/ http://www.flickr.com/photos/jamesreeve/5930449160/sizes/l/in/photostream/ http://www.flickr.com/photos/jamesreeve/5930449160/sizes/l/in/photostream/
  • Fully functional* *if you are working solely on the iPad
  • The Starbucks factor
  • You can have any slide size that you want, as long as it’s 1024x768
  • No “action” builds
  • No locked objects
  • No custom master slides
  • Too bad.
  • You can’t edit grouped elements
  • No linking between objects and slides
  • Button
  • Button
  • Button
  • Button
  • Button
  • PROTOTYPING & PRESENTIN G
  • We’ve got to show this to someone...how do we do it?
  • L A N YA R R R DC O N F E R E N C E C O M PA N I O N forrr iPhone forrr iPad Free to use the app!Free to list your conference!  iPhone Screenshots iPad Screenshots Many apps have tried to do this right, Lanyarrrd does it rrrr’ight! Makes it easier to decide in advance what sessions to attend. I was able to sort all conferences by “gaming” and find what interests me! Everyone makes these for iPhones, THANK YOU for an iPad version. About | Support | Contacta L A N YA R R R D e n d e a v ’ a r r r r 10:00 AM iPad Conferences Nearby 2:00pm 10:00 AMCARRIER 3G Conferences Nearby July 14-16 in Dallas TX Search For Other Conferences Search Conferences I’m There We’ve got to show this to someone...how do we do it?
  • We could just press play in Keynote, but that misses the context
  • It needs to be here
  • So let’s slice it up!
  • Travis’s Deck Normally when wireframing, you focus on creating pages and layouts
  • Travis’s Deck Instead of creating pages, create logical groups, or chunks of functionality
  • Now we have our slices. Wrap them in some really simple HTML
  • Travis’s Deck What about interactivity? Like a modal window for example
  • Travis’s Deck Please Register
  • Travis’s Deck Please Register COPY
  • Just paste into Photoshop as a smart object.
  • Now, with just a little bit of JS, you have full interactivity
  • CLICK Now, with just a little bit of JS, you have full interactivity
  • CLICK Please Register Now, with just a little bit of JS, you have full interactivity
  • http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/ Presenting on the iPad http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/ http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/
  • Limited by file size
  • FACEPALM
  • Dropbox
  • TAP
  • The slide action is disruptive to the prototype
  • Let’s try iBooks!
  • Let’s try GoodReader
  • It looks complex upon initial view...
  • Looks promising.
  • Looks promising. TAP
  • Nailed it.
  • Worth mentioning:
  • THE PITCH & PR OMOTION
  • DESIGN THINKING
  • AnnotateAnnotate Annotate Annotate
  • NOT a list
  • Day of
  • Before or After
  • Silhouette
  • Silhouette
  • LANYAR RRD
  • LANYAR RRD Responsive Web Design“ “
  • LANYAR RRD
  • LANYAR RRD
  • LANYAR RRD
  • TELL A STORY
  • Outline Welcome Advanced Animation Custom Themes Keynote on iOS Prototyping Slide Dimensions Division of Labor Hacks & Tips Closing Story Setting Up Ideation Wireframing Prototyping Display Pitch Promotion
  • Animation & Keynote Video
  • LANYAR RRD
  • Management Conference 5,000 Employees “2 weeks from now”
  • Management Conference 5,000 Employees “2 weeks from now” We dont... video.
  • Management Conference 5,000 Employees “2 weeks from now”
  • LANYAR RRD
  • Builds - In / Out (automated) Transition-like animations
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Builder Order Drawer is your friend
  • Builder Order Drawer is your friend
  • Builder Order Drawer is your friend
  • Builder Order Drawer is your friend
  • Order...
  • Start...
  • Start...
  • Delay...
  • Duration...
  • AMAZING TRANSITION Sorry, Slideshare. You had to be there for this one.
  • AMAZING TRANSITION
  • (Animation)
  • You could animate the group...
  • 2:00pm Keynote Kung-Fu: Black Belt Travis Isaacs & Dustin Askins Trinity Ballroom Game User Research Heather Desurvire Addison Lecture Hall Slay The Legacy Code Beast Caleb Jenkins Chinaberry Room 10:00 AM CARRIER 3G Big Design Conference TODAY
  • 2:00pm Keynote Kung-Fu: Black Belt Travis Isaacs & Dustin Askins Trinity Ballroom Game User Research Heather Desurvire Addison Lecture Hall Slay The Legacy Code Beast Caleb Jenkins Chinaberry Room 10:00 AM CARRIER 3G Big Design Conference TODAY But there a lot of moving parts, could get messy..
  • Instead, we like to animate a PDF
  • PDF Keynote
  • If this is no big deal to you..
  • BLACK BELT
  • BLACK BELT You might be a black belt already
  • This can get crazy to manage
  • slide1 slide2
  • slide1 slide2 This animation actually has two distinct parts
  • slide1 slide2
  • slide1 slide2 The zoom, and the title wipe..
  • slide1 slide2
  • slide1 slide2 So we’ll split them up over two slides.
  • slide1 slide2 Invisible Transition
  • This will make the slide auto-advance
  • The zoom animation stays here
  • Automatically transition to this slide...
  • 66 5 50 3 3
  • Keynote Quicktime
  • You may need iMovie to fade music in/out
  • L A N YA R R R D C O N F E R E N C E C O M PA N I O N forrr iPhone forrr iPad Free to use the app! Free to list your conference! ! iPhone Screenshots iPad Screenshots Many apps have tried to do this right, Lanyarrrd does it rrrr’ight! Makes it easier to decide in advance what sessions to attend. I was able to sort all conferences by “gaming” and find what interests me! Everyone makes these for iPhones, THANK YOU for an iPad version. About | Support | Contact a L A N YA R R R D e n d e a v ’ a r r r r
  • http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo
  • @tbisaacs @dustinaskins @improving keynotekungfu.com !est%s?
  • @tbisaacs @dustinaskins @improving keynotekungfu.com !est%s? if there’s time...
Please download to view
454
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Description
Text
  • BLACK BELT KEYNOTE KUNG-FU
  • Travis Isaacs @tbisaacs
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing Fixtures1200 Frame I Walls and Joists 1400 Windows1440 External Doors1450 Framing Labor1460 Electrical1530 HVAC1550 Insulate Walls1600 Sheetrock Material1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint1800 Stain/Finish Cabinets1810 Interior Doors & Trim1830 Interior Trim Labor1840 Insulate Cielings1870
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing Fixtures1200 Frame I Walls and Joists 1400 Windows1440 External Doors1450 Framing Labor1460 Electrical1530 HVAC1550 Insulate Walls1600 Sheetrock Material1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint1800 Stain/Finish Cabinets1810 Interior Doors & Trim1830 Interior Trim Labor1840 Insulate Cielings1870 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 Heighx 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...
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing Fixtures1200 Frame I Walls and Joists 1400 Windows1440 External Doors1450 Framing Labor1460 Electrical1530 HVAC1550 Insulate Walls1600 Sheetrock Material1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint1800 Stain/Finish Cabinets1810 Interior Doors & Trim1830 Interior Trim Labor1840 Insulate Cielings1870 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 Heighx 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... tbisaacsAccounts Search Timeline @ 10:00 AMCARRIER 3G axbomhyperlink I must say, I love wireframing in #keynotekungfu http://uxa.se/kkfu - 2 more pages, then off to #blonski 1 hour annettepriest prototyping for iPhone and about to compare Mockapp.com with Keynotekungfu.com. Should be an interesting battle. 1 hour gldnspud Verdict: http://keynotekungfu.com is AWESOME. Thank you @tbisaacs!!! 1 hour New Tweet
  • KEYNOTE KUNG-FU HOW NINJAS WIREFR AME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all optionsPlumbing Fixtures1200 Frame I Walls and Joists 1400 Windows1440 External Doors1450 Framing Labor1460 Electrical1530 HVAC1550 Insulate Walls1600 Sheetrock Material1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint1800 Stain/Finish Cabinets1810 Interior Doors & Trim1830 Interior Trim Labor1840 Insulate Cielings1870 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 Heighx 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... tbisaacsAccounts Search Timeline @ 10:00 AMCARRIER 3G axbomhyperlink I must say, I love wireframing in #keynotekungfu http://uxa.se/kkfu - 2 more pages, then off to #blonski 1 hour annettepriest prototyping for iPhone and about to compare Mockapp.com with Keynotekungfu.com. Should be an interesting battle. 1 hour gldnspud Verdict: http://keynotekungfu.com is AWESOME. Thank you @tbisaacs!!! 1 hour New Tweet slideshare.net/tbisaacs http://slideshare.net/tbisaacs http://slideshare.net/tbisaacs
  • I got this
  • Dustin Askins @dustinaskins
  • It’s what we do. ™ http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingux.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com http://improvingenterprises.com
  • http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/ http://keynotekungfu.com/
  • BLACK BELT
  • SETTING UP Y OUR KEYNOT E ENVIRONM ENT
  • Portrait-oriented
  • Blank
  • Corporate docs
  • Project specific
  • Keynote Kung-Fu
  • REDACTED REDACTED HUGE TIME SAVER
  • This thumbnail comes from the first slide of the deck.
  • Every new file starts with the same masters
  • What if I want to delete this theme?
  • Blank
  • Useful when you need a clean starting point, or to capture a one-off idea.
  • Blank.kth Blank.zip
  • Blank.kth Blank.zip
  • 51 KB.
  • These can safely be ignored
  • 3.3 MB for a blank theme!
  • Dustin’s “Augmented” Toolkit
  • Window Title 404
  • Window Title 404
  • Window Title link
  • Window Title link link, Y U NO LINK?
  • What size should I make my theme?
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • 320x48 0 1280x165 6 1024x768 1280x1024612x79 2 768x1024 1280x720
  • 320x48 0 1280x165 6 1024x768 1280x1024612x79 2 768x1024 1280x720
  • 320x48 0 1280x165 6 1024x768 1280x1024612x79 2 768x1024 1280x720
  • 320x48 0 1280x165 6 1024x768 1280x1024612x79 2 768x1024 1280x720 @jacobmorse uses 1024x768 for iPhone design documentation
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • Perfectly prints on a standard sheet of paper
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • Also perfectly prints on a standard sheet of paper
  • SIMPLE TO MAKE
  • 1024x768
  • 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
  • Copy Paste Original slide size New slide size
  • Keynote actually comes with over 60 frames
  • ENABLING EXTRA FRAMES
  • Resources / BGGraphicInspectorFrames.plist
  • Blue construction paper texture is EXACTLY what this slide needs. AMIRIGHT?
  • BOOM.
  • The Inspector
  • I expected to be able to “tear” this off
  • FAIL
  • Then one day...
  • CLICKCLIC K CLICKCLICKCLICKCLICKCL ICK
  • 7 instances
  • All I really need
  • L A N YA R R R D C O N F E R E N C E C O M PA N I O N
  • L A N YA R R R D C O N F E R E N C E C O M PA N I O N
  • L A N YA R R R D C O N F E R E N C E C O M PA N I O N DEMO keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110715-dka-001.key keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110715-dka-001.key
  • IDEATION
  • Notes Microframes Planning Wireframing Pitch
  • Notes Microframes Planning “Ideation”
  • Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief An iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, 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 interested in, and check-in to sessions once there. 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 • Testimonials • Mention that it’s free to use and free to list To wireframe... • Desktop website • Mobile website • iPhone application • iPad application • Storyboad the video... Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app Who’s there? What’s said? What to do?
  • Notes Work &
  • Microframing
  • Too big?
  • Called for too much detail
  • More Rapid Less Detail Less Paper
  • Label Label
  • Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief An iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, 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 interested in, and check-in to sessions once there. 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 • Testimonials • Mention that it’s free to use and free to list To wireframe... • Desktop website • Mobile website • iPhone application • iPad application • Storyboad the video... Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app Planning LANYAR RRD
  • LANYAR RRD Timeline • Two weeks to wiref rame • One week to create video • Launch website • Launch app
  • Wireframe Video Site Launch App Launch LANYAR RRD Timeline • Two weeks to wiref rame • One week to create video • Launch website • Launch app
  • Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app Wireframe Video Site Launch App Launch
  • Notes, Timeline Work &
  • WIREFRAMES & PROTOTYP ES
  • KEYNOTE KUNG-FU HOW NINJAS WIREFRAME @tbisaacs Let’s review master slides
  • Use master slides for page layouts/types Avoid endless cut-and-paste by putting static elements, like navigation, backgrounds, and site “chrome” in master slides. Master slides are free, use as many as you want! LESSON 3
  • Master Slide Content Slide
  • Most of the work is done in here
  • Recently we had a BIG project
  • 2 contributors 30+ masters 118 slides 150MB file
  • 2 contributors 30+ masters 118 slides 150MB file Cumbersome to manage
  • Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief An iPhone or Android, preferably iPhone, application that can be used to find conferences beforehand and day of when attending--so many apps get this part wrong, 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 interested in, and check-in to sessions once there. 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 • Testimonials • Mention that it’s free to use and free to list To wireframe... • Desktop website • Mobile website • iPhone application • iPad application • Storyboad the video... Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app LANYAR RRD
  • Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted PublicPrivate Published to.. Activity Redacted Redacted ? Redacted ? Redacted ? Activity Activity Activity Redacted Redacted Activity Activity Activity Redacted Redacted Redacted Published to.. Activity Redacted Redacted Activity Published to.. Managed by me Activity Managed by me Activity Redacted Redacted RedactedRedacted Product Pages Redacted Redacted Redacted Redacted Browsable Our notes inform a high- level “story board”
  • Storyboard elements become groups of functionality
  • Divide & Conquer
  • CLICK
  • The required master slides will automatically come along when you drag
  • Merged Deck 1 2 3 4 5 Travis’s Deck 1 3 5 Dustin’s Deck 2 4
  • vs working IN a theme file working FROM a theme file
  • vs
  • vs
  • preference
  • Wireframing != Visual Design
  • 10:00 AMCARRIER 3G Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage: • Creating motion graphics and animation • Advanced animation controls and timing • Creating your own per-project themes • Creating your own default shape styles • Creating wireframes on the iPad • Porting your prototype to be used in a browser - Testing a prototype on the iPhone • And many other hidden gems and uses of Keynote that you didn't know about LANYAR RRD Back Check In
  • 10:00 AMCARRIER 3G Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage: • Creating motion graphics and animation • Advanced animation controls and timing • Creating your own per-project themes • Creating your own default shape styles • Creating wireframes on the iPad • Porting your prototype to be used in a browser - Testing a prototype on the iPhone • And many other hidden gems and uses of Keynote that you didn't know about LANYAR RRD Back Check In
  • 10:00 AMCARRIER 3G Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage: • Creating motion graphics and animation • Advanced animation controls and timing • Creating your own per-project themes • Creating your own default shape styles • Creating wireframes on the iPad • Porting your prototype to be used in a browser - Testing a prototype on the iPhone • And many other hidden gems and uses of Keynote that you didn't know about LANYAR RRD Back Check In
  • 10:00 AMCARRIER 3G Keynote Kung-Fu... Saturday, July 16th, 2011 at 2:00pm Keynote Kung-Fu: Black Belt You already use Keynote to create dazzling presentations, polished wireframes, and scrappy prototypes. But now it's time to earn your Keynote black belt. Travis Isaacs and Dustin Askins will roundhouse kick their way through advanced Keynote usage: • Creating motion graphics and animation • Advanced animation controls and timing • Creating your own per-project themes • Creating your own default shape styles • Creating wireframes on the iPad • Porting your prototype to be used in a browser - Testing a prototype on the iPhone • And many other hidden gems and uses of Keynote that you didn't know about LANYAR RRD Back Check In This is a native shape, so changing the color is easy.
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search But this is a Pictos icon... keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • LANYAR RRD What are you doing? Check InCancel Check In Keynote Kung-Fu: Black Belt Facebook Twitter Twitter Value Share ON ON Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .?123 space Search keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11 keynote:/Users/Dustin/Dropbox/keynote_kung_fu/presentation/wf%20to%20include/landyard_iphone-20110714-dka-001.key?id=BGSlide-11
  • Let’s talk about masking..
  • You could just drop shape from Illustrator, but..
  • Mail Search Print Radiation
  • Mail Search Print RadiationWe like just having a single PDF sheet in our toolkit.
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Mail Search Print Radiation
  • Radiation
  • Arrow Key: Move 1 pixel at a time
  • Shift+ Arrow Key: Move 10 pixels at a time
  • Shift+ Drag: Constrain Movement
  • Shift+ Resize: Resize Proportionally
  • Option+Resize: Resize from center
  • Insanely portable
  • http://www.flickr.com/photos/wicho/4532824380/ http://www.flickr.com/photos/wicho/4532824380/ http://www.flickr.com/photos/wicho/4532824380/
  • http://www.flickr.com/photos/ippei-janine/5804239132/sizes/o/in/photostream/
  • http://www.flickr.com/photos/jamesreeve/5930449160/sizes/l/in/photostream/ http://www.flickr.com/photos/jamesreeve/5930449160/sizes/l/in/photostream/ http://www.flickr.com/photos/jamesreeve/5930449160/sizes/l/in/photostream/
  • Fully functional* *if you are working solely on the iPad
  • The Starbucks factor
  • You can have any slide size that you want, as long as it’s 1024x768
  • No “action” builds
  • No locked objects
  • No custom master slides
  • Too bad.
  • You can’t edit grouped elements
  • No linking between objects and slides
  • Button
  • Button
  • Button
  • Button
  • Button
  • PROTOTYPING & PRESENTIN G
  • We’ve got to show this to someone...how do we do it?
  • L A N YA R R R DC O N F E R E N C E C O M PA N I O N forrr iPhone forrr iPad Free to use the app!Free to list your conference!  iPhone Screenshots iPad Screenshots Many apps have tried to do this right, Lanyarrrd does it rrrr’ight! Makes it easier to decide in advance what sessions to attend. I was able to sort all conferences by “gaming” and find what interests me! Everyone makes these for iPhones, THANK YOU for an iPad version. About | Support | Contacta L A N YA R R R D e n d e a v ’ a r r r r 10:00 AM iPad Conferences Nearby 2:00pm 10:00 AMCARRIER 3G Conferences Nearby July 14-16 in Dallas TX Search For Other Conferences Search Conferences I’m There We’ve got to show this to someone...how do we do it?
  • We could just press play in Keynote, but that misses the context
  • It needs to be here
  • So let’s slice it up!
  • Travis’s Deck Normally when wireframing, you focus on creating pages and layouts
  • Travis’s Deck Instead of creating pages, create logical groups, or chunks of functionality
  • Now we have our slices. Wrap them in some really simple HTML
  • Travis’s Deck What about interactivity? Like a modal window for example
  • Travis’s Deck Please Register
  • Travis’s Deck Please Register COPY
  • Just paste into Photoshop as a smart object.
  • Now, with just a little bit of JS, you have full interactivity
  • CLICK Now, with just a little bit of JS, you have full interactivity
  • CLICK Please Register Now, with just a little bit of JS, you have full interactivity
  • http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/ Presenting on the iPad http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/ http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/
  • Limited by file size
  • FACEPALM
  • Dropbox
  • TAP
  • The slide action is disruptive to the prototype
  • Let’s try iBooks!
  • Let’s try GoodReader
  • It looks complex upon initial view...
  • Looks promising.
  • Looks promising. TAP
  • Nailed it.
  • Worth mentioning:
  • THE PITCH & PR OMOTION
  • DESIGN THINKING
  • AnnotateAnnotate Annotate Annotate
  • NOT a list
  • Day of
  • Before or After
  • Silhouette
  • Silhouette
  • LANYAR RRD
  • LANYAR RRD Responsive Web Design“ “
  • LANYAR RRD
  • LANYAR RRD
  • LANYAR RRD
  • TELL A STORY
  • Outline Welcome Advanced Animation Custom Themes Keynote on iOS Prototyping Slide Dimensions Division of Labor Hacks & Tips Closing Story Setting Up Ideation Wireframing Prototyping Display Pitch Promotion
  • Animation & Keynote Video
  • LANYAR RRD
  • Management Conference 5,000 Employees “2 weeks from now”
  • Management Conference 5,000 Employees “2 weeks from now” We dont... video.
  • Management Conference 5,000 Employees “2 weeks from now”
  • LANYAR RRD
  • Builds - In / Out (automated) Transition-like animations
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Actions (manual) Everything once on the slide
  • Builder Order Drawer is your friend
  • Builder Order Drawer is your friend
  • Builder Order Drawer is your friend
  • Builder Order Drawer is your friend
  • Order...
  • Start...
  • Start...
  • Delay...
  • Duration...
  • AMAZING TRANSITION Sorry, Slideshare. You had to be there for this one.
  • AMAZING TRANSITION
  • (Animation)
  • You could animate the group...
  • 2:00pm Keynote Kung-Fu: Black Belt Travis Isaacs & Dustin Askins Trinity Ballroom Game User Research Heather Desurvire Addison Lecture Hall Slay The Legacy Code Beast Caleb Jenkins Chinaberry Room 10:00 AM CARRIER 3G Big Design Conference TODAY
  • 2:00pm Keynote Kung-Fu: Black Belt Travis Isaacs & Dustin Askins Trinity Ballroom Game User Research Heather Desurvire Addison Lecture Hall Slay The Legacy Code Beast Caleb Jenkins Chinaberry Room 10:00 AM CARRIER 3G Big Design Conference TODAY But there a lot of moving parts, could get messy..
  • Instead, we like to animate a PDF
  • PDF Keynote
  • If this is no big deal to you..
  • BLACK BELT
  • BLACK BELT You might be a black belt already
  • This can get crazy to manage
  • slide1 slide2
  • slide1 slide2 This animation actually has two distinct parts
  • slide1 slide2
  • slide1 slide2 The zoom, and the title wipe..
  • slide1 slide2
  • slide1 slide2 So we’ll split them up over two slides.
  • slide1 slide2 Invisible Transition
  • This will make the slide auto-advance
  • The zoom animation stays here
  • Automatically transition to this slide...
  • 66 5 50 3 3
  • Keynote Quicktime
  • You may need iMovie to fade music in/out
  • L A N YA R R R D C O N F E R E N C E C O M PA N I O N forrr iPhone forrr iPad Free to use the app! Free to list your conference! ! iPhone Screenshots iPad Screenshots Many apps have tried to do this right, Lanyarrrd does it rrrr’ight! Makes it easier to decide in advance what sessions to attend. I was able to sort all conferences by “gaming” and find what interests me! Everyone makes these for iPhones, THANK YOU for an iPad version. About | Support | Contact a L A N YA R R R D e n d e a v ’ a r r r r
  • http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo http://www.youtube.com/watch?v=ahaW8eficzo
  • @tbisaacs @dustinaskins @improving keynotekungfu.com !est%s?
  • @tbisaacs @dustinaskins @improving keynotekungfu.com !est%s? if there’s time...
Comments
Top