KEYNOTE

            HOW NINJAS WIREFRAME
                  KUNG-FU




@tbisaacs
improving
  by day


           by night



                      app.com




                                @tbisaacs
User Interface Design
 Windows
                                           Interaction Design
XHTML

CSS                   ...
My name is Travis, and I make
 “wireframes” with Keynote.
!
I’m not an IA
Blinksale                                                                                                   Travis Isaacs ...
Mid-Cities (50)                                                                                DAY       WEEK      Creativ...
K
Mid-Cities (50)                                                                               CLIC
                     ...
Mid-Cities (50)                               DAY   WEEK   Creative                 NEW


          12 AM   4 AM   8 AM   ...
Mid-Cities (50)                                  DAY   WEEK   Creative                 NEW


          12 AM   4 AM      8...
Mid-Cities (50)                                                                                  DAY   WEEK   Creative    ...
Plans   Subdivisions   Items   Options   Trade Partner Requests


Take-offs for #1750 (The Venetian) for all elevations an...
Plans   Subdivisions   Items   Options   Trade Partner Requests


Take-offs for #1750 (The Venetian) for all elevations an...
Plans   Subdivisions      Items    Options       Trade Partner Requests


Take-offs for #1750 (The Venetian) for all eleva...
Plans   Subdivisions      Items    Options       Trade Partner Requests


Take-offs for #1750 (The Venetian) for all eleva...
Plans    Subdivisions   Items    Options    Trade Partner Requests



Add Items to Frame I Walls and Joist (#1750 - the Ve...
F1: Add Artwork              F2: Mats                F3: Frames            F4: Finishing               TOTAL: $212.02

 Al...
F1: Add Artwork              F2: Mats                F3: Frames            F4: Finishing               TOTAL: $212.02

 Al...
F1: Add Artwork                    F2: Mats                           F3: Frames            F4: Finishing                 ...
F1: Add Artwork                    F2: Mats                   F3: Frames            F4: Finishing                 TOTAL: $...
F1: Add Artwork                    F2: Mats                           F3: Frames                 F4: Finishing            ...
F1: Add Artwork                    F2: Mats                           F3: Frames               F4: Finishing              ...
F1: Add Artwork                    F2: Mats                           F3: Frames                 F4: Finishing            ...
F1: Add Artwork                    F2: Mats                           F3: Frames                 F4: Finishing            ...
All Things Considered
                                        Muybridge: The Man Who Made Pictures Move




  Radio near D...
All Things Considered
                                          Muybridge: The Man Who Made Pictures Move




  KERA 90.1 ...
My design process

   capturing ideas and
sketching lo-fi interfaces                     PROTOTYPE
                       ...
My design process

                    Design the foundation
                        (lots of iterating)    PROTOTYPE
    ...
My design process


                                           PROTOTYPE
                                          HTML, C...
My design process
                                      Polish the interactions




                                      ...
HARD FOR DESIGNER
EASY FOR CLIENTS                       HARD FOR CLIENTS
TO UNDERSTAND                               TO U...
HARD FOR DESIGNER
EASY FOR CLIENTS                         HARD FOR CLIENTS
TO UNDERSTAND                                 ...
HARD FOR DESIGNER
                   HI-FIDELITY
                   COMP




EASY FOR CLIENTS                             ...
HARD FOR DESIGNER
                     HI-FIDELITY
         PROTOTYPE
                     COMP




EASY FOR CLIENTS      ...
HARD FOR DESIGNER
                                   HI-FIDELITY
         PROTOTYPE
                                   COM...
High
WIN: Fidelity Wireframes




                                                 HARD FOR DESIGNER
                     ...
High
WIN: Fidelity Wireframes




                                           HARD FOR DESIGNER
                           ...
WIN




                                           HARD FOR DESIGNER
                             HI-FIDELITY
        PROT...
WIN




                                           HARD FOR DESIGNER
                             HI-FIDELITY
        PROT...
WIN




                                           HARD FOR DESIGNER
                             HI-FIDELITY
        PROT...
My design process


                                       PROTOTYPE
                                      HTML, CSS, jQue...
My design process
                                          Lot’s of friction



                                         ...
Why Keynote?
It’s $79 bucks
Gorgeous presentations
Powerful Drawing Tools
MARKED FOR LIFE TATTOO CUSTOMER INFORMATION

            NOTE: The information below is required by the Indiana Health Dep...
4   Use the diagram below to indicate where your tattoo(s) or piercing(s) will be located:




                   FRONT   ...
NEW SCAN FOR:   Patient name (you can change this later)   LOOKUP                             CANCEL SCAN



             ...
Powerful Drawing Tools




Primitive Shapes




        Pen tool
          AWESOME!
Powerful Drawing Tools


        Solid fill
    Gradient fill
Radial gradients
       Image fill


   Drop shadow
   and t...
Powerful Drawing Tools



Full-featured
 type control
BECOME A KEYNOTE KUNG-FU




 MASTER
   IN 12 EASY LESSONS
LESSON 1
Tell a story                                                  Batch upload



Use your wireframes for gaining
con...
http:/
     /slideshare.net/tbisaacs/influencing-change-through-presentations
http:/
     /slideshare.net/tbisaacs/influencing-change-through-presentations
http:/
     /slideshare.net/tbisaacs/influencing-change-through-presentations
http:/
     /slideshare.net/tbisaacs/influencing-change-through-presentations
http:/
     /slideshare.net/tbisaacs/influencing-change-through-presentations
http:/
     /slideshare.net/tbisaacs/influencing-change-through-presentations
http:/
     /slideshare.net/tbisaacs/influencing-change-through-presentations
http:/
     /slideshare.net/tbisaacs/influencing-change-through-presentations
Describe how I get from point A to B



                                                                                  ...
LESSON 2
Visually narrate the
interface details
Imagine that your wireframes are a
flip-book. Walk your audience through
e...
Travis Isaacs
Travis Isaacs       K
                CLIC
Travis Isaacs

                Change your name
                Change your photo
                Log out
Show Page Movement




          G
       DRA
Show Page Movement




          G
       DRA
K
           TAP      PE      CH
CLIC             SWI     PIN
LESSON 3
Use master slides for page
layouts/types
Avoid endless cut-and-paste by putting
static elements, like navigation,...
Master Slide   Content Slide
Most of the work is done
         in here
LESSON 4
Create a library of
components
Store common UI components like
buttons, form controls, tabs, text
treatments, etc.
LESSON 5
Copy/Paste style properties
to save time.
To add to your toolbar:
Right click on the toolbar, click customize

Co...
or alt + ⌘ + c



1
or alt + ⌘ + v



2
:)

3
LESSON 6
Group items whenever                        Group
possible
Grouped items are easier to move, delete,
and manipula...
Double-click on a grouped
or alt + ⌘ + g to group      element to edit it
LESSON 7
Learn the keyboard
shortcuts
Keyboard shortcuts will save you time and
clicks (and impress your boss).
Copy Style
Paste Style
Group
Un-Group
Insert (Choose)
New Slide
Fonts
LESSON 8
Tables are for more than just
data
                                              88.1 FM The One (KNTU) - It’s Al...
Music            Talk
Radio By Location           Sports
                                            Settings
Music            Talk
Radio By Location           Sports
                                            Settings
Radio By Location   Music   Sports   Talk   Settings
Radio By Location   Music   Sports   Talk   Settings
LESSON 9
Add text to shape layer
whenever possible
Add text directly inside the shape instead
of creating a shape and crea...
LESSON 10
Keep your theme lean
Delete unused master slides to reduce the
size of your .key file.
LESSON 11
Swap between Photoshop/
Illustrator with ease
Need to make some edits that can’t be
done in Keynote? Just copy a...
LESSON 12
Don’t limit yourself to gray
boxes
Capture your ideas in whatever fidelity
that tells your story. Don’t be afrai...
Submit



Submit
border-radius




   -webkit-gradient
                                              Submit
-moz-linear-gradient



       ...
Label:                                  Leave a comment:




    Yes             Option 1

    No              Option 2
  ...
Active Tab       Inactive Tab        Inactive Tab




  Active Tab       Inactive Tab        Inactive Tab




     Active ...
Last Name    First Name               Email        Last Name    First Name                Email 

Isaacs        Trav...
Window Title
Heading Level 1                                                                          Heading Level 1   These are mainl...
IMAGE




        HD VIDEO
K
                           CLIC              TAP




                                E
                           S WIP
...
ONLY $12
at keynotekungfu.com
@tbisaacs
travisisaacs.com
slideshare.net/tbisaacs
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
Upcoming SlideShare
Loading in …5
×

Keynote Kung-Fu: How to wireframe like a ninja

430,002
-1

Published on

Video here: http://vimeo.com/15379723

Keynote is a cheap, friction-free tool to create elegant wireframes in a format that’s perfect for presentations, pitches, and hand-offs.

Get the toolkit here: http://keynotekungfu.com

12 Comments
439 Likes
Statistics
Notes
No Downloads
Views
Total Views
430,002
On Slideshare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
3,036
Comments
12
Likes
439
Embeds 0
No embeds

No notes for slide

Keynote Kung-Fu: How to wireframe like a ninja

  1. KEYNOTE HOW NINJAS WIREFRAME KUNG-FU @tbisaacs
  2. improving by day by night app.com @tbisaacs
  3. User Interface Design Windows Interaction Design XHTML CSS Information Design PHP Photography Information Architecture JavaScript Mac OS X Data Visualization Design Research
  4. My name is Travis, and I make “wireframes” with Keynote.
  5. ! I’m not an IA
  6. Blinksale Travis Isaacs Settings Help Sign Out Dashboard Projects Invoices & Estimates Clients Team New Who is this for? name@example.com Addresses Travis Isaacs 555 Maple Street COMPANY LOGO Anywhere, TX 76054 SEND Save for later or Cancel SENT 10/09/2009 Add to invoice: Invoice 1411 Due 11/9/2009 (NET 30) Hours 66 hrs KIND QTY DESCRIPTION PRICE TOTAL HRS $100 $0.00 Expenses $433 New line Subtotal $0.00 Services Tax (8.75%) $0.00 Freight $0.00 Total Due $0.00 Convert to estimate Invoice theme: Theme name Invoice notes Theme name Theme name
  7. Mid-Cities (50) DAY WEEK Creative NEW SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY Morning breakfast special FEB 99 cent fountain drinks 7 2010 7 8 9 10 11 12 13 Morning breakfast special FEB Beer and 8lb ice 14 2010 14 15 16 17 18 19 20 Default image FEB 21 2010 21 22 23 24 25 26 27 FEB 28 2010 28 1 2 3 4 5 6 MAR 7 2010 7 8 9 10 11 12 13 MAR 14 2010 14 15 16 17 18 19 20 MAR 28 2010 21 22 23 24 25 26 28
  8. K Mid-Cities (50) CLIC DAY WEEK Creative NEW SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY Morning breakfast special FEB 99 cent fountain drinks 7 2010 7 8 9 10 11 12 13 Morning breakfast special FEB Beer and 8lb ice 14 2010 14 15 16 17 18 19 20 Default image FEB 21 2010 21 22 23 24 25 26 27 FEB 28 2010 28 1 2 3 4 5 6 MAR 7 2010 7 8 9 10 11 12 13 MAR 14 2010 14 15 16 17 18 19 20 MAR 28 2010 21 22 23 24 25 26 28
  9. Mid-Cities (50) DAY WEEK Creative NEW 12 AM 4 AM 8 AM NOON 4 PM 8PM Morning breakfast special 99 cent fountain drinks SUN 2/7/10 Morning breakfast special MON Beer and 8lb ice 2/8/10 Default image TUE 2/9/10 WED 2/10/10 THU 2/11/10 FRI 2/12/10 SAT 2/13/10
  10. Mid-Cities (50) DAY WEEK Creative NEW 12 AM 4 AM 8 AM NOON 4 PM 8PM Morning breakfast special K CLIC 99 cent fountain drinks SUN 2/7/10 Morning breakfast special MON Beer and 8lb ice 2/8/10 Default image TUE 2/9/10 WED 2/10/10 THU 2/11/10 FRI 2/12/10 SAT 2/13/10
  11. Mid-Cities (50) DAY WEEK Creative NEW 12 AM 4 AM 8 AM NOON 4 PM 8PM Morning breakfast special 99 cent fountain drinks SUN Edit Schedule 2/7/10 Morning breakfast special Start date: 2/12/2010 Morning breakfast special MON Beer and 8lb ice 2/8/10 Start at: Midnight for 3 hours Default image 12:00 am to 3:00 am TUE 2/9/10 Repeats: Weekly S M T W T F S Repeats forever WED 2/10/10 Repeats until: THU SAVE or Cancel 2/11/10 FRI 2/12/10 SAT 2/13/10
  12. Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options 1200 Plumbing Fixtures 1400 Frame I Walls and Joists 1440 Windows 1450 External Doors 1460 Framing Labor 1530 Electrical 1550 HVAC 1600 Insulate Walls 1610 Sheetrock Material 1630 Sheetrock Hang, Tape, Bed, and Texture 1800 Paint 1810 Stain/Finish Cabinets 1830 Interior Doors & Trim 1840 Interior Trim Labor
  13. Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options 1200 Plumbing Fixtures 1400 Frame I Walls and Joists CLICK 1440 Windows 1450 External Doors 1460 Framing Labor 1530 Electrical 1550 HVAC 1600 Insulate Walls 1610 Sheetrock Material 1630 Sheetrock Hang, Tape, Bed, and Texture 1800 Paint 1810 Stain/Finish Cabinets 1830 Interior Doors & Trim 1840 Interior Trim Labor
  14. Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options 1200 Plumbing Fixtures 1400 Frame I Walls and Joists Item UOM Quant 1/2x12 Text 104 Siding EA 17 1/4 x 3/4 Flat screen mould LF 22 10x24 Arch Cedar Louver EA 0 10x24 Rough Cedar Rectangle Vent EA 3 1-1/2 Joist Hanger Nails 50# EA 100 12in x 200ʼ 6 mil Black Poly EA 10 12x12 Text Fcp Lap EA 10 12x24 Arch Top Cedar Vent EA 5 1-3/4x14in Level Micro Lamb Ship 2-19ʼ Pcs LF 0 1-3/4x16in Level Micro Lamb Ship 3-24ʼ Pcs LF 0 Add Item Take-off complete Save or Cancel 1440 Windows
  15. Plans Subdivisions Items Options Trade Partner Requests Take-offs for #1750 (The Venetian) for all elevations and all options 1200 Plumbing Fixtures 1400 Frame I Walls and Joists Item UOM Quant 1/2x12 Text 104 Siding EA 17 1/4 x 3/4 Flat screen mould LF 22 10x24 Arch Cedar Louver EA 0 10x24 Rough Cedar Rectangle Vent EA 3 1-1/2 Joist Hanger Nails 50# EA 100 12in x 200ʼ 6 mil Black Poly EA 10 12x12 Text Fcp Lap EA 10 12x24 Arch Top Cedar Vent EA 5 1-3/4x14in Level Micro Lamb Ship 2-19ʼ Pcs LF 0 1-3/4x16in Level Micro Lamb Ship 3-24ʼ Pcs LF 0 Add Item CLICK Take-off complete Save or Cancel 1440 Windows
  16. Plans Subdivisions Items Options Trade Partner Requests Add Items to Frame I Walls and Joist (#1750 - the Venetian) Components Labor Rates Fixed-Fee Services Substitution Code Select a component class: Appliances Windows Concrete Drywall Flooring CLICK Hardware Light Fixtures Plumbing Fixtures Lumber Masonry
  17. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $212.02 Align Distribute Wall Color 1: Photo of Children Add More Artwork Image description Grandparents 10”x8” size Image Width 10” x Height 8” Image condition Normal condition Photography Image type ADD Add artwork to get started! 1: Children 10” x 8” Mat Dimensions: 11 1/4” x 9 1/4”
  18. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $212.02 Align Distribute Wall Color 1: Photo of Children Add More Artwork Image description Grandparents 10”x8” size Image Width 10” x Height 8” Image condition Normal condition Photography Image type ADD k Add artwork to get started! Clic 1: Children 10” x 8” Mat Dimensions: 11 1/4” x 9 1/4”
  19. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents Add More Artwork Image description Image size Width x Height Image condition Image type 1: Children 2: Grandparents 10” x 8” 10” x 8” ADD Mat Dimensions: 27” x 16”
  20. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents Add More Artwork Image description Image size Width x Height Image condition Image type 1: Children 2: Grandparents ck 10” x 8” Clix 8” 10” ADD Mat Dimensions: 27” x 16”
  21. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents Image description Grandparents 10”x8” size Image Width 10” x Height 8” 4” Image condition Normal condition Photography Image type 2” SAVE Delete 1: Children 2: Grandparents 10” x 8” 10” x 8” Add more artwork 4” Mat Dimensions: 27” x 16” 3”
  22. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute I canWall Color make 1: Photo of Children edits here... 2: Photo of Grandparents Image description Grandparents 10”x8” size Image Width 10” x Height 8” 4” Image condition Normal condition Photography Image type 2” SAVE Delete 1: Children 2: Grandparents 10” x 8” 10” x 8” Add more artwork 4” Mat Dimensions: 27” x 16” 3”
  23. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents ...Or by clicking Image description Grandparents on a dimension 10”x8” size Image Width 10” x Height 8” 4” 3”4” Image condition Photography Image type Normal condition 2” SAVE Delete 1: Children 2: Grandparents 10” x 8” 10” x 8” Add more artwork 4” Mat Dimensions: 27” x 16” 3”
  24. F1: Add Artwork F2: Mats F3: Frames F4: Finishing TOTAL: $490.29 Align Distribute Wall Color 1: Photo of Children 2: Photo of Grandparents Image description Grandparents Or by dragging 10”x8” size Image Width 10” x Height 8” the corners 4” Image condition Normal condition Photography Image type 2” SAVE Delete 1: Children 2: Grandparents 10” x 8” 10” x 8” Add more artwork 4” Mat Dimensions: 27” x 16” 3”
  25. All Things Considered Muybridge: The Man Who Made Pictures Move Radio near Dallas, TX (88 stations) 88.1 FM The One (KNTU) - It’s All About Jazz EDGE LISTEN Public, Denton TX
  26. All Things Considered Muybridge: The Man Who Made Pictures Move KERA 90.1 FM All Things Considered (News) Recent Topics More Stations & Times Muybridge: The Man Who Made Pictures Move APR A new exhibition at the Corcoran Gallery of Art in Washington, 13 D.C., looks at the legacy of Eadweard Muybridge, whose LISTEN All Things Considered 2010 sequential photographs of horses at a gallop their movements broken down frame by frame have become iconic News radio from Washington DC Hosts: Robert Siegel, Michele Norris, Online Cartoonist Wins Pulitzer Melissa Block Mark Fiore is a self-syndicating cartoonist whose irreverent online APR animations appear on the San Francisco area news site For two hours every weekday, hosts Robert Siegel, Michele Norris and 13 SFGate.com. Fiore won a Pulitzer yesterday, one of the first two LISTEN 2010 Pulitzers ever awarded to nontraditional media. Judges said his Melissa Block present the program's work set a high standard for an emerging form of commentary. trademark mix of news, interviews, commentaries, reviews, and offbeat features. Karadzic Genocide Trial Opens After Months Of Delay On live in 3hr 33min The trial of the former Bosnian Serb leader Radovan Karadzic APR from KNOW-FM 91.1 resumed in The Hague on Tuesday, after months of procedural 13 wrangles. Karadzic faces charges of genocide, crimes against LISTEN 2010 humanity and war crimes relating to the war in the former Add to presets Yugoslavia during the 1990s. Share
  27. My design process capturing ideas and sketching lo-fi interfaces PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  28. My design process Design the foundation (lots of iterating) PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  29. My design process PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Refine the aesthetics Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  30. My design process Polish the interactions PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  31. HARD FOR DESIGNER EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND EASY FOR DESIGNER
  32. HARD FOR DESIGNER EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  33. HARD FOR DESIGNER HI-FIDELITY COMP EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  34. HARD FOR DESIGNER HI-FIDELITY PROTOTYPE COMP EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  35. HARD FOR DESIGNER HI-FIDELITY PROTOTYPE COMP HI-FIDELITY WIREFRAME EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  36. High WIN: Fidelity Wireframes HARD FOR DESIGNER HI-FIDELITY PROTOTYPE COMP HI-FIDELITY WIREFRAME EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  37. High WIN: Fidelity Wireframes HARD FOR DESIGNER HI-FIDELITY PROTOTYPE Relatively cheap to create COMP Easy to throw away Enough fidelity for clients to visualize the end-result Less time describing functionality HI-FIDELITY WIREFRAME EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  38. WIN HARD FOR DESIGNER HI-FIDELITY PROTOTYPE Relatively cheap to create COMP Easy to throw away Enough fidelity for clients to visualize the end-result Less time describing functionality HI-FIDELITY WIREFRAME EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER RISKS: Wireframes that are “too designed” distract the client from the “big picture” concepts.
  39. WIN HARD FOR DESIGNER HI-FIDELITY PROTOTYPE Relatively cheap to create COMP Easy to throw away Enough fidelity for clients to visualize the end-result Less time describing functionality HI-FIDELITY WIREFRAME EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER RISKS: Wireframes that are “too designed” distract the client from the “big picture” concepts.
  40. WIN HARD FOR DESIGNER HI-FIDELITY PROTOTYPE Relatively cheap to create COMP Easy to throw away Enough fidelity for clients to visualize the end-result Less time describing functionality HI-FIDELITY WIREFRAME EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER RISKS: Wireframes that are “too designed” distract the client from the “big picture” concepts.
  41. My design process PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  42. My design process Lot’s of friction PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Lot’s of friction Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  43. Why Keynote?
  44. It’s $79 bucks
  45. Gorgeous presentations
  46. Powerful Drawing Tools
  47. MARKED FOR LIFE TATTOO CUSTOMER INFORMATION NOTE: The information below is required by the Indiana Health Department. All information will kept confidential. 1 LAST NAME: FIRST NAME: 2 STREET: CITY: STATE: ZIPCODE: DAYTIME PHONE: - - EVENING PHONE: - - Where this whole 3 4 Keynote thing started... IDENTIFICATION: The Indiana Health Department requires a photo identification and a proof of signature: Photo ID provided (check one): Signature ID provided (check one): Driver’s License Credit/Debit card Student ID Calling card State ID Wholesale membership card Employee ID Hunting/Fishing license Other photo ID: Other: Please attach your ID’s to this form so they can be photocopied. / / 5 DATE OF BIRTH: ! If you are under 18, a guardian will need to sign for you (below) 6 SIGNATURE: DATE: - - I hereby affirm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge. GUARDIAN CONSENT (ONLY NEEDED FOR MINORS) http:/ /travisisaacs.com/2008/07/31/information-design-tattoos/ LAST NAME: FIRST NAME:
  48. 4 Use the diagram below to indicate where your tattoo(s) or piercing(s) will be located: FRONT BACK RIGHT EAR LEFT EAR http:/ /travisisaacs.com/2008/07/31/information-design-tattoos/ 5 SIGNATURE: DATE: - - I hereby affirm under the penalties of purgery that the preceding statements are true/correct to the best of my knowledge.
  49. NEW SCAN FOR: Patient name (you can change this later) LOOKUP CANCEL SCAN LEFT FOOT RIGHT FOOT SCAN SCAN Dr. Newsom 12 orders waiting to be sent
  50. Powerful Drawing Tools Primitive Shapes Pen tool AWESOME!
  51. Powerful Drawing Tools Solid fill Gradient fill Radial gradients Image fill Drop shadow and text shadow, woohoo! Instant Web 2.0 OMG BBQ Alpha transparency
  52. Powerful Drawing Tools Full-featured type control
  53. BECOME A KEYNOTE KUNG-FU MASTER IN 12 EASY LESSONS
  54. LESSON 1 Tell a story Batch upload Use your wireframes for gaining consensus and alignment. Take your audience along with you - show them how you came to a conclusion. NEW New user Confirm Email Hotel or Agency Enter Info Select Agency Terms or Property Verify Email Notify Hotel Welc or Agency
  55. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  56. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  57. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  58. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  59. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  60. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  61. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  62. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  63. Describe how I get from point A to B New User Batch upload NEW New user Confirm Email Hotel or Agency Enter Info Select Agency Terms & Conditions Overview or Property Verify Email Notify Hotel Welcome Email or Agency
  64. LESSON 2 Visually narrate the interface details Imagine that your wireframes are a flip-book. Walk your audience through each interaction frame-by-frame.
  65. Travis Isaacs
  66. Travis Isaacs K CLIC
  67. Travis Isaacs Change your name Change your photo Log out
  68. Show Page Movement G DRA
  69. Show Page Movement G DRA
  70. K TAP PE CH CLIC SWI PIN
  71. 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!
  72. Master Slide Content Slide
  73. Most of the work is done in here
  74. LESSON 4 Create a library of components Store common UI components like buttons, form controls, tabs, text treatments, etc.
  75. LESSON 5 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
  76. or alt + ⌘ + c 1
  77. or alt + ⌘ + v 2
  78. :) 3
  79. LESSON 6 Group items whenever Group possible Grouped items are easier to move, delete, and manipulate.
  80. Double-click on a grouped or alt + ⌘ + g to group element to edit it
  81. LESSON 7 Learn the keyboard shortcuts Keyboard shortcuts will save you time and clicks (and impress your boss).
  82. Copy Style
  83. Paste Style
  84. Group
  85. Un-Group
  86. Insert (Choose)
  87. New Slide
  88. Fonts
  89. LESSON 8 Tables are for more than just data 88.1 FM The One (KNTU) - It’s All About Jazz Public, Denton TX Tables make great guides. Use them to evenly divide areas. 88.5 FM KEOM - Your Community Leader 70’s, Mesquite TX 89.3 FM KNON - The Voice of The People Oh, they are great for data too (ever tried Community, Dallas TX to mockup a table in Photoshop?) 89.7 FM POWER FM (KVRK) - The Christian.... NOW: Adrian Humm Christian Rock, Sanger TX 90.1 FM KERA NOW: All Things Con Public, Dallas TX 90.5 FM KAWZ - Where God’s Word is Heard NOW: KCBI Music M Christian, Irving TX 90.9 FM KCBI Christian Contemporary, Dallas TX 91.7 FM KXT - Music to the Core NOW: KXT Afternoo Eclectic, Dallas TX 92.5 FM Lone Star 92.5 (KZPS) Classic Rock, Dallas TX
  90. Music Talk Radio By Location Sports Settings
  91. Music Talk Radio By Location Sports Settings
  92. Radio By Location Music Sports Talk Settings
  93. Radio By Location Music Sports Talk Settings
  94. LESSON 9 Add text to shape layer whenever possible Add text directly inside the shape instead of creating a shape and creating text. It’s easier to adjust the size and it’s one less Shape and text are separate layers group that you have to worry about. Text is in shape layer
  95. LESSON 10 Keep your theme lean Delete unused master slides to reduce the size of your .key file.
  96. LESSON 11 Swap between Photoshop/ Illustrator with ease Need to make some edits that can’t be done in Keynote? Just copy and paste your object or group into Illustrator or Photoshop. Pasted items become smart objects in Photoshop, or paths in Illustrator.
  97. LESSON 12 Don’t limit yourself to gray boxes Capture your ideas in whatever fidelity that tells your story. Don’t be afraid to add some visual appeal to your wireframes.
  98. Submit Submit
  99. border-radius -webkit-gradient Submit -moz-linear-gradient text-shadow box-shadow
  100. Label: Leave a comment: Yes Option 1 No Option 2   ON OFF Button Button Please Select  Please select... Option 1 Option 2 Option 3    
  101. Active Tab Inactive Tab Inactive Tab Active Tab Inactive Tab Inactive Tab Active Tab Inactive Tab Inactive Tab Active Menu  Sub-Menu 1 Inactive Menu  Sub-Menu 2 Inactive Menu  Active Tab Inactive Tab Inactive Tab Inactive Tab Inactive Tab Home » Page 1 » Page 2 Home Page 1 Page 2
  102. Last Name  First Name  Email  Last Name  First Name  Email  Isaacs Travis hello@travisisaacs.com Isaacs Travis hello@travisisaacs.com Isaacs Travis hello@travisisaacs.com Isaacs Travis hello@travisisaacs.com Isaacs Travis hello@travisisaacs.com Isaacs Travis hello@travisisaacs.com Isaacs Travis hello@travisisaacs.com Isaacs Travis hello@travisisaacs.com
  103. Window Title
  104. Heading Level 1 Heading Level 1 These are mainly just to copy styles from (option + ⌘ + c) Heading Level 2 Heading Level 2 Heading Level 3 Heading Level 3 Heading Level 4 Heading Level 4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Hypertext link • List item 1. Ordered list • List item 2. Ordered list • List item 3. Ordered list <div id=”keynote”>Kung-Fu</div>
  105. IMAGE HD VIDEO
  106. K CLIC TAP E S WIP Just a friendly reminder PIN CH Window Title
  107. ONLY $12 at keynotekungfu.com
  108. @tbisaacs travisisaacs.com slideshare.net/tbisaacs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×