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

13,359

Published on

Published in: Education, Technology
4 Comments
113 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,359
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
0
Comments
4
Likes
113
Embeds 0
No embeds

No notes for slide































  • Right Way to Wireframe

    1. 1. Right Way to Wireframe SxSW 2010 @semanticwill
    2. 2. Process Conceptual Model
    3. 3. Simplified for those in marketing (or agencies)
    4. 4. Fallacy If the process is repeatable, then success is repeatable
    5. 5. Requirements Analysis Measure Twice, Cut Once.
    6. 6. Requirements Analysis Measure Twice, Cut Once. or: Stakeholders Lie.
    7. 7. Information Architecture Information Architecture
    8. 8. Personas Measure 3x, Cut Once.
    9. 9. Personas Measure 3x, Cut Once. or: People Lie.
    10. 10. Conceptual Models
    11. 11. Functional Sitemaps
    12. 12. Sketching Wireflows
    13. 13. Annotated Wireflows
    14. 14. Sketching
    15. 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. 16. Sketching A particular problem space is de ned and enframed by the tools we feel most comfortable with...
    17. 17. Find inspiration where you can Sketching
    18. 18. Lock the flow
    19. 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. 20. Iterate screens
    21. 21. Wireframing Wireframes act as a form of ʻthinking deviceʼ for the setting and exploration of a given problem space
    22. 22. Wireframing Home Page 1
    23. 23. Wireframing Home Page 1 Designing through the use of wireframes is a search in a problem space of alternatives...
    24. 24. Wireframing
    25. 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. 26. Wireframing
    27. 27. Wireframing
    28. 28. Wireframing
    29. 29. Visual Design
    30. 30. Visual Design Ain’t painting by fucking numbers
    31. 31. Iteration 1
    32. 32. Iteration 2
    33. 33. Explore crazy ideas
    34. 34. View Loans
    35. 35. View Loan Details
    36. 36. Thanks. SxSW2010 @semanticwill

    ×