SlideShare a Scribd company logo
1 of 37
Download to read offline
Wireframes for the Wicked
Michael Angeles, Nick Finck and Donna Spencer
March 16, 2009

Use #wickedwire when commenting on twitter




                                        SXSW Interactive 2009 - Austin, TX
Michael Angeles                 Nick Finck                     Donna Spencer
is an interaction designer      is the Director of User        is an information architect,
living in Brooklyn, NY. He is   Experience at Blue Flavor, a   interaction designer, writer,
Director of User Experience     web design company that        teacher for Maadmob (her
at Traction Software and        focuses creating web           company) in Canberra,
publishes the UX design site    experiences. He lives and      Australia.
Konigi.                         plays in Seattle, WA.
                                                               @maadonna
@jibbajabba                     @nickf
What is a Wireframe?
Who are they for?
Users of documentation
• Design team                      • Managers
  - Discuss ideas and approaches     - Is the overall approach a good one
  - Critique each others work      • Developers
• Business people                    - Exactly how should this work and
  - How will it affect their day      how will I implement it
  - Have you understood the
   business rules & context
What is the process?
Moving from Sketching to Wireframing




Adaptation from Sketching the User Experience by Bill Buxton
Wireframes for the Wicked
Types of Wireframes
Types of Wireframes
• Reference Zones
• Low Fidelity
• High Fidelity
• Storyboards
• Standalone
• Specification
Reference Zones
Reference Zones
• What it is
  - Shows just major positioning of content blocks
• Use to
  - Discuss a big idea or concept early in a project
  - Show the overall structure of particular pages
  - Show how a family of pages work together
• Watch out for
  - Some people can't think abstractly
Reference Zones
High Fidelity Wireframes
High Fidelity Wireframes
• What it is
  - Shows a lot of detail, as much as in the built
    product
• Use to
  - Work through the detail of how an interaction
    (or part of one) will work
  - Ensure the designer and stakeholders both
    have the same idea about how something
    works
• Watch out for
  - Readers get bogged down in detail
  - Leave time to absorb the detail
High Fidelity Wireframes
High Fidelity Wireframes
High Fidelity Wireframes
Storyboards
Storyboards
• What it is
  - A sequence of 'screens' that show the flow
    across time
• Use to
  - Show how the wireframes fit together
  - Show how a user will experience a workflow
  - Demonstrate a task end-to-end
• Watch out for
  - Show tasks before & after for a whole context
  - Demonstrate core tasks in one flow
  - Demonstrate exceptions in a separate flow
Storyboards
Storyboards
Storyboards
Standalone Wireframes
Standalone Wireframes
• What it is
  - A wireframe that can be understood without
    you there
• Use to
  - Communicate any of the wireframe types we've
    discussed, but in a way that means they can
    be understood without you
  - Document for future reference and use
• Watch out for
  - Everything has to be included
  - Lots of annotations are needed
  - It can be hard to follow linkages between
    screens
Standalone Wireframes
Standalone Wireframes




      Wireframe by Tom Watson of Blue Flavor
Specification Wireframes
Specification Wireframes
• What it is
  - A wireframe with enough detail to be built
• Use to
  - Development
• Watch out for
  - Everything has to be included
     - all states (logged in, logged out, error)
     - data sources and destinations
     - all actions
     - all validations
  - It must stand alone
  - Talk to your developers to make it usable for
    them
  - Never show this to business people or users
Specification Wireframes
Specification Wireframes
Sketch Style Wireframes
Sketch Style Wireframes




   Balsamiq.com - Balsamiq Mockups
Sketch Style Wireframes




 Konigi.com OmniGraffle Sketch Stencils
Thank you!
Thank you!


Come to our party tonight, we’ll get you drunk!
?
Questions?

More Related Content

What's hot

"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"MITAcademy1
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design ProcessesMuhammad Hijazi
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)Emerentiana Meicy
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introductionIsmail Norri
 
Introduction to wireframes
Introduction to wireframesIntroduction to wireframes
Introduction to wireframespiksels
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and PrinciplesPeeyush Sahu CAPM®
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
UI UX and Graphic Design
UI UX and Graphic DesignUI UX and Graphic Design
UI UX and Graphic Designgecop2
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designMoodLabs
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 

What's hot (20)

"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
Prototyping in Figma
Prototyping in FigmaPrototyping in Figma
Prototyping in Figma
 
Introduction to wireframes
Introduction to wireframesIntroduction to wireframes
Introduction to wireframes
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
UI/UX Courses
UI/UX Courses UI/UX Courses
UI/UX Courses
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
UX and UI
UX and UIUX and UI
UX and UI
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
UI UX and Graphic Design
UI UX and Graphic DesignUI UX and Graphic Design
UI UX and Graphic Design
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 

Viewers also liked

User-centered design: A road map to usability
User-centered design: A road map to usabilityUser-centered design: A road map to usability
User-centered design: A road map to usabilityWill Sansbury
 
Wireframes and Interaction Design Documents
Wireframes and Interaction Design DocumentsWireframes and Interaction Design Documents
Wireframes and Interaction Design Documentspiksels
 
User Experience Best Practices
User Experience Best PracticesUser Experience Best Practices
User Experience Best PracticesNick Finck
 
Sketching User Experience—Video Sketching
Sketching User Experience—Video SketchingSketching User Experience—Video Sketching
Sketching User Experience—Video SketchingJustin Lee
 
UX Team Of One @ IA Summit 2008
UX Team Of One @ IA Summit 2008UX Team Of One @ IA Summit 2008
UX Team Of One @ IA Summit 2008Leah Buley
 
Experience Is The Product
Experience Is The ProductExperience Is The Product
Experience Is The ProductPeter Merholz
 
The Life Cycle of a Wireframe
The Life Cycle of a Wireframe The Life Cycle of a Wireframe
The Life Cycle of a Wireframe Nick Finck
 
The UX Disciplines
The UX DisciplinesThe UX Disciplines
The UX DisciplinesNick Finck
 
Portfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the JobPortfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the JobLynn Teo
 
Portfolio, Resumes and You
Portfolio, Resumes and You Portfolio, Resumes and You
Portfolio, Resumes and You Aynne Valencia
 
Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)Aaron Gustafson
 
Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux
Wireframing Web 2.0  for Design and  Definition: London IA UXLondon reduxWireframing Web 2.0  for Design and  Definition: London IA UXLondon redux
Wireframing Web 2.0 for Design and Definition: London IA UXLondon reduxJames Box
 
Product Management Class for Digital Startups
Product Management Class for Digital StartupsProduct Management Class for Digital Startups
Product Management Class for Digital StartupsMiet Claes
 
Reinventing the Product Spec
Reinventing the Product SpecReinventing the Product Spec
Reinventing the Product SpecRyan Glasgow
 
Arquitectura de la información 02
Arquitectura de la información 02Arquitectura de la información 02
Arquitectura de la información 02Worköholics
 
Beyond the Page
Beyond the PageBeyond the Page
Beyond the Pagegsmith
 
Employee Engagement Practices at Intuit
Employee Engagement Practices at IntuitEmployee Engagement Practices at Intuit
Employee Engagement Practices at IntuitCraig Ramsay
 
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and CollaborationYes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and CollaborationSteve Portigal
 

Viewers also liked (20)

User-centered design: A road map to usability
User-centered design: A road map to usabilityUser-centered design: A road map to usability
User-centered design: A road map to usability
 
Wireframes and Interaction Design Documents
Wireframes and Interaction Design DocumentsWireframes and Interaction Design Documents
Wireframes and Interaction Design Documents
 
User Experience Best Practices
User Experience Best PracticesUser Experience Best Practices
User Experience Best Practices
 
Sketching User Experience—Video Sketching
Sketching User Experience—Video SketchingSketching User Experience—Video Sketching
Sketching User Experience—Video Sketching
 
UX Team Of One @ IA Summit 2008
UX Team Of One @ IA Summit 2008UX Team Of One @ IA Summit 2008
UX Team Of One @ IA Summit 2008
 
Experience Is The Product
Experience Is The ProductExperience Is The Product
Experience Is The Product
 
The Life Cycle of a Wireframe
The Life Cycle of a Wireframe The Life Cycle of a Wireframe
The Life Cycle of a Wireframe
 
The UX Disciplines
The UX DisciplinesThe UX Disciplines
The UX Disciplines
 
Portfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the JobPortfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the Job
 
Portfolio, Resumes and You
Portfolio, Resumes and You Portfolio, Resumes and You
Portfolio, Resumes and You
 
Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)Ruining The User Experience (The Ajax Experience West 2007)
Ruining The User Experience (The Ajax Experience West 2007)
 
Why slideshare sucks
Why slideshare sucksWhy slideshare sucks
Why slideshare sucks
 
Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux
Wireframing Web 2.0  for Design and  Definition: London IA UXLondon reduxWireframing Web 2.0  for Design and  Definition: London IA UXLondon redux
Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux
 
Product Management Class for Digital Startups
Product Management Class for Digital StartupsProduct Management Class for Digital Startups
Product Management Class for Digital Startups
 
Reinventing the Product Spec
Reinventing the Product SpecReinventing the Product Spec
Reinventing the Product Spec
 
Prototipado del software
Prototipado del softwarePrototipado del software
Prototipado del software
 
Arquitectura de la información 02
Arquitectura de la información 02Arquitectura de la información 02
Arquitectura de la información 02
 
Beyond the Page
Beyond the PageBeyond the Page
Beyond the Page
 
Employee Engagement Practices at Intuit
Employee Engagement Practices at IntuitEmployee Engagement Practices at Intuit
Employee Engagement Practices at Intuit
 
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and CollaborationYes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
Yes, My Iguana Loves to Cha-Cha: Improv, Creativity and Collaboration
 

Similar to Wireframes for the Wicked

Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingGames Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingDavid Farrell
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignipmindthegap
 
Does your project requires wireframing?
Does your project requires wireframing?Does your project requires wireframing?
Does your project requires wireframing?Dikonia
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezMightybytes
 
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
 
Wireframing for Mobile App Developers
Wireframing for Mobile App DevelopersWireframing for Mobile App Developers
Wireframing for Mobile App DevelopersVeiko Raime
 
Why wireframes-v2
Why wireframes-v2Why wireframes-v2
Why wireframes-v2beckwatson
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!Jessi Baker
 
Training Webinar - Wireframing made easy
Training Webinar - Wireframing made easyTraining Webinar - Wireframing made easy
Training Webinar - Wireframing made easyOutSystems
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJenRobbins
 
Wireframes for Web Design
Wireframes for Web DesignWireframes for Web Design
Wireframes for Web DesignMindy McAdams
 
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)JenRobbins
 

Similar to Wireframes for the Wicked (20)

The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingGames Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
 
Introduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesignIntroduction about wireframing and responsive webdesign
Introduction about wireframing and responsive webdesign
 
Intro to Wireframes
Intro to WireframesIntro to Wireframes
Intro to Wireframes
 
Digital design workshop
Digital design workshop Digital design workshop
Digital design workshop
 
Michael Kowalski
Michael KowalskiMichael Kowalski
Michael Kowalski
 
Does your project requires wireframing?
Does your project requires wireframing?Does your project requires wireframing?
Does your project requires wireframing?
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
Crafting Experience
Crafting ExperienceCrafting Experience
Crafting Experience
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
 
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...
 
Net Magazine Feb 2010
Net Magazine Feb 2010Net Magazine Feb 2010
Net Magazine Feb 2010
 
Wireframing for Mobile App Developers
Wireframing for Mobile App DevelopersWireframing for Mobile App Developers
Wireframing for Mobile App Developers
 
Why wireframes-v2
Why wireframes-v2Why wireframes-v2
Why wireframes-v2
 
Wireframes vs prototypes
Wireframes vs prototypesWireframes vs prototypes
Wireframes vs prototypes
 
UX Pres MIni version!
UX Pres MIni version!UX Pres MIni version!
UX Pres MIni version!
 
Training Webinar - Wireframing made easy
Training Webinar - Wireframing made easyTraining Webinar - Wireframing made easy
Training Webinar - Wireframing made easy
 
Jennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference KeynoteJennifer Robbins: ARTIFACT Conference Keynote
Jennifer Robbins: ARTIFACT Conference Keynote
 
Wireframes for Web Design
Wireframes for Web DesignWireframes for Web Design
Wireframes for Web Design
 
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
Jennifer Robbins: ARTIFACT EAST Keynote (Providence, 11/4/13)
 

More from Nick Finck

Page Description Diagrams
Page Description DiagramsPage Description Diagrams
Page Description DiagramsNick Finck
 
Mobile Interaction Design & Strategy
Mobile Interaction Design & StrategyMobile Interaction Design & Strategy
Mobile Interaction Design & StrategyNick Finck
 
The cross channel experience - UXLx
The cross channel experience - UXLxThe cross channel experience - UXLx
The cross channel experience - UXLxNick Finck
 
The cross channel experience
The cross channel experienceThe cross channel experience
The cross channel experienceNick Finck
 
User Research in the Wild
User Research in the WildUser Research in the Wild
User Research in the WildNick Finck
 
The Future of Technology and Information
The Future of Technology and InformationThe Future of Technology and Information
The Future of Technology and InformationNick Finck
 
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)Nick Finck
 
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignMobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignNick Finck
 
How content strategy fits into the user experience
How content strategy fits into the user experienceHow content strategy fits into the user experience
How content strategy fits into the user experienceNick Finck
 
User experience utopia - interact seattle
User experience utopia - interact seattleUser experience utopia - interact seattle
User experience utopia - interact seattleNick Finck
 
Mobile Web User Experience
Mobile Web User ExperienceMobile Web User Experience
Mobile Web User ExperienceNick Finck
 
Sustainable UX
Sustainable UXSustainable UX
Sustainable UXNick Finck
 
The commoditization and fragmentation of the ia community
The commoditization and fragmentation of the ia communityThe commoditization and fragmentation of the ia community
The commoditization and fragmentation of the ia communityNick Finck
 
The Life Cycle Of A Wireframe: LOL Cats Style
The Life Cycle Of A Wireframe: LOL Cats StyleThe Life Cycle Of A Wireframe: LOL Cats Style
The Life Cycle Of A Wireframe: LOL Cats StyleNick Finck
 
The Ten Commandments Of User Experience
The Ten Commandments Of User ExperienceThe Ten Commandments Of User Experience
The Ten Commandments Of User ExperienceNick Finck
 
The Future Of IA
The Future Of IAThe Future Of IA
The Future Of IANick Finck
 
User Experience Utopia (Ad Club Seattle)
User Experience Utopia (Ad Club Seattle)User Experience Utopia (Ad Club Seattle)
User Experience Utopia (Ad Club Seattle)Nick Finck
 
User Experience Utopia
User Experience UtopiaUser Experience Utopia
User Experience UtopiaNick Finck
 

More from Nick Finck (20)

Page Description Diagrams
Page Description DiagramsPage Description Diagrams
Page Description Diagrams
 
Mobile Interaction Design & Strategy
Mobile Interaction Design & StrategyMobile Interaction Design & Strategy
Mobile Interaction Design & Strategy
 
The cross channel experience - UXLx
The cross channel experience - UXLxThe cross channel experience - UXLx
The cross channel experience - UXLx
 
The cross channel experience
The cross channel experienceThe cross channel experience
The cross channel experience
 
Mobile UX
Mobile UXMobile UX
Mobile UX
 
User Research in the Wild
User Research in the WildUser Research in the Wild
User Research in the Wild
 
The Future of Technology and Information
The Future of Technology and InformationThe Future of Technology and Information
The Future of Technology and Information
 
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)Mobile Information Architecture and Interaction Design (InfoCamp 2010)
Mobile Information Architecture and Interaction Design (InfoCamp 2010)
 
Mobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction DesignMobile Information Architecture and Interaction Design
Mobile Information Architecture and Interaction Design
 
How content strategy fits into the user experience
How content strategy fits into the user experienceHow content strategy fits into the user experience
How content strategy fits into the user experience
 
User experience utopia - interact seattle
User experience utopia - interact seattleUser experience utopia - interact seattle
User experience utopia - interact seattle
 
Mobile Web User Experience
Mobile Web User ExperienceMobile Web User Experience
Mobile Web User Experience
 
Sustainable UX
Sustainable UXSustainable UX
Sustainable UX
 
The commoditization and fragmentation of the ia community
The commoditization and fragmentation of the ia communityThe commoditization and fragmentation of the ia community
The commoditization and fragmentation of the ia community
 
The Life Cycle Of A Wireframe: LOL Cats Style
The Life Cycle Of A Wireframe: LOL Cats StyleThe Life Cycle Of A Wireframe: LOL Cats Style
The Life Cycle Of A Wireframe: LOL Cats Style
 
The Ten Commandments Of User Experience
The Ten Commandments Of User ExperienceThe Ten Commandments Of User Experience
The Ten Commandments Of User Experience
 
Mobile UX
Mobile UXMobile UX
Mobile UX
 
The Future Of IA
The Future Of IAThe Future Of IA
The Future Of IA
 
User Experience Utopia (Ad Club Seattle)
User Experience Utopia (Ad Club Seattle)User Experience Utopia (Ad Club Seattle)
User Experience Utopia (Ad Club Seattle)
 
User Experience Utopia
User Experience UtopiaUser Experience Utopia
User Experience Utopia
 

Recently uploaded

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 

Recently uploaded (20)

Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 

Wireframes for the Wicked

  • 1. Wireframes for the Wicked Michael Angeles, Nick Finck and Donna Spencer March 16, 2009 Use #wickedwire when commenting on twitter SXSW Interactive 2009 - Austin, TX
  • 2. Michael Angeles Nick Finck Donna Spencer is an interaction designer is the Director of User is an information architect, living in Brooklyn, NY. He is Experience at Blue Flavor, a interaction designer, writer, Director of User Experience web design company that teacher for Maadmob (her at Traction Software and focuses creating web company) in Canberra, publishes the UX design site experiences. He lives and Australia. Konigi. plays in Seattle, WA. @maadonna @jibbajabba @nickf
  • 3. What is a Wireframe?
  • 5. Users of documentation • Design team • Managers - Discuss ideas and approaches - Is the overall approach a good one - Critique each others work • Developers • Business people - Exactly how should this work and - How will it affect their day how will I implement it - Have you understood the business rules & context
  • 6. What is the process?
  • 7. Moving from Sketching to Wireframing Adaptation from Sketching the User Experience by Bill Buxton
  • 10. Types of Wireframes • Reference Zones • Low Fidelity • High Fidelity • Storyboards • Standalone • Specification
  • 12. Reference Zones • What it is - Shows just major positioning of content blocks • Use to - Discuss a big idea or concept early in a project - Show the overall structure of particular pages - Show how a family of pages work together • Watch out for - Some people can't think abstractly
  • 15. High Fidelity Wireframes • What it is - Shows a lot of detail, as much as in the built product • Use to - Work through the detail of how an interaction (or part of one) will work - Ensure the designer and stakeholders both have the same idea about how something works • Watch out for - Readers get bogged down in detail - Leave time to absorb the detail
  • 20. Storyboards • What it is - A sequence of 'screens' that show the flow across time • Use to - Show how the wireframes fit together - Show how a user will experience a workflow - Demonstrate a task end-to-end • Watch out for - Show tasks before & after for a whole context - Demonstrate core tasks in one flow - Demonstrate exceptions in a separate flow
  • 25. Standalone Wireframes • What it is - A wireframe that can be understood without you there • Use to - Communicate any of the wireframe types we've discussed, but in a way that means they can be understood without you - Document for future reference and use • Watch out for - Everything has to be included - Lots of annotations are needed - It can be hard to follow linkages between screens
  • 27. Standalone Wireframes Wireframe by Tom Watson of Blue Flavor
  • 29. Specification Wireframes • What it is - A wireframe with enough detail to be built • Use to - Development • Watch out for - Everything has to be included - all states (logged in, logged out, error) - data sources and destinations - all actions - all validations - It must stand alone - Talk to your developers to make it usable for them - Never show this to business people or users
  • 33. Sketch Style Wireframes Balsamiq.com - Balsamiq Mockups
  • 34. Sketch Style Wireframes Konigi.com OmniGraffle Sketch Stencils
  • 36. Thank you! Come to our party tonight, we’ll get you drunk!