SlideShare a Scribd company logo
1 of 454
Download to read offline
KEYNOTE
BLACK BELT
   KUNG-FU
Travis Isaacs
@tbisaacs
KEYNOTE

                 INJAS WIREFRAME
            HOW N KUNG-FU




@tbisaacs
KEYNOTE

                 INJAS WIREFRAME
            HOW N KUNG-FU




@tbisaacs
Plans    Subdivisions   Items    Options   Trade Partner Req
                                                                   uests
     Take-offs for #175
                        0               (The Venetian) for a
                                                                     ll elevations and a
                                                                                        ll options
       1200     Plumbing Fixtures

      1400      Frame I Walls and
                                  J    oists
      1440      Windows

                                                     KEYNOTE
                                    EFRAME
      1450     External Doors

     1460

     1530
                           INJAS WIR
                      HOW N KUNG-FU
               Framing Labor

               Electrical

     1550      HVAC

     1600     Insulate Walls

    1610     Sheetrock Materia
                                 l
    1630     Sheetrock Hang, T
                              ape, Bed, and Textu
                                                 re
    1800     Paint

   1810     Stain/Finish Cabin
                              ets
   1830     Interior Doors & T
                              rim
   1840 Interior Trim L
                       abor
@tbisaacs
  1870 Insulate Cielin
                       gs
F1: Add Artwork
                                                  F2: Mats
                                                                                 F3: Frames
                                                                                                    F4: Finishing
       Plans    Subdivisions   Items    Options
                                                                                                                          TOTAL: $49
                                                  Trade Partner Req
                                                                   uests
                  Align
     Take-offs for #175
                        0
                                                   Distribute
                                        (The Venetian) for a
                                                                     I canWall ake
                                                                           mColor      1: Photo of Children
                                                             ll eleveditnshe d a
                                                                    atio s an e... optio
       1200
                                                                               r ll      ns
                Plumbing Fixtures                                                                      2: Photo of Grandparen
                                                                                                                             ts
      1400      Frame I Walls and                                                                  Image
                                  J    oists                                                       Grandparents
                                                                                                   description
      1440      Windows

                                                     KEYNOTE
                                                                                                   Im”x e
                                                                                                   10ag8”size              Wid”
                                                                                                                           10 th   x Heigh
                                                                                                                                     8”


                                    EFRAME
      1450     External Doors


                           INJAS WIR
                                                                            4”



                      HOW N KUNG-FU
                                                                                                   Imrmal condition
                                                                                                   Noage condition
     1460      Framing Labor                                                                                              Imagogtype y
                                                                                                                          Phot e raph

     1530      Electrical                                                                     2”
                                 1: Children                                                         SAVE
                                     10” x 8”
                                                              2: Grandparents                                                            D
     1550      HVAC                                                 10” x 8”
                                                                                                     Add more artwork
     1600     Insulate Walls

    1610     Sheetrock Materia                                             4”
                                 l
    1630     Sheetrock Hang, T
                              ape, Bed, and Textu
                                                 re
                                     Mat Dimensions: 27” x
    1800     Paint                                         16”

                                                                   3”
   1810     Stain/Finish Cabin
                              ets
   1830     Interior Doors & T
                              rim
   1840 Interior Trim L
                       abor
@tbisaacs
  1870 Insulate Cielin
                       gs
F1: Add Artwork
                                                  F2: Mats
                                                                                         F3: Frames
                                                                                                                       F4: Finishing
       Plans    Subdivisions   Items    Options
                                                                                                                                             TOTAL: $49
                                                  Trade Partner Req
                                                                   uests
                  Align
     Take-offs for #175
                        0
                                                   Distribute
                                        (The Venetian) for a
                                                                     I canWall ake
                                                                           mColor      1: Photo of Children
                                                             ll eleveditnshe d a
                                                                    atio s an e... optio
       1200
                                                      CARRIER 3G               r ll
                                                                          10:00 AM       ns
                Plumbing Fixtures                                                                                         2: Photo of Grandparen
                                                      Accounts          tbisaacs               New Tweet                                        ts
      1400      Frame I Walls and                                                                                     Image
                                  J    oists           Search Timeline                                                Grandparents
                                                                                                                      description
      1440      Windows

                                                     KEYNOTE
                                                                 axbomhyperlink                                       Im”x e
                                                                                                                      10ag8”size              Wid”
                                                                                                                                              10 th   x Heigh
                                                                                                                                                        8”


                                    EFRAME
                                                                 I must say, I love wireframing in
      1450     External Doors                                                                           1 hour




                           INJAS WIR
                                                                 #keynotekungfu http://uxa.se/kkfu -
                                                                 2 more pages, then 4” to #blonski
                                                                                       off




                      HOW N KUNG-FU
                                                                                                                      Imrmal condition
                                                                                                                      Noage condition
     1460      Framing Labor                                                                                                                 Imagogtype y
                                                                                                                                             Phot e raph
                                                                 annettepriest
                                                                 prototyping for iPhone and about to
     1530      Electrical                                                                                        2”
                                 1: Children                     compare Mockapp.com with               1 hour
                                                                                                                        SAVE
                                     10” x 8”
                                                                    2: Grandparents
                                                                 Keynotekungfu.com. Should be an                                                            D
                                                                 interesting battle.
     1550      HVAC                                                         10” x 8”
                                                                                                                        Add more artwork
     1600     Insulate Walls                                     gldnspud
                                                                 Verdict: http://keynotekungfu.com is   1 hour
                                                                 AWESOME. Thank you @tbisaacs!!!
    1610     Sheetrock Materia                                                    4”
                                 l
    1630     Sheetrock Hang, T
                              ape, Bed, and Textu
                                                 re
                                     Mat Dimensions: 27” x
                                                                 @
    1800     Paint                                         16”

                                                                          3”
   1810     Stain/Finish Cabin
                              ets
   1830     Interior Doors & T
                              rim
   1840 Interior Trim L
                       abor
@tbisaacs
  1870 Insulate Cielin
                       gs
F1: Add Artwork
                                                  F2: Mats
                                                                                         F3: Frames
                                                                                                                       F4: Finishing
       Plans    Subdivisions   Items    Options
                                                                                                                                             TOTAL: $49
                                                  Trade Partner Req
                                                                   uests
                  Align
     Take-offs for #175
                        0
                                                   Distribute
                                        (The Venetian) for a
                                                                     I canWall ake
                                                                           mColor      1: Photo of Children
                                                             ll eleveditnshe d a
                                                                    atio s an e... optio
       1200
                                                      CARRIER 3G               r ll
                                                                          10:00 AM       ns
                Plumbing Fixtures                                                                                         2: Photo of Grandparen
                                                      Accounts          tbisaacs               New Tweet                                        ts
      1400      Frame I Walls and                                                                                     Image
                                  J    oists           Search Timeline                                                Grandparents
                                                                                                                      description
      1440      Windows

                                                     KEYNOTE
                                                                 axbomhyperlink                                       Im”x e
                                                                                                                      10ag8”size              Wid”
                                                                                                                                              10 th   x Heigh
                                                                                                                                                        8”


                                    EFRAME
                                                                 I must say, I love wireframing in
      1450     External Doors                                                                           1 hour




                           INJAS WIR
                                                                 #keynotekungfu http://uxa.se/kkfu -
                                                                 2 more pages, then 4” to #blonski
                                                                                       off




                      HOW N KUNG-FU
   slideshare.net/tbisaacs
                                                                                                                      Imrmal condition
                                                                                                                      Noage condition
     1460      Framing Labor                                                                                                                 Imagogtype y
                                                                                                                                             Phot e raph
                                                                 annettepriest
                                                                 prototyping for iPhone and about to
     1530      Electrical                                                                                        2”
                                 1: Children                     compare Mockapp.com with               1 hour
                                                                                                                        SAVE
                                     10” x 8”
                                                                    2: Grandparents
                                                                 Keynotekungfu.com. Should be an                                                            D
                                                                 interesting battle.
     1550      HVAC                                                         10” x 8”
                                                                                                                        Add more artwork
     1600     Insulate Walls                                     gldnspud
                                                                 Verdict: http://keynotekungfu.com is   1 hour
                                                                 AWESOME. Thank you @tbisaacs!!!
    1610     Sheetrock Materia                                                    4”
                                 l
    1630     Sheetrock Hang, T
                              ape, Bed, and Textu
                                                 re
                                     Mat Dimensions: 27” x
                                                                 @
    1800     Paint                                         16”

                                                                          3”
   1810     Stain/Finish Cabin
                              ets
   1830     Interior Doors & T
                              rim
   1840 Interior Trim L
                       abor
@tbisaacs
  1870 Insulate Cielin
                       gs
I got this
Dustin Askins
@dustinaskins
It’s what we do. ™
BLACK BELT
NVIRONMENT
                R KEYNOTE E
S ETTING UP YOU
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?
768x1024
1024x768                  1280x720


                          320x480


    612x792

              1280x1656
768x1024
1024x768                  1280x720


                          320x480


    612x792

              1280x1656
320x48
                        0



             768x1024
1024x768                1280x720



  612x79   1280x1024             1280x165
  2                              6
320x48
                        0



             768x1024
1024x768                1280x720



  612x79   1280x1024             1280x165
  2                              6
320x48
                        0



             768x1024
1024x768                1280x720



  612x79   1280x1024             1280x165
  2                              6
320x48
                        0



             768x1024
1024x768                1280x720

                                 @jacobmorse
                                 uses 1024x768
                                 for iPhone design
  612x79   1280x1024              1280x165
                                 documentation
  2                               6
768x1024
1024x768                  1280x720


                          320x480


    612x792

              1280x1656
768x1024
1024x768                  1280x720


                          320x480


    612x792

              1280x1656
768x1024
1024x768                  1280x720


                          320x480


    612x792

              1280x1656
Perfectly prints on a
standard sheet of paper
768x1024
1024x768                  1280x720


                          320x480


    612x792

              1280x1656
Also perfectly prints on a
standard sheet of paper
SIMPLE
TO MAKE
1024x768
768x1024
1024x768                  1280x720


                          320x480


    612x792

              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...
CK
  I LIK
CLCC
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
DEMO
 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
IDE ATION
Notes   Microframes   Planning   Wireframing   Pitch
“Ideation”

Notes   Microframes   Planning
Conference App Ideas Meeting 07/11/2011                                                                              Jane Stakeholder / Travis Isaacs / Dustin Askins


Brief                                                                                     To wireframe...
An iPhone or Android, preferably iPhone, application that can be used to find              • Desktop website
conferences beforehand and day of when attending--so many apps get this part wrong,       • Mobile website
                                                      What to do?
you have to search when you’re there at the conference wanting to get info, geo-locate!
                                                                                          • iPhone application                        Who’s there?
Once you’re there, browse the schedule, get session info, mark sessions you’re
                                                                                          • iPad application
interested in, and check-in to sessions once there.

                                                                                          • Storyboad the video...
Branding / Logo
• Some kind of badge-like logo
• Conference Companion                                                                    Timeline
• Lanyard - already exists!                                                               • Two weeks to wireframe
• Lanyarrrd                                                                               • One week to create video
  Kind of pirate themed?
                                                                                          • Launch website
                                                                                          • Launch app
  Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”
                                                          What’s said?
Website
• App store link
• Screenshots
• Promo video

• Testimonials
• Mention that it’s free to use and free to list
Notes


&
Work
Microframing
Too big?
Called for
too much detail
Less Detail




More Rapid




                           Less Paper
Label   Label
Conference App Ideas Meeting 07/11/2011                                                                              Jane Stakeholder / Travis Isaacs / Dustin Askins


Brief                                                                                     To wireframe...
An iPhone or Android, preferably iPhone, application that can be used to find              • Desktop website
              D
conferences R
 LANY
       A R R beforehand and day of when attending--so many apps get this part wrong,      • Mobile website
you have to search when you’re there at the conference wanting to get info, geo-locate!
                                                                                          • iPhone application
Once you’re there, browse the schedule, get session info, mark sessions you’re
                                                                                          • iPad application
interested in, and check-in to sessions once there.

                                                                                          • Storyboad the video...
Branding / Logo
• Some kind of badge-like logo
• Conference Companion                                                                    Timeline
• Lanyard - already exists!                                                               • Two weeks to wireframe
• Lanyarrrd                                                                               • One week to create video
  Kind of pirate themed?
                                                                                          • Launch website
                                                                                          • Launch app
  Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”



Website
• App store link                                                                              Planning
• Screenshots
• Promo video

• Testimonials
• Mention that it’s free to use and free to list
Timeline
                                 wireframe
                  • Two weeks to
                                create video
                  • One week to
              D
       ARRR
LANY              • Launch web
                               site

                  • Launch app
Timeline
                                 wireframe
                  • Two weeks to
                                create video
                  • One week to
              D
       ARRR
LANY              • Launch web
                               site

                  • Launch app




                               Wireframe




Video



                           Site                App
                           Launch              Launch
Timeline
• Two weeks to wireframe
• One week to create video
• Launch website
• Launch app




                           Wireframe




Video



                     Site              App
                     Launch            Launch
Notes, Timeline


    &
    Work
PROTOTYPES
W IREFRAMES &
Let’s review master slides




         KEYNOTE

HOW NINJAS WIREFRAME
         KUNG-FU
LESSON 3
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!
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
               Cumbersome to manage
118 slides
150MB file
Conference App Ideas Meeting 07/11/2011                                                                              Jane Stakeholder / Travis Isaacs / Dustin Askins


Brief                                                                                     To wireframe...
An iPhone or Android, preferably iPhone, application that can be used to find              • Desktop website
              D
conferences R
 LANY
       A R R beforehand and day of when attending--so many apps get this part wrong,      • Mobile website
you have to search when you’re there at the conference wanting to get info, geo-locate!
                                                                                          • iPhone application
Once you’re there, browse the schedule, get session info, mark sessions you’re
                                                                                          • iPad application
interested in, and check-in to sessions once there.

                                                                                          • Storyboad the video...
Branding / Logo
• Some kind of badge-like logo
• Conference Companion                                                                    Timeline
• Lanyard - already exists!                                                               • Two weeks to wireframe
• Lanyarrrd                                                                               • One week to create video
  Kind of pirate themed?
                                                                                          • Launch website
                                                                                          • Launch app
  Jane, “Love it.”
• On the site, “forrr iPhone” “forrr iPad”



Website
• App store link
• Screenshots
• Promo video

• Testimonials
• Mention that it’s free to use and free to list
Private Public

                                                          Activity
                             Published to..
                                              Redacted                                                     Activity
                                                                             Redacted     Redacted



                                                                                                                      Redacted         Reda
                                                                            Managed by me

                             Redacted


Our notes inform a high-
                                                                 Redacted
  level “story board”                          Activity
                                                                               Redacted     Redacted                    Activity
                                                                                                                       Published to..
                           Redacted                                                                                   Published to..



                                                               Redacted
                                                                              Redacted      Redacted
                                              Activity

                           Redacted
                                                                                                                        Redacted




                                                                       Managed by me

                                                                                                                       Activity




                                                            Redacted
                                                                            Redacted      Redacted




                                                                                                                                  Redac
Storyboard elements
 become groups of
    functionality
Divide &
Conquer
K
CLIC
The required master slides
 will automatically come
  along when you drag
1                                 2


3                                 4

    Travis’s Deck                     Dustin’s Deck
5




                1


                2

                    Merged Deck
                3


                4


                5
wo rking IN a theme file
         vs
working FROM a theme file
vs
vs
preference
Wireframing != Visual Design
D
       ARRR
LANY

                    CARRIER 3G          10:00 AM

                   Back     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


                                       Check In
D
       ARRR
LANY

                    CARRIER 3G          10:00 AM

                   Back     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


                                       Check In
D
       ARRR
LANY

                    CARRIER 3G          10:00 AM

                   Back     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


                                       Check In
This is a native shape, so
                                                                 changing the color is easy.
              D
       ARRR
LANY

                    CARRIER 3G          10:00 AM

                   Back     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


                                       Check In
D
       ARRR
LANY


                                  Cancel          Check In              Check In


                                 Keynote Kung-Fu: Black Belt

                                             What are you doing?
  But this is a Pictos icon...

                                 Share


                                  Facebook                         ON

                                  Twitter                          ON

                                  Twitter                                 Value
                                 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
D
       ARRR
LANY


                   Cancel          Check In              Check In


                  Keynote Kung-Fu: Black Belt

                              What are you doing?




                  Share


                   Facebook                         ON

                   Twitter                          ON

                   Twitter                                 Value
                  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
D
       ARRR
LANY


                   Cancel          Check In              Check In


                  Keynote Kung-Fu: Black Belt

                              What are you doing?




                  Share


                   Facebook                         ON

                   Twitter                          ON

                   Twitter                                 Value
                  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
D
       ARRR
LANY


                   Cancel          Check In              Check In


                  Keynote Kung-Fu: Black Belt

                              What are you doing?




                  Share


                   Facebook                         ON

                   Twitter                          ON

                   Twitter                                 Value
                  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
D
       ARRR
LANY


                   Cancel          Check In              Check In


                  Keynote Kung-Fu: Black Belt

                              What are you doing?




                  Share


                   Facebook                         ON

                   Twitter                          ON

                   Twitter                                 Value
                  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
D
       ARRR
LANY


                   Cancel          Check In              Check In


                  Keynote Kung-Fu: Black Belt

                              What are you doing?




                  Share


                   Facebook                         ON

                   Twitter                          ON

                   Twitter                                 Value
                  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
D
       ARRR
LANY


                   Cancel          Check In              Check In


                  Keynote Kung-Fu: Black Belt

                              What are you doing?




                  Share


                   Facebook                         ON

                   Twitter                          ON

                   Twitter                                 Value
                  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
Let’s talk about masking..
You could just drop shape
  from Illustrator, but..
Mail   Search   Print   Radiation
We like just having a single
                      Mail     Search   Print   Radiation
 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
Radiat
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/ippei-janine/5804239132/sizes/o/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
& PRES ENTING
PROTOTYPING
We’ve got to show this to
someone...how do we do it?
iPad

                                        10:00 AM

                                Conferenc
                                           es Nearby    We’ve got to show this to
    2:00pm
                                                       someone...how do we do it?




CARRIER 3G          10:00 AM

     Conferences Nearby                                                                            forrr
                                                                                                 iPhone
                                                                                                                                                  forrr
                                                                                                                                                  iPad


                                                                                                           L A N YA R R R
                                                                                                                                              D
              July 14-16 in Dallas TX
                                                                                                             CONFERE
                                                                                                                       NCE COM
                                                                                                                               PA N I O   N




                                                                                                                                                  


                                                                                                              Free to use th
                                                                                                                              e app!
                                                                                                              Free to list yo
                                                                                                                             ur conference
                                                                                                                                           !
                                                                            iPhone Scree
                                                                                        nshots


                    I’m There                                                                              Many apps h
                                                                                                                        ave tried to d
                                                                                                           Lanyarrrd d                 o this right,
                                                                                                                       oes it rrrr’ig
                                                                                                                                     ht!
                                                                           iPad Screens
                                                                                       hots
                                                                                                                 Makes it easi
                          nces                                                                                                 er to decide in
 Search For Other Confere                                                                                        what session
                                                                                                                             s to attend.
                                                                                                                                               advance


             rch Conferences                                                                           I was able
We could just press play in Keynote,
   but that misses the context
It needs to be here
So let’s slice it up!
Normally when wireframing, you
focus on creating pages and layouts




          Travis’s Deck
Instead of creating pages, create
   logical groups, or chunks of
           functionality




         Travis’s Deck
Now we have our slices. Wrap them
   in some really simple HTML
What about interactivity? Like a
 modal window for example




         Travis’s Deck
Please Register




                  Travis’s Deck
PY
Please Register



                              CO
                  Travis’s Deck
Just paste into Photoshop as a smart
                object.
Now, with just a little bit of JS, you
      have full interactivity
Now, with just a little bit of JS, you
      have full interactivity




                        C LI CK
Now, with just a little bit of JS, you
                   have full interactivity



Please Register




                                     C LI CK
Presenting on the iPad




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:
PROM OTION
THE PITCH &
DESIGN   THINKING
Annotate




Annotate              Annotate



           Annotate
NOT a list
Day of
Before or
 After
Silhouette
Silhouette
D
       ARRR
LANY
D
       ARRR
LANY




                                              “
                  “   Responsive Web Design
D
       ARRR
LANY
D
       ARRR
LANY
D
       ARRR
LANY
TELL A STORY
Outline Story
           Welcome     Setting Up
Advanced Animation     Ideation
   Custom Themes       Wireframing
    Keynote on iOS     Prototyping
         Prototyping   Display
   Slide Dimensions    Pitch
   Division of Labor   Promotion
       Hacks & Tips
             Closing
Animation
& Keynote Video
D
       ARRR
LANY
Management Conference

   5,000 Employees

  “2 weeks from now”
Management Conference
       We dont...
   5,000 video.
         Employees

  “2 weeks from now”
Management Conference

   5,000 Employees

  “2 weeks from now”
D
       ARRR
LANY
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...
Sorry, Slideshare. You
      had to be there for this
                one.




AMAZING TRANSITION
AMAZING TRANSITION
(Animation)
You could animate the
       group...
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
But there AMlot of
            10:00 a
  moving parts, could get
CARRIER 3G
           messy..
    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
Instead, we like to
  animate a PDF
PDF   Keynote
If this is no big deal to
           you..
BLACK BELT
You might be a black
       belt already




BLACK BELT
This can get crazy to
      manage
slide1

slide2
slide1
This animation actually
 has two distinct parts


                          slide2
slide1

slide2
slide1
The zoom, and the title
       wipe..


                          slide2
slide1

slide2
slide1
So we’ll split them up
   over two slides.




                         slide2
slide1
Invisible Transition
                       slide2
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
forrr                                            forrr
                     iPhone                                             iPad




                               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




                                                                                !


                                            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!
?
@tbisaacs   @dustinaskins   @improving   keynotekungfu.com
if there’s time...
                                                             ?
@tbisaacs   @dustinaskins   @improving   keynotekungfu.com

More Related Content

Viewers also liked

NK logo black background
NK logo black backgroundNK logo black background
NK logo black background
Catriona Kelly
 
Cloud Foundry and OpenStack
Cloud Foundry and OpenStackCloud Foundry and OpenStack
Cloud Foundry and OpenStack
vadimspivak
 
Heembouw versterkt visueel management, onderdeel van de lean bedrijfsfilosofi...
Heembouw versterkt visueel management, onderdeel van de lean bedrijfsfilosofi...Heembouw versterkt visueel management, onderdeel van de lean bedrijfsfilosofi...
Heembouw versterkt visueel management, onderdeel van de lean bedrijfsfilosofi...
Heembouw
 
Técnicas para generación de ideas y creatividad
Técnicas para generación de ideas y creatividadTécnicas para generación de ideas y creatividad
Técnicas para generación de ideas y creatividad
danieldiazalvarez
 
Material de apoyo para generación y selección de la idea de negocios
Material de apoyo para generación y selección de la idea de negociosMaterial de apoyo para generación y selección de la idea de negocios
Material de apoyo para generación y selección de la idea de negocios
danieldiazalvarez
 

Viewers also liked (19)

Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
 
Getting bad ideas out of the way with keynote
Getting bad ideas out of the way with keynoteGetting bad ideas out of the way with keynote
Getting bad ideas out of the way with keynote
 
Wireframing, Mockups, and Prototyping Made Easy
Wireframing, Mockups, and Prototyping Made EasyWireframing, Mockups, and Prototyping Made Easy
Wireframing, Mockups, and Prototyping Made Easy
 
Wireframing Fundamentals
Wireframing FundamentalsWireframing Fundamentals
Wireframing Fundamentals
 
8 Tips for an Awesome Powerpoint Presentation
8 Tips for an Awesome Powerpoint Presentation8 Tips for an Awesome Powerpoint Presentation
8 Tips for an Awesome Powerpoint Presentation
 
NK logo black background
NK logo black backgroundNK logo black background
NK logo black background
 
Cloud Foundry and OpenStack
Cloud Foundry and OpenStackCloud Foundry and OpenStack
Cloud Foundry and OpenStack
 
Heembouw versterkt visueel management, onderdeel van de lean bedrijfsfilosofi...
Heembouw versterkt visueel management, onderdeel van de lean bedrijfsfilosofi...Heembouw versterkt visueel management, onderdeel van de lean bedrijfsfilosofi...
Heembouw versterkt visueel management, onderdeel van de lean bedrijfsfilosofi...
 
Designing HTML5 Mobile Learning for Browser, Native, and Hybrid App #mlearnco...
Designing HTML5 Mobile Learning for Browser, Native, and Hybrid App #mlearnco...Designing HTML5 Mobile Learning for Browser, Native, and Hybrid App #mlearnco...
Designing HTML5 Mobile Learning for Browser, Native, and Hybrid App #mlearnco...
 
Location based Learning for a Mobile World | Adobe Learning Summit #DevLearn
Location based Learning for a Mobile World | Adobe Learning Summit #DevLearnLocation based Learning for a Mobile World | Adobe Learning Summit #DevLearn
Location based Learning for a Mobile World | Adobe Learning Summit #DevLearn
 
Creating an Interactive Book with iBooks Author #mLearnCon15
Creating an Interactive Book with iBooks Author #mLearnCon15Creating an Interactive Book with iBooks Author #mLearnCon15
Creating an Interactive Book with iBooks Author #mLearnCon15
 
Launching a Mobile App from Concept to Launch
Launching a Mobile App from Concept to LaunchLaunching a Mobile App from Concept to Launch
Launching a Mobile App from Concept to Launch
 
Turn Concepts to Reality Using Prototyping and Feedback Loops
Turn Concepts to Reality Using Prototyping and Feedback LoopsTurn Concepts to Reality Using Prototyping and Feedback Loops
Turn Concepts to Reality Using Prototyping and Feedback Loops
 
How to Build the 25 Habits of People who are Happy, Healthy and Successful
How to Build the 25 Habits of People who are Happy, Healthy and SuccessfulHow to Build the 25 Habits of People who are Happy, Healthy and Successful
How to Build the 25 Habits of People who are Happy, Healthy and Successful
 
Responsive & Adaptive Design @mLearnCon15 Nick Floro
Responsive & Adaptive Design @mLearnCon15 Nick FloroResponsive & Adaptive Design @mLearnCon15 Nick Floro
Responsive & Adaptive Design @mLearnCon15 Nick Floro
 
Técnicas para generación de ideas y creatividad
Técnicas para generación de ideas y creatividadTécnicas para generación de ideas y creatividad
Técnicas para generación de ideas y creatividad
 
Material de apoyo para generación y selección de la idea de negocios
Material de apoyo para generación y selección de la idea de negociosMaterial de apoyo para generación y selección de la idea de negocios
Material de apoyo para generación y selección de la idea de negocios
 
Compressing Audio and Video for Desktop and Mobile Delivery
Compressing Audio and Video for Desktop and Mobile DeliveryCompressing Audio and Video for Desktop and Mobile Delivery
Compressing Audio and Video for Desktop and Mobile Delivery
 
Actitud emprendedora
Actitud emprendedoraActitud emprendedora
Actitud emprendedora
 

Recently uploaded

Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
mikehavy0
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
Amil baba
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
pillahdonald
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
joshuaclack73
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
Amil baba
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
Amil baba
 

Recently uploaded (20)

Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UW毕业证书)华盛顿大学毕业证成绩单本科硕士学位证留信学历认证
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
Spring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers ParisSpring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers Paris
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTUREGBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
100^%)( KATLEHONG))(*((+27838792658))*))௹ )Abortion Pills for Sale in Doha, D...
 
Morgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity DesignMorgenbooster: Storytelling in Identity Design
Morgenbooster: Storytelling in Identity Design
 
Evaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptxEvaluating natural frequencies and mode shapes.pptx
Evaluating natural frequencies and mode shapes.pptx
 
Latest Trends in Home and Building Design
Latest Trends in Home and Building DesignLatest Trends in Home and Building Design
Latest Trends in Home and Building Design
 
Branding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdfBranding in the Psychedelic Landscape Report.pdf
Branding in the Psychedelic Landscape Report.pdf
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
Game Pitch- Heroes of Niflheim (a mobile game).pdf
Game Pitch- Heroes of Niflheim (a mobile game).pdfGame Pitch- Heroes of Niflheim (a mobile game).pdf
Game Pitch- Heroes of Niflheim (a mobile game).pdf
 

Keynote Kung-Fu: Black Belt

  • 3.
  • 4. KEYNOTE INJAS WIREFRAME HOW N KUNG-FU @tbisaacs
  • 5. KEYNOTE INJAS WIREFRAME HOW N KUNG-FU @tbisaacs
  • 6. Plans Subdivisions Items Options Trade Partner Req uests Take-offs for #175 0 (The Venetian) for a ll elevations and a ll options 1200 Plumbing Fixtures 1400 Frame I Walls and J oists 1440 Windows KEYNOTE EFRAME 1450 External Doors 1460 1530 INJAS WIR HOW N KUNG-FU Framing Labor Electrical 1550 HVAC 1600 Insulate Walls 1610 Sheetrock Materia l 1630 Sheetrock Hang, T ape, Bed, and Textu re 1800 Paint 1810 Stain/Finish Cabin ets 1830 Interior Doors & T rim 1840 Interior Trim L abor @tbisaacs 1870 Insulate Cielin gs
  • 7. F1: Add Artwork F2: Mats F3: Frames F4: Finishing Plans Subdivisions Items Options TOTAL: $49 Trade Partner Req uests Align Take-offs for #175 0 Distribute (The Venetian) for a I canWall ake mColor 1: Photo of Children ll eleveditnshe d a atio s an e... optio 1200 r ll ns Plumbing Fixtures 2: Photo of Grandparen ts 1400 Frame I Walls and Image J oists Grandparents description 1440 Windows KEYNOTE Im”x e 10ag8”size Wid” 10 th x Heigh 8” EFRAME 1450 External Doors INJAS WIR 4” HOW N KUNG-FU Imrmal condition Noage condition 1460 Framing Labor Imagogtype y Phot e raph 1530 Electrical 2” 1: Children SAVE 10” x 8” 2: Grandparents D 1550 HVAC 10” x 8” Add more artwork 1600 Insulate Walls 1610 Sheetrock Materia 4” l 1630 Sheetrock Hang, T ape, Bed, and Textu re Mat Dimensions: 27” x 1800 Paint 16” 3” 1810 Stain/Finish Cabin ets 1830 Interior Doors & T rim 1840 Interior Trim L abor @tbisaacs 1870 Insulate Cielin gs
  • 8. F1: Add Artwork F2: Mats F3: Frames F4: Finishing Plans Subdivisions Items Options TOTAL: $49 Trade Partner Req uests Align Take-offs for #175 0 Distribute (The Venetian) for a I canWall ake mColor 1: Photo of Children ll eleveditnshe d a atio s an e... optio 1200 CARRIER 3G r ll 10:00 AM ns Plumbing Fixtures 2: Photo of Grandparen Accounts tbisaacs New Tweet ts 1400 Frame I Walls and Image J oists Search Timeline Grandparents description 1440 Windows KEYNOTE axbomhyperlink Im”x e 10ag8”size Wid” 10 th x Heigh 8” EFRAME I must say, I love wireframing in 1450 External Doors 1 hour INJAS WIR #keynotekungfu http://uxa.se/kkfu - 2 more pages, then 4” to #blonski off HOW N KUNG-FU Imrmal condition Noage condition 1460 Framing Labor Imagogtype y Phot e raph annettepriest prototyping for iPhone and about to 1530 Electrical 2” 1: Children compare Mockapp.com with 1 hour SAVE 10” x 8” 2: Grandparents Keynotekungfu.com. Should be an D interesting battle. 1550 HVAC 10” x 8” Add more artwork 1600 Insulate Walls gldnspud Verdict: http://keynotekungfu.com is 1 hour AWESOME. Thank you @tbisaacs!!! 1610 Sheetrock Materia 4” l 1630 Sheetrock Hang, T ape, Bed, and Textu re Mat Dimensions: 27” x @ 1800 Paint 16” 3” 1810 Stain/Finish Cabin ets 1830 Interior Doors & T rim 1840 Interior Trim L abor @tbisaacs 1870 Insulate Cielin gs
  • 9. F1: Add Artwork F2: Mats F3: Frames F4: Finishing Plans Subdivisions Items Options TOTAL: $49 Trade Partner Req uests Align Take-offs for #175 0 Distribute (The Venetian) for a I canWall ake mColor 1: Photo of Children ll eleveditnshe d a atio s an e... optio 1200 CARRIER 3G r ll 10:00 AM ns Plumbing Fixtures 2: Photo of Grandparen Accounts tbisaacs New Tweet ts 1400 Frame I Walls and Image J oists Search Timeline Grandparents description 1440 Windows KEYNOTE axbomhyperlink Im”x e 10ag8”size Wid” 10 th x Heigh 8” EFRAME I must say, I love wireframing in 1450 External Doors 1 hour INJAS WIR #keynotekungfu http://uxa.se/kkfu - 2 more pages, then 4” to #blonski off HOW N KUNG-FU slideshare.net/tbisaacs Imrmal condition Noage condition 1460 Framing Labor Imagogtype y Phot e raph annettepriest prototyping for iPhone and about to 1530 Electrical 2” 1: Children compare Mockapp.com with 1 hour SAVE 10” x 8” 2: Grandparents Keynotekungfu.com. Should be an D interesting battle. 1550 HVAC 10” x 8” Add more artwork 1600 Insulate Walls gldnspud Verdict: http://keynotekungfu.com is 1 hour AWESOME. Thank you @tbisaacs!!! 1610 Sheetrock Materia 4” l 1630 Sheetrock Hang, T ape, Bed, and Textu re Mat Dimensions: 27” x @ 1800 Paint 16” 3” 1810 Stain/Finish Cabin ets 1830 Interior Doors & T rim 1840 Interior Trim L abor @tbisaacs 1870 Insulate Cielin gs
  • 12. It’s what we do. ™
  • 13.
  • 15. NVIRONMENT R KEYNOTE E S ETTING UP YOU
  • 16.
  • 17.
  • 19. Blank
  • 23. REDACTED REDACTED HUGE TIME SAVER
  • 24.
  • 25.
  • 26.
  • 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?
  • 30.
  • 31.
  • 32. Blank
  • 33. Useful when you need a clean starting point, or to capture a one-off idea.
  • 34.
  • 35. Blank.kth Blank.zip
  • 36.
  • 37. Blank.kth Blank.zip
  • 39.
  • 40. These can safely be ignored
  • 41. 3.3 MB for a blank theme!
  • 43.
  • 44.
  • 45.
  • 46.
  • 50. Window Title link link, Y U NO LINK?
  • 51. What size should I make my theme?
  • 52. 768x1024 1024x768 1280x720 320x480 612x792 1280x1656
  • 53. 768x1024 1024x768 1280x720 320x480 612x792 1280x1656
  • 54.
  • 55. 320x48 0 768x1024 1024x768 1280x720 612x79 1280x1024 1280x165 2 6
  • 56. 320x48 0 768x1024 1024x768 1280x720 612x79 1280x1024 1280x165 2 6
  • 57. 320x48 0 768x1024 1024x768 1280x720 612x79 1280x1024 1280x165 2 6
  • 58. 320x48 0 768x1024 1024x768 1280x720 @jacobmorse uses 1024x768 for iPhone design 612x79 1280x1024 1280x165 documentation 2 6
  • 59. 768x1024 1024x768 1280x720 320x480 612x792 1280x1656
  • 60.
  • 61. 768x1024 1024x768 1280x720 320x480 612x792 1280x1656
  • 62.
  • 63. 768x1024 1024x768 1280x720 320x480 612x792 1280x1656
  • 64.
  • 65. Perfectly prints on a standard sheet of paper
  • 66. 768x1024 1024x768 1280x720 320x480 612x792 1280x1656
  • 67.
  • 68. Also perfectly prints on a standard sheet of paper
  • 69.
  • 72.
  • 73.
  • 74.
  • 75. 768x1024 1024x768 1280x720 320x480 612x792 1280x1656
  • 76.
  • 77.
  • 78. Copy Paste Original slide size New slide size
  • 79.
  • 80.
  • 81.
  • 82.
  • 83. Keynote actually comes with over 60 frames
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 91.
  • 92.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99. Blue construction paper texture is EXACTLY what this slide needs. AMIRIGHT?
  • 100.
  • 101.
  • 102.
  • 103.
  • 104. BOOM.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114. I expected to be able to “tear” this off
  • 115. FAIL
  • 117.
  • 118. CK I LIK CLCC
  • 119.
  • 121.
  • 122. All I really need
  • 123. 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
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132. 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
  • 133. DEMO 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
  • 135.
  • 136.
  • 137. Notes Microframes Planning Wireframing Pitch
  • 138. “Ideation” Notes Microframes Planning
  • 139. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief To wireframe... An iPhone or Android, preferably iPhone, application that can be used to find • Desktop website conferences beforehand and day of when attending--so many apps get this part wrong, • Mobile website What to do? you have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone application Who’s there? Once you’re there, browse the schedule, get session info, mark sessions you’re • iPad application interested in, and check-in to sessions once there. • Storyboad the video... Branding / Logo • Some kind of badge-like logo • Conference Companion Timeline • Lanyard - already exists! • Two weeks to wireframe • Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.” • On the site, “forrr iPhone” “forrr iPad” What’s said? Website • App store link • Screenshots • Promo video • Testimonials • Mention that it’s free to use and free to list
  • 140.
  • 141.
  • 144.
  • 147.
  • 148.
  • 149.
  • 150.
  • 151. Less Detail More Rapid Less Paper
  • 152. Label Label
  • 153.
  • 154. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief To wireframe... An iPhone or Android, preferably iPhone, application that can be used to find • Desktop website D conferences R LANY A R R beforehand and day of when attending--so many apps get this part wrong, • Mobile website you have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone application Once you’re there, browse the schedule, get session info, mark sessions you’re • iPad application interested in, and check-in to sessions once there. • Storyboad the video... Branding / Logo • Some kind of badge-like logo • Conference Companion Timeline • Lanyard - already exists! • Two weeks to wireframe • Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.” • On the site, “forrr iPhone” “forrr iPad” Website • App store link Planning • Screenshots • Promo video • Testimonials • Mention that it’s free to use and free to list
  • 155.
  • 156.
  • 157.
  • 158.
  • 159.
  • 160.
  • 161.
  • 162.
  • 163. Timeline wireframe • Two weeks to create video • One week to D ARRR LANY • Launch web site • Launch app
  • 164. Timeline wireframe • Two weeks to create video • One week to D ARRR LANY • Launch web site • Launch app Wireframe Video Site App Launch Launch
  • 165. Timeline • Two weeks to wireframe • One week to create video • Launch website • Launch app Wireframe Video Site App Launch Launch
  • 166. Notes, Timeline & Work
  • 168. Let’s review master slides KEYNOTE HOW NINJAS WIREFRAME KUNG-FU
  • 169. LESSON 3 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!
  • 170. Master Slide Content Slide
  • 171.
  • 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 Cumbersome to manage 118 slides 150MB file
  • 176. Conference App Ideas Meeting 07/11/2011 Jane Stakeholder / Travis Isaacs / Dustin Askins Brief To wireframe... An iPhone or Android, preferably iPhone, application that can be used to find • Desktop website D conferences R LANY A R R beforehand and day of when attending--so many apps get this part wrong, • Mobile website you have to search when you’re there at the conference wanting to get info, geo-locate! • iPhone application Once you’re there, browse the schedule, get session info, mark sessions you’re • iPad application interested in, and check-in to sessions once there. • Storyboad the video... Branding / Logo • Some kind of badge-like logo • Conference Companion Timeline • Lanyard - already exists! • Two weeks to wireframe • Lanyarrrd • One week to create video Kind of pirate themed? • Launch website • Launch app Jane, “Love it.” • On the site, “forrr iPhone” “forrr iPad” Website • App store link • Screenshots • Promo video • Testimonials • Mention that it’s free to use and free to list
  • 177. Private Public Activity Published to.. Redacted Activity Redacted Redacted Redacted Reda Managed by me Redacted Our notes inform a high- Redacted level “story board” Activity Redacted Redacted Activity Published to.. Redacted Published to.. Redacted Redacted Redacted Activity Redacted Redacted Managed by me Activity Redacted Redacted Redacted Redac
  • 178. Storyboard elements become groups of functionality
  • 180. K CLIC
  • 181. The required master slides will automatically come along when you drag
  • 182. 1 2 3 4 Travis’s Deck Dustin’s Deck 5 1 2 Merged Deck 3 4 5
  • 183. wo rking IN a theme file vs working FROM a theme file
  • 184. vs
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195. vs
  • 197.
  • 198.
  • 200.
  • 201. D ARRR LANY CARRIER 3G 10:00 AM Back 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 Check In
  • 202. D ARRR LANY CARRIER 3G 10:00 AM Back 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 Check In
  • 203. D ARRR LANY CARRIER 3G 10:00 AM Back 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 Check In
  • 204. This is a native shape, so changing the color is easy. D ARRR LANY CARRIER 3G 10:00 AM Back 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 Check In
  • 205. D ARRR LANY Cancel Check In Check In Keynote Kung-Fu: Black Belt What are you doing? But this is a Pictos icon... Share Facebook ON Twitter ON Twitter Value 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
  • 206. D ARRR LANY Cancel Check In Check In Keynote Kung-Fu: Black Belt What are you doing? Share Facebook ON Twitter ON Twitter Value 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. D ARRR LANY Cancel Check In Check In Keynote Kung-Fu: Black Belt What are you doing? Share Facebook ON Twitter ON Twitter Value 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. D ARRR LANY Cancel Check In Check In Keynote Kung-Fu: Black Belt What are you doing? Share Facebook ON Twitter ON Twitter Value 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. D ARRR LANY Cancel Check In Check In Keynote Kung-Fu: Black Belt What are you doing? Share Facebook ON Twitter ON Twitter Value 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. D ARRR LANY Cancel Check In Check In Keynote Kung-Fu: Black Belt What are you doing? Share Facebook ON Twitter ON Twitter Value 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. D ARRR LANY Cancel Check In Check In Keynote Kung-Fu: Black Belt What are you doing? Share Facebook ON Twitter ON Twitter Value 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
  • 212.
  • 213. Let’s talk about masking..
  • 214. You could just drop shape from Illustrator, but..
  • 215. Mail Search Print Radiation
  • 216. We like just having a single Mail Search Print Radiation 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
  • 225.
  • 226. Arrow Key: Move 1 pixel at a time
  • 227. Shift+ Arrow Key: Move 10 pixels at a time
  • 231.
  • 236. Fully functional* *if you are working solely on the iPad
  • 237.
  • 238.
  • 239.
  • 240.
  • 241.
  • 243. You can have any slide size that you want, as long as it’s 1024x768
  • 244.
  • 246.
  • 248. No custom master slides
  • 250.
  • 251. You can’t edit grouped elements
  • 252.
  • 253.
  • 254.
  • 256. Button
  • 257. Button
  • 258. Button
  • 259. Button
  • 260. Button
  • 262. We’ve got to show this to someone...how do we do it?
  • 263. iPad 10:00 AM Conferenc es Nearby We’ve got to show this to 2:00pm someone...how do we do it? CARRIER 3G 10:00 AM Conferences Nearby forrr iPhone forrr iPad L A N YA R R R D July 14-16 in Dallas TX CONFERE NCE COM PA N I O N  Free to use th e app! Free to list yo ur conference ! iPhone Scree nshots I’m There Many apps h ave tried to d Lanyarrrd d o this right, oes it rrrr’ig ht! iPad Screens hots Makes it easi nces er to decide in Search For Other Confere what session s to attend. advance rch Conferences I was able
  • 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. Normally when wireframing, you focus on creating pages and layouts Travis’s Deck
  • 268. Instead of creating pages, create logical groups, or chunks of functionality Travis’s Deck
  • 269.
  • 270.
  • 271.
  • 272.
  • 273.
  • 274. Now we have our slices. Wrap them in some really simple HTML
  • 275. What about interactivity? Like a modal window for example Travis’s Deck
  • 276. Please Register Travis’s Deck
  • 277. PY Please Register CO Travis’s Deck
  • 278.
  • 279. Just paste into Photoshop as a smart object.
  • 280.
  • 281. Now, with just a little bit of JS, you have full interactivity
  • 282. Now, with just a little bit of JS, you have full interactivity C LI CK
  • 283. Now, with just a little bit of JS, you have full interactivity Please Register C LI CK
  • 284. Presenting on the iPad http://www.flickr.com/photos/otivo/5489295621/sizes/l/in/photostream/
  • 285.
  • 286.
  • 287.
  • 288.
  • 289.
  • 291.
  • 292.
  • 294.
  • 295.
  • 296.
  • 297.
  • 299.
  • 300.
  • 301.
  • 302.
  • 303.
  • 304.
  • 305.
  • 306.
  • 307.
  • 308. TAP
  • 309. The slide action is disruptive to the prototype
  • 310.
  • 312.
  • 313.
  • 314.
  • 316.
  • 317. It looks complex upon initial view...
  • 321.
  • 322.
  • 325. DESIGN THINKING
  • 326. Annotate Annotate Annotate Annotate
  • 327.
  • 329. Day of
  • 331.
  • 334. D ARRR LANY
  • 335. D ARRR LANY “ “ Responsive Web Design
  • 336. D ARRR LANY
  • 337. D ARRR LANY
  • 338. D ARRR LANY
  • 339.
  • 340.
  • 341.
  • 342.
  • 343.
  • 344.
  • 345.
  • 346.
  • 347.
  • 348.
  • 349.
  • 350.
  • 351.
  • 352.
  • 353.
  • 355.
  • 356. Outline Story Welcome Setting Up Advanced Animation Ideation Custom Themes Wireframing Keynote on iOS Prototyping Prototyping Display Slide Dimensions Pitch Division of Labor Promotion Hacks & Tips Closing
  • 358. D ARRR LANY
  • 359. Management Conference 5,000 Employees “2 weeks from now”
  • 360. Management Conference We dont... 5,000 video. Employees “2 weeks from now”
  • 361. Management Conference 5,000 Employees “2 weeks from now”
  • 362.
  • 363. D ARRR LANY
  • 364. Builds - In / Out (automated) Transition-like animations
  • 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
  • 382. Sorry, Slideshare. You had to be there for this one. AMAZING TRANSITION
  • 383.
  • 384.
  • 385.
  • 386.
  • 387.
  • 388.
  • 390.
  • 391.
  • 393.
  • 394. You could animate the group...
  • 395. 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
  • 396. But there AMlot of 10:00 a moving parts, could get CARRIER 3G messy.. 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
  • 397.
  • 398.
  • 399.
  • 400.
  • 401.
  • 402.
  • 403.
  • 404.
  • 405. Instead, we like to animate a PDF
  • 406.
  • 407.
  • 408. PDF Keynote
  • 409.
  • 410.
  • 411. If this is no big deal to you..
  • 413. You might be a black belt already BLACK BELT
  • 414.
  • 415.
  • 416. This can get crazy to manage
  • 418. slide1 This animation actually has two distinct parts slide2
  • 420. slide1 The zoom, and the title wipe.. slide2
  • 422. slide1 So we’ll split them up over two slides. slide2
  • 424.
  • 425.
  • 426.
  • 427.
  • 428. This will make the slide auto-advance
  • 429.
  • 430.
  • 431.
  • 432. The zoom animation stays here
  • 433.
  • 435.
  • 436.
  • 437.
  • 438.
  • 440. Keynote Quicktime
  • 441.
  • 442.
  • 443.
  • 444.
  • 445.
  • 446.
  • 447.
  • 448.
  • 449.
  • 450. You may need iMovie to fade music in/out
  • 451. forrr forrr iPhone iPad 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 ! 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!
  • 452.
  • 453. ? @tbisaacs @dustinaskins @improving keynotekungfu.com
  • 454. if there’s time... ? @tbisaacs @dustinaskins @improving keynotekungfu.com