SlideShare une entreprise Scribd logo
1  sur  81
THE RIGHT WAY TO WIREFRAME




                      Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.html


Russ Unger | @russu
We don’t show
        OUR WORK
DESIGNERS
       Do It
DESIGNERS
       Do It
DEVELOPERS
        Do It
DEVELOPERS
        Do It
WHAT ABOUT UX?
We don’t show
        OUR WORK
“My work is proprietary.”
                   MINE, TOO.
Have you ever seen
            A WIREFRAME FROM...
Peter Morville
al Navigation                                                            Default state
                                                                                                                                                                 store
009                                                    Version 1.0                      logo                                                         search                  2
                                               Jesse James Garrett   1                                                                                           cart
n HBR                                                                        today on                     current                                              account
                                                                                               blogs                   books        authors           HBS     downloads
 page highlights timely content from the blogs, magazine,                       hbr                      magazine
                                                                                                                                                3
 s sections.                                                                                                        explore hbr
                                                                     4
ea                                                                             expand your knowledge            build your expertise          discover new approaches
  provides a focal point for all e-commerce related links.

 page allows users to find aggregated links to content from               Partially expanded state
 uthors across blogs, magazine, and books sections.
drawer
                                                                                                                                                                 store
                                                                                        logo                                                         search
andable area encourages and facilitates exploration of                                                                                                      cart
 y subject.                                                                  today on                   current                                           account
                                                                                            blogs                     books      authors        HBS     downloads
your knowledge                                                                  hbr                    magazine
  features editorially selected sub-categories from the current               Strategy                      Decision making
                                                                                                                    explore hbr         Business processes
 ategory in search results.                                                   Leadership                    Interpersonal skills        Management by objectives
                                                                              Organizational change         Project management          Quality management



                                                                                         Jesse James Garret
ur expertise
                                                                              Information & technology      Managing uncertainty        Forecasting
  features editorially selected sub-categories from the current               Global business               Time management             Knowledge management
ment Skills” category in search results.                                 5                                                                                               7
  new approaches
                                                                               expand your knowledge            build your expertise          discover new approaches
                                                                                                                                       6
  features editorially selected sub-categories from the current
Methodologies” category in search results.
 nks                                                                     Fully expanded state
 ks drive users interested in exploring further to dedicated                                                                                                     store
 ages.                                                                                  logo                                                         search
                                                                                                                                                                 cart
                                                                             today on                     current                                              account
                                                                                               blogs                   books        authors           HBS     downloads
                                                                                hbr                      magazine
                                                                                                                     explore hbr
                                                                                   more topics »                    more skills »                   more methods »
                                                                         8
                                                                              Strategy                       Decision making               Business processes
                                                                              Leadership                     Interpersonal skills          Management by objectives
                                                                              Organizational change          Project management            Quality management
                                                                              Information & technology       Managing uncertainty          Forecasting
                                                                              Global business                Time management               Knowledge management
                                                                               expand your knowledge            build your expertise          discover new approaches


 sign | Harvard Business Review
“I’ve never done a wireframe*”


*
                        Jared Spool
What is the best approach?
    WIREFRAMING OR PROTOTYPING
“Now that I’m a consumer of wireframes, I
        want to see prototypes!”
        Christina Wodtke | @cwodtke
“Now that I’m a consumer of wireframes, I
                      want to see prototypes!”
                      Christina Wodtke | @cwodtke




      “You can’t say that works
for everyone just because it works for
                you now!”
             Me | @russu
“Can, too!”   “Cannot!”



“Can, too!”   “Cannot!”



“Can, too!”   “Cannot!”



“Can, too!”   “Cannot!”



“Can, too!”   “Cannot!”
sigh.
I <3   and...
They are just Communication Tools.


Arguing about wireframes vs. prototypes is
                    MISSING THE POINT
It was time to
       NUT UP OR SHUT UP
4 DESIGNERS
Russ   Will   Fred   Todd
What is the best approach?
   WIREFRAMING OR PROTOTYPING
Balsamiq                               HTML &
            Omnigraffle   Axure RP
Mockups                               Fireworks




      Wireframes               Prototypes
Three
   RULES
Three
 RULES
    - EVERYONE uses a different tool
    - EVERYTHING is documented
    - NO TALKING to each other
The
 CASE STUDY
“If we can give $5 to a stranger
at a coffee shop, why can’t we do
             that for healthcare?”


                   Tori Tuncan

     98 Loans for a total of
           $76,289
www.
  LEND4HEALTH.COM
whew.
Design the path for funding a loan.


         The
           OBJECTIVE
How it’s done
           TODAY
     - user reviews profiles/needs in the blog format
     - user determines amount they can loan
     - user contacts lend4health
     - lend4health connects user and loan recipient
     - lend4health supplies loan agreement
     - user funds loan via paypal
     - lender repays funds via paypal per agreement
     - lender supplies updates to child’s progress to lend4health and lender
         lend4health updates progress on website
     - continues until loan is paid back
whew.
The
 APPROACH
Gabby Hon
@gabbyhon
User & Company
         RESEARCH
User
 PERSONAS
This is how
        I DID IT
Requirements
       ANALYSIS
Persona
    CONSIDERATION
Information
     ARCHITECTURE
Information
     ARCHITECTURE
Angela: Loan Funder
                                                       USER JOURNEY
                                                                            Angela Reviews
                                Angela arrives at   Angela Searches for a
                                                                            Details of Loan
                                Lend4Health.com        Loan to Fund
                  com/photos/                                                  Request
http://www.flickr.
              06/2912606267/
                                    (0.0.0.0)             (1.0.0.0)
11762156@N                                                                     (1.1.0.0)
Pencil & Paper
                          SKETCHING
Lend4Health.com
                     Search Loans to Fund   Loan Details
   Home Page
                           (1.0.0.0)          (1.1.0.0)
    (0.0.0.0)
Quantity over quality
           15 SKETCHES / 3 SCREENS
The Original
      PRESENTATION
Balsamiq Mockups
                      WIREFRAMING
Lend4Health.com
                  Search Loans to Fund   Loan Details
   Home Page
                        (1.0.0.0)          (1.1.0.0)
    (0.0.0.0)
Brad Simpson
 @simplybrad
Brad Simpson
                           VISUAL DESIGN
Lend4Health.com
                        Search Loans to Fund   Loan Details
   Home Page
                              (1.0.0.0)          (1.1.0.0)
    (0.0.0.0)
Lend4Health.com
           LOAN DETAILS
Pretty Cool.
Here’s the
   ENTIRE PROCESS
Four Designers
          LOTS OF OVERLAP
Information
     ARCHITECTURE
Information
     ARCHITECTURE
Information
     ARCHITECTURE
Pencil & Paper
         SKETCHING
Pencil & Paper
         SKETCHING
Pencil & Paper
         SKETCHING
Pencil & Paper
         SKETCHING
Visual
   DESIGN
Visual
   DESIGN
Visual
   DESIGN
Visual
   DESIGN
Online
                                    VIDEOS

http://is.gd/curls   http://is.gd/curow   http://is.gd/curw2   http://is.gd/curpN
Changing Times &
         NEW CONSIDERATIONS
Responsive
       DESIGN

             Ethan Marcotte
                     @beep
Responsive
       DESIGN

             Ethan Marcotte
                     @beep
Responsive
       DESIGN

             Ethan Marcotte
                     @beep
Biggest, Smallest, “Just Right”
                                 GOLDILOCKS

Matthew Milan               Source: Wireframes Magazine
                    http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/

     @mmilan
Responsive Way
           TO WIREFRAME
Responsive Way
           TO WIREFRAME
Responsive Way
           TO WIREFRAME
Mobile
   FIRST


         Image Source © Dustin Kirk ¦ http://www.dustinkirk.com/tag/luke-wroblewski/
Localization &
         LANGUAGES
What’s
    NEXT?
So
 WHAT?
The primary
   CHALLENGES
     - UNABLE to talk/collaborate
     - RESEARCH handed to us
     - NO FORMAL usability testing
     - DEVELOPER was unknown
Core
 PRINCIPLES
       - SKETCHING (a lot) is THINKING (a lot)
       - CRITIQUE is extremely essential
       - BEST TOOL: the one you know

         Find Your Right Way Here!
THANK YOU!




                      Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.html


Russ Unger | @russu

Contenu connexe

En vedette

Storyboard basics
Storyboard basicsStoryboard basics
Storyboard basics
msickler
 
Tech Presentation - Sketching
Tech Presentation - Sketching Tech Presentation - Sketching
Tech Presentation - Sketching
danio_iggy
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
Hitesh Mehta
 

En vedette (20)

What The Wireframe?
What The Wireframe?What The Wireframe?
What The Wireframe?
 
Storyboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools ReviewStoryboarding and Wireframe Tools Review
Storyboarding and Wireframe Tools Review
 
Storyboard basics
Storyboard basicsStoryboard basics
Storyboard basics
 
Tech Presentation - Sketching
Tech Presentation - Sketching Tech Presentation - Sketching
Tech Presentation - Sketching
 
3 ways to make wireframe more useful. Slides from UX Bristol
3 ways to make wireframe more useful. Slides from UX Bristol3 ways to make wireframe more useful. Slides from UX Bristol
3 ways to make wireframe more useful. Slides from UX Bristol
 
Workshop: Breaking the Fairy Tale of Wireframes
Workshop: Breaking the Fairy Tale of WireframesWorkshop: Breaking the Fairy Tale of Wireframes
Workshop: Breaking the Fairy Tale of Wireframes
 
2012-09-24 Workshop: Wireframe mockups
2012-09-24 Workshop: Wireframe mockups2012-09-24 Workshop: Wireframe mockups
2012-09-24 Workshop: Wireframe mockups
 
Bury the Wireframe: A Primer in Interaction Prototyping
Bury the Wireframe: A Primer in Interaction PrototypingBury the Wireframe: A Primer in Interaction Prototyping
Bury the Wireframe: A Primer in Interaction Prototyping
 
Campus for Mums - Wireframe/Prototyping and after hire a Developer
Campus for Mums - Wireframe/Prototyping and after hire a DeveloperCampus for Mums - Wireframe/Prototyping and after hire a Developer
Campus for Mums - Wireframe/Prototyping and after hire a Developer
 
Intro: Prototyping
Intro: PrototypingIntro: Prototyping
Intro: Prototyping
 
Wireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by CreatelyWireframe and Mockup Templates by Creately
Wireframe and Mockup Templates by Creately
 
Wireframe and wireframe inspiration
Wireframe and wireframe inspirationWireframe and wireframe inspiration
Wireframe and wireframe inspiration
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
 
From user journey to prototyping
From user journey to prototypingFrom user journey to prototyping
From user journey to prototyping
 
The Life Cycle of a Wireframe
The Life Cycle of a Wireframe The Life Cycle of a Wireframe
The Life Cycle of a Wireframe
 
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?
 
Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...
Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...
Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Hu...
 
Wireframing Fundamentals
Wireframing FundamentalsWireframing Fundamentals
Wireframing Fundamentals
 
How to write a Developer CV/Résumé that will get you hired
How to write a Developer CV/Résumé that will get you hiredHow to write a Developer CV/Résumé that will get you hired
How to write a Developer CV/Résumé that will get you hired
 

Plus de Russ U

3 Cs of Design - Charters, Critique, and Culture - Amuse Conference
3 Cs of Design - Charters, Critique, and Culture - Amuse Conference3 Cs of Design - Charters, Critique, and Culture - Amuse Conference
3 Cs of Design - Charters, Critique, and Culture - Amuse Conference
Russ U
 
3 Cs of Design: Charters, Critique, & Culture
3 Cs of Design: Charters, Critique, & Culture3 Cs of Design: Charters, Critique, & Culture
3 Cs of Design: Charters, Critique, & Culture
Russ U
 
The 3 Cs of Design - Charters, Critique, and Culture - Interaction South Amer...
The 3 Cs of Design - Charters, Critique, and Culture - Interaction South Amer...The 3 Cs of Design - Charters, Critique, and Culture - Interaction South Amer...
The 3 Cs of Design - Charters, Critique, and Culture - Interaction South Amer...
Russ U
 
The 3 Cs of Design: Charters, Critique, and Culture
The 3 Cs of Design: Charters, Critique, and CultureThe 3 Cs of Design: Charters, Critique, and Culture
The 3 Cs of Design: Charters, Critique, and Culture
Russ U
 

Plus de Russ U (20)

Hiring & Onboarding in Turbulent Times FTW - Interaction23.pdf
Hiring & Onboarding in Turbulent Times FTW - Interaction23.pdfHiring & Onboarding in Turbulent Times FTW - Interaction23.pdf
Hiring & Onboarding in Turbulent Times FTW - Interaction23.pdf
 
SXSW 2022 - Hiring & Getting Hired in Turbulent Times Workshop
SXSW 2022 - Hiring & Getting Hired in Turbulent Times WorkshopSXSW 2022 - Hiring & Getting Hired in Turbulent Times Workshop
SXSW 2022 - Hiring & Getting Hired in Turbulent Times Workshop
 
3 Cs of Design - Charters, Critique, and Culture - Amuse Conference
3 Cs of Design - Charters, Critique, and Culture - Amuse Conference3 Cs of Design - Charters, Critique, and Culture - Amuse Conference
3 Cs of Design - Charters, Critique, and Culture - Amuse Conference
 
Guerrilla Design & Research Methods - Amuse Conference
Guerrilla Design & Research Methods - Amuse ConferenceGuerrilla Design & Research Methods - Amuse Conference
Guerrilla Design & Research Methods - Amuse Conference
 
The Workshop Workshop - UXI Live
The Workshop Workshop - UXI LiveThe Workshop Workshop - UXI Live
The Workshop Workshop - UXI Live
 
3 Cs of Design: Charters, Critique, & Culture
3 Cs of Design: Charters, Critique, & Culture3 Cs of Design: Charters, Critique, & Culture
3 Cs of Design: Charters, Critique, & Culture
 
Design Culture Basics - Creating Your Team Charter - Interaction South Americ...
Design Culture Basics - Creating Your Team Charter - Interaction South Americ...Design Culture Basics - Creating Your Team Charter - Interaction South Americ...
Design Culture Basics - Creating Your Team Charter - Interaction South Americ...
 
The 3 Cs of Design - Charters, Critique, and Culture - Interaction South Amer...
The 3 Cs of Design - Charters, Critique, and Culture - Interaction South Amer...The 3 Cs of Design - Charters, Critique, and Culture - Interaction South Amer...
The 3 Cs of Design - Charters, Critique, and Culture - Interaction South Amer...
 
DesignOps Skunk Works
DesignOps Skunk WorksDesignOps Skunk Works
DesignOps Skunk Works
 
The 3 Cs of Design: Charters, Critique, and Culture
The 3 Cs of Design: Charters, Critique, and CultureThe 3 Cs of Design: Charters, Critique, and Culture
The 3 Cs of Design: Charters, Critique, and Culture
 
IA Summit Career Workshop 2015
IA Summit Career Workshop 2015IA Summit Career Workshop 2015
IA Summit Career Workshop 2015
 
Speaker Camp Seattle Workshop
Speaker Camp Seattle WorkshopSpeaker Camp Seattle Workshop
Speaker Camp Seattle Workshop
 
DesignOps Skunk Works - SXSW 2015
DesignOps Skunk Works - SXSW 2015DesignOps Skunk Works - SXSW 2015
DesignOps Skunk Works - SXSW 2015
 
Jim Henson and Prototyping (with Puppets)
Jim Henson and Prototyping (with Puppets)Jim Henson and Prototyping (with Puppets)
Jim Henson and Prototyping (with Puppets)
 
Jim Henson & Prototyping with Puppets
Jim Henson & Prototyping with PuppetsJim Henson & Prototyping with Puppets
Jim Henson & Prototyping with Puppets
 
Speaker Camp Atlanta Workshop - June 28, 2014
Speaker Camp Atlanta Workshop - June 28, 2014Speaker Camp Atlanta Workshop - June 28, 2014
Speaker Camp Atlanta Workshop - June 28, 2014
 
UX Lisbon - Things I've Learned (and Am Still Learning) from Leading (UX Desi...
UX Lisbon - Things I've Learned (and Am Still Learning) from Leading (UX Desi...UX Lisbon - Things I've Learned (and Am Still Learning) from Leading (UX Desi...
UX Lisbon - Things I've Learned (and Am Still Learning) from Leading (UX Desi...
 
UX Lisbon - The Workshop Workshop
UX Lisbon - The Workshop WorkshopUX Lisbon - The Workshop Workshop
UX Lisbon - The Workshop Workshop
 
(The Top 2-3) Things I've Learned (& Am Still Learning) From Leading (UX Desi...
(The Top 2-3) Things I've Learned (& Am Still Learning) From Leading (UX Desi...(The Top 2-3) Things I've Learned (& Am Still Learning) From Leading (UX Desi...
(The Top 2-3) Things I've Learned (& Am Still Learning) From Leading (UX Desi...
 
Things I've Learned (& Am Still Learning) from Leading (UX Designers)
Things I've Learned (& Am Still Learning) from Leading (UX Designers)Things I've Learned (& Am Still Learning) from Leading (UX Designers)
Things I've Learned (& Am Still Learning) from Leading (UX Designers)
 

Dernier

Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
sriharipichandi
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
eeanqy
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
nirzagarg
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 

Dernier (20)

Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 

The Right Way to Wireframe - CIDD Chicago, February 6, 2013

  • 1. THE RIGHT WAY TO WIREFRAME Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.html Russ Unger | @russu
  • 2. We don’t show OUR WORK
  • 3. DESIGNERS Do It
  • 4. DESIGNERS Do It
  • 5. DEVELOPERS Do It
  • 6. DEVELOPERS Do It
  • 8. We don’t show OUR WORK
  • 9. “My work is proprietary.” MINE, TOO.
  • 10. Have you ever seen A WIREFRAME FROM...
  • 12. al Navigation Default state store 009 Version 1.0 logo search 2 Jesse James Garrett 1 cart n HBR today on current account blogs books authors HBS downloads page highlights timely content from the blogs, magazine, hbr magazine 3 s sections. explore hbr 4 ea expand your knowledge build your expertise discover new approaches provides a focal point for all e-commerce related links. page allows users to find aggregated links to content from Partially expanded state uthors across blogs, magazine, and books sections. drawer store logo search andable area encourages and facilitates exploration of cart y subject. today on current account blogs books authors HBS downloads your knowledge hbr magazine features editorially selected sub-categories from the current Strategy Decision making explore hbr Business processes ategory in search results. Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management Jesse James Garret ur expertise Information & technology Managing uncertainty Forecasting features editorially selected sub-categories from the current Global business Time management Knowledge management ment Skills” category in search results. 5 7 new approaches expand your knowledge build your expertise discover new approaches 6 features editorially selected sub-categories from the current Methodologies” category in search results. nks Fully expanded state ks drive users interested in exploring further to dedicated store ages. logo search cart today on current account blogs books authors HBS downloads hbr magazine explore hbr more topics » more skills » more methods » 8 Strategy Decision making Business processes Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management Information & technology Managing uncertainty Forecasting Global business Time management Knowledge management expand your knowledge build your expertise discover new approaches sign | Harvard Business Review
  • 13. “I’ve never done a wireframe*” * Jared Spool
  • 14. What is the best approach? WIREFRAMING OR PROTOTYPING
  • 15. “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke
  • 16. “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke “You can’t say that works for everyone just because it works for you now!” Me | @russu
  • 17. “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!”
  • 18. sigh.
  • 19. I <3 and...
  • 20. They are just Communication Tools. Arguing about wireframes vs. prototypes is MISSING THE POINT
  • 21. It was time to NUT UP OR SHUT UP
  • 23. Russ Will Fred Todd
  • 24. What is the best approach? WIREFRAMING OR PROTOTYPING
  • 25. Balsamiq HTML & Omnigraffle Axure RP Mockups Fireworks Wireframes Prototypes
  • 26. Three RULES
  • 27. Three RULES - EVERYONE uses a different tool - EVERYTHING is documented - NO TALKING to each other
  • 29. “If we can give $5 to a stranger at a coffee shop, why can’t we do that for healthcare?” Tori Tuncan 98 Loans for a total of $76,289
  • 31. whew.
  • 32. Design the path for funding a loan. The OBJECTIVE
  • 33. How it’s done TODAY - user reviews profiles/needs in the blog format - user determines amount they can loan - user contacts lend4health - lend4health connects user and loan recipient - lend4health supplies loan agreement - user funds loan via paypal - lender repays funds via paypal per agreement - lender supplies updates to child’s progress to lend4health and lender lend4health updates progress on website - continues until loan is paid back
  • 34. whew.
  • 37. User & Company RESEARCH
  • 39. This is how I DID IT
  • 40. Requirements ANALYSIS
  • 41. Persona CONSIDERATION
  • 42. Information ARCHITECTURE
  • 43. Information ARCHITECTURE
  • 44. Angela: Loan Funder USER JOURNEY Angela Reviews Angela arrives at Angela Searches for a Details of Loan Lend4Health.com Loan to Fund com/photos/ Request http://www.flickr. 06/2912606267/ (0.0.0.0) (1.0.0.0) 11762156@N (1.1.0.0)
  • 45. Pencil & Paper SKETCHING Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  • 46. Quantity over quality 15 SKETCHES / 3 SCREENS
  • 47. The Original PRESENTATION
  • 48. Balsamiq Mockups WIREFRAMING Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  • 50. Brad Simpson VISUAL DESIGN Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  • 51. Lend4Health.com LOAN DETAILS
  • 53. Here’s the ENTIRE PROCESS
  • 54. Four Designers LOTS OF OVERLAP
  • 55. Information ARCHITECTURE
  • 56. Information ARCHITECTURE
  • 57. Information ARCHITECTURE
  • 58. Pencil & Paper SKETCHING
  • 59. Pencil & Paper SKETCHING
  • 60. Pencil & Paper SKETCHING
  • 61. Pencil & Paper SKETCHING
  • 62. Visual DESIGN
  • 63. Visual DESIGN
  • 64. Visual DESIGN
  • 65. Visual DESIGN
  • 66. Online VIDEOS http://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN
  • 67. Changing Times & NEW CONSIDERATIONS
  • 68. Responsive DESIGN Ethan Marcotte @beep
  • 69. Responsive DESIGN Ethan Marcotte @beep
  • 70. Responsive DESIGN Ethan Marcotte @beep
  • 71. Biggest, Smallest, “Just Right” GOLDILOCKS Matthew Milan Source: Wireframes Magazine http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/ @mmilan
  • 72. Responsive Way TO WIREFRAME
  • 73. Responsive Way TO WIREFRAME
  • 74. Responsive Way TO WIREFRAME
  • 75. Mobile FIRST Image Source © Dustin Kirk ¦ http://www.dustinkirk.com/tag/luke-wroblewski/
  • 76. Localization & LANGUAGES
  • 77. What’s NEXT?
  • 79. The primary CHALLENGES - UNABLE to talk/collaborate - RESEARCH handed to us - NO FORMAL usability testing - DEVELOPER was unknown
  • 80. Core PRINCIPLES - SKETCHING (a lot) is THINKING (a lot) - CRITIQUE is extremely essential - BEST TOOL: the one you know Find Your Right Way Here!
  • 81. THANK YOU! Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.html Russ Unger | @russu