CRAP Principles

Which is better? Why?

Why?

• Contrast (tương phản)• Repetitive (Lặp lại)• Alignment (Căn lề)• Proximity (Nhóm)

Proximity

Proximity

Proximity

Proximity

Proximity

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ớ.

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

Proximity – Ứng dụng

Proximity – Ứng dụng

Proximity – Ứng dụng

Proximity – Ứng dụng

• Hỗ trợ của Vatgia

Alignment

Alignment

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.

Alignment

Alignment

Alignment

Alignment

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,…

Alignment – Ứng dụng

Alignment – Ứng dụng

Alignment – Ứng dụng

• Grid-based design

Repetitive

Repetitive

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.

Contrast

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.

Contrast - ứng dụng

Contrast - ứng dụng

Contrast - ứng dụng

• Sản phẩm Vatgia• Sản phẩm Bảo Kim

Thao khảo

• Non-designer’s design book• Từ khóa: CRAP Principles

Cont…

• Webform design• Gamification• Storytelling

Thuật ngữ

• Fold-line• Liquid-layout vs Fixed layout• Bread-crumb• Navigation: megamenu, multi-line menu.

Thank you

Trần Quang KiênSkype: TrqkienEmail: kientq@vatgia.com