SlideShare a Scribd company logo
1 of 49
Download to read offline
What the
  wireframe?
A pragmatic point of view
Hi, I’m Jason Robb

Tweeting today?

@jasonrobb #wtwf
MyHappyPlanet
• Start-up company
• Wearer of many hats
 • Design of: UX, UI, IA,
  IxD, etc...
Why listen to me?
•   Made a fair share of
    wireframes.
• A few methods. Not all.
• You’ll learn something!
    (Even if it is what not to do, I win!)
Note: I have no
idea what I’m
doing up here.
Throw me a bone. Ask me questions!
What are wireframes?
        Language International                                         Purpose of this document:                                                                                                 Created on Tue Feb 17 2009
                                                                                                                                                                                                Modified on Wed Feb 18 2009
                                                                       This wireframe shows the redesigned content on our home page. Is this the right
        Wireframe: Home page                                                                                                                                                                         Created by Jason Robb
                                                                       content? The presentation will change, the layout is a bit cramped, but that will be
                                                                       adjusted later. Shown below is the home page MINUS the header, navigation and footer.                                          wf-HomePage2.gra e



                                                                                                                                                                   Notes
                                                                                                                                                               1   Clear, concise H1 & Tour link

         Find language courses                                                                                                                                     A) Pending final revision, this is our mission statement
  1.A
                                                                                                                                                                   packed into 7 words or less.
                                                                                                                                                                   B) Take the tour - maybe not the best copywriting.
                                                                                          Photo of a city or person

         at the best schools
                                                                                                                                                                   Something to this e ect. The people that quot;get itquot; will find
                                                                                                                                                                   the search form, destinations, or special courses below.

                                                                                                                                                               2   Triple play
                                                                                                                       Take the tour >
                                                                                                               1.B                                                 Three great things that we do that makes us stand apart
                                                                                                                                                                   from out competition. Icons are either already made or
                                                                                                                                                                   need minor tweaking to fit.

                                                                                                                                                               3
                    Easily compare multiple                   Free student counseling                                Low prices guaranteed                         Mini-search got minified
  2                 courses & schools                                                                                                                              No AJAX . Why? It's complicated and redundant. The
            Icon                                     Icon                                               Icon         If you find a cheaper price
                                                              Our student advisors are                                                                             original design was apart of a larger (now extinct) UX.
                    We have thousands of                                                                             somewhere else we'll
                                                              knowledgeable, friendly,
                    courses, all at high quality                                                                                                                   No duration - it isn't something people think about from
                                                                                                                     match it!
                                                              and want to help you find
                                                                                                                                                                   the start. It's important. But I'd be willing to bet that data
                    schools.                                  the perfect match.                                     Price matching policy                         shows that nobody adjusts it from the home page
                    Search courses now                        Learn more about us                                                                                  (reference needed, lil help Mike?).

                                                                                                                                                               4   Destination table
                                                                                                                                                                   List all locations in every language we o er. These links
         Find a course                   Study abroad destinations                                               Summer courses
                                                                                                         5
  3                                 4                                                                                                                              go to our SERP. If they click quot;USAquot;, then we show them
                                                                                                                                                                   the default search for all cities in the USA, intensive
                                                                                                                 Study in sunny Boston USA,                        courses only, for an duration.
         Language
                                         Study English                                                           where the grass is greener                    5   Specialty courses
          Select a language                                                                                      and the air is cleaner.                           These won't be blue links, but they'll be obviously
                                                         Boston          New York          Los Angelos
                                          USA                                                                                                                      clickable. Presentation withstanding, ideally, these clicks
         Country                                                         City
                                                                                                                 Business courses                                  send our users to SERP for these course types. Until
                                                                                                                                                                   then, we'll push them to our contact form. (See notes on
                                                         San Antonio     Pittsburgh        Baltimore
         Select a country
                                                                                                                                                                   Navigation paths.)
                                                                                                                 Your boss will love you and
                                                                                                                 want to give you a raise
         City                                            Nomans          Someplace         Lightville
                                                                                                                 immediately.
                                                         Land
         Select a country

                                                                                                                 Kids courses
                                          UK             London          Cambridge         Berkshire
          Search courses                                                                                         Send your kids to Italy to
                                                                                                                 work like slaves for 6 weeks.
                                         Study Spanish
What are wireframes?
 • Basis for discussion
 • Give visible form and
  structure to info
  architecture
 • Cheap to make
How abstract
 ideas become
concrete designs
Why use them?
Why use them?
• Developers: How is it supposed
 to work?
• Business: Do we understand the
 business goals?
• Progress check: Are we on the
 right track?
• Discussion: Get people talking
 about the UI.
When are
they used?
Whenever an idea
needs to have form
    See it, test it, iterate.
New product design
           Before visual design &
           after structural design




           © Jesse James Garrett
           http://www.jjg.net/elements/
Existing
  product?
Any time the UI needs
    improvement
Types of wireframes
• Fidelity (high or low)
• Medium (paper or digital)
“Designers should choose
  whichever medium and
 level of fidelity suit their
    practical needs and
      design goals...”
 High-fidelity or low-fidelity, paper or digital?
            Miriam Walker, 2002
   http://dub.washington.edu:2007/projects/fidelity/pubs/Walker_HFES_2002.pdf
Practical needs
  Getting things done.
Practical needs
• Technical requirements
• Business requirements
• User requirements
Design goals
Shape & discuss ideas
Who are they for?




© James Kelway - http://www.flickr.com/photos/userpathways/2612549491/
Who are they for?
• Designers, creatives, marketing
• Developers, usability, QA
• Users, user groups, user testing
• Business, stakeholders, CEO’s
• Everyone!? Your mom, too?
How are
    they made?
Pick the fastest tools for you.
Analog tools
Fastest for thinking (at first).
Analog tools
• Pens, markers
• Sticky notes
• Moleskins
• Whiteboards
Use a pen,
don’t be scared.
• Pen: Micron .35mm water-proof,
   fade-proof, permanent
 • Forces you to be decisive
 • You’ll be faster at getting your
   thoughts on paper
 • Maybe this is drawing-related?
Start with sticky notes
I like sticky notes
• I write small, so the size
  constraint doesn’t bother me.
• They’re transient. They’re not
  museum-bound.
• Moved easily, arranged in a flow.
• Super fastasto complete.
  (that’s twice fast as regular fast.)
Get a big moleskin
• Sticky notes take the place of my
  pocket moleskin.
• Small doesn’t allow for enough
  details to be fleshed out.
• Big isn’t an option.
• Stickies fit in the big moleskin!
Stickies fit
in a moleskin
Process of
wireframing
  How I do it...
Wireframing process
• Start with sketches (low-fidelity)
• Increase fidelity as the concept
  moves forward (skip levels as needed)
• The goal is an interactive
  prototype
• Once tested, it quickly becomes
  a real product.
My typical process




Thumbnails > full pages > prototype
Don’t waste time.
Your sticky notes are not
     your web site.
“A piece of paper, on the
other hand, is only on its
way to the garbage can.”

    Getting Real by 37Signals
  http://gettingreal.37signals.com/ch11_Dont_Do_Dead_Documents.php
Don’t waste too much time
with static wireframes. Get
 to HTML fast, if you can.
 My recommendation, based on
 37Signals wireframe sentiments.
“You can’t go from
 nothing to a prototype
unless you already have a
prototype to work with.”

  Get realistic by Jason Robb
1. Wireframes don’t always
need finished.
2. Only wireframe the
unknown pages.
        Spoolcast: Roughing it with
          Interactive Prototypes
  http://www.uie.com/brainsparks/2009/03/06/spoolcast-roughing-it-with-interactive-
                                    prototypes/
Getting to
   prototypes
Get here as fast as possible
Digital tools
• Omnigraffle - easy to use, easy to
  get too detailed. (That’s bad)
• Photoshop - less easy to use,
  more easy to get too detailed.
• HTML - just right, if you set it up
  first. (Initial time sink)
Omnigraffle
      Language International                                         Purpose of this document:                                                                                                 Created on Tue Feb 17 2009
                                                                                                                                                                                              Modified on Wed Feb 18 2009
                                                                     This wireframe shows the redesigned content on our home page. Is this the right
      Wireframe: Home page                                                                                                                                                                         Created by Jason Robb
                                                                     content? The presentation will change, the layout is a bit cramped, but that will be
                                                                     adjusted later. Shown below is the home page MINUS the header, navigation and footer.                                          wf-HomePage2.gra e



                                                                                                                                                                 Notes
                                                                                                                                                             1   Clear, concise H1 & Tour link

       Find language courses                                                                                                                                     A) Pending final revision, this is our mission statement
1.A
                                                                                                                                                                 packed into 7 words or less.
                                                                                                                                                                 B) Take the tour - maybe not the best copywriting.
                                                                                        Photo of a city or person

       at the best schools
                                                                                                                                                                 Something to this e ect. The people that quot;get itquot; will find
                                                                                                                                                                 the search form, destinations, or special courses below.

                                                                                                                                                             2   Triple play
                                                                                                                     Take the tour >
                                                                                                             1.B                                                 Three great things that we do that makes us stand apart
                                                                                                                                                                 from out competition. Icons are either already made or
                                                                                                                                                                 need minor tweaking to fit.

                                                                                                                                                             3
                  Easily compare multiple                   Free student counseling                                Low prices guaranteed                         Mini-search got minified
2                 courses & schools                                                                                                                              No AJAX . Why? It's complicated and redundant. The
          Icon                                     Icon                                               Icon         If you find a cheaper price
                                                            Our student advisors are                                                                             original design was apart of a larger (now extinct) UX.
                  We have thousands of                                                                             somewhere else we'll
                                                            knowledgeable, friendly,
                  courses, all at high quality                                                                                                                   No duration - it isn't something people think about from
                                                                                                                   match it!
                                                            and want to help you find
                                                                                                                                                                 the start. It's important. But I'd be willing to bet that data
                  schools.                                  the perfect match.                                     Price matching policy                         shows that nobody adjusts it from the home page
                  Search courses now                        Learn more about us                                                                                  (reference needed, lil help Mike?).

                                                                                                                                                             4   Destination table
                                                                                                                                                                 List all locations in every language we o er. These links
       Find a course                   Study abroad destinations                                               Summer courses
                                                                                                       5
3                                 4                                                                                                                              go to our SERP. If they click quot;USAquot;, then we show them
                                                                                                                                                                 the default search for all cities in the USA, intensive
                                                                                                               Study in sunny Boston USA,                        courses only, for an duration.
       Language
                                       Study English                                                           where the grass is greener                    5   Specialty courses
        Select a language                                                                                      and the air is cleaner.                           These won't be blue links, but they'll be obviously
                                                       Boston          New York          Los Angelos
                                        USA                                                                                                                      clickable. Presentation withstanding, ideally, these clicks
       Country                                                         City
                                                                                                               Business courses                                  send our users to SERP for these course types. Until
                                                                                                                                                                 then, we'll push them to our contact form. (See notes on
                                                       San Antonio     Pittsburgh        Baltimore
       Select a country
                                                                                                                                                                 Navigation paths.)
                                                                                                               Your boss will love you and
                                                                                                               want to give you a raise
       City                                            Nomans          Someplace         Lightville
                                                                                                               immediately.
                                                       Land
       Select a country

                                                                                                               Kids courses
                                        UK             London          Cambridge         Berkshire
        Search courses                                                                                         Send your kids to Italy to
                                                                                                               work like slaves for 6 weeks.
                                       Study Spanish
Photoshop
HTML
HTML, why I love it
• HTML Templates: make a half
  dozen different layouts. Reuse.
• They take time to make, worth it.
• Use frameworks: 960GS,
  blueprint, YUI, etc...
• Then spend more time thinking
  in the prototype
Tool time &
   Goal time
A lesson from Jared Spool
Tool time is...
• Wasted time.
• “If it takes longer to make
  something bold, it’s not any
  better bold”
• (You’re still learning how to use
  your tools faster/better. ;)
Goal time
• Goal time is time spent making
 progress toward the final product
• The ultimate goal is to spend
 more time working towards the
 goal, and less wasted with your
 tools
Separate the goals
  from the tools
Use whatever tool is fastest for you!
That’s all yinz!
   Any questions?
How’d I do?
     Seriously, tell me!
http://speakerrate.com/jasonrobb

More Related Content

What's hot

Design+Startups (Startup Lessons Learned)
Design+Startups (Startup Lessons Learned)Design+Startups (Startup Lessons Learned)
Design+Startups (Startup Lessons Learned)Janice Fraser
 
The Reflector - November 18, 2008
The Reflector - November 18, 2008The Reflector - November 18, 2008
The Reflector - November 18, 2008Carl Smith
 
Select Portfolio
Select PortfolioSelect Portfolio
Select PortfolioAdele_Mari
 
Trainers advert help sheet 2
Trainers advert help sheet 2Trainers advert help sheet 2
Trainers advert help sheet 2Graveney School
 
Planning ancillaries
Planning ancillariesPlanning ancillaries
Planning ancillariesDanny Norton
 
Presentation1 [autosaved]
Presentation1 [autosaved]Presentation1 [autosaved]
Presentation1 [autosaved]tariqdrix
 
GCSE Media Advert Annotation Guide Sheet
GCSE Media Advert Annotation Guide SheetGCSE Media Advert Annotation Guide Sheet
GCSE Media Advert Annotation Guide SheetGraveney School
 
Analysing articles dizzee mag ppt (1)
Analysing articles dizzee mag ppt (1)Analysing articles dizzee mag ppt (1)
Analysing articles dizzee mag ppt (1)asmediag12
 
Q4 technologies presentation.
Q4 technologies presentation.Q4 technologies presentation.
Q4 technologies presentation.Kristhomas
 
The Rise and Fall of TOPICS
The Rise and Fall of TOPICSThe Rise and Fall of TOPICS
The Rise and Fall of TOPICSRachel Lovinger
 
Magazine research q kerrang nme
Magazine research q kerrang nmeMagazine research q kerrang nme
Magazine research q kerrang nmemaisiehall
 

What's hot (15)

Design+Startups (Startup Lessons Learned)
Design+Startups (Startup Lessons Learned)Design+Startups (Startup Lessons Learned)
Design+Startups (Startup Lessons Learned)
 
The Reflector - November 18, 2008
The Reflector - November 18, 2008The Reflector - November 18, 2008
The Reflector - November 18, 2008
 
Soap mag
Soap magSoap mag
Soap mag
 
Question one
Question oneQuestion one
Question one
 
Q1evaluation
Q1evaluationQ1evaluation
Q1evaluation
 
Select Portfolio
Select PortfolioSelect Portfolio
Select Portfolio
 
Trainers advert help sheet 2
Trainers advert help sheet 2Trainers advert help sheet 2
Trainers advert help sheet 2
 
Planning ancillaries
Planning ancillariesPlanning ancillaries
Planning ancillaries
 
Presentation1 [autosaved]
Presentation1 [autosaved]Presentation1 [autosaved]
Presentation1 [autosaved]
 
GCSE Media Advert Annotation Guide Sheet
GCSE Media Advert Annotation Guide SheetGCSE Media Advert Annotation Guide Sheet
GCSE Media Advert Annotation Guide Sheet
 
Analysing articles dizzee mag ppt (1)
Analysing articles dizzee mag ppt (1)Analysing articles dizzee mag ppt (1)
Analysing articles dizzee mag ppt (1)
 
Q4 technologies presentation.
Q4 technologies presentation.Q4 technologies presentation.
Q4 technologies presentation.
 
The Rise and Fall of TOPICS
The Rise and Fall of TOPICSThe Rise and Fall of TOPICS
The Rise and Fall of TOPICS
 
Magazine research q kerrang nme
Magazine research q kerrang nmeMagazine research q kerrang nme
Magazine research q kerrang nme
 
December Xmas Newletter
December Xmas NewletterDecember Xmas Newletter
December Xmas Newletter
 

Viewers also liked

Wireframing and design short course
Wireframing and design short courseWireframing and design short course
Wireframing and design short coursecarishurd
 
Wireframing Fundamentals
Wireframing FundamentalsWireframing Fundamentals
Wireframing FundamentalsTelepathy
 
Crash Course in Wireframing
Crash Course in WireframingCrash Course in Wireframing
Crash Course in WireframingMarcel
 
Designers Guide To Wireframing
Designers Guide To WireframingDesigners Guide To Wireframing
Designers Guide To WireframingWilliam Quezada
 
Training Webinar - Wireframing made easy
Training Webinar - Wireframing made easyTraining Webinar - Wireframing made easy
Training Webinar - Wireframing made easyOutSystems
 
Things you shouldn't do with SharePoint
Things you shouldn't do with SharePointThings you shouldn't do with SharePoint
Things you shouldn't do with SharePointPerttu Tolvanen
 
Layout and Wireframing
Layout and WireframingLayout and Wireframing
Layout and WireframingOmar Duarte
 
Wireframe Powerpoint Parts
Wireframe Powerpoint PartsWireframe Powerpoint Parts
Wireframe Powerpoint PartsGregory Raiz
 
Introduction to wireframes
Introduction to wireframesIntroduction to wireframes
Introduction to wireframespiksels
 
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewMake SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
 
Designing SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessDesigning SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessKanwal Khipple
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsTom Pham
 
Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaKanwal Khipple
 
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Cathy Dew
 
Step into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniquesStep into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniquesBenjamin Niaulin
 
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
 
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaKeynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaTravis Isaacs
 

Viewers also liked (18)

Wireframing and design short course
Wireframing and design short courseWireframing and design short course
Wireframing and design short course
 
Wireframing Fundamentals
Wireframing FundamentalsWireframing Fundamentals
Wireframing Fundamentals
 
Crash Course in Wireframing
Crash Course in WireframingCrash Course in Wireframing
Crash Course in Wireframing
 
Designers Guide To Wireframing
Designers Guide To WireframingDesigners Guide To Wireframing
Designers Guide To Wireframing
 
Training Webinar - Wireframing made easy
Training Webinar - Wireframing made easyTraining Webinar - Wireframing made easy
Training Webinar - Wireframing made easy
 
Wireframe Template
Wireframe TemplateWireframe Template
Wireframe Template
 
Things you shouldn't do with SharePoint
Things you shouldn't do with SharePointThings you shouldn't do with SharePoint
Things you shouldn't do with SharePoint
 
Layout and Wireframing
Layout and WireframingLayout and Wireframing
Layout and Wireframing
 
Wireframe Powerpoint Parts
Wireframe Powerpoint PartsWireframe Powerpoint Parts
Wireframe Powerpoint Parts
 
Introduction to wireframes
Introduction to wireframesIntroduction to wireframes
Introduction to wireframes
 
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewMake SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
 
Designing SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessDesigning SharePoint 2010 for Business
Designing SharePoint 2010 for Business
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing Portals
 
Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design Ninja
 
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
 
Step into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniquesStep into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniques
 
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?
 
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaKeynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
 

Recently uploaded

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
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
 

Recently uploaded (19)

Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
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
 

What The Wireframe?

  • 1. What the wireframe? A pragmatic point of view
  • 2. Hi, I’m Jason Robb Tweeting today? @jasonrobb #wtwf
  • 3. MyHappyPlanet • Start-up company • Wearer of many hats • Design of: UX, UI, IA, IxD, etc...
  • 4. Why listen to me? • Made a fair share of wireframes. • A few methods. Not all. • You’ll learn something! (Even if it is what not to do, I win!)
  • 5. Note: I have no idea what I’m doing up here. Throw me a bone. Ask me questions!
  • 6. What are wireframes? Language International Purpose of this document: Created on Tue Feb 17 2009 Modified on Wed Feb 18 2009 This wireframe shows the redesigned content on our home page. Is this the right Wireframe: Home page Created by Jason Robb content? The presentation will change, the layout is a bit cramped, but that will be adjusted later. Shown below is the home page MINUS the header, navigation and footer. wf-HomePage2.gra e Notes 1 Clear, concise H1 & Tour link Find language courses A) Pending final revision, this is our mission statement 1.A packed into 7 words or less. B) Take the tour - maybe not the best copywriting. Photo of a city or person at the best schools Something to this e ect. The people that quot;get itquot; will find the search form, destinations, or special courses below. 2 Triple play Take the tour > 1.B Three great things that we do that makes us stand apart from out competition. Icons are either already made or need minor tweaking to fit. 3 Easily compare multiple Free student counseling Low prices guaranteed Mini-search got minified 2 courses & schools No AJAX . Why? It's complicated and redundant. The Icon Icon Icon If you find a cheaper price Our student advisors are original design was apart of a larger (now extinct) UX. We have thousands of somewhere else we'll knowledgeable, friendly, courses, all at high quality No duration - it isn't something people think about from match it! and want to help you find the start. It's important. But I'd be willing to bet that data schools. the perfect match. Price matching policy shows that nobody adjusts it from the home page Search courses now Learn more about us (reference needed, lil help Mike?). 4 Destination table List all locations in every language we o er. These links Find a course Study abroad destinations Summer courses 5 3 4 go to our SERP. If they click quot;USAquot;, then we show them the default search for all cities in the USA, intensive Study in sunny Boston USA, courses only, for an duration. Language Study English where the grass is greener 5 Specialty courses Select a language and the air is cleaner. These won't be blue links, but they'll be obviously Boston New York Los Angelos USA clickable. Presentation withstanding, ideally, these clicks Country City Business courses send our users to SERP for these course types. Until then, we'll push them to our contact form. (See notes on San Antonio Pittsburgh Baltimore Select a country Navigation paths.) Your boss will love you and want to give you a raise City Nomans Someplace Lightville immediately. Land Select a country Kids courses UK London Cambridge Berkshire Search courses Send your kids to Italy to work like slaves for 6 weeks. Study Spanish
  • 7. What are wireframes? • Basis for discussion • Give visible form and structure to info architecture • Cheap to make
  • 8. How abstract ideas become concrete designs
  • 10. Why use them? • Developers: How is it supposed to work? • Business: Do we understand the business goals? • Progress check: Are we on the right track? • Discussion: Get people talking about the UI.
  • 12. Whenever an idea needs to have form See it, test it, iterate.
  • 13. New product design Before visual design & after structural design © Jesse James Garrett http://www.jjg.net/elements/
  • 14. Existing product? Any time the UI needs improvement
  • 15. Types of wireframes • Fidelity (high or low) • Medium (paper or digital)
  • 16. “Designers should choose whichever medium and level of fidelity suit their practical needs and design goals...” High-fidelity or low-fidelity, paper or digital? Miriam Walker, 2002 http://dub.washington.edu:2007/projects/fidelity/pubs/Walker_HFES_2002.pdf
  • 17. Practical needs Getting things done.
  • 18. Practical needs • Technical requirements • Business requirements • User requirements
  • 19. Design goals Shape & discuss ideas
  • 20. Who are they for? © James Kelway - http://www.flickr.com/photos/userpathways/2612549491/
  • 21. Who are they for? • Designers, creatives, marketing • Developers, usability, QA • Users, user groups, user testing • Business, stakeholders, CEO’s • Everyone!? Your mom, too?
  • 22. How are they made? Pick the fastest tools for you.
  • 23. Analog tools Fastest for thinking (at first).
  • 24. Analog tools • Pens, markers • Sticky notes • Moleskins • Whiteboards
  • 25. Use a pen, don’t be scared. • Pen: Micron .35mm water-proof, fade-proof, permanent • Forces you to be decisive • You’ll be faster at getting your thoughts on paper • Maybe this is drawing-related?
  • 27. I like sticky notes • I write small, so the size constraint doesn’t bother me. • They’re transient. They’re not museum-bound. • Moved easily, arranged in a flow. • Super fastasto complete. (that’s twice fast as regular fast.)
  • 28. Get a big moleskin • Sticky notes take the place of my pocket moleskin. • Small doesn’t allow for enough details to be fleshed out. • Big isn’t an option. • Stickies fit in the big moleskin!
  • 29. Stickies fit in a moleskin
  • 30. Process of wireframing How I do it...
  • 31. Wireframing process • Start with sketches (low-fidelity) • Increase fidelity as the concept moves forward (skip levels as needed) • The goal is an interactive prototype • Once tested, it quickly becomes a real product.
  • 32. My typical process Thumbnails > full pages > prototype
  • 33. Don’t waste time. Your sticky notes are not your web site.
  • 34. “A piece of paper, on the other hand, is only on its way to the garbage can.” Getting Real by 37Signals http://gettingreal.37signals.com/ch11_Dont_Do_Dead_Documents.php
  • 35. Don’t waste too much time with static wireframes. Get to HTML fast, if you can. My recommendation, based on 37Signals wireframe sentiments.
  • 36. “You can’t go from nothing to a prototype unless you already have a prototype to work with.” Get realistic by Jason Robb
  • 37. 1. Wireframes don’t always need finished. 2. Only wireframe the unknown pages. Spoolcast: Roughing it with Interactive Prototypes http://www.uie.com/brainsparks/2009/03/06/spoolcast-roughing-it-with-interactive- prototypes/
  • 38. Getting to prototypes Get here as fast as possible
  • 39. Digital tools • Omnigraffle - easy to use, easy to get too detailed. (That’s bad) • Photoshop - less easy to use, more easy to get too detailed. • HTML - just right, if you set it up first. (Initial time sink)
  • 40. Omnigraffle Language International Purpose of this document: Created on Tue Feb 17 2009 Modified on Wed Feb 18 2009 This wireframe shows the redesigned content on our home page. Is this the right Wireframe: Home page Created by Jason Robb content? The presentation will change, the layout is a bit cramped, but that will be adjusted later. Shown below is the home page MINUS the header, navigation and footer. wf-HomePage2.gra e Notes 1 Clear, concise H1 & Tour link Find language courses A) Pending final revision, this is our mission statement 1.A packed into 7 words or less. B) Take the tour - maybe not the best copywriting. Photo of a city or person at the best schools Something to this e ect. The people that quot;get itquot; will find the search form, destinations, or special courses below. 2 Triple play Take the tour > 1.B Three great things that we do that makes us stand apart from out competition. Icons are either already made or need minor tweaking to fit. 3 Easily compare multiple Free student counseling Low prices guaranteed Mini-search got minified 2 courses & schools No AJAX . Why? It's complicated and redundant. The Icon Icon Icon If you find a cheaper price Our student advisors are original design was apart of a larger (now extinct) UX. We have thousands of somewhere else we'll knowledgeable, friendly, courses, all at high quality No duration - it isn't something people think about from match it! and want to help you find the start. It's important. But I'd be willing to bet that data schools. the perfect match. Price matching policy shows that nobody adjusts it from the home page Search courses now Learn more about us (reference needed, lil help Mike?). 4 Destination table List all locations in every language we o er. These links Find a course Study abroad destinations Summer courses 5 3 4 go to our SERP. If they click quot;USAquot;, then we show them the default search for all cities in the USA, intensive Study in sunny Boston USA, courses only, for an duration. Language Study English where the grass is greener 5 Specialty courses Select a language and the air is cleaner. These won't be blue links, but they'll be obviously Boston New York Los Angelos USA clickable. Presentation withstanding, ideally, these clicks Country City Business courses send our users to SERP for these course types. Until then, we'll push them to our contact form. (See notes on San Antonio Pittsburgh Baltimore Select a country Navigation paths.) Your boss will love you and want to give you a raise City Nomans Someplace Lightville immediately. Land Select a country Kids courses UK London Cambridge Berkshire Search courses Send your kids to Italy to work like slaves for 6 weeks. Study Spanish
  • 42. HTML
  • 43. HTML, why I love it • HTML Templates: make a half dozen different layouts. Reuse. • They take time to make, worth it. • Use frameworks: 960GS, blueprint, YUI, etc... • Then spend more time thinking in the prototype
  • 44. Tool time & Goal time A lesson from Jared Spool
  • 45. Tool time is... • Wasted time. • “If it takes longer to make something bold, it’s not any better bold” • (You’re still learning how to use your tools faster/better. ;)
  • 46. Goal time • Goal time is time spent making progress toward the final product • The ultimate goal is to spend more time working towards the goal, and less wasted with your tools
  • 47. Separate the goals from the tools Use whatever tool is fastest for you!
  • 48. That’s all yinz! Any questions?
  • 49. How’d I do? Seriously, tell me! http://speakerrate.com/jasonrobb