Sau khi team đã thống nhất cấu trúc qua wireframe, designer sẽ gửi cho bạn một file trông rất gần với trang web thật: đủ màu sắc, font chữ, hình ảnh, nhưng chưa bấm vào đâu được. Đây là mockup, và đây cũng là lúc phản hồi của bạn ảnh hưởng nhiều nhất đến kết quả cuối cùng. Hiểu mockup là gì giúp bạn biết mình cần nhận xét gì ở bước này.
Mockup là gì
Mockup (bản thiết kế giao diện tĩnh) là bản phác hoạ giao diện của trang web ở dạng hình ảnh, với đầy đủ màu sắc thương hiệu, font chữ thật, hình ảnh gần thật, nhưng chưa bấm vào đâu được. Người dùng chỉ xem, không tương tác.
Khác với wireframe chỉ dùng xám và trắng để thể hiện cấu trúc, mockup cho bạn thấy “giao diện sẽ trông như thế nào” một cách sát nhất có thể mà không cần code thật. Đây là bản mà hầu hết khách sẽ nhìn vào và nói “ừ, đúng rồi, làm theo cái này đi”.
Mockup là gì trong quy trình làm web, ngắn gọn là: bước duyệt thẩm mỹ. Bạn duyệt cấu trúc ở wireframe, duyệt giao diện thật ở mockup, rồi kiểm tra trải nghiệm tương tác ở prototype.
Mockup nằm ở bước nào trong quy trình thiết kế web
Quy trình thiết kế web bài bản đi theo 4 bước nối tiếp: wireframe (cấu trúc), mockup (giao diện thật), prototype (tương tác), rồi mới code. Mockup nằm ở bước thứ hai, ngay sau khi wireframe đã được duyệt và team đã thống nhất về bố cục.
Ở bước mockup, UI designer đưa màu sắc thương hiệu, font chữ thật, hình ảnh đại diện và các yếu tố trang trí vào wireframe đã được duyệt. Kết quả là một bản hình ảnh tĩnh trông gần giống trang web thật nhưng không có code phía sau.
Đây là lúc tốt nhất để nhận xét về thẩm mỹ. Sửa ở bước mockup vẫn chỉ là sửa file thiết kế, nhanh hơn nhiều so với khi đã code xong rồi mới muốn đổi màu, đổi font hay đổi layout.
Mockup, wireframe và prototype khác nhau như thế nào
Ba khái niệm này hay xuất hiện cùng nhau và dễ nhầm vì đều là “bản thiết kế chưa phải web thật”. Sự khác biệt nằm ở mức độ hoàn thiện và mục đích sử dụng.
| Tiêu chí | Wireframe | Mockup | Prototype |
|---|---|---|---|
| Màu sắc | Xám, trắng | Màu thương hiệu đầy đủ | Màu đầy đủ |
| Hình ảnh | Ô giữ chỗ | Hình ảnh thật hoặc gần thật | Hình ảnh thật |
| Bấm được | Không | Không | Có |
| Giai đoạn | Đầu tiên | Thứ hai | Thứ ba |
| Mục đích chính | Xác định cấu trúc | Duyệt giao diện thật | Kiểm tra trải nghiệm |
Mockup phụ thuộc vào wireframe đã được duyệt: không thể thiết kế giao diện thật khi bố cục chưa chốt. Và prototype sẽ được dựng từ mockup, để khách có thể bấm thử trước khi đồng ý code thật.
Hiểu thêm về bước trước đó: Wireframe là gì giải thích cấu trúc bố cục được phác thảo như thế nào. Còn Prototype là gì mô tả bước tương tác ngay sau mockup.
Ai tạo mockup và công cụ nào được dùng
Mockup là công việc của UI designer (người thiết kế giao diện). Đây là bước đòi hỏi kỹ năng thẩm mỹ, hiểu màu sắc và typography, khác với wireframe vốn nghiêng về tư duy logic và luồng người dùng nhiều hơn.
Figma là lựa chọn phổ biến nhất hiện nay vì cho phép nhiều người cộng tác trên cùng một file theo thời gian thực, và designer có thể chia sẻ link để khách xem và để lại comment ngay mà không cần cài thêm phần mềm.
Adobe XD tích hợp tốt với hệ sinh thái Adobe (Photoshop, Illustrator), phù hợp với team đã quen với các công cụ Adobe. Hiện tại Adobe đã ngừng cập nhật XD tích cực nên Figma đang dần thay thế vị trí này.
Sketch được nhiều designer Mac ưa dùng vì mạnh về design system và plugin, nhưng không chạy được trên Windows. Nếu khách dùng Windows sẽ không mở được file Sketch gốc để xem.
Thời gian tạo mockup thường từ 2 đến 5 ngày cho web doanh nghiệp thông thường, tuỳ độ phức tạp của giao diện và số lượng trang cần thiết kế riêng.
Ví dụ mockup trang sản phẩm trông như thế nào
Khi designer làm mockup cho trang sản phẩm của một cửa hàng thời trang, bản mockup sẽ có hình dáng như sau.
Phần trên cùng là header với logo thật đã có màu, menu điều hướng với font chữ thật, màu nền trang dùng đúng màu nền thương hiệu. Ảnh sản phẩm là ảnh thật hoặc ảnh placeholder có phong cách gần đúng với thương hiệu.
Phần chính: bên trái là ảnh sản phẩm lớn kèm ảnh phụ nhỏ phía dưới, bên phải là tên sản phẩm in đậm, giá niêm yết, bộ chọn kích cỡ và màu sắc, cùng nút “Thêm vào giỏ” màu đúng màu thương hiệu.
Khác với wireframe, nhìn vào mockup này bạn đã thấy được toàn bộ cảm giác thị giác của trang. Lúc này mới là thời điểm nhận xét về màu nút, kích cỡ chữ, khoảng cách các thành phần. Nút kêu gọi hành động (CTA) ở bước mockup mới được thiết kế với màu sắc thật.
Khi nhận mockup để duyệt, bạn cần kiểm tra gì
Đây là cơ hội để chỉnh thẩm mỹ trước khi chuyển sang code. Một khi đã code xong, thay đổi màu hay layout tốn công và thời gian hơn nhiều.
Nên kiểm tra ở bước mockup:
- Màu sắc thương hiệu có đúng không (màu chính, màu phụ, màu nền)?
- Font chữ, kích cỡ chữ, khoảng cách dòng có đọc thoải mái không?
- Hình ảnh đại diện có phù hợp phong cách thương hiệu không?
- Nút kêu gọi hành động có nổi bật, dễ nhận ra không?
- Cảm giác tổng thể khi nhìn lần đầu có truyền được đúng thông điệp thương hiệu chưa?
Chưa nên kiểm tra ở bước mockup: tương tác khi bấm vào, tốc độ chuyển trang, hoạt ảnh, cách hiển thị trên điện thoại thật. Những thứ đó là việc của bước prototype và code tiếp theo.
Một thắc mắc hay gặp: mockup có trông giống hệt web thật sau khi code không? Gần giống, nhưng chưa giống hoàn toàn. Code thật sẽ điều chỉnh khoảng cách, font render và một số hiệu ứng mà mockup chưa mô phỏng được chính xác.
Câu hỏi thường gặp về mockup
Tại sao mockup không bấm được dù trông như web thật?
Vì mockup là hình ảnh tĩnh, không có code phía sau. Tương tác và chuyển trang là việc của prototype, bước tiếp sau mockup. Hai bước này tách riêng để từng bước giải quyết một vấn đề: mockup lo thẩm mỹ, prototype lo trải nghiệm.
Khách có cần trả phí để xem mockup trên Figma không?
Không. Figma có gói free cho phép xem và để lại comment trên file được chia sẻ, không cần đăng ký tài khoản trả phí. Bạn nhận link từ designer, mở trên trình duyệt, kéo chuột vào từng phần và gõ nhận xét là xong.
Mockup có cần làm cả phiên bản mobile không?
Tuỳ dự án. Nhiều team làm mockup desktop trước, rồi sau khi duyệt xong mới làm thêm mockup mobile. Một số dự án làm song song cả 2 từ đầu. Điều này nên thống nhất với team khi lên kế hoạch, không có quy tắc cứng.
Duyệt mockup xong nhưng muốn đổi màu sau khi code thì sao?
Được, nhưng tốn thêm công. Đổi màu sau khi code kéo theo kiểm tra lại trên nhiều trang và nhiều trình duyệt để đảm bảo không bị lỗi hiển thị. Vì vậy nên rà kỹ màu sắc ngay ở bước mockup thay vì chờ đến lúc code xong.
Nếu bạn đang chuẩn bị làm web và muốn biết Web22 thực hiện bước mockup và thiết kế giao diện như thế nào, xem thêm tại dịch vụ thiết kế wireframe và prototype.