Crap principles
•Download as PPTX, PDF•
0 likes•544 views
4 principles in product development
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (7)
Recently uploaded
Recently uploaded (11)
Crap principles
- 2. Which is better? Why?
- 3. Why? • Contrast (tương phản) • Repetitive (Lặp lại) • Alignment (Căn lề) • Proximity (Nhóm)
- 4. Proximity
- 5. Proximity
- 6. Proximity
- 7. Proximity
- 8. Proximity
- 9. Proximity • Proximity là việc nhóm các đối tượng liên quan lại gần nhau khiến giao diện có bố cục chặt chẽ (organized), tạo ra nhiều không gian hơn (white space). Từ đó, người dùng dễ theo dõi và ghi nhớ.
- 10. Proximity – How to get it? • 3 – 5 nhóm (tùy độ phức tạp). Nếu nhiều hơn, cần nhóm tiếp 2 nhóm liên quan. • Khoảng cách giữa các group > khoảng cách giữa cách thành phần của group. • 2 yếu tố gần nhau nghĩa là có quan hệ với nhau. • Cần tránh – Không chia nhỏ giao diện thành quá nhiều phần (nhóm) – Không đặt 2 yếu tố không liên quan cạnh nhau
- 11. Proximity – Ứng dụng
- 12. Proximity – Ứng dụng
- 13. Proximity – Ứng dụng
- 14. Proximity – Ứng dụng • Hỗ trợ của Vatgia
- 15. Alignment
- 16. Alignment
- 17. Alignment • Alignment là phương pháp căn lề giúp bố cục giao diện chặt chẽ và thống nhất giúp người dùng giảm thời gian duyệt thông tin và gợi cảm giác thoải mái.
- 18. Alignment
- 19. Alignment
- 20. Alignment
- 21. Alignment
- 22. Alignment – How to get it? • Không đặt một item mới vào giao diện tùy tiện, tìm một item nào khác để là mốc căn lề. • Tránh dùng nhiều điều kiện căn lề trên 1 trang. Nếu cần dùng thì phải trành dùng cùng “căn lề giữa”. • Tránh dùng căn lề giữa, trừ trường hợp thiết kế các mẫu formal dùng trong các trường hợp đặc biệt như: present, thiệp cưới,…
- 23. Alignment – Ứng dụng
- 24. Alignment – Ứng dụng
- 25. Alignment – Ứng dụng • Grid-based design
- 26. Repetitive
- 27. Repetitive
- 28. Repetitive • Repetitive là cách sử dụng lặp lại các yếu tố: font chữ, bố cục, icon, cách thể hiện hình khối (shape, texture)… khiến các giao diện trở nên thống nhất, tăng tính nhận diện thương hiệu.
- 29. Contrast
- 30. Contrast • Contrast là thủ thuật thể hiện khác nhau các item trên giao diện, khiến giao diện bố cục tốt hơn và gợi cảm giác thú vị khi duyệt trang. • Font: độ dày, màu, shapes, size, space,… • Thường designer rất ngại thể hiện contrast • Nguyên tắc: 2 item “khác nhau” hãy thể hiện chúng khác nhau.
- 31. Contrast - ứng dụng
- 32. Contrast - ứng dụng
- 33. Contrast - ứng dụng • Sản phẩm Vatgia • Sản phẩm Bảo Kim
- 34. Thao khảo • Non-designer’s design book • Từ khóa: CRAP Principles
- 35. Cont… • Webform design • Gamification • Storytelling
- 36. Thuật ngữ • Fold-line • Liquid-layout vs Fixed layout • Bread-crumb • Navigation: megamenu, multi-line menu.
- 37. Thank you Trần Quang Kiên Skype: Trqkien Email: kientq@vatgia.com
Editor's Notes
- Tai sao mau thiet ke thu hai lai to hon? Nhung yeu to nao add them vao khien chung ta cam thay thong tin ro rang? Lam sao de chung ta tao duoc mau thiet ke tot hon chi bang nhung yeu to don gian.
- Tuong phan: cach the hien nhung thong tin duoc uu tien noi bat hon so voi nhung thong tin con lai Repetitive: lap lai cac yeu to nhu: icon, button, pattern, format, layout,… giup trang dong nhat, khien nguoi dung biet minh van dang nam o trong site, nhan dien thuong hieu cao, tang tinh tin cay…. Alignment: viec phan biet can le giua, trai, phai cho hop ly. Khi dung 2 loai can le thi can lam nhu the nao? Tai sao khong nen dung can len giua? Proximity: viec nhom cac doi tuong sao cho hop ly, cho mau thiet ke de hieu, de nam bat. Thuong thi 4 yeu to nay rat co ban, nhung mot mau thiet ke luon gap phai it nhat 1 trong 4 yeu to nay. Chung ta se thao luan cach tao ra tung yeu to: lam sao de gia tang contrast, lam sao de co duoc alignment tot, cac tieu chuan ve proximity la nhu the nao?
- Chúng ta theo dõi thông tin trên mảnh card visit này như thế nào? Giữa, trên trái phải, dưới, trái phải,…..
- Còn mẫu này: từ trên xuống dưới
- Còn mẫu này: từ trên xuống dưới
- Mẫu phức tạp hơn như thế này?
- Nếu add thêm proximity thì sẽ “khả quan” hơn rất nhiều
- Phần thông tin địa chỉ mua hàng (theo model) bị phân tán
- Mẫu này bị chia thành quá nhiều group khác nhau.
- Mẫu này chỉ chia 3 group, các group liên quan được đặt gần nhau.
- Mẫu này chỉ chia 3 group, các group liên quan được đặt gần nhau.
- Aligment: việc sắp xếp các đối tượng trên 1 trục
- So sánh: Căn giữa: trục trừu tượng (the edge is soft) Căn phải, trái: trục trực quan dễ theo dõi (the edge is hard) Tốc độ đọc giảm dần: hai bên (justice) > Trái > phải > giữa > dùng nhiều lại căn lề (có dùng cả căn giữa)
- Bia cac cuon sach cua Vietnam thuong can len giua? Trong khi le cuon sach cua nuoc ngoai lai thuong can trai hoac phai.
- Khi cần dùng 2 điều kiện căn lề/1 giao diện Khong nen su dung
- Để ý tới khoảng trắng (white space). Tạo ra 1 khoảng trắng an toàn (nice) – tùy vào quan điểm của designer
- Khi cần dùng 2 điều kiện căn lề/1 giao diện
- Dùng 3 loại căn lề 1 lúc. (Chưa kể quá nhiều call of action)
- So sánh với amazon
- So sánh với amazon
- Xem mẫu này
- Nhận ra 2 mẫu này có cùng chung gì đó? Bố cục, font chữ, màu sắc?
- Còn mẫu này: từ trên xuống dưới
- Còn mẫu này: từ trên xuống dưới
- Còn mẫu này: từ trên xuống dưới
- Còn mẫu này: từ trên xuống dưới
- Thông tin xổ ra và thông tin có sẵn tương phản kém. Xử lý: Shadow hoặc background