Crap principles

  • View
    144

  • Download
    0

Embed Size (px)

DESCRIPTION

4 principles in product development

Transcript

  • 1. CRAP Principles

2. Which is better? Why? 3. Why? Contrast (tng phn) Repetitive (Lp li) Alignment (Cn l) Proximity (Nhm) 4. Proximity 5. Proximity 6. Proximity 7. Proximity 8. Proximity 9. Proximity Proximity l vic nhm cc i tng linquan li gn nhau khin giao din c b cccht ch (organized), to ra nhiu khng gianhn (white space). T , ngi dng d theodi v ghi nh. 10. Proximity How to get it? 3 5 nhm (ty phc tp). Nu nhiu hn,cn nhm tip 2 nhm lin quan. Khong cch gia cc group > khong cch gia cchthnh phn ca group. 2 yu t gn nhau ngha l c quan h vi nhau. Cn trnh Khng chia nh giao din thnh qu nhiu phn(nhm) Khng t 2 yu t khng lin quan cnh nhau 11. Proximity ng dng 12. Proximity ng dng 13. Proximity ng dng 14. Proximity ng dng H tr ca Vatgia 15. Alignment 16. Alignment 17. Alignment Alignment l phng php cn l gip b ccgiao din cht ch v thng nht gip ngidng gim thi gian duyt thng tin v gicm gic thoi mi. 18. Alignment 19. Alignment 20. Alignment 21. Alignment 22. Alignment How to get it? Khng t mt item mi vo giao din tytin, tm mt item no khc l mc cn l. Trnh dng nhiu iu kin cn l trn 1 trang.Nu cn dng th phi trnh dng cng cn lgia. Trnh dng cn l gia, tr trng hp thitk cc mu formal dng trong cc trng hpc bit nh: present, thip ci, 23. Alignment ng dng 24. Alignment ng dng 25. Alignment ng dng Grid-based design 26. Repetitive 27. Repetitive 28. Repetitive Repetitive l cch s dng lp li cc yu t:font ch, b cc, icon, cch th hin hnh khi(shape, texture) khin cc giao din tr nnthng nht, tng tnh nhn din thng hiu. 29. Contrast 30. Contrast Contrast l th thut th hin khc nhau ccitem trn giao din, khin giao din b cc tthn v gi cm gic th v khi duyt trang. Font: dy, mu, shapes, size, space, Thng designer rt ngi th hin contrast Nguyn tc: 2 item khc nhau hy th hinchng khc nhau. 31. Contrast - ng dng 32. Contrast - ng dng 33. Contrast - ng dng Sn phm Vatgia Sn phm Bo Kim 34. Thao kho Non-designers design book T kha: CRAP Principles 35. Cont Webform design Gamification Storytelling 36. Thut ng Fold-line Liquid-layout vs Fixed layout Bread-crumb Navigation: megamenu, multi-line menu. 37. Thank youTrn Quang KinSkype: TrqkienEmail: kientq@vatgia.com