SlideShare a Scribd company logo
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, 2008
Carl Smith
 
Soap mag
Soap magSoap mag
Soap mag
abbieknott
 
Question one
Question oneQuestion one
Question one
katiefowler
 
Q1evaluation
Q1evaluationQ1evaluation
Q1evaluation
bridiewinters
 
Select Portfolio
Select PortfolioSelect Portfolio
Select Portfolio
Adele_Mari
 
Trainers advert help sheet 2
Trainers advert help sheet 2Trainers advert help sheet 2
Trainers advert help sheet 2
Graveney School
 
Planning ancillaries
Planning ancillariesPlanning ancillaries
Planning ancillaries
Danny 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 Sheet
Graveney 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 TOPICS
Rachel Lovinger
 
Magazine research q kerrang nme
Magazine research q kerrang nmeMagazine research q kerrang nme
Magazine research q kerrang nme
maisiehall
 
December Xmas Newletter
December Xmas NewletterDecember Xmas Newletter
December Xmas Newletter
Marie Van Der Boon
 

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 course
carishurd
 
Wireframing Fundamentals
Wireframing FundamentalsWireframing Fundamentals
Wireframing Fundamentals
Telepathy
 
Crash Course in Wireframing
Crash Course in WireframingCrash Course in Wireframing
Crash Course in Wireframing
Marcel
 
Designers Guide To Wireframing
Designers Guide To WireframingDesigners Guide To Wireframing
Designers Guide To Wireframing
William Quezada
 
Training Webinar - Wireframing made easy
Training Webinar - Wireframing made easyTraining Webinar - Wireframing made easy
Training Webinar - Wireframing made easy
OutSystems
 
Wireframe Template
Wireframe TemplateWireframe 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
Perttu Tolvanen
 
Layout and Wireframing
Layout and WireframingLayout and Wireframing
Layout and Wireframing
Omar Duarte
 
Wireframe Powerpoint Parts
Wireframe Powerpoint PartsWireframe Powerpoint Parts
Wireframe Powerpoint Parts
Gregory Raiz
 
Introduction to wireframes
Introduction to wireframesIntroduction to wireframes
Introduction to wireframes
piksels
 
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
Cathy Dew
 
Designing SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessDesigning SharePoint 2010 for Business
Designing SharePoint 2010 for Business
Kanwal 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 Portals
Tom Pham
 
Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design Ninja
Kanwal 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 techniques
Benjamin 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 ninja
Travis 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

一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
340qn0m1
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
zv943dhb
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
一比一原版美国北卡罗来纳大学教堂山分校毕业证(UNC学位证)如何办理
一比一原版美国北卡罗来纳大学教堂山分校毕业证(UNC学位证)如何办理一比一原版美国北卡罗来纳大学教堂山分校毕业证(UNC学位证)如何办理
一比一原版美国北卡罗来纳大学教堂山分校毕业证(UNC学位证)如何办理
mjjbdpo2
 
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
yk5hdsnr
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
oabn3692
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
67n7f53
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 

Recently uploaded (20)

一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
一比一原版美国北卡罗来纳大学教堂山分校毕业证(UNC学位证)如何办理
一比一原版美国北卡罗来纳大学教堂山分校毕业证(UNC学位证)如何办理一比一原版美国北卡罗来纳大学教堂山分校毕业证(UNC学位证)如何办理
一比一原版美国北卡罗来纳大学教堂山分校毕业证(UNC学位证)如何办理
 
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
一比一原版(UofM毕业证)美国密歇根大学毕业证如何办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 

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