SlideShare a Scribd company logo
1 of 17
•   Hundreds of websites
•   Thousands of pages
•   Not so pretty
•   Really difficult to use


                  x 800 =                 +

                     http://media.photobucket.com/image/crying+dawson/npascare2/dawson-crying.jpg
• Streamlined website
• Iterative user-centred
  design process
• Focusing on key user tasks
• Lots of wireframes
• Wireframes are the backbone
  of good design

• They help us focus on:
  – Content
  – Functionality
  – Interaction design
  – User experience

                           http://www.sharingmachine.com/index.php?item=70
1. Identify the user goal / design challenge
2. Brainstorm ideas via rough wireframes
3. Evaluate
The designer explains
how it answers the
design challenge

Co-workers can identify
unclear features and
potential problems with
your concept
5. Eliminate
5. Flesh out the best wireframes
Method / Tool   Visual quality     Perceived state of
                                   completion
Hand-drawn        Rough          Appears more changeable

Balsamiq
Mockingbird
Fireworks
Visio
                  Polished       Appears less changeable


                                 http://www.ous.edu/onlinenw/2008/keynote.html
5. Flesh out the best wireframes
• Content is king - say no to lorem ipsum!
• Use shape and size, not colour and graphics
6. Refine and evaluate




                                 http://www.ous.edu/onlinenw/2008/keynote.html
• Create a collection of wireframes that
  represent key user journeys
• Seeing the ‘big picture’ helps you refine the
  smaller steps in the journey
• Print wireframes out as they evolve
• Stick copies around the office
• Encourage people to add notes, ideas, or talk
  about them
• More engagement and buy-in
• Avoid late changes by getting early feedback
• Focus attention on the purpose and goals of
  their website
• Hard to use = website fail
• Online programs like Chalkmark give you first
  impressions feedback
• One-to-one user testing sessions work best
• Record it and show your stakeholders how well
  your wireframes performed with users
• Work through early concepts
• Identify gaps and opportunities
• Get feedback from:
  – Your team
  – Your stakeholders
  – Your website users
• Learn early so you avoid costly mistakes
• Focus on the overall experience so your final
  design is as rad as it can be
• Expected launch: April 2011
• If anyone is a prospective uni student, or
  current QUT student, come website testing
  with us! It’s fun and you’ll get paid!
   rebecca.watson@qut.edu.au

More Related Content

What's hot

Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Daniel Friedman
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveSalem Ghoweri
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Web Design: Day 1
Web Design: Day 1Web Design: Day 1
Web Design: Day 1spautz
 
Front-end Pattern Libraries
Front-end Pattern LibrariesFront-end Pattern Libraries
Front-end Pattern LibrariesPebbleRoad
 
arixstudio l virtual web design academy
arixstudio l virtual web design academyarixstudio l virtual web design academy
arixstudio l virtual web design academyashshà Bst
 
Profitable Website Projects - The Oreo Cookie Strategy
Profitable Website Projects - The Oreo Cookie StrategyProfitable Website Projects - The Oreo Cookie Strategy
Profitable Website Projects - The Oreo Cookie StrategyRed8 Interactive
 
Product development - From Idea to Reality - VYE Leader Talk
Product development - From Idea to Reality - VYE Leader TalkProduct development - From Idea to Reality - VYE Leader Talk
Product development - From Idea to Reality - VYE Leader TalkBui Hai An
 
How to ensure a long life span for a website?
How to ensure a long life span for a website?How to ensure a long life span for a website?
How to ensure a long life span for a website?Teemu Suoranta
 
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
How to ensure a long life span for a website (WPHelsinki 2.11.2016)How to ensure a long life span for a website (WPHelsinki 2.11.2016)
How to ensure a long life span for a website (WPHelsinki 2.11.2016)Teemu Suoranta
 

What's hot (18)

Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
 
Webmaker
WebmakerWebmaker
Webmaker
 
Marketing Automation Summit 2015
Marketing Automation Summit 2015Marketing Automation Summit 2015
Marketing Automation Summit 2015
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Swastik interiors
Swastik interiorsSwastik interiors
Swastik interiors
 
Uday Dahale
Uday DahaleUday Dahale
Uday Dahale
 
Web Design: Day 1
Web Design: Day 1Web Design: Day 1
Web Design: Day 1
 
Web Designing Services
Web Designing Services Web Designing Services
Web Designing Services
 
Front-end Pattern Libraries
Front-end Pattern LibrariesFront-end Pattern Libraries
Front-end Pattern Libraries
 
arixstudio l virtual web design academy
arixstudio l virtual web design academyarixstudio l virtual web design academy
arixstudio l virtual web design academy
 
Profitable Website Projects - The Oreo Cookie Strategy
Profitable Website Projects - The Oreo Cookie StrategyProfitable Website Projects - The Oreo Cookie Strategy
Profitable Website Projects - The Oreo Cookie Strategy
 
Product development - From Idea to Reality - VYE Leader Talk
Product development - From Idea to Reality - VYE Leader TalkProduct development - From Idea to Reality - VYE Leader Talk
Product development - From Idea to Reality - VYE Leader Talk
 
How to ensure a long life span for a website?
How to ensure a long life span for a website?How to ensure a long life span for a website?
How to ensure a long life span for a website?
 
Wiu talk
Wiu talkWiu talk
Wiu talk
 
Web design principles
Web design principlesWeb design principles
Web design principles
 
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
How to ensure a long life span for a website (WPHelsinki 2.11.2016)How to ensure a long life span for a website (WPHelsinki 2.11.2016)
How to ensure a long life span for a website (WPHelsinki 2.11.2016)
 
Handheldppt
HandheldpptHandheldppt
Handheldppt
 

Viewers also liked

Growth ideas brainstorm - Activation & Retention
Growth ideas brainstorm - Activation & RetentionGrowth ideas brainstorm - Activation & Retention
Growth ideas brainstorm - Activation & RetentionAndy Young
 
Toyota camry hybrid persuasive copy
Toyota camry hybrid  persuasive copy Toyota camry hybrid  persuasive copy
Toyota camry hybrid persuasive copy mextbyte
 
Resume presentation
Resume presentationResume presentation
Resume presentationBrett Warner
 
Proposal kajian tindakan adam
Proposal kajian tindakan adamProposal kajian tindakan adam
Proposal kajian tindakan adamAdam Kamaludin
 
After You've Been Injured
After You've Been InjuredAfter You've Been Injured
After You've Been InjuredDavid Swanson
 
La refonte d’un intranet : 10 cles pour reussir votre projet
La refonte d’un intranet : 10 cles pour reussir votre projetLa refonte d’un intranet : 10 cles pour reussir votre projet
La refonte d’un intranet : 10 cles pour reussir votre projetPhilippeC
 
Report on Leadership Programmes v2
Report on Leadership Programmes v2Report on Leadership Programmes v2
Report on Leadership Programmes v2Metodija Dimovski
 
Roth Weihnachtskatalog 2016 Offenburg
Roth Weihnachtskatalog 2016 Offenburg Roth Weihnachtskatalog 2016 Offenburg
Roth Weihnachtskatalog 2016 Offenburg Buchhandlung-Roth
 
High neck bandage dresses
High neck bandage dressesHigh neck bandage dresses
High neck bandage dressesDaniel Henny
 
Chronic cough and lung cancer
Chronic cough and lung cancerChronic cough and lung cancer
Chronic cough and lung cancerDaniel Henny
 
Estadistica descripiva,con IBM SPSS Statistics
Estadistica descripiva,con IBM SPSS StatisticsEstadistica descripiva,con IBM SPSS Statistics
Estadistica descripiva,con IBM SPSS Statisticsnujabes
 
Introduction to fluid mechanics by robert w. fox
Introduction to fluid mechanics by robert w. foxIntroduction to fluid mechanics by robert w. fox
Introduction to fluid mechanics by robert w. foxKakileti Purna Chandu
 
Enfermedad periodontal en adultos
Enfermedad periodontal en adultosEnfermedad periodontal en adultos
Enfermedad periodontal en adultosMario Gaitan
 
PRTR Macedonian National Strategy 2016-2020
PRTR Macedonian National Strategy 2016-2020PRTR Macedonian National Strategy 2016-2020
PRTR Macedonian National Strategy 2016-2020Metodija Dimovski
 
Micro. estreptococos n
Micro. estreptococos nMicro. estreptococos n
Micro. estreptococos nMario Gaitan
 

Viewers also liked (15)

Growth ideas brainstorm - Activation & Retention
Growth ideas brainstorm - Activation & RetentionGrowth ideas brainstorm - Activation & Retention
Growth ideas brainstorm - Activation & Retention
 
Toyota camry hybrid persuasive copy
Toyota camry hybrid  persuasive copy Toyota camry hybrid  persuasive copy
Toyota camry hybrid persuasive copy
 
Resume presentation
Resume presentationResume presentation
Resume presentation
 
Proposal kajian tindakan adam
Proposal kajian tindakan adamProposal kajian tindakan adam
Proposal kajian tindakan adam
 
After You've Been Injured
After You've Been InjuredAfter You've Been Injured
After You've Been Injured
 
La refonte d’un intranet : 10 cles pour reussir votre projet
La refonte d’un intranet : 10 cles pour reussir votre projetLa refonte d’un intranet : 10 cles pour reussir votre projet
La refonte d’un intranet : 10 cles pour reussir votre projet
 
Report on Leadership Programmes v2
Report on Leadership Programmes v2Report on Leadership Programmes v2
Report on Leadership Programmes v2
 
Roth Weihnachtskatalog 2016 Offenburg
Roth Weihnachtskatalog 2016 Offenburg Roth Weihnachtskatalog 2016 Offenburg
Roth Weihnachtskatalog 2016 Offenburg
 
High neck bandage dresses
High neck bandage dressesHigh neck bandage dresses
High neck bandage dresses
 
Chronic cough and lung cancer
Chronic cough and lung cancerChronic cough and lung cancer
Chronic cough and lung cancer
 
Estadistica descripiva,con IBM SPSS Statistics
Estadistica descripiva,con IBM SPSS StatisticsEstadistica descripiva,con IBM SPSS Statistics
Estadistica descripiva,con IBM SPSS Statistics
 
Introduction to fluid mechanics by robert w. fox
Introduction to fluid mechanics by robert w. foxIntroduction to fluid mechanics by robert w. fox
Introduction to fluid mechanics by robert w. fox
 
Enfermedad periodontal en adultos
Enfermedad periodontal en adultosEnfermedad periodontal en adultos
Enfermedad periodontal en adultos
 
PRTR Macedonian National Strategy 2016-2020
PRTR Macedonian National Strategy 2016-2020PRTR Macedonian National Strategy 2016-2020
PRTR Macedonian National Strategy 2016-2020
 
Micro. estreptococos n
Micro. estreptococos nMicro. estreptococos n
Micro. estreptococos n
 

Similar to Why wireframes-v2

Not Just a Pretty Face: Combining Form and Function for Maximum Conversions
Not Just a Pretty Face: Combining Form and Function for Maximum ConversionsNot Just a Pretty Face: Combining Form and Function for Maximum Conversions
Not Just a Pretty Face: Combining Form and Function for Maximum ConversionsWP Engine
 
Get real results from your website
Get real results from your websiteGet real results from your website
Get real results from your websiteFlorizel Media
 
Dear Designers Love Developers
Dear Designers Love DevelopersDear Designers Love Developers
Dear Designers Love Developersjskulski
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design Terminalfour
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...uxpa-dc
 
web design course description.doc
web design course description.docweb design course description.doc
web design course description.docbutest
 
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...Bootstrap Creative
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreWendy Fischer
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013Angela Bowman
 
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012Atlassian
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
 
Effective course design
Effective course designEffective course design
Effective course designWCET
 
Developer & Website Marketing Strategy
Developer & Website Marketing StrategyDeveloper & Website Marketing Strategy
Developer & Website Marketing StrategyChris Traganos
 
Designing your SharePoint Internet site: The basics
Designing your SharePoint Internet site: The basicsDesigning your SharePoint Internet site: The basics
Designing your SharePoint Internet site: The basicsC/D/H Technology Consultants
 
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Marcy Kellar
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphiacanarymason
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 

Similar to Why wireframes-v2 (20)

Not Just a Pretty Face: Combining Form and Function for Maximum Conversions
Not Just a Pretty Face: Combining Form and Function for Maximum ConversionsNot Just a Pretty Face: Combining Form and Function for Maximum Conversions
Not Just a Pretty Face: Combining Form and Function for Maximum Conversions
 
Get real results from your website
Get real results from your websiteGet real results from your website
Get real results from your website
 
Dear Designers Love Developers
Dear Designers Love DevelopersDear Designers Love Developers
Dear Designers Love Developers
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design
 
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
Wireframing with Your Team in Mind (Susana Esparza & Jason Kolaitis & Jennife...
 
web design course description.doc
web design course description.docweb design course description.doc
web design course description.doc
 
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013
 
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
Enabling Design Reviews with JIRA and Confluence - Atlassian Summit 2012
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
Jumpstart Your Web App
Jumpstart Your Web AppJumpstart Your Web App
Jumpstart Your Web App
 
Effective course design
Effective course designEffective course design
Effective course design
 
Best Practices for SharePoint Public Websites
Best Practices for SharePoint Public WebsitesBest Practices for SharePoint Public Websites
Best Practices for SharePoint Public Websites
 
Developer & Website Marketing Strategy
Developer & Website Marketing StrategyDeveloper & Website Marketing Strategy
Developer & Website Marketing Strategy
 
Designing your SharePoint Internet site: The basics
Designing your SharePoint Internet site: The basicsDesigning your SharePoint Internet site: The basics
Designing your SharePoint Internet site: The basics
 
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use" Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
Designing Intuitive SharePoint Sites: The Science of "Easy to Use"
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphia
 
Naveen Kumar PG Resume
Naveen Kumar PG ResumeNaveen Kumar PG Resume
Naveen Kumar PG Resume
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 

Why wireframes-v2

  • 1.
  • 2. Hundreds of websites • Thousands of pages • Not so pretty • Really difficult to use x 800 = + http://media.photobucket.com/image/crying+dawson/npascare2/dawson-crying.jpg
  • 3. • Streamlined website • Iterative user-centred design process • Focusing on key user tasks • Lots of wireframes
  • 4. • Wireframes are the backbone of good design • They help us focus on: – Content – Functionality – Interaction design – User experience http://www.sharingmachine.com/index.php?item=70
  • 5. 1. Identify the user goal / design challenge
  • 6. 2. Brainstorm ideas via rough wireframes
  • 7. 3. Evaluate The designer explains how it answers the design challenge Co-workers can identify unclear features and potential problems with your concept
  • 9. 5. Flesh out the best wireframes Method / Tool Visual quality Perceived state of completion Hand-drawn Rough Appears more changeable Balsamiq Mockingbird Fireworks Visio Polished Appears less changeable http://www.ous.edu/onlinenw/2008/keynote.html
  • 10. 5. Flesh out the best wireframes • Content is king - say no to lorem ipsum! • Use shape and size, not colour and graphics 6. Refine and evaluate http://www.ous.edu/onlinenw/2008/keynote.html
  • 11. • Create a collection of wireframes that represent key user journeys • Seeing the ‘big picture’ helps you refine the smaller steps in the journey
  • 12. • Print wireframes out as they evolve • Stick copies around the office • Encourage people to add notes, ideas, or talk about them
  • 13. • More engagement and buy-in • Avoid late changes by getting early feedback • Focus attention on the purpose and goals of their website
  • 14. • Hard to use = website fail • Online programs like Chalkmark give you first impressions feedback
  • 15. • One-to-one user testing sessions work best • Record it and show your stakeholders how well your wireframes performed with users
  • 16. • Work through early concepts • Identify gaps and opportunities • Get feedback from: – Your team – Your stakeholders – Your website users • Learn early so you avoid costly mistakes • Focus on the overall experience so your final design is as rad as it can be
  • 17. • Expected launch: April 2011 • If anyone is a prospective uni student, or current QUT student, come website testing with us! It’s fun and you’ll get paid!  rebecca.watson@qut.edu.au