Blog thumbnail

Cách cải thiện design của bạn trong 5 phút

mustread by khuedinh 18/04/2019

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.

Hình bên trái: các đối tượng không được căn chỉnh tạo cảm giác lộn xộn. Hình bên phải: nội dung chính được căn chỉnh.
Hình bên trái: các yếu tố không được căn chỉnh. Hình bên phải: các yếu tố được căn chỉnh cẩn thận

5/ Kích cỡ chữ và khoảng trống giữa các dòng

Hình bên trái: Kích cỡ chữ dễ đọc. Hình bên phải: Kích cỡ chữ quá nhỏ
Hình bên trái: Khoảng cách dòng hợp lý. Hình bên phải: Khoảng cách dòng quá hẹp

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.

Hình ảnh minh họa cách người dùng đọc kết quả search qua list view (bên trái) và grid view (bên phải)

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 hướng dẫn 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

LIÊN HỆ VỚI TELOS NHÉ?