Mockup Là Gì? Khác Wireframe Và Prototype Thế Nào?

Mockup là bản trình bày trực quan có độ chi tiết cao hơn wireframe, dùng để thể hiện bố cục, màu sắc, typography, hình ảnh, thành phần giao diện và trạng thái chính trước khi phát triển. Mockup thường chưa mô phỏng đầy đủ tương tác như prototype.

Mockup không phải một bước bắt buộc cho mọi dự án và cũng không bảo đảm website tốt. Giá trị của nó nằm ở việc giúp các bên thống nhất nội dung, component, responsive behavior, accessibility và tiêu chí bàn giao trước khi code.

Wireframe, mockup và prototype khác nhau thế nào?

Tài liệu	Trọng tâm	Mức tương tác
Wireframe	Cấu trúc, thứ tự nội dung và luồng cơ bản	Thấp hoặc không có
Mockup	Visual design, component và trạng thái hiển thị	Thường thấp
Prototype	Luồng, tương tác và phản hồi	Từ đơn giản đến gần sản phẩm thật
Design system	Quy tắc, token và component dùng lại	Hỗ trợ nhiều màn hình và trạng thái
Production build	Sản phẩm chạy bằng code và dữ liệu thật	Đầy đủ theo phạm vi

Thứ tự không luôn cố định. Dự án nhỏ có thể đi từ sketch sang mockup; sản phẩm phức tạp có thể prototype sớm để kiểm tra luồng rồi mới hoàn thiện visual.

Khi nào nên làm mockup?

• Cần thống nhất visual direction trước khi phát triển.
• Nhiều bên duyệt brand, nội dung và chức năng.
• Dự án có nhiều page type hoặc component dùng lại.
• Cần kiểm tra nội dung thật có vừa và dễ đọc không.
• Chi phí sửa sau khi code cao hơn chi phí thiết kế trước.
• Cần tài liệu rõ để agency, designer và developer phối hợp.

Với landing page rất nhỏ hoặc hệ thống đã có design system ổn định, mockup riêng cho mọi màn hình có thể không cần thiết. Cần chọn mức fidelity theo rủi ro và quyết định cần duyệt.

Mockup cần dùng nội dung thật

Lorem ipsum và ảnh placeholder có thể che giấu vấn đề về độ dài, hierarchy và proof. Các màn hình quan trọng nên dùng title, đoạn mô tả, bảng giá, CTA, form, chính sách và hình ảnh gần với dữ liệu thực tế.

• H1 và subtitle theo message hierarchy đã duyệt.
• Ảnh đúng tỷ lệ và có quyền sử dụng.
• Tên sản phẩm, giá và biến thể đủ dài để test layout.
• Form có label, helper text, lỗi và trạng thái thành công.
• Case study, review và chứng nhận chỉ dùng khi xác minh được.
• Thông tin dài nhất và tình huống biên được đưa vào kiểm tra.

Responsive không chỉ là thu nhỏ desktop

Mockup nên mô tả cách component thay đổi theo không gian, không chỉ cung cấp một màn hình desktop và một màn hình mobile. Developer cần biết thứ tự nội dung, hành vi navigation, cách bảng cuộn, ảnh crop và CTA hiển thị ra sao.

Thành phần	Điều cần xác định
Navigation	Menu mở, đóng, focus và mục nhiều cấp
Grid	Số cột, khoảng cách và thứ tự khi thu hẹp
Typography	Scale, line-height và giới hạn dòng
Image	Aspect ratio, crop, focal point và fallback
Table	Cuộn, chuyển card hoặc ưu tiên cột
CTA	Vị trí, sticky behavior và tránh che nội dung
Form	Keyboard, validation và autofill trên mobile

Các trạng thái component thường bị bỏ quên

• Default, hover, focus, active và disabled.
• Loading, empty, success và error.
• Nội dung ngắn, dài hoặc thiếu ảnh.
• Sản phẩm hết hàng, giá thay đổi hoặc lịch đầy.
• Người dùng chưa đăng nhập, đã đăng nhập hoặc thiếu quyền.
• Thông báo cookie, lỗi mạng và fallback.

Chỉ thiết kế trạng thái “đẹp nhất” khiến developer phải tự quyết các tình huống còn lại, dễ tạo giao diện thiếu nhất quán hoặc lỗi task completion.

Accessibility cần được đưa vào mockup

• Màu chữ và nền có độ tương phản phù hợp.
• Không dùng màu là dấu hiệu duy nhất cho lỗi hoặc trạng thái.
• Focus state được thiết kế rõ.
• Label form không bị thay hoàn toàn bằng placeholder.
• Touch target đủ dễ sử dụng trên mobile.
• Heading hierarchy và thứ tự đọc hợp lý.
• Ảnh có hướng dẫn alt hoặc được đánh dấu trang trí.

Mockup không thể tự chứng minh accessibility. Sau khi code vẫn cần kiểm tra keyboard, semantics, screen reader và hành vi thực tế.

Design token và component specification

Thay vì để developer đo thủ công từng khoảng cách, tài liệu nên mô tả token và component dùng lại.

Nhóm	Ví dụ
Màu	Primary, text, surface, border, success, warning
Typography	Font family, size, weight, line-height
Spacing	Khoảng cách theo scale nhất quán
Radius và shadow	Quy tắc cho card, button và modal
Breakpoint	Điểm component đổi hành vi
Motion	Duration, easing và reduced-motion behavior
Icon	Thư viện, kích thước và label khi cần

Mockup liên quan SEO và hiệu suất thế nào?

Mockup không phải tín hiệu xếp hạng. Tuy nhiên, quyết định thiết kế có thể ảnh hưởng nội dung, internal link, mobile parity, Core Web Vitals và khả năng hoàn thành nhiệm vụ.

• Không giấu nội dung chính sau tương tác không cần thiết.
• Navigation và link quan trọng cần có đường dẫn crawl được khi triển khai.
• Chừa kích thước cho ảnh, banner và embed để giảm layout shift.
• Tránh video nền, slider hoặc font nặng nếu không có giá trị đủ lớn.
• Giữ nội dung và chức năng quan trọng tương đương trên mobile.
• Schema chỉ được quyết định từ nội dung thật, không từ hình minh họa.

Xem Technical SEO và audit UX để kiểm tra sau khi giao diện được phát triển.

Bộ bàn giao mockup nên có gì?

• Danh sách page type và màn hình trong phạm vi.
• File nguồn và quyền truy cập thuộc doanh nghiệp.
• Component, token, breakpoint và trạng thái.
• Asset xuất bản, license font, ảnh và icon.
• Nội dung cuối hoặc nhãn rõ phần còn chờ duyệt.
• Prototype cho luồng cần kiểm thử.
• Acceptance criteria và danh sách trường hợp biên.
• Change log và người duyệt phiên bản cuối.

Cách review mockup

1. Kiểm tra audience, nhiệm vụ và message trước visual preference.
2. Đọc bằng nội dung thật trên desktop và mobile.
3. Đi qua từng CTA, form và trạng thái lỗi.
4. Kiểm tra proof, giá, chính sách và claim.
5. Đánh giá contrast, focus và thứ tự đọc.
6. Ghi feedback theo component và acceptance criteria.
7. Khóa phiên bản trước khi developer bắt đầu.

Feedback như “đẹp hơn” hoặc “sang hơn” khó triển khai. Nên ghi vấn đề, người dùng bị ảnh hưởng, trạng thái và kết quả mong muốn.

Các lỗi thường gặp

• Duyệt bằng placeholder rồi thay nội dung thật quá muộn.
• Chỉ thiết kế desktop hoặc màn hình lý tưởng.
• Không có error, loading và empty state.
• Dùng ảnh, font hoặc icon chưa rõ license.
• Không xác định component dùng lại.
• Mockup khác hoàn toàn khả năng CMS và dữ liệu.
• Đổi thiết kế liên tục sau khi code nhưng không có change control.
• Coi mockup là bằng chứng website đã usable hoặc accessible.

Kết luận

Mockup là tài liệu trực quan giúp thống nhất giao diện trước khi phát triển. Nó khác wireframe ở mức chi tiết visual và khác prototype ở mức tương tác.

Một mockup hữu ích cần nội dung thật, responsive behavior, component states, accessibility, token, license và acceptance criteria. Giá trị nằm ở việc giảm quyết định mơ hồ và rework, không phải ở độ bóng bẩy của file thiết kế.

Từ mockup sang sản phẩm chạy thật

Đối chiếu UI và component states trước khi khóa specification. Sau đó xem phạm vi dịch vụ thiết kế website để chuyển file thiết kế thành template, staging, UAT, quyền sở hữu và bộ bàn giao có thể nghiệm thu.