SlideShare a Scribd company logo
THE RIGHT WAY TO WIREFRAME
FRONTEND 2011 | #rwtw




Russ Unger | @russu     Image Source © Time Inc.
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
ur expertise
                                                                              Information & technology      Managing uncertainty        Forecasting
  features editorially selected sub-categories from the current
ment Skills” category in search results.
  new approaches
  features editorially selected sub-categories from the current
                                                                         5
                                                                              Global business
                                                                               expand your knowledge       Jesse James Garret
                                                                                                            Time management
                                                                                                                build your expertise
                                                                                                                                       6
                                                                                                                                        Knowledge management
                                                                                                                                              discover new approaches
                                                                                                                                                                         7



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 tool?
     WIREFRAMING OR PROTOTYPING
“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 tool?
     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 ONE talks 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
            $72,848
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
Task Analysis
          GRID
Inspiration
       LIBRARY
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 PAGE
          SEARCH LOANS
          HOMEDETAILS
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
Responsive
       DESIGN
Responsive
       DESIGN
Biggest, Smallest, “Just Right”
                               GOLDILOCKS

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

    @mmilan
Localization &
         LANGUAGES
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!
                      FRONTEND 2011 | #rwtw




Russ Unger | @russu        Image Source © Time Inc.

More Related Content

Similar to FRONTEND 2011 - The Right Way To Wireframe

8 better practices from information architecture
8 better practices from information architecture8 better practices from information architecture
8 better practices from information architectureUIEpreviews
 
Mesh Labs Introduction June 2012
Mesh Labs Introduction June 2012Mesh Labs Introduction June 2012
Mesh Labs Introduction June 2012
Umesh Ramalingachar
 
Results driven blogging for B2B brands
Results driven blogging for B2B brandsResults driven blogging for B2B brands
Results driven blogging for B2B brandsAlison Bolen
 
What is hub spot
What is hub spotWhat is hub spot
What is hub spot
Jason Gilbert
 
Brand & Experience (a workbook)
Brand & Experience (a workbook) Brand & Experience (a workbook)
Brand & Experience (a workbook)
Marisa Gallagher
 
Orchestrated Content
Orchestrated ContentOrchestrated Content
Orchestrated Content
Rachel Lovinger
 
Improving Findability: The Role of Information Architecture in Effective Search
Improving Findability: The Role of Information Architecture in Effective SearchImproving Findability: The Role of Information Architecture in Effective Search
Improving Findability: The Role of Information Architecture in Effective Search
Scott Abel
 
What April has to offer
What April has to offerWhat April has to offer
What April has to offer
aprilspence
 
Brand rjvntr brochure
Brand rjvntr brochureBrand rjvntr brochure
Brand rjvntr brochure
Roy Wollen
 
Ea Landscape Capabilities Summary Slides 2009 Share
Ea Landscape Capabilities Summary Slides 2009 ShareEa Landscape Capabilities Summary Slides 2009 Share
Ea Landscape Capabilities Summary Slides 2009 Share
skipboe910
 
Course outline p&bm
Course outline p&bmCourse outline p&bm
Course outline p&bmmrinal786
 
Content marketing sb 011812
Content marketing sb 011812Content marketing sb 011812
Content marketing sb 011812
Capital Group
 
Knowledge management solutions for development sector InfoAxon approach
Knowledge management solutions for development sector   InfoAxon approachKnowledge management solutions for development sector   InfoAxon approach
Knowledge management solutions for development sector InfoAxon approach
InfoAxon Technologies Limited
 
B2B Marketing Clinic – Customer-Centric Content Development
B2B Marketing Clinic – Customer-Centric Content DevelopmentB2B Marketing Clinic – Customer-Centric Content Development
B2B Marketing Clinic – Customer-Centric Content Development
Pardot
 
Key Note Social + Cloud + Mobile = Opportunity3 - door Laurent Boes IBM
Key Note Social + Cloud + Mobile = Opportunity3 - door Laurent Boes IBMKey Note Social + Cloud + Mobile = Opportunity3 - door Laurent Boes IBM
Key Note Social + Cloud + Mobile = Opportunity3 - door Laurent Boes IBMICCTY
 
Digital Marketing Case Study + Consortium Details
Digital Marketing Case Study + Consortium DetailsDigital Marketing Case Study + Consortium Details
Digital Marketing Case Study + Consortium Details
Best Practices
 
Intranet Sitemap
Intranet SitemapIntranet Sitemap
Intranet Sitemap
John Vaughan
 
KM Summary
KM SummaryKM Summary
KM Summary
guest5d9aad
 

Similar to FRONTEND 2011 - The Right Way To Wireframe (20)

8 better practices from information architecture
8 better practices from information architecture8 better practices from information architecture
8 better practices from information architecture
 
Mesh Labs Introduction June 2012
Mesh Labs Introduction June 2012Mesh Labs Introduction June 2012
Mesh Labs Introduction June 2012
 
Results driven blogging for B2B brands
Results driven blogging for B2B brandsResults driven blogging for B2B brands
Results driven blogging for B2B brands
 
What is hub spot
What is hub spotWhat is hub spot
What is hub spot
 
What is hub spot
What is hub spotWhat is hub spot
What is hub spot
 
Aligned Strategy
Aligned StrategyAligned Strategy
Aligned Strategy
 
Brand & Experience (a workbook)
Brand & Experience (a workbook) Brand & Experience (a workbook)
Brand & Experience (a workbook)
 
Orchestrated Content
Orchestrated ContentOrchestrated Content
Orchestrated Content
 
Improving Findability: The Role of Information Architecture in Effective Search
Improving Findability: The Role of Information Architecture in Effective SearchImproving Findability: The Role of Information Architecture in Effective Search
Improving Findability: The Role of Information Architecture in Effective Search
 
What April has to offer
What April has to offerWhat April has to offer
What April has to offer
 
Brand rjvntr brochure
Brand rjvntr brochureBrand rjvntr brochure
Brand rjvntr brochure
 
Ea Landscape Capabilities Summary Slides 2009 Share
Ea Landscape Capabilities Summary Slides 2009 ShareEa Landscape Capabilities Summary Slides 2009 Share
Ea Landscape Capabilities Summary Slides 2009 Share
 
Course outline p&bm
Course outline p&bmCourse outline p&bm
Course outline p&bm
 
Content marketing sb 011812
Content marketing sb 011812Content marketing sb 011812
Content marketing sb 011812
 
Knowledge management solutions for development sector InfoAxon approach
Knowledge management solutions for development sector   InfoAxon approachKnowledge management solutions for development sector   InfoAxon approach
Knowledge management solutions for development sector InfoAxon approach
 
B2B Marketing Clinic – Customer-Centric Content Development
B2B Marketing Clinic – Customer-Centric Content DevelopmentB2B Marketing Clinic – Customer-Centric Content Development
B2B Marketing Clinic – Customer-Centric Content Development
 
Key Note Social + Cloud + Mobile = Opportunity3 - door Laurent Boes IBM
Key Note Social + Cloud + Mobile = Opportunity3 - door Laurent Boes IBMKey Note Social + Cloud + Mobile = Opportunity3 - door Laurent Boes IBM
Key Note Social + Cloud + Mobile = Opportunity3 - door Laurent Boes IBM
 
Digital Marketing Case Study + Consortium Details
Digital Marketing Case Study + Consortium DetailsDigital Marketing Case Study + Consortium Details
Digital Marketing Case Study + Consortium Details
 
Intranet Sitemap
Intranet SitemapIntranet Sitemap
Intranet Sitemap
 
KM Summary
KM SummaryKM Summary
KM Summary
 

More from Russ U

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
Russ U
 
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
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
 
Guerrilla Design & Research Methods - Amuse Conference
Guerrilla Design & Research Methods - Amuse ConferenceGuerrilla Design & Research Methods - Amuse Conference
Guerrilla Design & Research Methods - Amuse Conference
Russ U
 
The Workshop Workshop - UXI Live
The Workshop Workshop - UXI LiveThe Workshop Workshop - UXI Live
The Workshop Workshop - UXI Live
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
 
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...
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
 
DesignOps Skunk Works
DesignOps Skunk WorksDesignOps Skunk Works
DesignOps Skunk Works
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
 
IA Summit Career Workshop 2015
IA Summit Career Workshop 2015IA Summit Career Workshop 2015
IA Summit Career Workshop 2015
Russ U
 
Speaker Camp Seattle Workshop
Speaker Camp Seattle WorkshopSpeaker Camp Seattle Workshop
Speaker Camp Seattle Workshop
Russ U
 
DesignOps Skunk Works - SXSW 2015
DesignOps Skunk Works - SXSW 2015DesignOps Skunk Works - SXSW 2015
DesignOps Skunk Works - SXSW 2015
Russ U
 
Jim Henson and Prototyping (with Puppets)
Jim Henson and Prototyping (with Puppets)Jim Henson and Prototyping (with Puppets)
Jim Henson and Prototyping (with Puppets)
Russ U
 
Jim Henson & Prototyping with Puppets
Jim Henson & Prototyping with PuppetsJim Henson & Prototyping with Puppets
Jim Henson & Prototyping with Puppets
Russ U
 
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
Russ U
 
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...
Russ U
 
UX Lisbon - The Workshop Workshop
UX Lisbon - The Workshop WorkshopUX Lisbon - The Workshop Workshop
UX Lisbon - The Workshop Workshop
Russ U
 
(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...
Russ U
 
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)
Russ U
 

More from 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)
 

Recently uploaded

Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
TE Studio
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
Confidence Ago
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
PrabhjeetSingh219035
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 

Recently uploaded (20)

Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 

FRONTEND 2011 - The Right Way To Wireframe

  • 1. THE RIGHT WAY TO WIREFRAME FRONTEND 2011 | #rwtw Russ Unger | @russu Image Source © Time Inc.
  • 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 ur expertise Information & technology Managing uncertainty Forecasting features editorially selected sub-categories from the current ment Skills” category in search results. new approaches features editorially selected sub-categories from the current 5 Global business expand your knowledge Jesse James Garret Time management build your expertise 6 Knowledge management discover new approaches 7 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 tool? WIREFRAMING OR PROTOTYPING
  • 15. “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
  • 16. “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!”
  • 17. sigh.
  • 18. I <3 and...
  • 19. They are just Communication Tools. Arguing about wireframes vs. prototypes is MISSING THE POINT
  • 20. It was time to NUT UP OR SHUT UP
  • 22. Russ Will Fred Todd
  • 23. What is the best tool? WIREFRAMING OR PROTOTYPING
  • 24. Balsamiq HTML & Omnigraffle Axure RP Mockups Fireworks Wireframes Prototypes
  • 26. Three RULES - EVERYONE uses a different tool - EVERYTHING is documented - NO ONE talks to each other
  • 28. “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 $72,848
  • 30. whew.
  • 31. Design the path for funding a loan. The OBJECTIVE
  • 32. 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
  • 33. whew.
  • 36. User & Company RESEARCH
  • 39. Inspiration LIBRARY
  • 40. This is how I DID IT
  • 41. Requirements ANALYSIS
  • 42. Persona CONSIDERATION
  • 43. Information ARCHITECTURE
  • 44. Information ARCHITECTURE
  • 45. 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)
  • 46. 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)
  • 47. Quantity over quality 15 SKETCHES / 3 SCREENS
  • 48. The Original PRESENTATION
  • 49. 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)
  • 51. 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)
  • 52. Lend4Health.com LOAN PAGE SEARCH LOANS HOMEDETAILS
  • 54. Here’s the ENTIRE PROCESS
  • 55.
  • 56. Four Designers LOTS OF OVERLAP
  • 57. Information ARCHITECTURE
  • 58. Information ARCHITECTURE
  • 59. Information ARCHITECTURE
  • 60. Pencil & Paper SKETCHING
  • 61. Pencil & Paper SKETCHING
  • 62. Pencil & Paper SKETCHING
  • 63. Pencil & Paper SKETCHING
  • 64. Visual DESIGN
  • 65. Visual DESIGN
  • 66. Visual DESIGN
  • 67. Visual DESIGN
  • 68. Online VIDEOS http://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN
  • 69. Changing Times & NEW CONSIDERATIONS
  • 70. Responsive DESIGN
  • 71. Responsive DESIGN
  • 72. Responsive DESIGN
  • 73. Biggest, Smallest, “Just Right” GOLDILOCKS Matthew Milan Source: Wireframes Magazine http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/ @mmilan
  • 74. Localization & LANGUAGES
  • 76. The primary CHALLENGES - UNABLE to talk/collaborate - RESEARCH handed to us - NO FORMAL usability testing - DEVELOPER was unknown
  • 77. Core PRINCIPLES - SKETCHING (a lot) is THINKING (a lot) - CRITIQUE is extremely essential - BEST TOOL: the one you know Find Your Right Way Here!
  • 78. THANK YOU! FRONTEND 2011 | #rwtw Russ Unger | @russu Image Source © Time Inc.