Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Travis Isaacs - Getting Bad Ideas Out Of The Way With Keynote

UX London
May 02, 2012

Travis Isaacs - Getting Bad Ideas Out Of The Way With Keynote

Ready to leave the boring world of wireframes and design documentation behind?

Create clickable, high-fidelity prototypes for web, desktop, or mobile apps using Keynote in less time than it takes to create a just a wireframe in your old wireframing tool. All without any coding or learning a complex and expensive new tool.

UX London

May 02, 2012
Tweet

More Decks by UX London

Other Decks in Design

Transcript

  1. @tbisaacs
    Keynote Kung-Fu:
    Getting Bad Ideas Out Of The
    Way With Keynote

    View full-size slide

  2. @tbisaacs
    My name is Travis Isaacs,
    and I’m from Dallas.

    View full-size slide

  3. @tbisaacs
    CLICK
    CLICK

    View full-size slide

  4. @tbisaacs
    DISCUSSION
    LECTURE
    LAB
    BREAK

    View full-size slide

  5. @tbisaacs
    कഁ཭
    SHU HA RI
    http://en.wikipedia.org/wiki/Shuhari

    View full-size slide

  6. @tbisaacs
    http://en.wikipedia.org/wiki/Shuhari
    SHU
    ഁ Learn the fundamentals,
    obey the rules

    View full-size slide

  7. @tbisaacs
    http://en.wikipedia.org/wiki/Shuhari
    HA
    क Break the rules!

    View full-size slide

  8. @tbisaacs
    http://en.wikipedia.org/wiki/Shuhari
    RI
    ཭ Transcend

    View full-size slide

  9. @tbisaacs
    कഁ཭
    SHU HA RI
    http://en.wikipedia.org/wiki/Shuhari

    View full-size slide

  10. @tbisaacs
    I don’t wireframe.

    View full-size slide

  11. New
    Settings Help Sign Out
    Blinksale Travis Isaacs
    Dashboard Clients
    Invoices & Estimates
    Projects Team
    Invoice theme:
    Theme name
    Theme name
    Theme name
    Add to invoice:
    Hours
    Expenses
    Services
    66 hrs
    $433
    SEND
    Save for later or Cancel
    Travis Isaacs
    555 Maple Street
    Anywhere, TX 76054
    COMPANY LOGO
    KIND QTY DESCRIPTION PRICE TOTAL
    $100 $0.00
    HRS
    Subtotal $0.00
    Tax (8.75%) $0.00
    Freight $0.00
    Total Due $0.00
    Invoice 1411 Due 11/9/2009 (NET 30)
    Invoice notes
    SENT 10/09/2009
    New line
    Who is this for? [email protected] Addresses
    Convert to estimate

    View full-size slide

  12. 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

    View full-size slide

  13. 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
    CLICK

    View full-size slide

  14. Plans Subdivisions Items Options Trade Partner Requests
    Take-offs for #1750 (The Venetian) for all elevations and all options
    Save or Cancel
    Frame I Walls and Joists
    1400
    Item UOM Quant
    1/2x12 Text 104 Siding EA
    1/4 x 3/4 Flat screen mould LF
    10x24 Arch Cedar Louver EA
    10x24 Rough Cedar Rectangle Vent EA
    1-1/2 Joist Hanger Nails 50# EA
    12in x 200’ 6 mil Black Poly EA
    12x12 Text Fcp Lap EA
    12x24 Arch Top Cedar Vent EA
    1-3/4x14in Level Micro Lamb Ship 2-19’ Pcs LF
    1-3/4x16in Level Micro Lamb Ship 3-24’ Pcs LF
    17
    22
    0
    3
    100
    10
    10
    5
    0
    0
    Windows
    1440
    Add Item Take-off complete
    Plumbing Fixtures
    1200

    View full-size slide

  15. Plans Subdivisions Items Options Trade Partner Requests
    Take-offs for #1750 (The Venetian) for all elevations and all options
    Save or Cancel
    Frame I Walls and Joists
    1400
    Item UOM Quant
    1/2x12 Text 104 Siding EA
    1/4 x 3/4 Flat screen mould LF
    10x24 Arch Cedar Louver EA
    10x24 Rough Cedar Rectangle Vent EA
    1-1/2 Joist Hanger Nails 50# EA
    12in x 200’ 6 mil Black Poly EA
    12x12 Text Fcp Lap EA
    12x24 Arch Top Cedar Vent EA
    1-3/4x14in Level Micro Lamb Ship 2-19’ Pcs LF
    1-3/4x16in Level Micro Lamb Ship 3-24’ Pcs LF
    17
    22
    0
    3
    100
    10
    10
    5
    0
    0
    Windows
    1440
    Add Item
    CLICK Take-off complete
    Plumbing Fixtures
    1200

    View full-size slide

  16. Plans Subdivisions Items Options Trade Partner Requests
    Add Items to Frame I Walls and Joist (#1750 - the Venetian)
    CLICK
    Components Labor Rates Fixed-Fee Services Substitution Code
    Appliances Windows Concrete Drywall Flooring
    Hardware Light Fixtures Plumbing Fixtures Lumber Masonry
    Select a component class:

    View full-size slide

  17. F2: Mats F3: Frames F4: Finishing TOTAL: $212.02
    F1: Add Artwork
    Add artwork to get started!
    Image description
    Width Height
    x
    ADD
    Add More Artwork
    Image type
    Image condition
    Image size
    Mat Dimensions: 11 1/4” x 9 1/4”
    1: Photo of Children
    1: Children
    10” x 8”
    Wall Color
    Align Distribute
    Grandparents
    10”x8”
    Normal condition Photography
    10” 8”

    View full-size slide

  18. F2: Mats F3: Frames F4: Finishing TOTAL: $212.02
    F1: Add Artwork
    Add artwork to get started!
    Image description
    Width Height
    x
    ADD
    Add More Artwork
    Image type
    Image condition
    Image size
    Mat Dimensions: 11 1/4” x 9 1/4”
    1: Photo of Children
    1: Children
    10” x 8”
    Wall Color
    Align Distribute
    Grandparents
    10”x8”
    Normal condition Photography
    10” 8”
    Click

    View full-size slide

  19. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
    F1: Add Artwork
    Mat Dimensions: 27” x 16”
    F1: Add Artwork
    Image description
    Width Height
    x
    ADD
    Add More Artwork
    Image type
    Image condition
    Image size
    2: Photo of Grandparents
    1: Photo of Children
    1: Children
    10” x 8”
    2: Grandparents
    10” x 8”
    Wall Color
    Align Distribute

    View full-size slide

  20. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
    F1: Add Artwork
    Mat Dimensions: 27” x 16”
    F1: Add Artwork
    Image description
    Width Height
    x
    ADD
    Add More Artwork
    Image type
    Image condition
    Image size
    2: Photo of Grandparents
    1: Photo of Children
    1: Children
    10” x 8”
    2: Grandparents
    10” x 8”
    Wall Color
    Align Distribute
    Click

    View full-size slide

  21. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
    F1: Add Artwork
    Mat Dimensions: 27” x 16”
    F1: Add Artwork
    1: Photo of Children
    1: Children
    10” x 8”
    2: Grandparents
    10” x 8”
    Wall Color
    Align Distribute
    Image description
    Width Height
    x
    SAVE
    2: Photo of Grandparents
    Image type
    Image condition
    Image size
    Add more artwork
    Delete
    4”
    4”
    2”
    3”
    Grandparents
    10”x8”
    Normal condition Photography
    10” 8”

    View full-size slide

  22. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
    F1: Add Artwork
    Mat Dimensions: 27” x 16”
    F1: Add Artwork
    1: Photo of Children
    1: Children
    10” x 8”
    2: Grandparents
    10” x 8”
    Wall Color
    Align Distribute
    Image description
    Width Height
    x
    SAVE
    2: Photo of Grandparents
    Image type
    Image condition
    Image size
    Add more artwork
    Delete
    4”
    4”
    2”
    3”
    Grandparents
    10”x8”
    Normal condition Photography
    10” 8”
    I can make edits
    here...

    View full-size slide

  23. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
    F1: Add Artwork
    Mat Dimensions: 27” x 16”
    F1: Add Artwork
    1: Photo of Children
    1: Children
    10” x 8”
    2: Grandparents
    10” x 8”
    Wall Color
    Align Distribute
    Image description
    Width Height
    x
    SAVE
    2: Photo of Grandparents
    Image type
    Image condition
    Image size
    Add more artwork
    Delete
    4”
    4”
    2”
    3”
    Grandparents
    10”x8”
    Normal condition Photography
    10” 8”
    ...Or by clicking
    on a dimension
    3”4”

    View full-size slide

  24. F2: Mats F3: Frames F4: Finishing TOTAL: $490.29
    F1: Add Artwork
    Mat Dimensions: 27” x 16”
    F1: Add Artwork
    1: Photo of Children
    1: Children
    10” x 8”
    2: Grandparents
    10” x 8”
    Wall Color
    Align Distribute
    Image description
    Width Height
    x
    SAVE
    2: Photo of Grandparents
    Image type
    Image condition
    Image size
    Add more artwork
    Delete
    4”
    4”
    2”
    3”
    Grandparents
    10”x8”
    Normal condition Photography
    10” 8”
    Or by dragging
    the corners

    View full-size slide

  25. Have you played these games?
    All Platforms Xbox 360 PS3 Wii DS PSP PC Xbox PS2 More Platforms find a game
    Box Art
    Played It!
    Red Dead Redemption
    Box Art
    Played It!
    Red Dead Redemption
    Box Art
    Played It!
    Red Dead Redemption
    Box Art
    Played It
    Red Dead Redemption
    Box Art
    Played It!
    Red Dead Redemption
    Box Art
    Played It
    Red Dead Redemption
    Your Gamer DNA™ See other gamers like you
    Games Played
    96
    Rookie
    75% of members have played
    more games than you.
    See leaderboards for more
    Gamer Type
    Zombie killing
    social butterfly
    You like games that involve
    zombies and that are multiplayer
    or massively-multiplayer.
    Favorite Platform Favorite Genres Community Stats
    Member since: 8/10/2010
    Games you’ve rated: 0
    Comments: 0
    Forum posts: 0
    Following: 0 invite friends
    Followers: 0
    Xbox 360
    PS3
    Wii
    DS
    PSP
    PC
    Horror
    FPS
    Driving
    Football
    Party


    View full-size slide

  26. Daily Production Summary
    KPIs: Daily Production Budget Base Wedge Recompletion Drilling Production By Category LOE Lease Expiration
    Brandon Cotter
    50
    52
    54
    56
    58
    10/1 10/3 10/5 10/7 10/9 10/11 10/13 10/15 10/17 10/19 10/21 10/23 10/25 10/27 10/29 10/31
    • • •


    Panhandle West
    52
    54
    56
    58
    Arkoma
    52
    54
    56
    58
    Laredo
    50
    52
    54
    56
    58
    10/1 10/4 10/7 10/10 10/13 10/16 10/19 10/22 10/25 10/28 10/31
    Andarko
    50
    52
    54
    56
    58
    10/1 10/4 10/7 10/10 10/13 10/16 10/19 10/22 10/25 10/28 10/31
    Panhandle East
    50
    52
    54
    56
    58
    10/1 10/4 10/7 10/10 10/13 10/16 10/19 10/22 10/25 10/28 10/31
    My Sites 11/2009 12/2009 1/2010 2/2010 3/2010 4/2010 5/2010 6/2010 7/2010 8/2010 9/2010 10/2010 Custom Date Range

    View full-size slide

  27. Singularity by Activision
    Played it? Rate it!
    Playstation 3 for XBox 360 Nintendo Wii



     
    Average Rating
    Based on 345 ratings
    9.5 10.0
    9.0
    8.0
    7.0
    Store Pickup
    In stock as of 8am EST at these locations.
    Shops of Southlake
    Southlake , TX 76092
    Pick Up Here
    View more locations »
    BUY NEW
    $59.99
    Usually ships in 24 hours details
    ADD TO CART
    BUY PRE-OWNED
    $49.99
    Guaranteed to work!
    ADD TO CART
    Add to wish list 
    Share 27K
    Buzz News Game Details Polls GameStop Wiki
    JUMP TO

    View full-size slide

  28. @tbisaacs
    10:00 AM
    CARRIER 3G
    Wednesday 2/29
    West Side
    Workshops
    Classes Appointments
    8:00 AM
    Elements
    Katie DeLuca
    9:00 AM
    NorCal On Ramp
    Chrissy Gower
    9:00 AM
    Elements
    Katie DeLuca

    View full-size slide

  29. @tbisaacs
    GPS
    N
    13.99
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
    CURRENT (MPH) 15.99 AVG.
    22.29 MAX.
    SPLIT OVERALL ELAPSED
    +13s -1m 33s 1h 44m 33s
    645 FT Climb 985 Calories Burned
    53° SE at 11mph

    View full-size slide

  30. @tbisaacs
    Crafting (43)
    Cross Stitch and
    Needle Work (10)
    Exclusively New (22)
    Knit and Crochet (39)
    Papercrafting (13)
    Quilting (4)
    Recipes (18)
    My Stuff
    Featured Projects
    Featured Projects
    Double-Take Helmet Set
    to Crochet
    IMAGE
    12 pages
    $12
    Chocolate Brownie Bump
    Ice Cream
    IMAGE
    4 pages
    $9
    Patriotic Flip-Flops
    IMAGE
    2 pages
    $2
    Double-Take Helmet Set
    to Crochet
    IMAGE
    12 pages
    $12
    Chocolate Brownie Bump
    Ice Cream
    IMAGE
    4 pages
    $9
    Patriotic Flip-Flops
    IMAGE
    2 pages
    $2
    Double-Take Helmet Set
    to Crochet
    IMAGE
    12 pages
    $12
    Chocolate Brownie Bump
    Ice Cream
    IMAGE
    4 pages
    $9
    Patriotic Flip-Flops
    IMAGE
    2 pages
    $2
    TAP

    View full-size slide

  31. @tbisaacs
    Search flights, hotels, cars, and more
    Starting to question if we need this
    drawer
    Hotel Statler Hilton
    $579
    Hilton Garden Inn
    $449
    Activities
    Hotels
    Near You
    This is the app’s default page. We’ll ask
    for the current location upon startup.
    The default sort for hotels is proximity,
    but we could also intermingle top
    secret and travelocity picks.
    “filmstrip” list of activities—although our
    current provider is really weak outside
    of top travel markets...
    Offer a global search with a
    voice button. (more later)
    Sign In / Up
    Nav:
    Nearby
    Flights
    Hotels
    Cars
    Favorites/History
    my trips
    get app
    find gas
    contact us
    full site
    faq
    flifo
    destinations
    REDACTED

    View full-size slide

  32. @tbisaacs
    Gamestop search for games or accessories
    Store Locator Order Lookup Weekly Ad
    BOX
    Call of Duty:
    Black Ops
    Xbox 360
    Average User Rating:
    8.0
    BUY NEW
    Usually Ships in 24 hrs
    BUY PRE-OWNED
    Online Price Only
    Guaranteed To Play
    Buy at your local Gamestop:
    $49.99
    $39.99
    334
    Share:
    REDACTED
    REDACTED

    View full-size slide

  33. @tbisaacs
    CLICK
    Story told by annotations and interactions

    View full-size slide

  34. @tbisaacs
    CLICK
    Story told by annotations and interactions
    TAP

    View full-size slide

  35. @tbisaacs
    CLICK
    Story told by annotations and interactions
    TAP
    Tap

    View full-size slide

  36. @tbisaacs
    All Things Considered
    Muybridge: The Man Who Made Pictures Move
    Settings
    Sports Talk
    Music
    Radio By Location
    All Things Considered
    News radio from Washington DC
    Add to presets
    On live in 3hr 33min
    from KNOW-FM 91.1
    Similar Shows:
    Weekend Edition Sunday
    Weekend Edition Saturday
    Wait Wait, Don’t Tell Me
    Living on Earth
    Here and Now (NPR)
    Share
    All Things Considered (News)
    KERA 90.1 FM
    Hosts: Robert Siegel, Michele Norris,
    Melissa Block
    For two hours every weekday, hosts
    Robert Siegel, Michele Norris and
    Melissa Block present the program's
    trademark mix of news, interviews,
    commentaries, reviews, and offbeat
    features.
    Recent Topics More Stations & Times
    APR
    13
    2010
    Muybridge: The Man Who Made Pictures Move
    A new exhibition at the Corcoran Gallery of Art in Washington,
    D.C., looks at the legacy of Eadweard Muybridge, whose
    sequential photographs of horses at a gallop their movements
    broken down frame by frame have become iconic
    APR
    13
    2010
    Online Cartoonist Wins Pulitzer
    Mark Fiore is a self-syndicating cartoonist whose irreverent online
    animations appear on the San Francisco area news site
    SFGate.com. Fiore won a Pulitzer yesterday, one of the first two
    Pulitzers ever awarded to nontraditional media. Judges said his
    work set a high standard for an emerging form of commentary.
    APR
    13
    2010
    Karadzic Genocide Trial Opens After Months Of Delay
    The trial of the former Bosnian Serb leader Radovan Karadzic
    resumed in The Hague on Tuesday, after months of procedural
    wrangles. Karadzic faces charges of genocide, crimes against
    humanity and war crimes relating to the war in the former
    Yugoslavia during the 1990s.
    APR
    13
    2010
    Russian Adoption Case Belies Many Happy
    Adoptions
    Commentator Eric Weiner says recent adoption scandals involving
    Russia and Haiti represent adoption programs poorly. Happy
    families are too often overlooked, and spotlighting only the
    programs' blemishes hurts potential parents and the children they
    love. It's not adoptive children who are being saved; it's the
    adoptive parents who otherwise wouldn't have a child in their lives,
    he says.
    APR
    13
    2010
    Study: Computer Security Measures Not All Worth It
    A new study by a researcher at Microsoft says that many security
    measures designed to spare people from computer attacks are a
    giant waste of time and money. Michele Norris speaks with Mark
    Pothier, a senior assistant business editor for The Boston Globe
    who has written about the research.
    LISTEN
    LISTEN
    LISTEN
    LISTEN
    LISTEN
    At just enough fidelity

    View full-size slide

  37. @tbisaacs
    It’s $79 $49 $19

    View full-size slide

  38. @tbisaacs
    Gorgeous Presentations

    View full-size slide

  39. @tbisaacs
    Crazy Portable

    View full-size slide

  40. Insanely portable

    View full-size slide

  41. http:/
    /www.flickr.com/photos/wicho/4532824380/

    View full-size slide

  42. http:/
    /www.flickr.com/photos/ippei-janine/5804239132/sizes/o/in/photostream/

    View full-size slide

  43. http:/
    /www.flickr.com/photos/jamesreeve/5930449160/sizes/l/in/photostream/

    View full-size slide

  44. Fully functional*
    *if you are working solely on the iPad

    View full-size slide

  45. You can have any slide
    size that you want, as
    long as it’s 1024x768

    View full-size slide

  46. No “action” builds

    View full-size slide

  47. No locked objects

    View full-size slide

  48. No custom master
    slides

    View full-size slide

  49. You can’t edit grouped
    elements

    View full-size slide

  50. @tbisaacs
    Powerful Drawing Tools

    View full-size slide

  51. @tbisaacs
    MARKED FOR LIFE TATTOO CUSTOMER INFORMATION
    LAST NAME:
    1 FIRST NAME:
    STREET:
    2 CITY: STATE: ZIPCODE:
    DAYTIME PHONE:
    3 EVENING PHONE:
    - - - -
    IDENTIFICATION: The Indiana Health Department requires a photo identification and a proof of signature:
    4
    Photo ID provided (check one):
    Driver’s License
    Student ID
    State ID
    Employee ID
    Other photo ID:
    Signature ID provided (check one):
    Credit/Debit card
    Calling card
    Wholesale membership card
    Hunting/Fishing license
    Other:
    Please attach your ID’s to this form so they can be photocopied.
    SIGNATURE:
    6 DATE: - -
    I hereby affirm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge.
    DATE OF BIRTH:
    5 / / If you are under 18, a guardian will need to sign for you (below)
    !
    GUARDIAN CONSENT (ONLY NEEDED FOR MINORS)
    LAST NAME: FIRST NAME:
    NOTE: The information below is required by the Indiana Health Department. All information will kept confidential.
    http:/
    /travisisaacs.com/2008/07/31/information-design-tattoos/
    Where this whole
    Keynote thing started...

    View full-size slide

  52. @tbisaacs
    4 Use the diagram below to indicate where your tattoo(s) or piercing(s) will be located:
    FRONT BACK RIGHT EAR LEFT EAR
    SIGNATURE:
    5 DATE: - -
    I hereby affirm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge.
    http:/
    /travisisaacs.com/2008/07/31/information-design-tattoos/

    View full-size slide

  53. @tbisaacs
    Flexible Output

    View full-size slide

  54. @tbisaacs
    my_idea.pdf
    Document
    Presentation
    Prototype

    View full-size slide

  55. @tbisaacs
    Reusable Artifacts

    View full-size slide

  56. @tbisaacs
    WIREFRAME
    Keynote
    PROTOTYPE
    HTML, CSS, jQuery, 960.gs
    VISUAL COMP
    Photoshop
    SKETCH
    Pencil & Paper

    View full-size slide

  57. @tbisaacs
    WIREFRAME
    Keynote
    PROTOTYPE
    HTML, CSS, jQuery, 960.gs
    VISUAL COMP
    Photoshop
    ETCH
    & Paper
    Much less emotional
    investment in bad ideas

    View full-size slide

  58. @tbisaacs
    EASY FOR CLIENTS
    TO UNDERSTAND
    HARD FOR CLIENTS
    TO UNDERSTAND
    HARD FOR DESIGNER EASY FOR DESIGNER
    WIREFRAME
    INTERACTIVE
    WIREFRAME
    VISUAL COMP
    HTML
    PROTOTYPE DESIGN
    DOCUMENT

    View full-size slide

  59. @tbisaacs
    EASY FOR CLIENTS
    TO UNDERSTAND
    HARD FOR CLIENTS
    TO UNDERSTAND
    HARD FOR DESIGNER EASY FOR DESIGNER
    WIREFRAME
    INTERACTIVE
    WIREFRAME
    VISUAL COMP
    HTML
    PROTOTYPE DESIGN
    DOCUMENT
    “Don’t show clients
    wire"ames. Ever.”
    - Internet Famous Designer

    View full-size slide

  60. @tbisaacs
    EASY FOR CLIENTS
    TO UNDERSTAND
    HARD FOR CLIENTS
    TO UNDERSTAND
    HARD FOR DESIGNER EASY FOR DESIGNER
    WIREFRAME
    INTERACTIVE
    WIREFRAME
    VISUAL COMP
    HTML
    PROTOTYPE DESIGN
    DOCUMENT
    Agreed. Hide these

    View full-size slide

  61. @tbisaacs
    EASY FOR CLIENTS
    TO UNDERSTAND
    HARD FOR CLIENTS
    TO UNDERSTAND
    HARD FOR DESIGNER EASY FOR DESIGNER
    WIREFRAME
    INTERACTIVE
    WIREFRAME
    VISUAL COMP
    HTML
    PROTOTYPE DESIGN
    DOCUMENT
    Show these early and often

    View full-size slide

  62. @tbisaacs
    EASY FOR CLIENTS
    TO UNDERSTAND
    HARD FOR CLIENTS
    TO UNDERSTAND
    HARD FOR DESIGNER EASY FOR DESIGNER
    WIREFRAME
    INTERACTIVE
    WIREFRAME
    VISUAL COMP
    HTML
    PROTOTYPE DESIGN
    DOCUMENT
    Ideal, but can be costly to create

    View full-size slide

  63. @tbisaacs
    EASY FOR CLIENTS
    TO UNDERSTAND
    HARD FOR CLIENTS
    TO UNDERSTAND
    HARD FOR DESIGNER EASY FOR DESIGNER
    WIREFRAME
    INTERACTIVE
    WIREFRAME
    VISUAL COMP
    HTML
    PROTOTYPE DESIGN
    DOCUMENT
    Polished, but difficult to describe interaction

    View full-size slide

  64. @tbisaacs
    EASY FOR CLIENTS
    TO UNDERSTAND
    HARD FOR CLIENTS
    TO UNDERSTAND
    HARD FOR DESIGNER EASY FOR DESIGNER
    WIREFRAME
    INTERACTIVE
    WIREFRAME
    VISUAL COMP
    HTML
    PROTOTYPE DESIGN
    DOCUMENT
    Enough fidelity, interactive, cheap to create

    View full-size slide

  65. @tbisaacs
    Enough fidelity,
    interactive, cheap to create
    Enough fidelity,
    interactive, cheap to create

    View full-size slide

  66. @tbisaacs
    Enough fidelity,
    interactive, cheap to create

    View full-size slide

  67. @tbisaacs
    idea good idea

    View full-size slide

  68. @tbisaacs
    idea good idea

    View full-size slide

  69. @tbisaacs
    idea good idea

    View full-size slide

  70. @tbisaacs
    idea good idea
    “Your first design may be the best, but you won’t know until you can’t find a better one.”
    Jason Fried

    View full-size slide

  71. @tbisaacs
    Lab

    View full-size slide

  72. @tbisaacs
    Quick Show Of Hands:
    Do You Have Keynote (with you?)

    View full-size slide

  73. @tbisaacs
    Quick Show Of Hands:
    Keynote for iOS (with you)?

    View full-size slide

  74. @tbisaacs
    Quick Show Of Hands:
    Powerpoint?

    View full-size slide

  75. @tbisaacs
    Quick Show Of Hands:
    Do you have an iPhone?

    View full-size slide

  76. @tbisaacs
    Quick Show Of Hands:
    Do you have an iPad?

    View full-size slide

  77. @tbisaacs
    Quick Show Of Hands:
    Do you have an Android device?

    View full-size slide

  78. @tbisaacs
    Environment Setup
    Working With Shapes & Objects
    Visual Design
    Linking, Animations, and Interactions
    Testing On-Device
    Prototyping Exercise
    Show & Tell

    View full-size slide

  79. @tbisaacs
    Environment Setup
    Working With Shapes & Objects
    Visual Design
    Linking, Animations, and Interactions
    Testing On-Device
    Prototyping Exercise
    Show & Tell
    Keynote
    Basics

    View full-size slide

  80. @tbisaacs
    Environment Setup
    Working With Shapes & Objects
    Visual Design
    Linking, Animations, and Interactions
    Testing On-Device
    Prototyping Exercise
    Show & Tell
    The Fun
    Stuff

    View full-size slide

  81. @tbisaacs
    You
    Your turn to do something

    View full-size slide

  82. @tbisaacs
    Environment Setup

    View full-size slide

  83. @tbisaacs
    You

    View full-size slide

  84. @tbisaacs
    You

    View full-size slide

  85. @tbisaacs
    You
    Pull

    View full-size slide

  86. @tbisaacs
    You

    View full-size slide

  87. @tbisaacs
    You

    View full-size slide

  88. @tbisaacs
    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
    Includes device chrome,
    meant to be displayed
    on screen

    View full-size slide

  89. @tbisaacs
    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
    No chrome, meant to be shown on the device

    View full-size slide

  90. @tbisaacs
    You

    View full-size slide

  91. @tbisaacs
    Wireframe In Here
    Prototype In Here

    View full-size slide

  92. @tbisaacs
    Bad Ideas
    Good Ideas
    Safety Net

    View full-size slide

  93. @tbisaacs
    Master Slide Slide

    View full-size slide

  94. @tbisaacs
    Static Interactive

    View full-size slide

  95. @tbisaacs
    You

    View full-size slide

  96. @tbisaacs
    You

    View full-size slide

  97. @tbisaacs
    You
    CLICK

    View full-size slide

  98. @tbisaacs
    You

    View full-size slide

  99. @tbisaacs
    You

    View full-size slide

  100. @tbisaacs
    You
    DRAG

    View full-size slide

  101. @tbisaacs
    You

    View full-size slide

  102. @tbisaacs
    You

    View full-size slide

  103. @tbisaacs
    Working With Shapes & Objects

    View full-size slide

  104. @tbisaacs
    Shift+ Arrow Key:
    Move 10 pixels at a time

    View full-size slide

  105. @tbisaacs
    Shift+ Arrow Key:
    Move 10 pixels at a time

    View full-size slide

  106. @tbisaacs
    Shift+ Drag:
    Constrain Movement

    View full-size slide

  107. @tbisaacs
    Shift+ Drag:
    Constrain Movement

    View full-size slide

  108. @tbisaacs
    Shift+ Resize:
    Resize Proportionally

    View full-size slide

  109. @tbisaacs
    Shift+ Resize:
    Resize Proportionally

    View full-size slide

  110. @tbisaacs
    Option+Resize:
    Resize from
    center

    View full-size slide

  111. @tbisaacs
    Option+Resize:
    Resize from
    center

    View full-size slide

  112. @tbisaacs
    You

    View full-size slide

  113. @tbisaacs
    You

    View full-size slide

  114. @tbisaacs
    You

    View full-size slide

  115. @tbisaacs
    You

    View full-size slide

  116. @tbisaacs
    You

    View full-size slide

  117. @tbisaacs
    You

    View full-size slide

  118. @tbisaacs
    You
    alt
    option
    + click

    View full-size slide

  119. @tbisaacs
    You

    View full-size slide

  120. @tbisaacs
    You

    View full-size slide

  121. @tbisaacs

    command
    make point editable
    shift
    constrain point placement to 0°/45°/90° angles

    View full-size slide

  122. @tbisaacs
    Visual Design

    View full-size slide

  123. @tbisaacs
    Select

    View full-size slide

  124. @tbisaacs
    Select
    Select

    View full-size slide

  125. @tbisaacs
    Select
    Select
    Select

    View full-size slide

  126. @tbisaacs
    Select
    Select
    Select
    Select

    View full-size slide

  127. @tbisaacs
    Select
    Select
    Select
    Select
    Select

    View full-size slide

  128. @tbisaacs
    Select
    Select
    Select
    Select
    Select

    View full-size slide

  129. @tbisaacs
    Select
    Select
    Select
    Select
    Select

    View full-size slide

  130. @tbisaacs
    Select
    Select
    Select
    Select
    Select

    View full-size slide

  131. @tbisaacs
    Select
    Select
    Select
    Select
    Select

    View full-size slide

  132. @tbisaacs
    Select
    Select
    Select
    Select
    Select

    View full-size slide

  133. @tbisaacs
    You
    Select
    Select
    Select
    Select
    Select

    View full-size slide

  134. @tbisaacs
    You

    View full-size slide

  135. @tbisaacs
    You

    View full-size slide

  136. @tbisaacs
    You

    View full-size slide

  137. @tbisaacs
    You

    View full-size slide

  138. @tbisaacs
    You

    View full-size slide

  139. @tbisaacs
    Mail Search Print Radiation

    View full-size slide

  140. @tbisaacs
    Mail Search Print Radiation

    View full-size slide

  141. @tbisaacs
    Mail Search Print Radiation

    View full-size slide

  142. @tbisaacs
    Mail Search Print Radiation

    View full-size slide

  143. @tbisaacs
    Mail Search Print Radiation

    View full-size slide

  144. @tbisaacs
    Mail Search Print Radiation

    View full-size slide

  145. @tbisaacs
    Mail Search Print Radiation

    View full-size slide

  146. @tbisaacs
    Mail Search Print Radiation

    View full-size slide

  147. @tbisaacs
    Links & Interactions

    View full-size slide

  148. @tbisaacs
    163
    Activity Log
    Updated 2 hours ago
    Skilled Athlete
    Meals & Snacks
    Weight & Stats
    Progress Photo
    Today
    Sleep Activity
    ZZZ
    Supplements
    2
    0
    1
    1
    3
    2
    Vitals 1
    Activity Log
    Updated 2 hours ago
    Skilled Athlete
    Meals & Snacks
    Weight & Stats
    Progress Photo
    Today
    Sleep Activity
    ZZZ
    Supplements
    2
    0
    1
    1
    3
    2
    Vitals 1
    Sunday, July 24
    July 2011
    July 2011
    July 2011
    July 2011
    July 2011
    July 2011
    July 2011
    S M T W T F S
    1 2
    3 4 5 6 7 8 9
    10 11 12 13 14 15 16
    17 18 19 20 21 22 23
    24 25 26 27 28 29 30
    
    Activity Log
    Updated 2 hours ago
    Skilled Athlete
    Today
    Blueberries, bbq chicken breast,
    macadamia nuts.
    1:11 pm
    2
    4
    Ground beef, broccoli, cauliflower,
    and almonds.
    8:14 am
    ZZZ 17 minute nap
    10:33 am
    0
    0
    1 tbsp Nordic Naturals fish oil
    8:14 am
    Yesterday
    Blueberries, bbq chicken breast,
    macadamia nuts.
    1:11 pm
    0
    New weigh-in: 145 pounds
    8:14 am
    9
    Record A Meal
    Back Record
    Describe your meal
    Was meal Paleo?
    Did meal have dairy? NO
    YES
    Sharing
    Facebook
    Twitter
    YES
    YES

    View full-size slide

  149. @tbisaacs
    Wireframe

    View full-size slide

  150. @tbisaacs
    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
    Prototype

    View full-size slide

  151. @tbisaacs
    Keynote’s powerful linking system allows
    the creation of completely non-linear
    ,
    stand-alone prototypes.

    View full-size slide

  152. @tbisaacs #MIMASummit
    167
    Activity Log
    Updated 2 hours ago
    Skilled Athlete
    Meals & Snacks
    Weight & Stats
    Progress Photo
    Today
    Sleep Activity
    ZZZ
    Supplements
    2
    0
    1
    1
    3
    2
    Vitals 1
    Activity Log
    Updated 2 hours ago
    Skilled Athlete
    Meals & Snacks
    Weight & Stats
    Progress Photo
    Today
    Sleep Activity
    ZZZ
    Supplements
    2
    0
    1
    1
    3
    2
    Vitals 1
    Sunday, July 24
    July 2011
    July 2011
    July 2011
    July 2011
    July 2011
    July 2011
    July 2011
    S M T W T F S
    1 2
    3 4 5 6 7 8 9
    10 11 12 13 14 15 16
    17 18 19 20 21 22 23
    24 25 26 27 28 29 30
    
    Activity Log
    Updated 2 hours ago
    Skilled Athlete
    Today
    Blueberries, bbq chicken breast,
    macadamia nuts.
    1:11 pm
    2
    4
    Ground beef, broccoli, cauliflower,
    and almonds.
    8:14 am
    ZZZ 17 minute nap
    10:33 am
    0
    0
    1 tbsp Nordic Naturals fish oil
    8:14 am
    Yesterday
    Blueberries, bbq chicken breast,
    macadamia nuts.
    1:11 pm
    0
    New weigh-in: 145 pounds
    8:14 am
    9
    Record A Meal
    Back Record
    Describe your meal
    Was meal Paleo?
    Did meal have dairy? NO
    YES
    Sharing
    Facebook
    Twitter
    YES
    YES

    View full-size slide

  153. @tbisaacs #MIMASummit
    168

    View full-size slide

  154. @tbisaacs #MIMASummit
    169

    View full-size slide

  155. @tbisaacs #MIMASummit
    Activity Log
    Updated 2 hours ago
    Skilled Athlete
    Meals & Snacks
    Weight & Stats
    Progress Photo
    Today
    Sleep Activity
    ZZZ
    Supplements
    2
    0
    1
    1
    3
    2
    Vitals 1
    Select
    4
    Always link to a
    slide number!

    View full-size slide

  156. @tbisaacs #MIMASummit
    Activity Log
    Updated 2 hours ago
    Skilled Athlete
    Meals & Snacks
    Weight & Stats
    Progress Photo
    Today
    Sleep Activity
    ZZZ
    Supplements
    2
    0
    1
    1
    3
    2
    Vitals 1
    Select
    2

    View full-size slide

  157. @tbisaacs #MIMASummit
    Activity Log
    Updated 2 hours ago
    Skilled Athlete
    Meals & Snacks
    Weight & Stats
    Progress Photo
    Today
    Sleep Activity
    ZZZ
    Supplements
    2
    0
    1
    1
    3
    2
    Vitals 1
    Select
    3

    View full-size slide

  158. @tbisaacs #MIMASummit
    1
    Record A Meal
    Back Record
    Describe your meal
    Was meal Paleo?
    Did meal have dairy? NO
    YES
    Sharing
    Facebook
    Twitter
    YES
    YES
    Select Select

    View full-size slide

  159. @tbisaacs
    10:00 AM
    CARRIER 3G
    My Places
    Downtown
    12345 Maple Drive, Dallas, TX 76051
    West Side
    12345 Maple Drive, Dallas, TX 76051
    Midway
    12345 Maple Drive, Dallas, TX 76051

    View full-size slide

  160. @tbisaacs
    10:00 AM
    CARRIER 3G
    My Places
    Super Secret Menu
    Downtown
    12345 Maple Drive, Dallas, TX 76051
    West Side
    12345 Maple Drive, Dallas, TX 76051
    Midway
    12345 Maple Drive, Dallas, TX 76051

    View full-size slide

  161. @tbisaacs
    10:00 AM
    CARRIER 3G
    My Places
    Super Secret Menu
    Downtown
    12345 Maple Drive, Dallas, TX 76051
    West Side
    12345 Maple Drive, Dallas, TX 76051
    Midway
    12345 Maple Drive, Dallas, TX 76051

    View full-size slide

  162. @tbisaacs
    10:00 AM
    CARRIER 3G
    My Places
    Super Secret Menu
    Downtown
    12345 Maple Drive, Dallas, TX 76051
    West Side
    12345 Maple Drive, Dallas, TX 76051
    Midway
    12345 Maple Drive, Dallas, TX 76051

    View full-size slide

  163. @tbisaacs
    10:00 AM
    CARRIER 3G
    My Places
    Super Secret Menu
    Downtown
    12345 Maple Drive, Dallas, TX 76051
    West Side
    12345 Maple Drive, Dallas, TX 76051
    Midway
    12345 Maple Drive, Dallas, TX 76051

    View full-size slide

  164. @tbisaacs
    open animation
    close animation

    View full-size slide

  165. @tbisaacs
    You

    View full-size slide

  166. @tbisaacs
    You

    View full-size slide

  167. @tbisaacs
    Testing On Device

    View full-size slide

  168. @tbisaacs
    Limited by file size

    View full-size slide

  169. @tbisaacs
    CLICK

    View full-size slide

  170. @tbisaacs
    Dropbox

    View full-size slide

  171. @tbisaacs
    TAP

    View full-size slide

  172. @tbisaacs
    The slide
    action is
    disruptive to
    the prototype

    View full-size slide

  173. @tbisaacs
    Let’s try
    iBooks!

    View full-size slide

  174. @tbisaacs
    Let’s try
    GoodReader

    View full-size slide

  175. @tbisaacs
    It looks
    complex upon
    initial view...

    View full-size slide

  176. @tbisaacs
    Looks
    promising.

    View full-size slide

  177. @tbisaacs
    Looks
    promising. TAP

    View full-size slide

  178. @tbisaacs
    Nailed it.

    View full-size slide

  179. @tbisaacs
    Prototyping Exercise

    View full-size slide

  180. Blue construction paper texture is
    EXACTLY what this slide needs.
    AMIRIGHT?

    View full-size slide

  181. Copy/Paste style
    properties to save
    time.
    To add to your toolbar:
    Right click on the toolbar, click customize
    Copy style will copy all of the element’s
    properties, including: fill, border, font face,
    font size, font color, stroke, stroke style.
    But... it doesn’t copy line-height, letter
    spacing, paragraph spacing, or inset
    margin.
    SAD TROMBONE
    LESSON 6

    View full-size slide

  182. 1
    or alt + ⌘ + c

    View full-size slide

  183. 2
    or alt + ⌘ + v

    View full-size slide

  184. @tbisaacs
    Select Photo
    Select a FB
    Photo
    Log In Timeline Camera
    Upload
    Edit Photo
    Edit photo
    information
    Share To
    Facebook
    Photo
    Let’s imagine Instagram with more Facebook:
    • You can now log in using Facebook Connect
    • “My Facebook Photos” becomes a photo source
    • Extended Facebook sharing options:
    • Post photo to a specific album (not just “Instagram Photos”)
    • Enhanced privacy controls (friends, friends of friends, private)
    • Tag a Facebook friend (ooh, facial recognition?!)
    • Make this photo my Facebook Profile Photo
    • Comments post on Facebook are aggregated into Instagram

    View full-size slide

  185. @tbisaacs
    And, Thank Y
    ou!
    GO FORTH AND BUILD.

    View full-size slide