Wireframe là bản phác thảo bố cục của một giao diện — thể hiện cái gì nằm ở đâu mà chưa quan tâm tới màu sắc, phông chữ hay hình ảnh. Wireframe thường chỉ có khung xám, ô chữ nhật thay cho ảnh và dòng kẻ thay cho văn bản. Mục đích: thống nhất cấu trúc trước khi đầu tư công sức vào thiết kế chi tiết.
Wireframe, Mockup, Prototype — ba thứ hay bị gọi lẫn
| Wireframe | Mockup | Prototype | |
|---|---|---|---|
| Trả lời câu hỏi | Cái gì nằm ở đâu? | Trông như thế nào? | Hoạt động ra sao? |
| Màu sắc, phông | Không | Có, đầy đủ | Có |
| Tương tác | Không | Không | Có — bấm được |
| Thời gian làm | Phút đến giờ | Giờ đến ngày | Ngày đến tuần |
| Dùng để | Chốt cấu trúc, luồng | Chốt giao diện | Kiểm thử với người dùng |
Thứ tự chuẩn: wireframe → mockup → prototype → code. Bỏ qua wireframe và nhảy thẳng vào thiết kế chi tiết là lý do nhiều dự án phải sửa lại bố cục khi đã tô màu xong — tốn gấp nhiều lần.
Ba mức độ chi tiết
- Độ chi tiết thấp: vẽ tay trên giấy hoặc bảng trắng. Nhanh, rẻ, dễ vứt bỏ — phù hợp giai đoạn bàn ý tưởng.
- Độ chi tiết trung bình: vẽ bằng công cụ, có kích thước tương đối đúng, ghi chú nội dung thật. Đây là mức dùng nhiều nhất khi làm việc với khách hàng.
- Độ chi tiết cao: gần giống mockup, có nội dung thật và khoảng cách chính xác — dùng khi bàn giao cho đội phát triển.
Wireframe nên thể hiện gì?
- Thứ tự ưu tiên nội dung. Thứ quan trọng nhất phải nằm trong vùng nhìn thấy đầu tiên, không cần cuộn.
- Vị trí hành động chính. Nút gọi, nút mua, biểu mẫu — mỗi trang chỉ nên có một hành động chính.
- Cấu trúc điều hướng. Menu có gì, breadcrumb đặt ở đâu — xem thêm navigation là gì.
- Bố cục trên di động. Vẽ cả bản di động, đừng chỉ vẽ bản máy tính rồi để đội phát triển tự xoay xở.
- Trạng thái đặc biệt: danh sách rỗng, đang tải, báo lỗi — những màn hình hay bị quên nhất.
Wireframe và SEO — điểm liên quan mà ít ai nghĩ tới
Wireframe là lúc rẻ nhất để đưa các yếu tố SEO vào cấu trúc trang, thay vì chắp vá sau khi đã code:
- Vị trí H1 và trật tự heading trong trang.
- Chỗ dành cho nội dung chữ. Nhiều thiết kế đẹp nhưng chỉ có ảnh và 3 dòng chữ — không đủ nội dung để xếp hạng cho bất kỳ từ khóa nào.
- Khối liên kết nội bộ: bài liên quan, dịch vụ liên quan, breadcrumb.
- Khối FAQ để gắn dữ liệu có cấu trúc.
Sửa những thứ này trên wireframe mất vài phút; sửa sau khi website đã chạy mất vài ngày.
Đọc thêm
- Thiết kế website chuẩn SEO — 12 tiêu chí kỹ thuật
- Thiết kế landing page — bố cục tối ưu chuyển đổi
- Navigation là gì — thiết kế điều hướng
- Dịch vụ SEO tổng thể — triển khai toàn diện
Câu hỏi thường gặp
Wireframe có cần đẹp không?
Không. Wireframe càng đơn giản càng tốt — mục đích là bàn về cấu trúc, không bàn về thẩm mỹ. Làm đẹp sớm khiến người xem góp ý về màu sắc thay vì về bố cục.
Ai là người làm wireframe?
Thường là người thiết kế trải nghiệm hoặc quản lý sản phẩm, nhưng bất kỳ ai hiểu mục tiêu kinh doanh đều có thể phác thảo bản đầu tiên.
Dự án nhỏ có cần wireframe không?
Có, nhưng ở mức đơn giản. Kể cả bản vẽ tay 10 phút cũng giúp tránh việc phải làm lại bố cục sau khi đã thiết kế xong.
Wireframe có cần bản cho di động không?
Cần. Phần lớn người dùng Việt Nam truy cập bằng điện thoại — bản di động nên được vẽ trước, không phải vẽ sau cho có.
Sắp làm website mới?
Vidco Group review wireframe/thiết kế của bạn dưới góc nhìn SEO trước khi code — miễn phí.
