<>Không phải lý thuyết thiết kế. Không phải tâm lý học màu sắc. Chỉ là những thay đổi rất cụ thể. Sự khác biệt giữa thiết kế nghiệp dư và thiết kế chuyên nghiệp không nằm ở tài năng. Nó nằm ở việc biết 10 chi tiết nào cần sửa.
/1. Bài kiểm tra nhìn 5 giây
Mở thiết kế của bạn. Nhìn sang chỗ khác. Quay lại nhìn đúng 5 giây. Bạn nhớ được điều gì?
Nếu câu trả lời không phải là “đúng thứ tôi muốn người dùng chú ý”, thì hệ thống phân cấp thị giác của bạn đang có vấn đề.
Cách sửa:
– Hãy làm cho hành động chính nổi bật hơn mọi thứ khác trên màn hình gấp 3 lần. Là gấp ba lần về size, độ sáng hoặc độ tương phản.
Tệ:
Tất cả các nút đều cùng kích thước
Tốt:
CTA chính: 48px
CTA phụ: 40px
CTA cấp ba: 36px
Trọng lượng thị giác quan trọng hơn bạn nghĩ:
– Button chính phải không thể bỏ sót
– Hành động phụ nên nhìn thấy được nhưng không cạnh tranh
– Hành động cấp ba (như “Tìm hiểu thêm”) gần như nên biến mất
Trước đây tôi từng cố làm cho mọi thứ đều quan trọng. Và kết quả là… không có gì quan trọng cả.
👉 Mỗi màn hình chỉ chọn một thứ duy nhất. Làm cho nó không thể bị phớt lờ.
/2. Giãn chữ cho tiêu đề (Hầu như ai cũng làm sai)
Một điều tôi học được khá muộn:
Giãn chữ (tracking) mà để mặc định thì trông rất tệ với tiêu đề trên 60px.
Quy tắc:
– Văn bản dưới 40px: tracking = 0
– 40–70px: tracking = -1%
– Trên 70px: tracking = -2% đến -4%
Vì sao?
Tracking mặc định được tối ưu cho body text (16–18px).
Tiêu đề lớn cần khoảng cách chữ chặt hơn, nếu không sẽ trông như… giấy đòi tiền chuộc.
Trước:
H E A D L I N E H E R E (tracking: 0%)
→ Trông rời rạc, thiếu chuyên nghiệp
Sau:
HEADLINE HERE (tracking: -3%)
→ Gọn, có chủ đích
Chỉ mất 30 giây, nhưng typography của bạn sẽ trông như người biết mình đang làm gì.
Ghép font: Dừng dùng 5 font khác nhau. Tối đa 2 font.
– 1 font cho tiêu đề (đậm, gây chú ý)
– 1 font cho nội dung (dễ đọc, đơn giản)
Một số cặp font khá ổn:
– Inter (tiêu đề) + Inter (nội dung) — dùng cùng font hoàn toàn ổn
– Playfair Display + Lato
– Montserrat + Open Sans
Khi không chắc, cứ dùng Inter cho tất cả. Miễn phí, sạch sẽ, không ai phàn nàn.
/3. Bo góc (Round corners) sao cho trông “đúng”
Phần lớn designer bo góc xong là thôi. Nhưng bo góc lồng trong bo góc sẽ trông rất sai nếu không tính đúng.
Công thức:
Bo trong = Bo ngoài – Khoảng cách mép
Ví dụ:
– Card bo góc 24px
– Ảnh bên trong cách mép 12px
→ Ảnh nên bo 12px (24 – 12)
Nếu bạn để cả hai đều 24px, góc trong sẽ bị phình ra, nhìn rất khó chịu.
Ngoại lệ:
Nút dạng pill (bo 50%) thì bỏ qua quy tắc này. Hình dáng chính là điểm nhấn.
Mẹo nâng cao:
Dùng bo góc kiểu iOS (squircle / superellipse) thay vì hình tròn thật.
Mọi thứ sẽ trông mượt và cao cấp hơn.
Figma có plugin tên Superellipse.
/4. Hệ thống spacing (Nếu không, thiết kế sẽ trông rất ngẫu nhiên)
Đừng “ước lượng bằng mắt” nữa. Hãy dùng hệ thống.
Grid 8px:
Tất cả khoảng cách đều là bội số của 8: 8, 16, 24, 32, 40, 48, 64…
Vì sao là 8?
– Chia đều trên mọi kích thước màn hình
– Scale đẹp
– Tránh nửa pixel trên màn hình DPI cao
Hệ thống tôi dùng:
– 8px: Khoảng cách rất sát (icon – text)
– 16px: Khoảng cách mặc định
– 24px: Giữa các section nhỏ
– 32px: Section lớn
– 48px: Padding hero
– 64px+: Khoảng cách layout lớn
Mẹo Figma:
Dùng Auto Layout với bước 8px.
Bạn sẽ không cần kéo tay nữa.
Spacing nhất quán khiến thiết kế trông có chủ đích, không phải ngẫu nhiên. Người dùng không ý thức được điều này — nhưng họ sẽ cảm nhận rất rõ khi nó thiếu.
/5. Chọn màu không cần “đoán mò”
Phần lớn designer chọn màu theo cảm xúc. Vì vậy đa số thiết kế… nhìn sai sai.
Cách tốt hơn: dùng HSB (Hue – Saturation – Brightness)
Bắt đầu từ một màu gốc:
Tông đậm hơn:
– Giữ Hue
– Tăng Saturation 10–20%
– Giảm Brightness 20–30%
Tông nhạt hơn:
– Giữ Hue
– Giảm Saturation 10–20%
– Tăng Brightness 20–30%
Ví dụ:
– Gốc: H220 – S80% – B60%
– Đậm: H220 – S95% – B40%
– Nhạt: H220 – S60% – B80%
→ Tự động tạo bảng màu đồng bộ, không cần đoán.
Màu nền:
Đừng dùng đen tuyệt đối (#000000) hoặc trắng tuyệt đối (#FFFFFF).
Tốt hơn:
– Dark mode: #0A0E27
– Light mode: #FAFBFC
Màu pha nhẹ luôn mềm mại và cao cấp hơn.
Công cụ tôi thực sự dùng:
– Coolors.co
– Realtime Colors
– Bảng màu Tailwind CSS (cứ “mượn” thẳng)
/6. Thiết kế card mà không nhàm chán
Card ở khắp nơi. Và đa số đều giống nhau.
Cấu trúc tốt hơn:
Nhóm thị giác thay vì nhãn chữ
Đừng viết: “Giá: $99”
Chỉ cần: $99 (lớn) + “/ tháng” (nhỏ)
Người dùng hiểu ngay.
Phân cấp thông minh:
– Title + Location (nhóm)
– Price + Rating (nhóm)
– Check-in / Check-out trên một dòng
Tạo chiều sâu không cần đổ bóng
Thay vì shadow:
– Lấy màu nền
– Tăng sáng 4–6
– Giảm saturation 10–20
→ Card nổi lên một cách tinh tế, hiện đại.
/7. Giết hết các đường kẻ (Nghiêm túc đấy)
Mỗi đường kẻ bạn thêm vào đều làm giao diện nặng hơn. Phần lớn là không cần thiết.
Thay vì line, hãy dùng:
– Spacing (hiệu quả nhất)
– Thay đổi màu nền
– Shadow rất nhẹ
– Hoặc… không gì cả
Form tệ:
|——|
| Name |
|——|
Form tốt:
Name
Email
Chỉ cần spacing.
Ngoại lệ:
Bảng dữ liệu cần line, nhưng hãy dùng line rất nhạt (#E0E0E0), không phải viền đen.
Thử thách bạn:
Xóa 50% số line trong thiết kế hiện tại. Nó sẽ sạch hơn ngay lập tức.
/8. Nội dung button thực sự hiệu quả
Ngừng viết text button một cách lười biếng.
Button tệ:
– Submit
– Click here
– Continue
– OK
Button tốt:
– Bắt đầu miễn phí
– Giữ chỗ cho tôi
– Tải ngay
– Dùng thử 14 ngày
Công thức: Hành động + Lợi ích
Microcopy dưới nút:
[Bắt đầu dùng thử]
Không cần thẻ. Hủy bất kỳ lúc nào.
Một dòng nhỏ có thể tăng chuyển đổi vì nó giảm lo lắng.
/9. Ảnh thật luôn thắng ảnh stock
Ảnh stock hét lên rằng: “Cái này không thật.”
Người dùng tin:
– Screenshot sản phẩm thật
– Ảnh khách hàng thật
– Ảnh đội ngũ (không chụp studio)
– Hậu trường
Nếu buộc dùng ảnh stock:
– Thêm grain nhẹ
– Giảm saturation 10–20%
– Crop lệch
– Dùng ảnh candid
Tốt nhất:
Chụp chính sản phẩm của bạn. Thật luôn thắng.
/10. Test – Lặp – Ship
Không thiết kế nào đúng ngay lần đầu. Những thiết kế trông “ổn” là kết quả của 10+ lần lặp.
Những thứ dễ test:
– Đổi màu CTA
– Viết lại headline
– Tăng thêm 24px spacing
– Xóa hẳn một section
– Đổi hero image
– Điều chỉnh size button
A/B test đơn giản:
Nhân đôi thiết kế. Chỉ đổi một thứ. So sánh. Chọn cái tốt hơn.
Cải thiện nhiều nhất đến từ việc bỏ bớt, không phải thêm vào.
Châm ngôn:
Thiết kế vì sự rõ ràng, không phải sự thông minh.
/Điều quan trọng nhất
Bạn có thể áp dụng cả 10 bí quyết này mà vẫn thiết kế dở nếu quên nguyên tắc cốt lõi:
Người dùng không quan tâm đến thiết kế của bạn.
Họ chỉ quan tâm đến việc hoàn thành công việc của họ.
Mỗi quyết định thiết kế nên hỏi:
→ Điều này giúp người dùng hay chỉ giúp portfolio của tôi?
Thiết kế tốt là vô hình.
Thiết kế tệ khiến người dùng chú ý vào giao diện thay vì mục tiêu.
/Việc cần làm ngay
Chọn 1 mẹo duy nhất. Áp dụng cho dự án hiện tại ngay hôm nay.
Không phải cả 10. Chỉ 1.
Gợi ý của tôi:
– Bắt đầu với #4 (hệ thống spacing).
– Dễ làm nhất, tác động thị giác lớn nhất.
Tuần sau, thêm #2 (giãn chữ tiêu đề).
Cộng dồn theo thời gian. Sau 3 tháng, thiết kế của bạn sẽ hoàn toàn khác.
/Checklist nhanh (Nên lưu lại)
Trước khi gọi bất kỳ thiết kế nào là “xong”, hãy kiểm tra:
– Người dùng hiểu trang trong 5 giây?
– Tiêu đề >60px có tracking âm?
– Bo góc lồng nhau đúng công thức?
– Mọi spacing là bội số của 8?
– Màu nền không dùng trắng/đen tuyệt đối?
– Card dùng nhóm thị giác thay vì nhãn?
– Có thể xóa 50% đường kẻ không?
– Button nói rõ điều gì sẽ xảy ra?
– Ảnh là ảnh thật?
– Đã test ít nhất 2 phương án?
