2. Design phase (Classic)
UX Designer Note: this is a simplified schema
Wireframes
Client interview / validation
Graphic Designer, etc.
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
All trademarks and registered trademarks are the property of their respective owners
3. Design phase (Classic): side-effects
Wireframes
● They give no sense or insight into flow.
● They have to be created at various different screen sizes to
account for how customers will actually see them.
● The client won't see them in their native element. The
context is wrong.
3 Feb 2012 - Wireframes are Dead, Long Live Wireframes, ZURBlog
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
All trademarks and registered trademarks are the property of their respective owners
4. Design phase (RAP)
Note: this is a simplified schema
UX Designer,
Front-end Dev
Prototypes
Client interview / validation
Graphic Designer, etc.
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
All trademarks and registered trademarks are the property of their respective owners
5. Design phase (RAP): side-effects
● Widgets themes can distract client and create false
expectations
● Less creativity
● Time and effort
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
All trademarks and registered trademarks are the property of their respective owners
6. Case study: MR. EDU [1/3]
Users
elementary students, teachers and parents
Main goal
define a method to design and develop web apps for educational
activities
Methodology
Ethnographic study, Personas and Scenarios, Prototyping, User
test
Time constraint
No
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
All trademarks and registered trademarks are the property of their respective owners
7. Case study: MR. EDU [2/3]
Technologies
Python + Django, HTML5 + CSS, RDF (rdflib)
Step 0
Wireframes and workflow definition
Step 1
(Django Template Layer) Workflow improvements and multi-
device testing
Step 2
(Django ORM) Database design and backend implementation
Source: http://code.google.com/p/mr-edu/
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
All trademarks and registered trademarks are the property of their respective owners
8. Case study: MR. EDU [3/3]
Conclusion
● focus on process and users
● rapid release of functionalities (~15 days)
● users always involved in the implementation / design
● debug time → 0
● desktop and tablet version available at the end of the process
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
All trademarks and registered trademarks are the property of their respective owners
9. Further reading
● The Death of the Wireframe? Towards An Integrated
Approach to UX Design
http://www.fabernovel.com/en/blog/284-the-death-of-the-wireframe-towards-an-integrated-approach-to-ux-design
● Prototyping, Todd Zaki Warfel, Rosenfeld Media, 2009
● Sviluppare applicazioni con Django, Marco Beri, Apogeo, 2009
● Python, Marco Beri, Collana Pocket, Apogeo, 2007
● Design with Progressive Enhancement, Parker et al., New
Riders, 2010
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
All trademarks and registered trademarks are the property of their respective owners
10. Thank you!
Grazie!
Vielen Dank!
ontini
.to /EliaC tini
g+: gplus EliaCon o
r :@ t ini.inf
Twitte log.eliacon
b
Blog:
Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License
All trademarks and registered trademarks are the property of their respective owners
