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

Transcript

1. BLACK BELT KEYNOTE KUNG-FU
2. Travis Isaacs @tbisaacs
4. KEYNOTE KUNG-FU HOW NINJAS WIREFRAME @tbisaacs
5. KEYNOTE KUNG-FU HOW NINJAS WIREFRAME @tbisaacs
6. KEYNOTE KUNG-FU HOW NINJAS WIREFRAME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options Plumbing Fixtures 1200 Frame I Walls and Joists 1400 Windows 1440 External Doors 1450 Framing Labor 1460 Electrical 1530 HVAC 1550 Insulate Walls 1600 Sheetrock Material 1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint 1800 Stain/Finish Cabinets 1810 Interior Doors & Trim 1830 Interior Trim Labor 1840 Insulate Cielings 1870
7. KEYNOTE KUNG-FU HOW NINJAS WIREFRAME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options Plumbing Fixtures 1200 Frame I Walls and Joists 1400 Windows 1440 External Doors 1450 Framing Labor 1460 Electrical 1530 HVAC 1550 Insulate Walls 1600 Sheetrock Material 1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint 1800 Stain/Finish Cabinets 1810 Interior Doors & Trim 1830 Interior Trim Labor 1840 Insulate Cielings 1870 F2: Mats F3: Frames F4: Finishing TOTAL: $49 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 Heigh x SAVE 2: Photo of Grandparents Image type Image condition Image size Add more artwork D 4” 4” 2” 3” Grandparents 10”x8” Normal condition Photography 10” 8” I can make edits here...
8. KEYNOTE KUNG-FU HOW NINJAS WIREFRAME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options Plumbing Fixtures 1200 Frame I Walls and Joists 1400 Windows 1440 External Doors 1450 Framing Labor 1460 Electrical 1530 HVAC 1550 Insulate Walls 1600 Sheetrock Material 1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint 1800 Stain/Finish Cabinets 1810 Interior Doors & Trim 1830 Interior Trim Labor 1840 Insulate Cielings 1870 F2: Mats F3: Frames F4: Finishing TOTAL: $49 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 Heigh x SAVE 2: Photo of Grandparents Image type Image condition Image size Add more artwork D 4” 4” 2” 3” Grandparents 10”x8” Normal condition Photography 10” 8” I can make edits here... tbisaacs Accounts Search Timeline @ 10:00 AM CARRIER 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
9. KEYNOTE KUNG-FU HOW NINJAS WIREFRAME @tbisaacs Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options Plumbing Fixtures 1200 Frame I Walls and Joists 1400 Windows 1440 External Doors 1450 Framing Labor 1460 Electrical 1530 HVAC 1550 Insulate Walls 1600 Sheetrock Material 1610 Sheetrock Hang, Tape, Bed, and Texture 1630 Paint 1800 Stain/Finish Cabinets 1810 Interior Doors & Trim 1830 Interior Trim Labor 1840 Insulate Cielings 1870 F2: Mats F3: Frames F4: Finishing TOTAL: $49 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 Heigh x SAVE 2: Photo of Grandparents Image type Image condition Image size Add more artwork D 4” 4” 2” 3” Grandparents 10”x8” Normal condition Photography 10” 8” I can make edits here... tbisaacs Accounts Search Timeline @ 10:00 AM CARRIER 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
10. I got this
11. Dustin Askins @dustinaskins
12. It’s what we do. ™
14. BLACK BELT
15. SETTING UP YOUR KEYNOTE ENVIRONMENT
18. Portrait-oriented
19. Blank
20. Corporate docs
21. Project specific
22. Keynote Kung-Fu
23. REDACTED REDACTED HUGE TIME SAVER
27. This thumbnail comes from the first slide of the deck.
28. Every new file starts with the same masters
29. What if I want to delete this theme?
32. Blank
33. Useful when you need a clean starting point, or to capture a one-off idea.
35. Blank.kth Blank.zip
37. Blank.kth Blank.zip
38. 51 KB.
40. These can safely be ignored
41. 3.3 MB for a blank theme!
42. Dustin’s “Augmented” Toolkit
47. Window Title 404
48. Window Title 404
49. Window Title link
50. Window Title link link, Y U NO LINK?
51. What size should I make my theme?
52. 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
53. 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
55. 320x48 0 1280x165 6 1024x768 1280x1024 612x79 2 768x1024 1280x720
56. 320x48 0 1280x165 6 1024x768 1280x1024 612x79 2 768x1024 1280x720
57. 320x48 0 1280x165 6 1024x768 1280x1024 612x79 2 768x1024 1280x720
58. 320x48 0 1280x165 6 1024x768 1280x1024 612x79 2 768x1024 1280x720 @jacobmorse uses 1024x768 for iPhone design documentation
59. 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
61. 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
63. 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
65. Perfectly prints on a standard sheet of paper
66. 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
68. Also perfectly prints on a standard sheet of paper
70. SIMPLE TO MAKE
71. 1024x768
75. 1024x768 320x480 612x792 768x1024 1280x720 1280x1656
78. Copy Paste Original slide size New slide size
83. Keynote actually comes with over 60 frames
90. ENABLING EXTRA FRAMES
93. Resources / BGGraphicInspectorFrames.plist
99. Blue construction paper texture is EXACTLY what this slide needs. AMIRIGHT?
104. BOOM.
105. The Inspector
114. I expected to be able to “tear” this off
115. FAIL
116. Then one day...
118. CLICK CLICK CLICK CLICK CLICK CLICK CLICK
120. 7 instances
122. All I really need
123. LANYARRRD CONFERENCE COMPANION
132. LANYARRRD CONFERENCE COMPANION
133. LANYARRRD CONFERENCE COMPANION DEMO
134. IDEATION
137. Notes Microframes Planning Wireframing Pitch
138. Notes Microframes Planning “Ideation”
139. 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?
142. Notes Work &
143. Microframing
145. Too big?
146. Called for too much detail
151. More Rapid Less Detail Less Paper
152. Label Label
154. 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 LANYARRRD
163. LANYARRRD Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app
164. Wireframe Video Site Launch App Launch LANYARRRD Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app
165. Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app Wireframe Video Site Launch App Launch
166. Notes, Timeline Work &
167. WIREFRAMES & PROTOTYPES
168. KEYNOTE KUNG-FU HOW NINJAS WIREFRAME Let’s review master slides
169. 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
170. Master Slide Content Slide
172. Most of the work is done in here
173. Recently we had a BIG project
174. 2 contributors 30+ masters 118 slides 150MB file
175. 2 contributors 30+ masters 118 slides 150MB file Cumbersome to manage
176. 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 LANYARRRD
177. Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted Redacted Public Private Published to.. Redac Activity Activity Redacted Activity Redacted Redacted Redacted Published to.. Activity Redacted Redacted Activity Published to.. Managed by me Managed by me Activity Redacted Redacted Reda Our notes inform a high- level “story board”
178. Storyboard elements become groups of functionality
179. Divide & Conquer
180. CLICK
181. The required master slides will automatically come along when you drag
182. Merged Deck 1 2 3 4 5 Travis’s Deck 1 3 5 Dustin’s Deck 2 4
183. vs working IN a theme file working FROM a theme file
184. vs
195. vs
196. preference
199. Wireframing != Visual Design
201. 10:00 AM CARRIER 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 LANYARRRD Back Check In
202. 10:00 AM CARRIER 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 LANYARRRD Back Check In
203. 10:00 AM CARRIER 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 LANYARRRD Back Check In
204. 10:00 AM CARRIER 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 LANYARRRD Back Check In This is a native shape, so changing the color is easy.
205. LANYARRRD What are you doing? Check In Cancel 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...
206. LANYARRRD What are you doing? Check In Cancel 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
207. LANYARRRD What are you doing? Check In Cancel 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
208. LANYARRRD What are you doing? Check In Cancel 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
209. LANYARRRD What are you doing? Check In Cancel 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
210. LANYARRRD What are you doing? Check In Cancel 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
211. LANYARRRD What are you doing? Check In Cancel 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
213. Let’s talk about masking..
214. You could just drop shape from Illustrator, but..
215. Mail Search Print Radiation
216. Mail Search Print Radiation We like just having a single PDF sheet in our toolkit.
217. Mail Search Print Radiation
218. Mail Search Print Radiation
219. Mail Search Print Radiation
220. Mail Search Print Radiation
221. Mail Search Print Radiation
222. Mail Search Print Radiation
223. Mail Search Print Radiation
224. Radiat
226. Arrow Key: Move 1 pixel at a time
227. Shift+ Arrow Key: Move 10 pixels at a time
228. Shift+ Drag: Constrain Movement
229. Shift+ Resize: Resize Proportionally
230. Option+Resize: Resize from center
232. Insanely portable
233. http:/ /www.flickr.com/photos/wicho/4532824380/
234. http:/ /www.flickr.com/photos/ippei-janine/5804239132/sizes/o/in/photostream/
235. http:/ /www.flickr.com/photos/jamesreeve/5930449160/sizes/l/in/photostream/
236. Fully functional* *if you are working solely on the iPad
242. The Starbucks factor
243. You can have any slide size that you want, as long as it’s 1024x768
245. No “action” builds
247. No locked objects
248. No custom master slides
249. Too bad.
251. You can’t edit grouped elements
255. No linking between objects and slides
256. Button
257. Button
258. Button
259. Button
260. Button
261. PROTOTYPING & PRESENTING
262. We’ve got to show this to someone...how do we do it?
263. LANYARRRD CONFERENCE COMPANION 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 10:00 AM iPad Conferences Nearby 2:00pm 10:00 AM CARRIER 3G Conferences Nearby July 14-16 in Dallas TX Search For Other Conferences rch Conferences I’m There We’ve got to show this to someone...how do we do it?
264. We could just press play in Keynote, but that misses the context
265. It needs to be here
266. So let’s slice it up!
267. Travis’s Deck Normally when wireframing, you focus on creating pages and layouts
268. Travis’s Deck Instead of creating pages, create logical groups, or chunks of functionality
274. Now we have our slices. Wrap them in some really simple HTML
275. Travis’s Deck What about interactivity? Like a modal window for example
276. Travis’s Deck Please Register
277. Travis’s Deck Please Register COPY
279. Just paste into Photoshop as a smart object.
281. Now, with just a little bit of JS, you have full interactivity
282. CLICK Now, with just a little bit of JS, you have full interactivity
283. CLICK Please Register Now, with just a little bit of JS, you have full interactivity
284. http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/ Presenting on the iPad
290. Limited by file size
293. FACEPALM
298. Dropbox
308. TAP
309. The slide action is disruptive to the prototype
311. Let’s try iBooks!
315. Let’s try GoodReader
317. It looks complex upon initial view...
318. Looks promising.
319. Looks promising. TAP
320. Nailed it.
323. Worth mentioning:
324. THE PITCH & PROMOTION
325. DESIGN THINKING
326. Annotate Annotate Annotate Annotate
328. NOT a list
329. Day of
330. Before or After
332. Silhouette
333. Silhouette
334. LANYARRRD
335. LANYARRRD Responsive Web Design “ “
336. LANYARRRD
337. LANYARRRD
338. LANYARRRD
354. TELL A STORY
356. 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
357. Animation & Keynote Video
358. LANYARRRD
359. Management Conference 5,000 Employees “2 weeks from now”
360. Management Conference 5,000 Employees “2 weeks from now” We dont... video.
361. Management Conference 5,000 Employees “2 weeks from now”
363. LANYARRRD
364. Builds - In / Out (automated) Transition-like animations
365. Actions (manual) Everything once on the slide
366. Actions (manual) Everything once on the slide
367. Actions (manual) Everything once on the slide
368. Actions (manual) Everything once on the slide
369. Actions (manual) Everything once on the slide
370. Actions (manual) Everything once on the slide
371. Actions (manual) Everything once on the slide
372. Actions (manual) Everything once on the slide
373. Builder Order Drawer is your friend
374. Builder Order Drawer is your friend
375. Builder Order Drawer is your friend
376. Builder Order Drawer is your friend
377. Order...
378. Start...
379. Start...
380. Delay...
381. Duration...
382. AMAZING TRANSITION Sorry, Slideshare. You had to be there for this one.
389. AMAZING TRANSITION
392. (Animation)
394. You could animate the group...
395. 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
396. 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..
405. Instead, we like to animate a PDF
408. PDF Keynote
411. If this is no big deal to you..
412. BLACK BELT
413. BLACK BELT You might be a black belt already
416. This can get crazy to manage
417. slide1 slide2
418. slide1 slide2 This animation actually has two distinct parts
419. slide1 slide2
420. slide1 slide2 The zoom, and the title wipe..
421. slide1 slide2
422. slide1 slide2 So we’ll split them up over two slides.
423. slide1 slide2 Invisible Transition
428. This will make the slide auto-advance
432. The zoom animation stays here
434. Automatically transition to this slide...
439. 66 5 50 3 3
440. Keynote Quicktime
450. You may need iMovie to fade music in/out
451. LANYARRRD CONFERENCE COMPANION forrr iPhone forrr iPad Free to use the app! Free to list your conference! ! iPhone Screenshots Many apps have tried to do this right, Lanyarrrd does it rrrr’ight!
453. @tbisaacs @dustinaskins @improving keynotekungfu.com ?
454. @tbisaacs @dustinaskins @improving keynotekungfu.com ? if there’s time...