Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Right Way to Wireframe

12,893
views

Published on

Published in: Education, Technology

4 Comments
112 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,893
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
0
Comments
4
Likes
112
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide































  • Transcript

    • 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