Nội dung
1/ Tăng cường độ tương phản giữa các thành phần
Background và màu chữ phải đủ độ tương phản. Tốt nhất nên dùng chữ đen trên nền trắng. Tránh dùng các màu chữ khó đọc như xám, vàng hay xanh lá.
2/ Tránh sử dụng màu đen tuyệt đối
Nếu có thể, sử dụng màu #333333 RGB (51,51,51) thay vì màu đen #000000 RGB (0,0,0). Sử dụng màu đen hoàn toàn trên nền trắng có thể gây khó chịu cho mắt dẫn đến làm người đọc mất tập trung.
3/ Nội dung quan trọng được ưu tiên hiển thị
Nội dung quan trọng nhất của website hay app phải được ưu tiên hiển thị ngay từ đầu, tránh việc phải phóng to, kéo trang hay phải bấm vào một button nào đó mới đọc được.
Hãy cùng xem một ví dụ về việc phân cấp mức độ quan trọng của nội dung trong thực tế
Instagram (phía trái bên dưới) tập trung vào hình ảnh và video do người dùng đăng lên.
Pinterest (phía phải bên dưới) thiết lập phân cấp nội dung bằng cách cố định thanh tìm kiếm phía trên cùng màn hình. Pinterest ưu tiên việc tìm kiếm như một chức năng chủ chốt để người dùng có thể dễ dàng xác định được nội dung cần xem.
Cùng xem một ví dụ khác.
Spotify (phía trái bên dưới) ưu tiên hiển thị hình ảnh đại diện, tên bài hát rồi mới đến các nút chức năng chơi nhạc. Mặc dù thế, bên trong cụm nút chơi nhạc vẫn có sự phân cấp riêng bằng việc nút Play và Pause nổi bật hơn hẳn so với các nút chuyển bài.
Facebook (phía phải, bên dưới) ưu tiên hiển thị nội dung người dùng giống như instagram.
4/ Sắp xếp mọi thứ cho ngăn nắp (Aligning)
Cách nhanh nhất để khiến design của bạn ổn hơn là căn chỉnh mọi thứ ngăn nắp. Thông thường ta sẽ sử dụng lưới (grid).
Cùng xem một ví dụ khác từ trang web medium.com
Đây là một layout được chỉnh lại từ medium.com. Có gì không ổn ở đây?
Hình bên trái được tô đậm sự bất hợp lý khi các đối tượng không được căn chỉnh. Hình bên phải thể hiện các đối tượng đã được căn chỉnh.
5/ Kích cỡ chữ và khoảng trống giữa các dòng
6/ Nếu kết quả tìm kiếm có thứ tự tăng giảm, hãy sử dụng list view
Hầu hết website và app đều có công cụ tìm kiếm nội dung. Nếu kết quả tìm kiếm có thứ tự, nên sử dụng dạng list view. Nếu kết quả tìm kiếm không có thứ tự, và bạn muốn người dùng khám phá càng nhiều nội dụng càng tốt như Pinterest hay AirBnBB, grid view có thể ứng dụng trong trường hợp này.
7/ Thiết kế trắng đen trước, thêm màu sắc sau
Thiết kế đen trắng trước giúp tập trung giải quyết các vấn đề cốt lõi của website hay app.
8/ Thiết kế khiến người dùng thoải mái
Phía dưới là hình minh họa về các vùng chạm tới của tay phải trên màn hình điện thoại của Luke Wroblewski. Vùng thứ ba tính từ trên xuống thường được sử dụng để đặt các chức năng chính của app.
9/ Vay mượn màu sắc từ các thiết kế khác
Một số nguồn để vay mượn bản màu Dribbble, Coolors hoặc Color Claim
10/ Sử dụng các nguồn tham khảo kiến thức design từ Apple và Google
Apple và Google đều có các guideline về cách design cho iOS cà Android. Các guideline này cung cấp kiến thức và case study cụ thể cho từng trường hợp design, rất rõ ràng và đầy đủ.
Link Material Design Guideline: https://material.io/
Link Human Interface Guidelines (iOS): https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
Theo Marc Hemeon
Xem thêm:
