Mở đầu — vì sao bài này quan trọng
Sau 57 bài, bạn đã có trong tay gần như đủ mọi công cụ: bạn hiểu visual hierarchy, biết dựng type scale, nắm color system, thành thạo Auto Layout, biết làm token, biết handoff cho dev. Về mặt lý thuyết, bạn đã "đủ đồ nghề". Nhưng có một khoảng cách rất lớn mà không bài học riêng lẻ nào lấp được: khoảng cách giữa biết công cụ và không mắc lỗi ngớ ngẩn.
Điều đau đớn của nghề UI là: lỗi của junior designer hiếm khi là lỗi "sai kỹ thuật cao siêu". Chúng gần như luôn là những lỗi rất cơ bản, lặp đi lặp lại, mà chính người mắc lại không nhìn thấy — vì mắt đã quen với sản phẩm của mình. Người phỏng vấn tuyển dụng, khách hàng, hay lead designer thì nhìn ra ngay trong 3 giây đầu tiên. Một portfolio bị loại thường không phải vì thiếu ý tưởng, mà vì text căn giữa cả đoạn, dùng năm loại font, và các phần tử không thẳng hàng.
Bài này là một "danh sách kiểm tra sức khỏe" cho con mắt của bạn. Tôi sẽ đi qua những lỗi phổ biến nhất mà junior designer Việt Nam hay mắc — không phải để chê, mà để bạn tự soi được chính mình trước khi người khác soi bạn. Mục tiêu: đọc xong bài này, bạn có thể mở lại bất kỳ file Figma cũ nào và tự phát hiện được ít nhất 5 lỗi. Đó là dấu hiệu con mắt bạn đã trưởng thành.
Khái niệm cốt lõi
Điểm chung của mọi lỗi junior không phải là "xấu" mà là thiếu chủ đích (intentionality). Một designer giỏi có thể giải thích được vì sao mỗi phần tử ở đúng vị trí đó, kích thước đó, màu đó. Junior thường đặt mọi thứ theo cảm giác "nhìn cũng được", và chính sự tuỳ tiện tích tụ lại tạo ra cảm giác nghiệp dư. Dưới đây là những lỗi hay gặp nhất.
1. Body text căn giữa cả khối (centered text walls)
Đây là lỗi kinh điển. Text căn giữa (center-aligned) khi dài hơn một dòng buộc mắt người đọc phải "tìm lại" điểm bắt đầu của mỗi dòng, vì lề trái không thẳng. Mắt chúng ta đọc bằng cách nhảy về một mép cố định — với ngôn ngữ Latin và tiếng Việt, đó là mép trái. Khi mép trái lởm chởm, tốc độ đọc giảm và cảm giác "khó chịu" tăng.
Quy tắc: body text luôn căn trái. Center chỉ dành cho tiêu đề ngắn (1-2 dòng), nút CTA, nhãn ngắn, hoặc các khối trang trí có chủ đích. Empty state với một câu ngắn thì center được. Một đoạn mô tả 4 dòng thì tuyệt đối không.
2. Quá nhiều font (too many fonts)
Junior thích khoe: một font cho heading, một font cho body, một font "cho vui" ở footer, một font nữa vì thấy đẹp trên Dribbble. Kết quả là giao diện rời rạc, thiếu tính hệ thống. Quy tắc an toàn: tối đa 2 typeface — một cho tiêu đề, một cho nội dung; thậm chí chỉ 1 typeface với nhiều font-weight khác nhau là đủ cho 90% sản phẩm. Sự đa dạng đến từ weight và size, không phải từ số lượng font.
3. Thiếu tương phản và màu "tự chế"
Text xám nhạt trên nền trắng nhìn "sang" trên màn Retina của bạn, nhưng fail WCAG và biến mất trên điện thoại giá rẻ ngoài nắng. Junior cũng hay chọn màu bằng cảm tính, không theo scale — mỗi màu một sắc độ ngẫu nhiên. Hệ quả: không có màu nào "họ hàng" với màu nào.
4. Spacing tuỳ tiện (magic numbers)
13px chỗ này, 17px chỗ kia, 22px chỗ nọ — không theo bội số nào. Mắt cảm nhận được sự thiếu nhịp điệu dù không gọi tên được. Spacing phải theo hệ (thường là bội của 4 hoặc 8).
5. Không thẳng hàng (misalignment)
Các phần tử lệch nhau vài pixel, icon không căn giữa theo chiều dọc với text bên cạnh. Đây là lỗi "giết chết" cảm giác chuyên nghiệp nhanh nhất.
6. Không có trạng thái (states)
Nút chỉ có trạng thái default. Không hover, không disabled, không loading, không error. Dev hỏi "bấm vào thì sao?" và bạn không có câu trả lời.
7. Icon lệch cỡ và lệch stroke
Icon lấy từ ba bộ khác nhau: cái filled, cái outline, cái stroke 1.5px, cái 2px. Nhìn tổng thể "sạn".
8. Placeholder thay cho label
Dùng placeholder trong ô input để thay cho nhãn. Khi người dùng gõ chữ, họ quên mất ô đó hỏi gì.
Tình huống thực tế
Ví dụ 1 — Landing page của startup fintech ở TP.HCM
Một bạn junior mới ra trường được giao thiết kế lại landing page cho một startup ví điện tử (gọi là "PayViet") tại quận 1. Bản đầu tiên nhìn qua rất "tây": ảnh hero đẹp, gradient tím hiện đại. Nhưng khi lead review, chỉ trong 30 giây đã ra ba lỗi.
Thứ nhất, toàn bộ phần "Tại sao chọn PayViet" gồm ba cột, mỗi cột có một đoạn mô tả 3 dòng — tất cả đều căn giữa. Đọc thử trên điện thoại, mỗi cột co lại thành 5-6 dòng center, mắt phải nhảy loạn xạ. Thứ hai, tiêu đề dùng font Montserrat, body dùng Roboto, nhưng phần giá lại dùng Poppins vì bạn "thấy số nhìn đẹp hơn". Thứ ba, khoảng cách giữa các section lần lượt là 64px, 80px, 56px, 72px — không theo hệ nào.
Cách sửa mất đúng 20 phút: đổi mọi body text về căn trái (chỉ giữ center cho hai tiêu đề section chính), bỏ Poppins, quy toàn bộ spacing section về 80px. Bản sau nhìn "đắt" hơn hẳn mà không thêm một pixel trang trí nào.
Bài học: phần lớn việc "làm đẹp" thực chất là bỏ bớt sự tuỳ tiện, không phải thêm hiệu ứng.
Ví dụ 2 — Portfolio bị loại vòng CV
Một nhà tuyển dụng ở một product company tại Hà Nội kể: trong 40 portfolio nhận được cho vị trí Junior UI, họ loại 25 cái ngay ở vòng nhìn lướt, trước cả khi đọc case study. Lý do gần như giống nhau: text mô tả dự án căn giữa dài lê thê, mỗi trang một bộ font khác nhau, và ảnh screen đặt không thẳng hàng trên grid.
Điều trớ trêu: nhiều bạn trong số bị loại có tư duy sản phẩm tốt hơn người được chọn. Nhưng nhà tuyển dụng lập luận: "Nếu chính portfolio — thứ họ chăm chút nhất — mà còn mắc lỗi cơ bản, thì sản phẩm hàng ngày sẽ thế nào?" Portfolio là bằng chứng về con mắt, không chỉ về ý tưởng.
Bài học: con mắt bắt lỗi cơ bản chính là thứ được đánh giá đầu tiên. Trau chuốt cái cơ bản trước khi khoe cái cao siêu.
Ví dụ 3 — Form đăng ký của một app giao đồ ăn
Một team ở một startup giao đồ ăn Đông Nam Á phát hiện tỷ lệ bỏ dở form đăng ký cao bất thường (khoảng 38%). Khi xem lại thiết kế, hoá ra bạn junior đã dùng placeholder thay cho label cho toàn bộ 6 ô: "Số điện thoại", "Email", "Mật khẩu"... Khi người dùng gõ số điện thoại xong và cuộn xuống, họ không còn nhớ ô thứ tư hỏi gì, phải xoá đi để xem lại. Trên màn hình lỗi, các thông báo error lại hiện màu xám nhạt, tương phản thấp, nhiều người không thấy.
Sau khi thêm label cố định phía trên mỗi ô, đưa error về màu đỏ đạt chuẩn tương phản, và thêm trạng thái loading cho nút "Đăng ký", tỷ lệ bỏ dở giảm xuống còn khoảng 21% trong hai tuần.
Bài học: lỗi UI cơ bản không chỉ "xấu" — chúng làm mất tiền thật. Label, states và contrast là chức năng, không phải trang trí.
Hướng dẫn từng bước
Đây là quy trình "tự soi lỗi" bạn nên chạy trước khi gửi bất kỳ thiết kế nào cho lead hoặc dev.
- Chạy "bài test 3 giây". Nhìn màn hình đúng 3 giây rồi nhắm mắt. Bạn nhớ được điều gì đầu tiên? Nếu đó không phải là thứ quan trọng nhất (giá, CTA, tiêu đề), thì visual hierarchy đang sai.
- Soi từng đoạn text. Có đoạn body nào dài hơn 1 dòng mà đang căn giữa không? Đổi về căn trái ngay. Chỉ giữ center cho heading ngắn và CTA.
- Đếm số typeface. Nếu nhiều hơn 2, cắt bớt. Ghi lại: font nào cho heading, font nào cho body — và tuân thủ tuyệt đối.
- Kiểm tra spacing bằng cách chọn từng cặp phần tử. Đọc con số khoảng cách. Có phải bội của 4/8 không? Có nhất quán giữa các phần tương đương không?
- Bật đường lưới / thước. Kéo một guide dọc qua các phần tử được cho là thẳng hàng. Chúng có thực sự chạm cùng một mép không?
- Kiểm tra contrast. Dùng plugin (Stark, Contrast) đo mọi cặp text/nền. Đạt tối thiểu 4.5:1 cho body, 3:1 cho text lớn.
- Liệt kê states cho mọi phần tử tương tác. Mỗi nút, mỗi ô input phải có: default, hover, focus, disabled, và nếu cần: loading, error.
- Soi icon. Cùng một bộ chưa? Cùng stroke width chưa? Cùng kích thước optical chưa?
- Kiểm tra label form. Mỗi ô input có label cố định phía trên không? Placeholder chỉ nên là ví dụ gợi ý, không thay thế label.
- Xem trên điện thoại thật. Mirror thiết kế qua Figma Mirror. Thứ "sang" trên màn 27 inch của bạn thường "biến mất" trên điện thoại ngoài trời.
Lỗi thường gặp & mẹo
- "Nhưng center nhìn cân đối hơn." Cân đối về mặt bố cục khối thì có, nhưng tính đọc được (readability) quan trọng hơn thẩm mỹ tĩnh. Bạn thiết kế để người ta đọc, không phải để chụp ảnh treo tường.
- Nhầm "nhiều lựa chọn" với "linh hoạt". Năm font, mười màu không phải là linh hoạt — đó là thiếu quyết định. Ràng buộc (constraint) mới tạo ra sự nhất quán chuyên nghiệp.
- Tin vào màn hình đắt tiền của mình. MacBook màn Retina độ sáng cao khiến text xám nhạt và tương phản thấp trông vẫn ổn. Luôn kiểm chứng trên thiết bị phổ thông và ngoài ánh sáng thật.
- Trang trí để "che" hierarchy yếu. Thêm gradient, shadow, illustration để "cứu" một layout không có thứ tự đọc rõ ràng là sai gốc. Sửa hierarchy trước, trang trí sau.
- Mẹo lật ngược: xoay ngược màn hình hoặc làm mờ (blur) thiết kế. Khi không đọc được chữ, bạn chỉ còn thấy khối và tương phản — nếu điểm nhấn vẫn nổi bật thì hierarchy tốt; nếu mọi thứ "đều đều" thì bạn đang thiếu điểm nhấn.
- Mẹo grayscale: thiết kế ở chế độ đen trắng trước. Nếu nó vẫn hoạt động không cần màu, thì cấu trúc của bạn vững. Màu chỉ nên là lớp gia vị cuối cùng.
- Đặt tên layer tử tế. "Frame 427", "Rectangle 12" là dấu hiệu junior. Layer có tên rõ ràng thể hiện tư duy có hệ thống — và giúp dev đọc file nhanh hơn.
Bài tập thực hành
- Mổ xẻ file cũ của chính bạn. Mở một file Figma bạn làm cách đây vài tháng. Chạy đủ 10 bước trong phần "Hướng dẫn từng bước". Ghi ra danh sách mọi lỗi tìm được. Mục tiêu: tìm ít nhất 7 lỗi. Nếu không tìm ra lỗi nào, khả năng cao là con mắt bạn chưa đủ khắt khe — hãy nhờ người khác soi giúp.
- Chữa lỗi "text wall". Tìm một landing page bất kỳ (của app Việt Nam bạn hay dùng) có đoạn mô tả căn giữa dài. Chụp lại, dựng lại trong Figma, rồi tạo phiên bản căn trái đúng chuẩn. Đặt hai bản cạnh nhau và tự cảm nhận khác biệt.
- Bài tập một-font. Thiết kế lại một màn hình chỉ dùng một typeface duy nhất, tạo toàn bộ hierarchy chỉ bằng size và weight. Bạn sẽ ngạc nhiên vì nó "đủ" đến mức nào.
- Bảng states. Chọn một nút và một ô input, vẽ đầy đủ mọi trạng thái của chúng (default, hover, focus, disabled, error, loading). Đây là bài tập bạn sẽ dùng lại suốt sự nghiệp.
- Nhật ký lỗi. Tạo một trang Figma/Notion tên "Lỗi tôi hay mắc". Mỗi lần lead hoặc reviewer chỉ ra một lỗi, ghi vào. Sau một tháng, đó là checklist cá nhân quý giá hơn mọi bài viết trên mạng.
Tóm tắt
Lỗi của junior designer hiếm khi cao siêu — chúng cơ bản, lặp lại, và người khác nhìn ra trước bạn. Những thủ phạm quen mặt: body text căn giữa (hãy căn trái, center chỉ cho heading và CTA), quá nhiều font (tối đa 2, lý tưởng là 1 với nhiều weight), tương phản yếu và màu tự chế, spacing tuỳ tiện không theo bội số 4/8, phần tử không thẳng hàng, thiếu trạng thái, icon lệch bộ, và placeholder thay cho label.
Điểm mấu chốt xuyên suốt là tính chủ đích: mọi phần tử phải giải thích được vì sao ở đó. Ba câu chuyện thực tế — landing page fintech, portfolio bị loại vòng CV, và form đăng ký khiến người dùng bỏ dở — cho thấy các lỗi này không chỉ làm giao diện xấu mà còn khiến mất cơ hội và mất tiền thật.
Vũ khí mạnh nhất của bạn không phải công cụ mới, mà là một con mắt biết tự soi lỗi: bài test 3 giây, mẹo blur, mẹo grayscale, và một cuốn nhật ký lỗi cá nhân. Rèn con mắt đó, và bạn sẽ vượt qua cái ngưỡng "junior" nhanh hơn bất kỳ khoá học nào có thể dạy.