Mockup khác wireframe và prototype ở đâu
Wireframe là bản khung sườn đơn giản, thường chỉ có ô vuông, đường kẻ và chữ giả để thể hiện vị trí các thành phần trên trang, chưa quan tâm tới màu sắc hay hình ảnh thật. Mockup đi xa hơn một bước, thể hiện đúng màu thương hiệu, font chữ, hình ảnh minh hoạ gần với thực tế, nhưng vẫn là hình ảnh tĩnh, bấm vào không có phản ứng gì. Prototype là bước tiếp theo, cho phép bấm thử các nút, chuyển màn hình để cảm nhận luồng sử dụng trước khi có mã thật.
Vì sao cần làm mockup trước khi dựng mã
- Giúp khách hàng hình dung rõ giao diện cuối cùng bằng hình ảnh cụ thể, thay vì chỉ đọc mô tả bằng chữ hoặc xem khung sườn trừu tượng.
- Phát hiện sớm các vấn đề về bố cục, màu sắc, khoảng cách trước khi đội kỹ thuật tốn thời gian dựng mã theo một thiết kế chưa được duyệt.
- Làm cơ sở thống nhất giữa các bên: khách hàng, người thiết kế và lập trình viên cùng nhìn vào một bản mockup đã chốt để tránh hiểu sai khi triển khai.
- Tiết kiệm chi phí sửa đổi về sau, vì sửa trên bản mockup luôn nhanh và rẻ hơn sửa sau khi đã dựng mã hoàn chỉnh.
Quy trình làm mockup tại một dự án website doanh nghiệp của Alodev
Với các dự án thiết kế website doanh nghiệp, đội thiết kế của Alodev thường bắt đầu từ wireframe đơn giản để thống nhất bố cục tổng thể của từng trang, sau đó mới lên mockup có màu sắc và nội dung gần thật cho các trang quan trọng nhất trước, ví dụ trang chủ và trang dịch vụ, thay vì làm mockup đồng loạt cho toàn bộ website ngay từ đầu.
| Bước | Việc làm | Kết quả |
|---|---|---|
| 1 | Wireframe bố cục trang chủ theo thứ tự thông tin ưu tiên | Khung sườn thống nhất về vị trí các khối nội dung |
| 2 | Áp màu thương hiệu, font chữ, hình ảnh minh hoạ gần thật lên wireframe | Bản mockup đầu tiên gửi khách hàng xem |
| 3 | Thu thập góp ý, chỉnh sửa bố cục hoặc màu sắc theo phản hồi | Bản mockup đã điều chỉnh, sát với mong muốn của khách hàng hơn |
| 4 | Khách hàng duyệt bản mockup cuối, bàn giao cho lập trình viên dựng mã | Giao diện thật khớp với bản mockup đã duyệt |
Việc chốt mockup trước khi dựng mã giúp giảm đáng kể số lần khách hàng yêu cầu đổi bố cục sau khi website đã lên mã, vì phần lớn các điều chỉnh lớn về hình ảnh đã được xử lý ở giai đoạn mockup, khi chi phí thay đổi còn thấp.
Công cụ thường dùng để làm mockup website
- Các phần mềm thiết kế giao diện chuyên dụng cho phép dựng mockup có lớp, dễ chỉnh sửa từng thành phần riêng lẻ.
- Bộ công cụ có sẵn thư viện thành phần giao diện chuẩn, giúp rút ngắn thời gian dựng mockup cho các trang có cấu trúc quen thuộc.
- Với dự án nhỏ, đôi khi mockup đơn giản có thể làm trực tiếp trên phần mềm trình chiếu, đủ để khách hàng hình dung bố cục cơ bản.
Doanh nghiệp cần tư vấn quy trình thiết kế và dựng website từ mockup tới sản phẩm hoàn chỉnh có thể tham khảo thêm tại /cong-nghe.
Những sai lầm thường gặp khi làm mockup
- Làm mockup quá chi tiết ngay từ đầu cho toàn bộ website, tốn nhiều thời gian trong khi bố cục tổng thể còn có thể thay đổi lớn sau góp ý đầu tiên.
- Dùng hình ảnh, nội dung giả không liên quan tới ngành nghề thực tế của khách hàng, khiến khách khó hình dung đúng cảm giác website hoàn thiện.
- Bỏ qua bước duyệt mockup trên nhiều kích thước màn hình, dẫn tới bố cục đẹp trên máy tính nhưng lộn xộn khi xem trên điện thoại.
- Chuyển thẳng sang dựng mã khi mockup chưa được khách hàng duyệt chính thức bằng văn bản, dễ phát sinh tranh cãi về phạm vi công việc sau này.
Mockup riêng cho phiên bản điện thoại
Nhiều khách hàng chỉ chú trọng duyệt mockup phiên bản máy tính mà quên kiểm tra kỹ phiên bản hiển thị trên điện thoại, trong khi phần lớn lượt truy cập website doanh nghiệp hiện nay tới từ điện thoại di động. Đội thiết kế nên chủ động làm thêm mockup riêng cho màn hình điện thoại đối với các trang quan trọng, đặc biệt trang chủ và trang liên hệ, để khách hàng thấy rõ bố cục sẽ thay đổi thế nào khi thu nhỏ màn hình, tránh tình trạng chỉ duyệt đẹp trên máy tính rồi bất ngờ khi xem bản điện thoại sau khi website đã dựng mã hoàn chỉnh.
Câu hỏi thường gặp
Làm mockup mất bao lâu cho một website doanh nghiệp thông thường?
Tuỳ số lượng trang và độ phức tạp giao diện, một website doanh nghiệp cỡ vừa với khoảng năm đến bảy trang chính thường mất từ vài ngày tới hai tuần để hoàn thiện mockup, bao gồm cả thời gian trao đổi góp ý với khách hàng.
Mockup có cần làm cho tất cả các trang của website không?
Không nhất thiết. Thường chỉ cần làm mockup chi tiết cho các trang có bố cục đặc biệt hoặc quan trọng nhất, các trang còn lại có cấu trúc tương tự có thể dùng chung một mẫu bố cục đã được duyệt để tiết kiệm thời gian.
Khách hàng không có kiến thức thiết kế có hiểu được mockup không?
Có, vì mockup thể hiện gần đúng với giao diện thật bằng hình ảnh trực quan, dễ hiểu hơn nhiều so với việc chỉ đọc mô tả bằng văn bản hoặc xem wireframe trừu tượng.
Sau khi duyệt mockup, khách hàng còn được đổi thiết kế nữa không?
Về nguyên tắc nên hạn chế thay đổi lớn sau khi đã duyệt mockup, vì lúc này đội kỹ thuật đã bắt đầu dựng mã theo đúng bản đã chốt. Các thay đổi nhỏ về chữ hoặc hình ảnh minh hoạ thường vẫn có thể điều chỉnh, nhưng đổi toàn bộ bố cục sẽ phát sinh thêm thời gian và chi phí.
Có thể bỏ qua bước mockup, làm thẳng từ wireframe sang mã được không?
Có thể với các dự án rất nhỏ hoặc website đơn giản, nhưng rủi ro là khách hàng chỉ thấy được giao diện thật khi đã dựng mã xong, lúc đó việc sửa đổi bố cục hoặc màu sắc sẽ tốn thời gian và chi phí hơn nhiều so với sửa trên bản mockup.
