SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Downloaden Sie, um offline zu lesen
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?

Weitere ähnliche Inhalte

Was ist angesagt?

Software design patterns ppt
Software design patterns pptSoftware design patterns ppt
Software design patterns pptmkruthika
 
Design System in Figma A to Z.pdf
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdfAtiqur Rahaman
 
Golden Rules of User Experience Design - Theo Mandel, Ph.D. (UPDATED)
Golden Rules of  User Experience Design - Theo Mandel, Ph.D. (UPDATED)Golden Rules of  User Experience Design - Theo Mandel, Ph.D. (UPDATED)
Golden Rules of User Experience Design - Theo Mandel, Ph.D. (UPDATED)Theo Mandel, PhD
 
Patrones de diseño(presentación 7)
Patrones de diseño(presentación 7)Patrones de diseño(presentación 7)
Patrones de diseño(presentación 7)programadorjavablog
 
Software Engineering - chp5- software architecture
Software Engineering - chp5- software architectureSoftware Engineering - chp5- software architecture
Software Engineering - chp5- software architectureLilia Sfaxi
 
Temas Unidad 2
Temas Unidad 2Temas Unidad 2
Temas Unidad 2wiso08
 
Desarrollo basado en patrones
Desarrollo basado en patronesDesarrollo basado en patrones
Desarrollo basado en patronesMarvin Zumbado
 
Unit 7 performing user interface design
Unit 7 performing user interface designUnit 7 performing user interface design
Unit 7 performing user interface designPreeti Mishra
 
Chapter 22- Software Configuration Management.ppt
Chapter 22- Software Configuration Management.pptChapter 22- Software Configuration Management.ppt
Chapter 22- Software Configuration Management.pptTanzinAhammad
 
Design patterns ppt
Design patterns pptDesign patterns ppt
Design patterns pptAman Jain
 
Presentation Use Case Diagram and Use Case Specification.pptx
Presentation Use Case Diagram and Use Case Specification.pptxPresentation Use Case Diagram and Use Case Specification.pptx
Presentation Use Case Diagram and Use Case Specification.pptxazida3
 
Gof design pattern
Gof design patternGof design pattern
Gof design patternnaveen kumar
 
Design Patterns - General Introduction
Design Patterns - General IntroductionDesign Patterns - General Introduction
Design Patterns - General IntroductionAsma CHERIF
 

Was ist angesagt? (20)

Software design patterns ppt
Software design patterns pptSoftware design patterns ppt
Software design patterns ppt
 
Design System in Figma A to Z.pdf
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
 
Golden Rules of User Experience Design - Theo Mandel, Ph.D. (UPDATED)
Golden Rules of  User Experience Design - Theo Mandel, Ph.D. (UPDATED)Golden Rules of  User Experience Design - Theo Mandel, Ph.D. (UPDATED)
Golden Rules of User Experience Design - Theo Mandel, Ph.D. (UPDATED)
 
PRESENTACIÓN RUP
PRESENTACIÓN RUPPRESENTACIÓN RUP
PRESENTACIÓN RUP
 
Patrones de diseño(presentación 7)
Patrones de diseño(presentación 7)Patrones de diseño(presentación 7)
Patrones de diseño(presentación 7)
 
Software Engineering - chp5- software architecture
Software Engineering - chp5- software architectureSoftware Engineering - chp5- software architecture
Software Engineering - chp5- software architecture
 
Temas Unidad 2
Temas Unidad 2Temas Unidad 2
Temas Unidad 2
 
Patrones de diseño
Patrones de diseñoPatrones de diseño
Patrones de diseño
 
Documenting Software Architectures
Documenting Software ArchitecturesDocumenting Software Architectures
Documenting Software Architectures
 
Ch22 - Project Management
Ch22 - Project ManagementCh22 - Project Management
Ch22 - Project Management
 
Calidad Del Software
Calidad Del SoftwareCalidad Del Software
Calidad Del Software
 
Desarrollo basado en patrones
Desarrollo basado en patronesDesarrollo basado en patrones
Desarrollo basado en patrones
 
Unit 7 performing user interface design
Unit 7 performing user interface designUnit 7 performing user interface design
Unit 7 performing user interface design
 
Uml
UmlUml
Uml
 
Chapter 22- Software Configuration Management.ppt
Chapter 22- Software Configuration Management.pptChapter 22- Software Configuration Management.ppt
Chapter 22- Software Configuration Management.ppt
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Design patterns ppt
Design patterns pptDesign patterns ppt
Design patterns ppt
 
Presentation Use Case Diagram and Use Case Specification.pptx
Presentation Use Case Diagram and Use Case Specification.pptxPresentation Use Case Diagram and Use Case Specification.pptx
Presentation Use Case Diagram and Use Case Specification.pptx
 
Gof design pattern
Gof design patternGof design pattern
Gof design pattern
 
Design Patterns - General Introduction
Design Patterns - General IntroductionDesign Patterns - General Introduction
Design Patterns - General Introduction
 

Andere mochten auch

Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web DesignHitesh Mehta
 
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
 

Andere mochten auch (20)

Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
 
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
 

Ähnlich wie Wireframes for the Wicked

The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To WireframingLewis Lin 🦊
 
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 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
 

Ähnlich wie Wireframes for the Wicked (20)

The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
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 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)
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Kürzlich hochgeladen (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

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!