Mockup là gì? Mockup là bản thiết kế mô phỏng giống sản phẩm thật về hình thức: màu sắc, chữ, hình ảnh, bố cục, nhưng chưa hoạt động như sản phẩm hoàn chỉnh. Mockup giúp bạn và khách hàng nhìn thấy sản phẩm trông như thế nào trước khi sản xuất, lập trình hay in ấn, từ đó chỉnh sửa sớm và tiết kiệm chi phí làm lại.
Từ “mockup” được dùng ở hai nghĩa phổ biến: mockup giao diện (website, ứng dụng) và mockup sản phẩm hữu hình (bao bì, logo trên áo, bảng hiệu, ấn phẩm in). Bài này giải thích cả hai, phân biệt mockup với wireframe và prototype, hướng dẫn cách làm một mockup, các công cụ nên cân nhắc và lỗi thường gặp.
Mục lục
- Mockup là gì?
- Mockup, wireframe và prototype khác nhau thế nào?
- Các loại mockup phổ biến
- Mockup mang lại lợi ích gì?
- Cách làm mockup giao diện website hoặc ứng dụng
- Cách tạo mockup cho logo, bao bì, ấn phẩm
- Công cụ làm mockup
- Khi nào cần mockup, khi nào có thể bỏ qua?
- Lỗi thường gặp
- Câu hỏi thường gặp
- Nguồn tham khảo
Mockup là gì?
Mockup là mô hình tĩnh có độ hoàn thiện cao về mặt hình ảnh. Nó cho thấy sản phẩm cuối cùng sẽ trông ra sao, sử dụng đúng bảng màu, kiểu chữ, hình ảnh, biểu tượng. Nhưng nó thường không có tương tác thật: nút bấm chưa chạy, biểu mẫu chưa gửi, dữ liệu chưa kết nối.
Hình dung đơn giản: nếu bạn xây một ngôi nhà, mockup giống bản phối cảnh hoàn chỉnh. Bạn thấy được màu tường, kiểu cửa, nội thất, nhưng chưa thể bước vào và bật công tắc đèn.
Ở nghĩa thứ hai, “mockup” là hình ảnh đặt thiết kế của bạn lên một vật thể giả lập, ví dụ logo trên hộp giấy, banner trên bảng hiệu, ảnh website hiển thị trên khung điện thoại. Mockup kiểu này thường dùng để trình bày với khách hàng hoặc để làm hình giới thiệu.
Mockup, wireframe và prototype khác nhau thế nào?
Ba thuật ngữ này thường đi cùng nhau trong quy trình thiết kế sản phẩm số. Chúng khác nhau ở độ chi tiết và mức tương tác.
| Tiêu chí | Wireframe | Mockup | Prototype |
|---|---|---|---|
| Mục đích | Xác định bố cục và cấu trúc | Xác định hình thức, thẩm mỹ | Thử hành vi và luồng sử dụng |
| Độ chi tiết | Thấp: khung, ô, chữ giả | Cao: màu, chữ, ảnh thật | Từ thấp đến cao, tùy giai đoạn |
| Tương tác | Thường không | Thường không (tĩnh) | Có: bấm, chuyển màn hình |
| Thời điểm | Đầu quy trình | Sau wireframe | Trước khi lập trình hoặc sản xuất |
| Người dùng chính | Nhóm sản phẩm, thiết kế, khách hàng | Thiết kế, khách hàng, quản lý | Thiết kế, lập trình, người dùng thử |
| Chi phí chỉnh sửa | Rất thấp | Thấp đến trung bình | Trung bình |
Cách gọi giữa các nhóm có thể khác nhau: có nơi gọi bản thiết kế chi tiết là “high-fidelity wireframe”. Điều cần nhớ là độ chi tiết tăng dần từ phác thảo đến mockup đến prototype. Nguyên tắc về mức độ chi tiết này được trình bày rõ trong bài của Nielsen Norman Group về prototype độ trung thực thấp và cao. Để hiểu phần đầu của quy trình, xem wireframe là gì.
Các loại mockup phổ biến
Mockup giao diện website, ứng dụng
Bản thiết kế từng màn hình: trang chủ, trang sản phẩm, giỏ hàng, màn hình ứng dụng. Dùng để thống nhất giao diện giữa nhà thiết kế, khách hàng và lập trình viên.
Mockup nhận diện thương hiệu
Logo, màu sắc, kiểu chữ áp lên danh thiếp, giấy tiêu đề, phong bì, đồng phục, thẻ nhân viên. Giúp khách hàng hình dung thương hiệu trong tình huống sử dụng thật. Xem thêm brand là gì.
Mockup bao bì, nhãn mác
Thiết kế trên hộp, túi, chai, tem nhãn. Mockup 3D giúp đánh giá cảm giác thị giác trước khi in mẫu thật.
Mockup ấn phẩm in
Poster, brochure, catalogue, tờ rơi, menu. Dùng để duyệt thiết kế và hình thức hoàn thiện, như gấp, cán màng.
Mockup quảng cáo ngoài trời, bảng hiệu
Đặt thiết kế lên ảnh chụp vị trí thật, ví dụ mặt tiền cửa hàng, pano, xe buýt. Giúp đánh giá kích thước, khoảng cách đọc, độ tương phản trước khi thi công.
Mockup mạng xã hội, quảng cáo số
Mô phỏng bài đăng, quảng cáo hiển thị trong bảng tin hoặc kết quả tìm kiếm để duyệt nội dung trước khi chạy.
| Loại mockup | Dùng khi | Điểm cần kiểm tra |
|---|---|---|
| Giao diện web, app | Chuẩn bị lập trình | Bố cục, màu, chữ, trạng thái nút, hiển thị trên các cỡ màn hình |
| Nhận diện thương hiệu | Trình bày bộ nhận diện | Logo trên nền khác nhau, khoảng trống, kích thước nhỏ |
| Bao bì | Trước khi in thử | Thông tin bắt buộc, mã vạch, vùng cắt gấp |
| Ấn phẩm in | Trước khi in số lượng | Lề an toàn, hệ màu in, độ phân giải |
| Quảng cáo ngoài trời | Trước thi công | Tỷ lệ, khoảng cách đọc, tương phản |
| Quảng cáo số | Trước khi chạy | Tỷ lệ khung hình, độ dài chữ, vùng cắt khi hiển thị |
Mockup mang lại lợi ích gì?
- Thống nhất kỳ vọng sớm: khách hàng thấy sản phẩm trông thế nào, giảm hiểu lầm khi nghiệm thu.
- Giảm chi phí sửa đổi: chỉnh trên bản thiết kế rẻ và nhanh hơn chỉnh sau khi lập trình, thi công hoặc in.
- Dễ lấy phản hồi: người không chuyên đọc hình ảnh dễ hơn đọc bản mô tả bằng chữ.
- Cầu nối giữa thiết kế và triển khai: lập trình viên, nhà in có tài liệu tham chiếu rõ ràng.
- Hỗ trợ bán hàng, gọi vốn: bản trình bày có hình ảnh thuyết phục hơn mô tả thuần chữ.
- Kiểm tra tính nhất quán: màu sắc, kiểu chữ, khoảng cách được áp dụng đồng đều trên mọi màn hình hoặc ấn phẩm.
Cần lưu ý giới hạn: mockup tĩnh không kiểm tra được tốc độ, độ mượt, hành vi người dùng thật. Với sản phẩm số, nên bổ sung prototype hoặc thử nghiệm với người dùng khi nguồn lực cho phép.
Cách làm mockup giao diện website hoặc ứng dụng
- Chốt mục tiêu và đối tượng. Trang này giúp người dùng làm gì? Ai sẽ dùng? Nếu mục tiêu mơ hồ, mockup đẹp cũng khó đạt hiệu quả.
- Có wireframe trước. Bố cục sai thì tô màu đẹp cũng không cứu được. Thống nhất cấu trúc, thứ tự khối nội dung rồi mới thiết kế chi tiết.
- Thiết lập hệ thống thiết kế cơ bản. Bảng màu, kiểu chữ, khoảng cách, kiểu nút, biểu tượng. Dùng chung giúp mọi màn hình nhất quán.
- Dùng nội dung thật hoặc gần thật. Tiêu đề, đoạn văn, hình ảnh thực tế giúp phát hiện sớm vấn đề như tên sản phẩm quá dài hay ảnh không đồng đều. Tránh “lorem ipsum” ở giai đoạn trình khách nếu có thể.
- Thiết kế các cỡ màn hình quan trọng. Tối thiểu cần máy tính và điện thoại. Cân nhắc cả máy tính bảng nếu khách hàng dùng nhiều.
- Thiết kế các trạng thái. Hover, nhấn, lỗi, trống, đang tải, thành công. Mockup chỉ có trạng thái “đẹp nhất” dễ bỏ sót trải nghiệm thật.
- Kiểm tra khả năng tiếp cận. Độ tương phản màu chữ và nền, cỡ chữ, vùng bấm đủ lớn. Hướng dẫn WCAG của W3C là nguồn tham khảo phổ biến.
- Trình bày và thu phản hồi có cấu trúc. Hỏi theo mục tiêu: “người dùng có tìm thấy nút đăng ký không?” thay vì chỉ “bạn thấy đẹp không?”.
- Chốt phiên bản và bàn giao. Xuất tài nguyên, ghi chú kích thước, quy tắc, ghi rõ phiên bản được duyệt.
Mockup giao diện cần đi cùng yếu tố SEO và trải nghiệm. Ví dụ cấu trúc tiêu đề, hiển thị trên di động, tốc độ. Xem thêm UI/UX ảnh hưởng thứ hạng SEO và thiết kế website chuẩn SEO.
Cách tạo mockup cho logo, bao bì, ấn phẩm
- Chuẩn bị thiết kế gốc đúng định dạng. Ưu tiên file vector (như SVG, AI, PDF) cho logo; ảnh độ phân giải cao cho hình chụp.
- Chọn mẫu mockup phù hợp bối cảnh. Hộp giấy, túi, danh thiếp, bảng hiệu… Chọn bối cảnh sát với thực tế sử dụng để người xem tin được.
- Đặt thiết kế vào mẫu bằng phần mềm đồ họa hoặc công cụ trực tuyến, chú ý phối cảnh, ánh sáng, đổ bóng.
- Đối chiếu kích thước thật. Mockup đẹp nhưng sai tỷ lệ so với khuôn in sẽ gây hiểu lầm. Dùng bản vẽ dao khuôn do nhà in cung cấp.
- Kiểm tra màu. Màu trên màn hình (RGB) khác màu in (thường CMYK hoặc màu pha). Nếu màu quan trọng, yêu cầu in thử hoặc bản màu mẫu.
- Kiểm tra quyền sử dụng mẫu mockup. Nhiều mẫu miễn phí có điều khoản hạn chế dùng thương mại. Đọc giấy phép trước khi dùng trong tài liệu gửi khách.
- Ghi chú rõ đây là mô phỏng. Khi trình khách, nói rõ màu và chất liệu thực tế có thể khác, tránh kỳ vọng sai.
Với ấn phẩm quảng cáo, bảng hiệu hay bao bì cần sản xuất thật, mockup chỉ là bước duyệt. Sau khi duyệt, nên in thử mẫu nhỏ trước khi chạy số lượng lớn. Bạn có thể tham khảo thiết kế quảng cáo và dịch vụ in ấn quảng cáo.
Công cụ làm mockup
Chúng tôi không xếp hạng công cụ, vì lựa chọn phụ thuộc vào ngân sách, kỹ năng và loại sản phẩm. Thay vào đó, hãy xét theo nhóm:
| Nhóm công cụ | Dùng cho | Điểm cần cân nhắc |
|---|---|---|
| Công cụ thiết kế giao diện trực tuyến | Mockup web, app, làm việc nhóm, bình luận trực tiếp | Kiểm tra gói miễn phí, giới hạn số dự án, quyền chia sẻ |
| Phần mềm đồ họa chuyên nghiệp | Mockup bao bì, ấn phẩm, xử lý ảnh nâng cao | Cần kỹ năng và giấy phép sử dụng hợp lệ |
| Trình tạo mockup trực tuyến theo mẫu | Đặt logo, thiết kế lên vật thể nhanh | Điều khoản thương mại của mẫu, chất lượng xuất ảnh |
| Công cụ vẽ vector | Chuẩn bị logo, biểu tượng đầu vào | Xuất đúng định dạng cho mockup |
Dù chọn công cụ nào, hãy dùng phần mềm có bản quyền hợp lệ và tải mẫu từ nguồn rõ giấy phép. Tránh các bản bẻ khóa hay mẫu không rõ nguồn gốc, vì có rủi ro pháp lý và bảo mật.
Khi nào cần mockup, khi nào có thể bỏ qua?
| Tình huống | Nên làm mockup? | Lý do |
|---|---|---|
| Website nhiều trang, nhiều bên duyệt | Nên | Tránh sửa lớn sau khi lập trình |
| Ứng dụng di động mới | Nên, kèm prototype | Cần thử luồng và giao diện trước khi đầu tư lập trình |
| Bao bì, ấn phẩm in số lượng lớn | Nên | Sai sót in lớn rất tốn kém |
| Landing page đơn giản, một người quyết định | Có thể rút gọn | Một bản thiết kế chính có thể đủ |
| Thay đổi nhỏ trên trang có sẵn | Thường không cần | Chỉnh trực tiếp và xem trước |
| Chiến dịch quảng cáo số chạy thử nhanh | Nên làm bản duyệt nhẹ | Kiểm tra hiển thị, chính sách quảng cáo trước khi chạy |
Lỗi thường gặp khi làm mockup
- Đẹp nhưng thiếu thực tế: dùng ảnh và chữ quá hoàn hảo, thực tế nội dung dài hơn hoặc ảnh không đẹp như vậy.
- Bỏ qua điện thoại: chỉ làm bản máy tính, trong khi phần lớn người dùng xem trên điện thoại.
- Không có hệ thống thiết kế: mỗi màn hình một kiểu nút, một cỡ chữ, gây khó cho lập trình và bảo trì.
- Quên các trạng thái lỗi, trống, đang tải: phát sinh khi lập trình mới phải nghĩ ra.
- Nhầm mockup với sản phẩm cuối: khách hàng nghĩ sản phẩm đã xong, hoặc ngược lại, kỳ vọng màu in giống hệt màn hình.
- Dùng mẫu mockup vi phạm bản quyền: rủi ro khi sử dụng thương mại.
- Thu phản hồi lan man: nhiều người góp ý mâu thuẫn, không có người chốt cuối cùng.
- Không lưu phiên bản: khó quay lại khi khách đổi ý.
Câu hỏi thường gặp
Mockup là gì, nói ngắn gọn?
Mockup là bản thiết kế mô phỏng có hình thức giống sản phẩm thật nhưng chưa hoạt động đầy đủ, dùng để duyệt hình thức trước khi sản xuất hoặc lập trình.
Mockup khác wireframe ở điểm nào?
Wireframe là khung bố cục đơn giản, thường không có màu và hình ảnh thật. Mockup có màu sắc, chữ, hình ảnh gần như bản cuối nên thể hiện được thẩm mỹ. Wireframe thường làm trước mockup.
Mockup khác prototype ở điểm nào?
Mockup thường là hình tĩnh, tập trung vào hình thức. Prototype cho phép bấm, chuyển màn hình để thử luồng sử dụng. Có thể biến mockup thành prototype bằng cách thêm liên kết tương tác.
Mockup có cần thiết cho thiết kế website không?
Với website nhiều trang hoặc nhiều bên duyệt thì nên có, vì giúp thống nhất giao diện trước khi lập trình. Với trang đơn giản, một bản thiết kế chính có thể đủ.
Có thể làm mockup miễn phí không?
Có. Nhiều công cụ có gói miễn phí và một số mẫu mockup cho phép dùng không mất phí. Hãy kiểm tra giới hạn gói và điều khoản thương mại của từng mẫu trước khi dùng trong sản phẩm hoặc tài liệu gửi khách.
Mockup 3D dùng khi nào?
Khi cần hình dung sản phẩm hữu hình như hộp, chai, túi, hoặc thuyết phục khách hàng bằng hình ảnh thực tế. Với giao diện web, mockup 2D theo từng màn hình thường là đủ.
Màu trên mockup có giống màu in thật không?
Không chắc. Màn hình dùng hệ màu phát sáng, bản in dùng mực nên màu có thể lệch. Nếu màu quan trọng, hãy hỏi nhà in về bản in thử hoặc bảng màu mẫu trước khi in số lượng lớn.
Ai là người làm mockup?
Thường là nhà thiết kế đồ họa hoặc thiết kế UI. Với dự án nhỏ, người quản lý hoặc chủ doanh nghiệp có thể tự làm bằng công cụ có mẫu sẵn, nhưng nên nhờ chuyên gia khi cần độ chính xác cao.
Kết luận và bước tiếp theo
Mockup là bước trung gian giúp biến ý tưởng thành hình ảnh cụ thể trước khi tốn tiền lập trình hay in ấn. Hãy bắt đầu từ mục tiêu, có wireframe nếu là sản phẩm số, dùng nội dung thật, kiểm tra trên nhiều kích thước, và ghi rõ giới hạn của mô phỏng khi trình khách. Khi cần thử hành vi người dùng, hãy tiến tới prototype.
Vidco Group có thể hỗ trợ
Nếu bạn cần tư vấn thiết kế giao diện website, ấn phẩm hay quảng cáo trước khi triển khai, Vidco Group có thể giúp bạn làm rõ yêu cầu và quy trình duyệt. Xem dịch vụ thiết kế website và thiết kế quảng cáo, hoặc liên hệ để trao đổi nhu cầu cụ thể.
Nguồn tham khảo
- Nielsen Norman Group: UX Prototypes: Low Fidelity vs. High Fidelity
- W3C: Web Content Accessibility Guidelines (WCAG) Overview
- web.dev: Core Web Vitals
- Google Search Central: SEO Starter Guide
Cập nhật: tháng 10/2026
