Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Right Way
to Wireframe
SxSW 2010

@semanticwill
Process Conceptual Model
Simplified




for those in marketing (or agencies)
Fallacy

If the process is repeatable,
then success is repeatable
Requirements Analysis




Measure Twice, Cut Once.
Requirements Analysis




Measure Twice, Cut Once.
or: Stakeholders Lie.
Information Architecture

Information Architecture
Personas




 Measure 3x, Cut Once.
Personas




 Measure 3x, Cut Once.
 or: People Lie.
Conceptual Models
Functional Sitemaps
Sketching Wireflows
Annotated Wireflows
Sketching
Sketching



I see sketching as an important pre-
wireframing technique for doing
divergent and transformative design,
som...
Sketching




A particular problem space is
de ned and enframed by the tools
we feel most comfortable with...
Find inspiration where you can
Sketching
Lock the flow
Lock the flow




 Critical to keep sketches quick and cheap to
  create
   • One of the best opportunities to innovate
  ...
Iterate screens
Wireframing

 Wireframes act as a form of ʻthinking
 deviceʼ for the setting and exploration
 of a given problem space
Wireframing

Home Page 1
Wireframing

Home Page 1




Designing through the use of wireframes is a
search in a problem space of alternatives...
Wireframing
Wireframing




it’s a process of problem setting as much as it
is a process of problem solving, which means
that I always...
Wireframing
Wireframing
Wireframing
Visual Design
Visual Design


Ain’t painting by fucking numbers
Iteration 1
Iteration 2
Explore crazy ideas
View Loans
View Loan Details
Thanks.
SxSW2010

@semanticwill
Right Way to Wireframe
Upcoming SlideShare
Loading in …5
×

Right Way to Wireframe

  • Be the first to comment

Right Way to Wireframe

  1. Right Way to Wireframe SxSW 2010 @semanticwill
  2. Process Conceptual Model
  3. Simplified for those in marketing (or agencies)
  4. Fallacy If the process is repeatable, then success is repeatable
  5. Requirements Analysis Measure Twice, Cut Once.
  6. Requirements Analysis Measure Twice, Cut Once. or: Stakeholders Lie.
  7. Information Architecture Information Architecture
  8. Personas Measure 3x, Cut Once.
  9. Personas Measure 3x, Cut Once. or: People Lie.
  10. Conceptual Models
  11. Functional Sitemaps
  12. Sketching Wireflows
  13. Annotated Wireflows
  14. Sketching
  15. Sketching I see sketching as an important pre- wireframing technique for doing divergent and transformative design, something that fundamentally differentiates Designers from the wireframe monkeys.
  16. Sketching A particular problem space is de ned and enframed by the tools we feel most comfortable with...
  17. Find inspiration where you can Sketching
  18. Lock the flow
  19. Lock the flow Critical to keep sketches quick and cheap to create • One of the best opportunities to innovate • Way cheaper at the outset than later on
  20. Iterate screens
  21. Wireframing Wireframes act as a form of ʻthinking deviceʼ for the setting and exploration of a given problem space
  22. Wireframing Home Page 1
  23. Wireframing Home Page 1 Designing through the use of wireframes is a search in a problem space of alternatives...
  24. Wireframing
  25. Wireframing it’s a process of problem setting as much as it is a process of problem solving, which means that I always start with the context
  26. Wireframing
  27. Wireframing
  28. Wireframing
  29. Visual Design
  30. Visual Design Ain’t painting by fucking numbers
  31. Iteration 1
  32. Iteration 2
  33. Explore crazy ideas
  34. View Loans
  35. View Loan Details
  36. Thanks. SxSW2010 @semanticwill

×