Khi designer gửi cho bạn một bản phác thảo toàn khung xám, không màu, không hình ảnh thật, nhiều người lúng túng không biết phải nhận xét gì. Có người nhận xét màu sắc, có người hỏi tại sao chưa có ảnh thật. Cả hai đều không đúng thời điểm, vì wireframe là gì và cần duyệt gì ở bước này là hai câu hỏi khác nhau.
Wireframe là gì
Wireframe (bản phác thảo cấu trúc giao diện) là bản vẽ thể hiện bố cục và vị trí các thành phần trên một trang web, nhưng chưa có màu sắc thật, chưa có hình ảnh thật, và người dùng chưa tương tác được.
Hãy hình dung như bản thiết kế mặt bằng khi xây nhà: bạn thấy phòng nằm đâu, cửa mở hướng nào, nhưng chưa thấy màu sơn hay chất liệu nền. Wireframe cũng vậy: bạn thấy tiêu đề đặt ở đâu, menu điều hướng nằm chỗ nào, khối nội dung được xếp theo thứ tự ra sao, nhưng chưa thấy màu thương hiệu hay hình ảnh cụ thể.
Màu trong wireframe thường chỉ dùng 2-3 mức xám để phân biệt phần quan trọng và phần phụ. Văn bản đôi khi được thay bằng “Lorem ipsum”. Đây là thiết kế có chủ ý: khi loại bỏ màu sắc và hình ảnh, người duyệt sẽ tập trung đúng vào thứ cần phản hồi ở bước này, là cấu trúc và luồng người dùng.
Wireframe xuất hiện ở bước nào trong quy trình làm web
Trong một dự án làm web có quy trình, giai đoạn thiết kế thường đi theo 4 bước nối tiếp: wireframe đến trước, tiếp theo là mockup (giao diện đầy màu sắc), sau đó là prototype (bản bấm được), cuối cùng mới code thật.
Wireframe là bước đầu tiên ngay sau khi team đã nắm rõ yêu cầu và mục tiêu của web. Ở đây, UX designer phác thảo cấu trúc từng trang: trang chủ cần những khối nào, trang sản phẩm xếp bố cục ra sao, trang liên hệ đặt form ở đâu.
Lý do wireframe đến trước: thay đổi cấu trúc ở bước này rất nhanh và ít tốn kém. Kéo thêm một ô, dời một section, thêm bớt mục menu chỉ mất vài phút. Nếu để đến lúc đã thiết kế đầy màu sắc hoặc đã code rồi mới đổi cấu trúc, thời gian và công sức tốn gấp nhiều lần.
Wireframe, mockup và prototype khác nhau như thế nào
Ba khái niệm này hay bị nhầm lẫn vì đều là “bản thiết kế chưa phải web thật”. Nhưng mỗi loại phục vụ một mục đích khác nhau và xuất hiện ở thời điểm khác nhau trong quy trình.
| 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ỗ (placeholder) | 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 | Sau wireframe | Sau mockup |
| Thời gian làm | Nhanh nhất (vài giờ đến 2 ngày) | Trung bình (2-5 ngày) | Lâu hơn (3-10 ngày) |
| Mục đích chính | Xác định cấu trúc, bố cục | Duyệt giao diện thật | Kiểm tra trải nghiệm người dùng |
Wireframe đặt câu hỏi “phần này đặt ở đâu”. Mockup trả lời “trông như thế nào”. Prototype kiểm tra “dùng có dễ không”. Ba bước nối tiếp, mỗi bước giải quyết một lớp vấn đề riêng.
Hiểu thêm về bước tiếp theo: Mockup là gì giải thích khi nào giao diện bắt đầu có màu sắc thật. Còn Prototype là gì nói về bước tương tác sau đó.
Wireframe được làm bằng công cụ gì, mất bao lâu
Wireframe thường do UX designer thực hiện, đôi khi là UI designer kiêm luôn bước này. Trong team nhỏ, product manager cũng có thể làm wireframe đơn giản bằng giấy bút trước khi vào phần mềm.
Figma là công cụ phổ biến nhất hiện nay, miễn phí cho cá nhân, chạy ngay trên trình duyệt và có thư viện wireframe kit dùng ngay. Designer chia sẻ link, khách có thể xem và để lại comment mà không cần trả phí hay cài thêm gì.
Balsamiq là công cụ chuyên wireframe với nét vẽ có chủ ý hơi “phác thảo tay”. Nhiều team chọn Balsamiq chính vì điều này: khi wireframe trông chưa hoàn chỉnh, khách sẽ tự nhớ đây chỉ là bản nháp và tập trung nhận xét cấu trúc thay vì hỏi chuyện màu sắc.
Whimsical và draw.io thường dùng để vẽ wireframe nhanh khi họp, kết hợp sơ đồ luồng người dùng để minh hoạ khách sẽ đi từ trang nào sang trang nào.
Thời gian làm wireframe phụ thuộc vào số trang và độ phức tạp của luồng người dùng. Một web doanh nghiệp 10-15 trang thường cần 1-3 ngày làm việc. Web thương mại điện tử với nhiều kiểu trang (danh mục, sản phẩm, giỏ hàng, thanh toán) có thể mất 3-5 ngày.
Ví dụ wireframe trang chủ bán hàng trông như thế nào
Khi dựng wireframe cho trang chủ một cửa hàng bán đồ gia dụng, bản phác thảo thường có hình dáng như sau.
Phần đầu trang (hero section): một ô chữ nhật ngang rộng, bên trái là khối chữ ghi “Tiêu đề chính” và “Mô tả ngắn”, bên phải là ô vuông ghi “Hình sản phẩm nổi bật”. Dưới đó là dải 3-4 ô nhỏ bằng nhau, mỗi ô có icon placeholder ở trên và tên danh mục ở dưới.
Tiếp theo là hàng sản phẩm nổi bật: 4 ô song song, mỗi ô có ô vuông ghi “Ảnh SP”, một dòng ghi “Tên sản phẩm”, một dòng ghi “Giá” và một nút nhỏ ghi “Thêm vào giỏ”. Không có ảnh thật nào, không có màu sắc thương hiệu nào.
Nhìn vào đây, bạn thấy ngay: trang có banner không, sản phẩm nổi bật xuất hiện sớm hay muộn trên trang, nút kêu gọi hành động (CTA là gì) đặt ở đâu trong từng ô sản phẩm. Đây chính xác là những thứ cần quyết định ở bước wireframe.
Khi nhận wireframe để duyệt, bạn cần nhận xét gì
Đây là phần nhiều khách bỏ qua hoặc nhận xét nhầm chỗ, dẫn đến phải sửa nhiều vòng về sau. Khi nhận wireframe, bạn cần kiểm tra đúng lớp vấn đề của bước này: cấu trúc và bố cục, chứ không phải màu sắc hay font chữ.
Nên nhận xét ở bước wireframe:
- Thứ tự các section có hợp lý không (phần giới thiệu công ty nên nằm trước hay sau phần dịch vụ)?
- Có thiếu trang nào không (trang chính sách đổi trả, trang về chúng tôi, trang landing riêng cho từng chiến dịch)?
- Nút kêu gọi hành động có dễ thấy, đặt đúng vị trí người dùng hay bấm vào không?
- Luồng điều hướng có tự nhiên không (từ danh mục bấm vào trang sản phẩm, từ đó sang giỏ hàng)?
- Thông tin quan trọng nhất có nằm ở vị trí đủ nổi bật trên màn hình không?
Chưa cần nhận xét ở bước này: màu sắc thương hiệu, font chữ, kích cỡ chữ, hình ảnh dùng ảnh nào, các chi tiết trang trí nhỏ. Những thứ đó là việc của bước mockup tiếp theo.
Nếu bạn sa đà vào nhận xét màu sắc khi đang duyệt wireframe, designer phải chạy 2 vòng thay vì 1. Thời gian của cả hai phía bị tốn thêm không cần thiết.
Câu hỏi thường gặp về wireframe
Wireframe cần phải đẹp không?
Không cần và không nên cố làm wireframe trông bóng bẩy. Chỉ cần đủ rõ để người duyệt hiểu cấu trúc. Wireframe quá chỉn chu thường là dấu hiệu team đang tốn thời gian vào trang trí thay vì tập trung vào bố cục, và khiến khách dễ nhận xét nhầm sang màu sắc.
Mỗi trang web có cần wireframe riêng không?
Chỉ những trang có bố cục khác nhau mới cần wireframe riêng. Nếu web có 20 trang sản phẩm dùng chung một template, wireframe cho một trang đại diện là đủ. Các trang cùng cấu trúc không cần vẽ lại từng trang.
Bỏ qua wireframe có được không?
Về kỹ thuật thì được, nhưng rủi ro cao hơn. Đến lúc đã code mới phát hiện cấu trúc chưa hợp lý thì sửa tốn gấp nhiều lần. Với web nhỏ 3-4 trang đơn giản, đôi khi team đề xuất bỏ bước này nếu yêu cầu đã rất rõ. Với web phức tạp, bỏ qua wireframe thường gây rắc rối về sau.
Khách có thể xem và comment trên Figma mà không cần trả phí không?
Được. Figma chạy ngay trên trình duyệt, designer chia sẻ link là bạn vào xem và để lại nhận xét ngay, không cần đăng ký tài khoản trả phí. Đây là lý do Figma được dùng rộng rãi cho việc duyệt thiết kế với khách.
Nếu bạn đang chuẩn bị làm web và muốn biết quy trình wireframe diễn ra như thế nào trong thực tế, xem thêm tại dịch vụ thiết kế wireframe và prototype.