SlideShare une entreprise Scribd logo
1  sur  122
Télécharger pour lire hors ligne
KEYNOTE

            HOW NINJAS WIREFRAME
                  KUNG-FU




@tbisaacs
improving
  by day


           by night



                      app.com




                                @tbisaacs
User Interface Design
 Windows
                                           Interaction Design
XHTML

CSS                                        Information Design

PHP
                                                  Photography

                                               Information
                                               Architecture
JavaScript

                                       Mac OS X
  Data Visualization
                         Design Research
My name is Travis, and I make
 “wireframes” with Keynote.
!
I’m not an IA
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
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
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
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
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
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
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
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
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
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
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
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
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”
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”
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”
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”
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”
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”
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”
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”
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
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
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
My design process

                    Design the foundation
                        (lots of iterating)    PROTOTYPE
                                              HTML, CSS, jQuery, 960.gs




SKETCH               WIREFRAME
Pencil & Paper           Keynote baby!




                                                    COMP
                                                     Photoshop




                      FIDELITY
My design process


                                           PROTOTYPE
                                          HTML, CSS, jQuery, 960.gs




SKETCH              WIREFRAME         Refine the aesthetics
Pencil & Paper        Keynote baby!




                                                COMP
                                                 Photoshop




                     FIDELITY
My design process
                                      Polish the interactions




                                         PROTOTYPE
                                        HTML, CSS, jQuery, 960.gs




SKETCH              WIREFRAME
Pencil & Paper        Keynote baby!




                                              COMP
                                               Photoshop




                     FIDELITY
HARD FOR DESIGNER
EASY FOR CLIENTS                       HARD FOR CLIENTS
TO UNDERSTAND                               TO UNDERSTAND




                   EASY FOR DESIGNER
HARD FOR DESIGNER
EASY FOR CLIENTS                         HARD FOR CLIENTS
TO UNDERSTAND                                 TO UNDERSTAND


                                       WIREFRAME


                   EASY FOR DESIGNER
HARD FOR DESIGNER
                   HI-FIDELITY
                   COMP




EASY FOR CLIENTS                                       HARD FOR CLIENTS
TO UNDERSTAND                                               TO UNDERSTAND


                                                     WIREFRAME


                                 EASY FOR DESIGNER
HARD FOR DESIGNER
                     HI-FIDELITY
         PROTOTYPE
                     COMP




EASY FOR CLIENTS                                         HARD FOR CLIENTS
TO UNDERSTAND                                                 TO UNDERSTAND


                                                       WIREFRAME


                                   EASY FOR DESIGNER
HARD FOR DESIGNER
                                   HI-FIDELITY
         PROTOTYPE
                                   COMP




                     HI-FIDELITY
                     WIREFRAME



EASY FOR CLIENTS                                                       HARD FOR CLIENTS
TO UNDERSTAND                                                               TO UNDERSTAND


                                                                     WIREFRAME


                                                 EASY FOR DESIGNER
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
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
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.
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.
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.
My design process


                                       PROTOTYPE
                                      HTML, CSS, jQuery, 960.gs




SKETCH              WIREFRAME
Pencil & Paper        Keynote baby!




                                            COMP
                                             Photoshop




                     FIDELITY
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
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 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:
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.
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
Keynote Kung-Fu: How to wireframe like a ninja
Powerful Drawing Tools




Primitive Shapes




        Pen tool
          AWESOME!
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
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
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
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



                                                                                                                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
LESSON 2
Visually narrate the
interface details
Imagine that your wireframes are a
flip-book. Walk your audience through
each interaction frame-by-frame.
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,
backgrounds, and site “chrome” in master
slides.

Master slides are free, use as many as you
want!
Master Slide   Content Slide
Keynote Kung-Fu: How to wireframe like a ninja
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.
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
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
Keynote Kung-Fu: How to wireframe like a ninja
or alt + ⌘ + c



1
or alt + ⌘ + v



2
:)

3
LESSON 6
Group items whenever                        Group
possible
Grouped items are easier to move, delete,
and manipulate.
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 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
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 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
LESSON 10
Keep your theme lean
Delete unused master slides to reduce the
size of your .key file.
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
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.
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.
Submit



Submit
border-radius




   -webkit-gradient
                                              Submit
-moz-linear-gradient



                               text-shadow



                                             box-shadow
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
Label:                                  Leave a comment:




    Yes             Option 1

    No              Option 2
                                                                   
                                                                   

  ON

          OFF


         Button                Button




Please Select 



 Please select...

  Option 1
  Option 2
  Option 3



                                        
                                        




                                                           
                                                               
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
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
Window Title
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>
IMAGE




        HD VIDEO
K
                           CLIC              TAP




                                E
                           S WIP




Just a friendly reminder             PIN
                                        CH




                            Window Title
Keynote Kung-Fu: How to wireframe like a ninja
ONLY $12
at keynotekungfu.com
@tbisaacs
travisisaacs.com
slideshare.net/tbisaacs

Contenu connexe

En vedette

Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideFramebench
 
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 keynoteTravis Isaacs
 
Wireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTMLDee Sadler
 
Wireframing Fundamentals
Wireframing FundamentalsWireframing Fundamentals
Wireframing FundamentalsTelepathy
 
How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp
How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product CampHow to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp
How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product CampDan Olsen
 
UX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesUX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesDr. V Vorvoreanu
 
Good design faster slides failcon 2010
Good design faster slides   failcon 2010Good design faster slides   failcon 2010
Good design faster slides failcon 2010Cass Phillipps
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to WireframeWilliam Evans
 
[iOS] Basic UI Elements
[iOS] Basic UI Elements[iOS] Basic UI Elements
[iOS] Basic UI ElementsNikmesoft Ltd
 
Mockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzioneMockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzioneWEBdeBS
 
Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?Vojtech Outulny
 
Mobile First Design Strategy & Process
Mobile First Design Strategy & ProcessMobile First Design Strategy & Process
Mobile First Design Strategy & ProcessSubhasish Karmakar
 
Sketching for Design
Sketching for DesignSketching for Design
Sketching for DesignJackson Fox
 
Effectively communicating user interface and interaction design
Effectively communicating user interface and interaction designEffectively communicating user interface and interaction design
Effectively communicating user interface and interaction designKaren Bachmann
 
Mobile App Trends for 2017: Design, Monetization & More
Mobile App Trends for 2017: Design, Monetization & MoreMobile App Trends for 2017: Design, Monetization & More
Mobile App Trends for 2017: Design, Monetization & Morenickculbertson
 
User Centered Design in short
User Centered Design in shortUser Centered Design in short
User Centered Design in shortsilvana churruca
 

En vedette (20)

Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
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 /Prototyping with HTML
Wireframing /Prototyping with HTMLWireframing /Prototyping with HTML
Wireframing /Prototyping with HTML
 
Wireframing Fundamentals
Wireframing FundamentalsWireframing Fundamentals
Wireframing Fundamentals
 
How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp
How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product CampHow to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp
How to Be a UX Design Army of One by Dan Olsen at Silicon Valley Product Camp
 
User Experience (UX) Design Tips
User Experience (UX) Design TipsUser Experience (UX) Design Tips
User Experience (UX) Design Tips
 
UX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesUX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypes
 
Good design faster slides failcon 2010
Good design faster slides   failcon 2010Good design faster slides   failcon 2010
Good design faster slides failcon 2010
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to Wireframe
 
[iOS] Basic UI Elements
[iOS] Basic UI Elements[iOS] Basic UI Elements
[iOS] Basic UI Elements
 
Mockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzioneMockup, wireframe e visual: una breve introduzione
Mockup, wireframe e visual: una breve introduzione
 
Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?Wireframe vs. Mock-up. Why and When?
Wireframe vs. Mock-up. Why and When?
 
Mobile First Design Strategy & Process
Mobile First Design Strategy & ProcessMobile First Design Strategy & Process
Mobile First Design Strategy & Process
 
Sketching for Design
Sketching for DesignSketching for Design
Sketching for Design
 
Effectively communicating user interface and interaction design
Effectively communicating user interface and interaction designEffectively communicating user interface and interaction design
Effectively communicating user interface and interaction design
 
Prototyping
PrototypingPrototyping
Prototyping
 
Mobile App Trends for 2017: Design, Monetization & More
Mobile App Trends for 2017: Design, Monetization & MoreMobile App Trends for 2017: Design, Monetization & More
Mobile App Trends for 2017: Design, Monetization & More
 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
 
User Centered Design in short
User Centered Design in shortUser Centered Design in short
User Centered Design in short
 

Dernier

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 

Dernier (20)

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 

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.
  • 8. 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
  • 9. 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
  • 10. 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
  • 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 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
  • 12. 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
  • 13. 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
  • 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 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
  • 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 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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”
  • 20. 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”
  • 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 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”
  • 22. 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”
  • 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 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”
  • 24. 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”
  • 25. 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”
  • 26. 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”
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. My design process Design the foundation (lots of iterating) PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  • 31. My design process PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Refine the aesthetics Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  • 32. My design process Polish the interactions PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  • 33. HARD FOR DESIGNER EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND EASY FOR DESIGNER
  • 34. HARD FOR DESIGNER EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  • 35. HARD FOR DESIGNER HI-FIDELITY COMP EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  • 36. HARD FOR DESIGNER HI-FIDELITY PROTOTYPE COMP EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  • 37. HARD FOR DESIGNER HI-FIDELITY PROTOTYPE COMP HI-FIDELITY WIREFRAME EASY FOR CLIENTS HARD FOR CLIENTS TO UNDERSTAND TO UNDERSTAND WIREFRAME EASY FOR DESIGNER
  • 38. 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
  • 39. 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
  • 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. 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.
  • 42. 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.
  • 43. My design process PROTOTYPE HTML, CSS, jQuery, 960.gs SKETCH WIREFRAME Pencil & Paper Keynote baby! COMP Photoshop FIDELITY
  • 44. 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
  • 49. 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:
  • 50. 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.
  • 51. 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
  • 53. Powerful Drawing Tools Primitive Shapes Pen tool AWESOME!
  • 54. 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
  • 56. BECOME A KEYNOTE KUNG-FU MASTER IN 12 EASY LESSONS
  • 57. 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
  • 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. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  • 64. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  • 65. http:/ /slideshare.net/tbisaacs/influencing-change-through-presentations
  • 66. 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
  • 67. LESSON 2 Visually narrate the interface details Imagine that your wireframes are a flip-book. Walk your audience through each interaction frame-by-frame.
  • 69. Travis Isaacs K CLIC
  • 70. Travis Isaacs Change your name Change your photo Log out
  • 73. K TAP PE CH CLIC SWI PIN
  • 74. 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!
  • 75. Master Slide Content Slide
  • 77. Most of the work is done in here
  • 78. LESSON 4 Create a library of components Store common UI components like buttons, form controls, tabs, text treatments, etc.
  • 81. 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
  • 83. or alt + ⌘ + c 1
  • 84. or alt + ⌘ + v 2
  • 85. :) 3
  • 86. LESSON 6 Group items whenever Group possible Grouped items are easier to move, delete, and manipulate.
  • 87. Double-click on a grouped or alt + ⌘ + g to group element to edit it
  • 88. LESSON 7 Learn the keyboard shortcuts Keyboard shortcuts will save you time and clicks (and impress your boss).
  • 91. Group
  • 95. Fonts
  • 96. 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
  • 97. Music Talk Radio By Location Sports Settings
  • 98. Music Talk Radio By Location Sports Settings
  • 99. Radio By Location Music Sports Talk Settings
  • 100. Radio By Location Music Sports Talk Settings
  • 101. 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
  • 102. LESSON 10 Keep your theme lean Delete unused master slides to reduce the size of your .key file.
  • 105. 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.
  • 106. 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.
  • 108. border-radius -webkit-gradient Submit -moz-linear-gradient text-shadow box-shadow
  • 113. Label: Leave a comment: Yes Option 1 No Option 2   ON OFF Button Button Please Select  Please select... Option 1 Option 2 Option 3    
  • 114. 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
  • 115. 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
  • 117. 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>
  • 118. IMAGE HD VIDEO
  • 119. K CLIC TAP E S WIP Just a friendly reminder PIN CH Window Title