Wireframe website là gì – Vì sao nên duyệt khung trước khi thiết kế

Wireframe website là gì? Wireframe website là bản phác khung trắng đen của từng trang, chỉ thể hiện bố cục, thứ tự nội dung và vị trí nút bấm, chưa có màu, font hay hình ảnh thật. Duyệt wireframe trước giúp chủ doanh nghiệp và đơn vị làm web thống nhất "trang này nói gì, khách bấm vào đâu" khi việc sửa còn rẻ, thay vì phát hiện sai sau khi giao diện đã lên màu.

Nhiều dự án website kéo dài không phải vì lập trình khó, mà vì hai bên duyệt giao diện xong mới nhận ra trang chủ thiếu bảng giá, form liên hệ đặt quá xa, hay trang dịch vụ không trả lời được câu hỏi khách hay hỏi. Lúc đó mỗi lần sửa là làm lại cả thiết kế. Bài này giải thích wireframe website là gì, khác gì với mockup và prototype, cần có gì trong một bản wireframe, và cách chủ doanh nghiệp duyệt nó trong 30 phút mà không cần biết thiết kế.

Wireframe website là gì và dùng để làm gì

Hướng dẫn phương pháp của chính phủ Mỹ trên Digital.gov mô tả wireframe là một bản trình bày trực quan đơn giản, độ chi tiết thấp, của giao diện, thường chỉ là các nét vẽ đơn giản. Mục đích là giúp cả nhóm thống nhất hướng thiết kế sớm, dùng để thử với người dùng và kiểm tra xem có làm được về mặt kỹ thuật không. Cũng theo hướng dẫn này, nên bỏ qua kiểu chữ và màu sắc ở bước wireframe vì chúng làm người xem phân tâm khỏi cấu trúc.

Với một website doanh nghiệp vừa và nhỏ, wireframe trả lời ba câu hỏi:

• Trang này có những khối nội dung nào? Ví dụ trang dịch vụ gồm mở đầu, vấn đề của khách, cách làm, bảng gói, câu hỏi thường gặp, form.
• Khối nào đứng trước, khối nào đứng sau? Thứ tự quyết định khách đọc được gì trước khi bỏ đi.
• Khách bấm vào đâu để liên hệ hoặc mua? Vị trí nút gọi, nút Zalo, form đăng ký.

Wireframe không trả lời câu "đẹp hay xấu". Đó là việc của bước thiết kế giao diện sau đó, nơi các tiêu chí UX/UI như màu, khoảng trắng, độ tương phản được áp vào.

Wireframe, mockup và prototype khác nhau thế nào

Ba khái niệm này hay bị dùng lẫn trong báo giá và hợp đồng. Hiểu đúng giúp anh chị biết mình đang được duyệt cái gì ở mỗi bước.

Tiêu chí	Wireframe	Mockup	Prototype
Trông như thế nào	Khung xám, ô chữ nhật, chữ mẫu	Giống trang thật, có màu, font, ảnh	Giống trang thật và bấm thử được
Trả lời câu hỏi	Có gì, ở đâu, theo thứ tự nào	Trông ra sao, có đúng thương hiệu không	Dùng có thuận không, đi từ trang này sang trang kia thế nào
Ai nên góp ý nhiều nhất	Chủ doanh nghiệp, sales, người chăm khách	Chủ doanh nghiệp, người làm marketing	Người dùng thử, nhân viên sẽ vận hành
Sửa ở bước này	Nhanh, chỉ kéo lại khối	Mất công hơn vì phải chỉnh nhiều màn hình	Mất công nhất vì kéo theo luồng bấm
Có bắt buộc không	Nên có với mọi website trên vài trang	Gần như luôn có	Cần khi có luồng phức tạp như đặt lịch, giỏ hàng

Một website giới thiệu công ty đơn giản có thể đi thẳng từ wireframe sang mockup. Website có tính năng đặt lịch, lọc sản phẩm hay giỏ hàng thì nên có thêm prototype cho riêng các luồng đó.

Vì sao nên duyệt wireframe trước khi thiết kế

Sai cấu trúc thì đẹp mấy cũng không ra khách

Khách vào website để tìm câu trả lời: có làm được việc mình cần không, giá khoảng bao nhiêu, có đáng tin không, liên hệ thế nào. Nếu cấu trúc trang không trả lời theo đúng thứ tự đó, giao diện đẹp chỉ làm khách ở lâu hơn một chút rồi vẫn đi. Wireframe buộc hai bên bàn về nội dung và hành trình trước khi bị cuốn vào màu sắc.

Sửa ở wireframe rẻ hơn sửa ở giao diện

Ở bước wireframe, đổi vị trí khối bảng giá là kéo một ô chữ nhật. Ở bước giao diện, cùng thay đổi đó kéo theo chỉnh ảnh, khoảng cách, bản di động và đôi khi cả các trang khác dùng chung khối. Sang bước lập trình thì còn tốn hơn nữa. Đây là lý do nhiều đơn vị làm web tính số lần sửa giao diện vào chi phí thiết kế website: càng ít sửa muộn, dự án càng gọn.

Người không làm thiết kế vẫn góp ý được

Nhân viên sales của một công ty logistics biết khách hỏi gì nhiều nhất: tuyến nào, thời gian bao lâu, báo giá thế nào. Nhân viên đứng quầy của một chuỗi F&B biết khách cần xem thực đơn, chi nhánh và giờ mở cửa. Nhìn wireframe, họ chỉ ra ngay khối nào thiếu mà không bị phân tâm bởi màu hay ảnh.

Dễ lồng yêu cầu tiếp cận và SEO từ đầu

Tài liệu hướng dẫn thiết kế dễ tiếp cận của W3C WAI khuyên dùng tiêu đề và khoảng cách để nhóm nội dung liên quan, gắn nhãn rõ ràng cạnh từng ô trong form, và thiết kế cho nhiều kích thước màn hình. Những việc này quyết định ngay ở wireframe: mỗi khối có tiêu đề gì, form có những ô nào, bản di động xếp khối ra sao. Cấu trúc tiêu đề rõ ràng cũng giúp Google hiểu trang, khớp với cấu trúc silo của cả website.

Một wireframe website cần thể hiện những gì

Không cần đẹp, nhưng một wireframe đủ dùng để duyệt phải có các phần sau.

Ngoài các khối, wireframe tốt còn ghi chú:

• Nội dung thật hoặc gần thật. Chữ mẫu kiểu "lorem ipsum" làm người duyệt không biết khối đó đủ chỗ cho nội dung thật không. Nên dùng tiêu đề và câu mở thật, dù chưa hoàn chỉnh.
• Bản máy tính và bản điện thoại. Phần lớn khách SME vào từ điện thoại, nên cần thấy thứ tự khối trên màn hình nhỏ.
• Hành động của từng nút. Nút "Nhận báo giá" mở form hay chuyển sang Zalo, form gửi về đâu.
• Trang nào dùng chung bố cục. Ví dụ 6 trang dịch vụ dùng một mẫu, chỉ cần duyệt mẫu một lần.

Với website nhiều trang, nên có thêm sơ đồ trang (sitemap) trước wireframe. Bài website giới thiệu công ty cần những trang nào có danh sách trang gợi ý để anh chị bắt đầu.

Quy trình duyệt wireframe cho chủ doanh nghiệp

Bước thử bằng tình huống là bước hay bị bỏ qua nhất. Hãy chọn 3 tình huống thật, ví dụ với một cửa hàng bán lẻ đồ gia dụng: "khách muốn biết có giao hàng tỉnh không", "khách muốn so hai mẫu sản phẩm", "khách muốn hỏi giá sỉ". Lần theo wireframe xem mỗi tình huống cần bao nhiêu lần bấm và có bị lạc không. Digital.gov cũng gợi ý kiểm tra từng wireframe theo tình huống người dùng cụ thể và hỏi xem họ có hoàn thành việc cần làm không.

Checklist duyệt wireframe trong 30 phút

• ☐ Khối mở đầu nói rõ doanh nghiệp làm gì, cho ai, trong một câu
• ☐ Mỗi trang có đúng một hành động chính và nút đó hiện ngay màn hình đầu
• ☐ Khách tìm được giá hoặc cách nhận báo giá trong tối đa 2 lần bấm
• ☐ Có khối bằng chứng tin cậy dùng thông tin thật, không để trống
• ☐ Form chỉ hỏi những ô thật sự cần, mỗi ô có nhãn rõ ràng
• ☐ Bản điện thoại giữ đúng thứ tự ưu tiên, nút liên hệ không bị đẩy xuống cuối
• ☐ Mỗi khối có tiêu đề nói được nội dung khối đó
• ☐ Các câu hỏi khách hay hỏi qua điện thoại đã có chỗ trả lời trên trang

Khi website lên chạy thật, anh chị có thể kiểm chứng lại cấu trúc đã duyệt bằng Microsoft Clarity để xem khách thật sự dừng và bỏ trang ở khối nào, rồi dùng checklist nghiệm thu website trước khi ký bàn giao.

Những lỗi thường gặp khi làm wireframe

• Bỏ qua wireframe, đi thẳng vào giao diện. Tiết kiệm vài ngày đầu nhưng thường mất nhiều hơn ở các vòng sửa giao diện.
• Duyệt wireframe như duyệt giao diện. Góp ý "màu xám buồn quá" ở bước này không giúp gì. Hãy hỏi "khách có tìm được thứ họ cần không".
• Chỉ duyệt trang chủ. Khách từ Google thường vào thẳng trang dịch vụ hoặc bài viết, nên các trang này cần wireframe riêng.
• Một người duyệt. Nên có ít nhất một người trực tiếp nói chuyện với khách hằng ngày cùng xem.
• Không ghi lại bản đã duyệt. Khi không có bản chốt, mọi góp ý về sau đều thành tranh luận "lúc đầu đã thống nhất thế nào".

Nếu anh chị đang chuẩn bị làm mới website, có thể xem cách X-DMAIC triển khai thiết kế website doanh nghiệp theo cấu trúc silo, trong đó khung trang được thống nhất trước khi lên giao diện. Website đang chạy mà chưa rõ cấu trúc có vấn đề ở đâu thì kiểm tra website miễn phí 10 tiêu chí là điểm bắt đầu nhanh.

Câu hỏi thường gặp

Làm wireframe mất bao lâu?

Tùy số trang và số mẫu bố cục khác nhau. Digital.gov ước tính bản thân phương pháp wireframe mất khoảng 1 đến 3 giờ cho mỗi lần làm, nhưng tổng thời gian phụ thuộc số vòng góp ý. Website dùng chung mẫu cho nhiều trang thì nhanh hơn vì chỉ cần duyệt mỗi mẫu một lần.

Doanh nghiệp có tự vẽ wireframe được không?

Được. Giấy bút, PowerPoint hay công cụ vẽ khung đều dùng được. Bản tự vẽ của chủ doanh nghiệp rất có giá trị vì thể hiện đúng thứ tự ưu tiên trong đầu người hiểu khách nhất. Đơn vị làm web sẽ chuyển nó thành wireframe chuẩn và bổ sung phần kỹ thuật.

Wireframe có làm tăng chi phí thiết kế website không?

Wireframe là một hạng mục công việc nên thường có trong báo giá. Tuy vậy, nó giúp giảm số vòng sửa giao diện và lập trình về sau, vốn là phần tốn kém hơn. Khi so báo giá, nên hỏi rõ gói có bao gồm wireframe cho những trang nào.

Đã có website cũ thì có cần wireframe khi làm lại không?

Có, và càng nên làm. Website cũ cho anh chị dữ liệu thật về trang nào nhiều người vào, khối nào bị bỏ qua. Wireframe cho bản mới nên sửa đúng các điểm yếu đó thay vì chỉ thay giao diện.

Đọc trọn lộ trình Thiết kế website theo thứ tự từ bài nền: xem lộ trình trên trang Blog

---

Đọc tiếp trong chủ đề: Thiết kế website

• Thiết Kế Website Chuẩn UX/UI – 12 Tiêu Chí Và Checklist 2026
• Thiết kế website giới thiệu công ty – Cần những trang nào
• Checklist nghiệm thu website 15 điểm – Kiểm tra gì trước khi ký bàn giao
• Thiết Kế Website Doanh Nghiệp 2026 – Hướng Dẫn Toàn Diện Cho SME
• Chi phí thiết kế website doanh nghiệp 2026 – Mặt bằng giá thị trường và các hạng mục

Muốn biết website đang mất khách ở đâu? Kiểm tra website miễn phí 10 tiêu chí hoặc nhắn Zalo 0394 877 577.