Develop to Design

A guide to emergency design for front-end developers at Metarefresh 2014, Bangalore

Transcript

1. A guide to emergency design for front-end developers DEVELOP TO DESIGN
2. WHY? DEVELOP TO DESIGN
3. Develop your side-project
4. Lean-startup principled?
5. We use it everyday
6. Goal: Help User
7. HOW? DEVELOP TO DESIGN
8. @rahulcs
10. IMPORTANCE DESIGN FOR
11. Function before fancy graphics.
13. Size Contrast Shape Position
14. “If everything is bold, nothing is bold”
15. Weak Visual Hierarchy
16. Strong Visual Hierarchy
17. Rank Elements
18. EXPECTATION DESIGN FOR
19. Map User Mental Model. How do YOU think it should work?
20. Conform to user’s understanding of the web
21. “Let’s just face it, our app is too complex”
23. Improve Users Mental Model
24. NULL DESIGN FOR 0 :(
25. Tend to Design for LARGE datasets.
26. Suggest possible actions about what user needs to do.
28. It’s your first time?
29. on-board THEM well.
30. FEEDBACK DESIGN FOR
31. Update Status & Give Appropriate Feedback
32. Proximity of feedback
33. Reduce user’s experience of latency
34. Allow ‘Undo’
36. UNCOMMON DESIGN FOR
37. Get Inspired from trends patterntap.com
38. Gestalt’s Laws
39. They are not rules, Guidelines instead
41. “No group stands to gain more from design literacy than hackers do. The one subject that is exceedingly frustrating for hackers to try to learn is design. Hackers know that in order to compete against corporate behemoths with just a few lines of code, they need to have good, clear design, but the resources with which to learn design are simply hard to find.” - David Kadavy, Design for Hackers: Reverse-Engineering Beauty
42. YOU THANK