Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn được giao thiết kế trang chủ cho một startup giao đồ ăn ở TP.HCM. Bạn mở Figma lên, chọn font đẹp, phối màu cam tươi cho hợp với ẩm thực, kéo thả ảnh món ăn long lanh, đổ bóng, bo góc cẩn thận. Sau ba ngày làm việc, bạn gửi cho khách. Và khách nói: "Ơ, sao phần đặt món lại nằm dưới cùng vậy em? Anh muốn khách thấy nút đặt món ngay khi vào trang chứ."
Thế là ba ngày công sức gần như phải làm lại từ đầu. Không phải vì bạn phối màu xấu, mà vì cấu trúc trang sai ngay từ gốc. Bạn đã mất công tô son trát phấn cho một bộ khung mà đáng lẽ cần được duyệt trước.
Đây chính là lý do tồn tại của wireframing. Wireframe là bước "vẽ phác bộ xương" của giao diện trước khi đụng tới màu sắc, font chữ hay hình ảnh. Nó rẻ, nhanh, và quan trọng nhất là dễ sửa. Trong bài này, bạn sẽ học wireframe thực sự là gì, các cấp độ chi tiết (fidelity) khác nhau, và một quy trình từng bước để dựng wireframe cho bất kỳ trang nào. Đây là kỹ năng tách biệt giữa một người "vẽ giao diện đẹp" và một người thực sự thiết kế trải nghiệm.
Khái niệm cốt lõi
Wireframe là gì?
Wireframe là một bản phác thảo độ chi tiết thấp (low-fidelity) của một màn hình, tập trung hoàn toàn vào cấu trúc (structure) và nội dung (content) — chứ không phải vào màu sắc, typography hay hình ảnh cụ thể.
Hãy hình dung wireframe giống như bản vẽ kiến trúc của một ngôi nhà: nó cho biết phòng khách ở đâu, cầu thang đặt chỗ nào, cửa sổ hướng ra sao. Nó không nói tường sơn màu gì hay ghế sofa bọc da hay vải. Những thứ đó là việc của khâu sau.
Một wireframe điển hình chỉ dùng:
- Hộp xám và đường viền để biểu thị các khối nội dung.
- Hình chữ nhật có dấu chéo X để đại diện cho ảnh (chưa cần ảnh thật).
- Đường kẻ ngang hoặc chữ "Lorem ipsum" để biểu thị đoạn text.
- Nút bấm dạng khung đơn giản với nhãn chữ.
Wireframe trả lời những câu hỏi gì?
Một wireframe tốt giúp bạn và team thống nhất về:
- Information hierarchy — nội dung gì quan trọng nhất, được đặt nổi bật ở đâu.
- Layout — bố cục các khối: header, nội dung chính, sidebar, footer.
- Functionality — các thành phần tương tác: nút, form, menu nằm ở đâu, dẫn đi đâu.
- Content priority — cái gì hiện ra ngay (above the fold), cái gì phải cuộn xuống mới thấy.
Các cấp độ fidelity
"Fidelity" nghĩa là độ chi tiết, độ "giống thật" của bản thiết kế. Có ba cấp độ chính bạn cần phân biệt:
Low-fidelity (low-fi) — phác thảo bằng tay hoặc khối đơn giản. Đây là sketch nguệch ngoạc trên giấy, trên bảng trắng, hoặc các hộp xám thô trong công cụ số. Mục tiêu: dạo nhanh qua nhiều ý tưởng bố cục trong vài phút. Một trang low-fi có thể vẽ xong trong 5–10 phút. Ưu điểm lớn nhất: vì nó trông "chưa hoàn thiện", người xem thoải mái góp ý mạnh tay, không ngại "chê" vì biết bạn chưa đầu tư nhiều công sức.
Mid-fidelity (mid-fi). Đây là cấp độ phổ biến nhất trong thực tế công việc. Vẫn xám trắng, không màu mè, nhưng đã có tỷ lệ chính xác, khoảng cách hợp lý, văn bản giả (placeholder) đúng độ dài, và các thành phần UI rõ ràng. Đây là dạng wireframe bạn mang đi họp với khách hàng hoặc developer. Phần lớn khi người ta nói "wireframe" trong công việc, họ ngụ ý mid-fi.
High-fidelity (high-fi). Gần với sản phẩm cuối: có màu, font, ảnh thật, đôi khi cả tương tác. Về mặt kỹ thuật đây đã bước sang lãnh địa mockup (chúng ta sẽ học kỹ ở Bài 37), nên trong phạm vi wireframing, ta thường dừng ở mid-fi.
Vì sao đừng nhảy thẳng vào high-fidelity?
Có một nguyên tắc vàng: fidelity của bản thiết kế nên tỷ lệ thuận với độ chắc chắn về ý tưởng. Khi ý tưởng còn mơ hồ, làm low-fi. Khi đã chắc chắn về cấu trúc, mới nâng dần lên.
Lý do tâm lý rất thú vị: khi bạn đưa một bản thiết kế quá đẹp cho người khác xem sớm, họ có xu hướng nghĩ "à, gần xong rồi" và chỉ góp ý vụn vặt ("đổi giúp anh màu nút thành xanh"). Họ ngại đặt câu hỏi lớn ("liệu cả luồng này có đúng không?") vì sợ làm bạn phải đập đi xây lại cái đã đẹp. Wireframe xấu một cách có chủ đích sẽ "mở khóa" những phản hồi thẳng thắn và giá trị nhất — đúng lúc sửa còn rẻ.
Tình huống thực tế
Tình huống 1 — App đặt vé xem phim "CinePass" và bài học về việc phác giấy
Một nhóm 3 sinh viên ở Hà Nội làm đồ án app đặt vé xem phim tên CinePass. Bạn leader hào hứng mở Figma, dành 4 ngày dựng màn hình chọn ghế cực kỳ công phu: ghế gradient, hiệu ứng hover, sơ đồ rạp 3D. Khi demo với giảng viên, thầy hỏi một câu đơn giản: "Sau khi chọn ghế xong, người dùng thanh toán thế nào? Có chọn được combo bắp nước trước hay sau khi chọn ghế?" Cả nhóm đứng hình — họ chưa hề nghĩ tới luồng đó vì đã dồn toàn bộ năng lượng vào một màn hình đẹp.
Họ phải làm lại. Lần này, nhóm bắt đầu bằng cách vẽ tay toàn bộ 8 màn hình lên giấy A4 trong một buổi chiều: từ trang chủ, danh sách phim, chi tiết phim, chọn suất, chọn ghế, chọn combo, thanh toán, đến xác nhận. Mỗi màn chỉ là hộp và mũi tên. Buổi vẽ này tốn 2 tiếng nhưng phơi bày ngay ba lỗ hổng luồng mà 4 ngày làm Figma không phát hiện ra.
Bài học: Thời gian bỏ ra để phác giấy gần như bằng không so với thời gian dựng UI chi tiết, nhưng giá trị phát hiện lỗi cấu trúc thì cao gấp bội. Luôn nhìn thấy toàn bộ luồng trước khi đẹp hóa một màn hình.
Tình huống 2 — Tiki và việc duyệt cấu trúc trang sản phẩm với mid-fi
Hãy hình dung một sàn thương mại điện tử kiểu Tiki cần làm lại (redesign) trang chi tiết sản phẩm. Trang này cực kỳ phức tạp: ảnh sản phẩm, giá, voucher, nút mua, đánh giá, sản phẩm liên quan, thông tin vận chuyển, mô tả, hỏi đáp... Nếu designer nhảy thẳng vào high-fi, mỗi vòng phản hồi từ product manager sẽ tốn nhiều ngày.
Thay vào đó, team dựng một mid-fi wireframe chỉ toàn khối xám trắng nhưng đúng tỷ lệ. Trong buổi review, PM nhìn vào và lập tức thấy vấn đề: khối "thông tin vận chuyển" và "voucher" đang đặt quá thấp, khiến người dùng phải cuộn nhiều mới biết phí ship — một yếu tố quyết định mua hàng ở thị trường Việt Nam, nơi khách rất nhạy cảm với phí vận chuyển. Họ kéo khối đó lên ngay cạnh giá. Việc chỉnh sửa này mất 10 phút trên wireframe. Nếu phát hiện ở giai đoạn high-fi với đầy đủ ảnh và màu, nó có thể kéo theo cả ngày dựng lại.
Bài học: Mid-fi wireframe là "sân chơi" lý tưởng để tranh luận về thứ tự ưu tiên nội dung. Vì rẻ và nhanh sửa, nó khuyến khích team thử nhiều phương án bố cục trước khi cam kết.
Tình huống 3 — Một agency và sự cố "khách duyệt nhầm wireframe"
Một agency nhỏ ở Đà Nẵng làm web cho khách sạn. Họ gửi cho khách một wireframe mid-fi nhưng lỡ dùng ảnh stock thật và màu xanh thương hiệu để "cho dễ hình dung". Khách hàng — không quen với quy trình thiết kế — tưởng đây đã là bản gần cuối, duyệt luôn và còn khoe trên Facebook công ty. Khi designer giao bản high-fi thật sự (khác đi nhiều về bố cục sau khi tối ưu), khách nổi giận: "Sao khác hẳn cái tôi đã duyệt?"
Sự cố này dạy agency một quy tắc: giữ wireframe xám trắng tuyệt đối, và đóng dấu "WIREFRAME — chưa phải thiết kế cuối" rõ ràng trên file. Từ đó, mỗi giai đoạn được khách hiểu đúng vai trò, không còn hiểu lầm.
Bài học: Fidelity không chỉ là công cụ làm việc, mà còn là công cụ giao tiếp kỳ vọng. Wireframe trông càng "thô", khách càng hiểu đúng rằng đây là bản nháp cần góp ý, chứ không phải bản chốt.
Hướng dẫn từng bước
Đây là quy trình dựng wireframe cho một trang bất kỳ. Ta lấy ví dụ trang chủ một tiệm cà phê.
Bước 1 — Liệt kê nội dung trước, vẽ sau. Trước khi vẽ một hộp nào, viết ra danh sách mọi thứ trang cần có: logo, menu điều hướng, câu chào (headline), nút "Đặt bàn", giới thiệu ngắn, vài món signature, địa chỉ + bản đồ, footer. Wireframe là bài toán sắp xếp nội dung, nên phải biết mình có nội dung gì đã.
Bước 2 — Xác định mục tiêu chính của trang. Mỗi trang nên có một hành động ưu tiên. Với tiệm cà phê, đó có thể là "Đặt bàn" hoặc "Xem menu". Mục tiêu này quyết định cái gì phải nổi bật nhất.
Bước 3 — Phác low-fi trên giấy. Lấy giấy bút, vẽ nhanh 3–4 phương án bố cục khác nhau, mỗi phương án chỉ tốn 2 phút. Đừng cầu toàn. Vẽ nguệch ngoạc cũng được. Mục đích là dạo qua nhiều ý tưởng, chứ chưa chọn.
Bước 4 — Chọn một phương án và xác định vùng "above the fold". Vẽ một đường kẻ ngang biểu thị mép dưới màn hình khi chưa cuộn. Mọi thứ trên đường này là cái người dùng thấy đầu tiên. Đảm bảo mục tiêu chính (nút "Đặt bàn") nằm trên đường này.
Bước 5 — Dựng mid-fi trong công cụ số. Mở Figma (hoặc Balsamiq, Whimsical). Dùng hộp xám, khung đơn giản dựng lại phương án đã chọn với tỷ lệ và khoảng cách chuẩn. Dùng text giả đúng độ dài thực tế — đừng để headline giả chỉ 2 chữ trong khi thực tế sẽ 10 chữ, vì độ dài ảnh hưởng tới bố cục.
Bước 6 — Thêm chú thích (annotation). Ghi chú bên cạnh các thành phần: "nút này dẫn tới form đặt bàn", "khối này hiện 3 món, cuộn ngang trên mobile". Annotation biến wireframe tĩnh thành tài liệu giải thích được luồng.
Bước 7 — Mang đi review và lặp lại. Đưa cho đồng đội hoặc khách xem, thu phản hồi, sửa. Vì là wireframe, mỗi vòng sửa chỉ tốn vài phút. Lặp đến khi cấu trúc được duyệt — rồi mới chuyển sang bước thiết kế chi tiết.
Lỗi thường gặp & mẹo
Lỗi 1 — Tô màu, chọn font ngay từ wireframe. Đây là cám dỗ lớn nhất. Bạn vừa đặt cái nút xám là tay đã ngứa ngáy muốn tô xanh. Đừng. Mỗi phút bạn dành cho màu sắc ở giai đoạn này là một phút lãng phí nếu cấu trúc thay đổi. Mẹo: ép mình chỉ dùng thang xám (đen, trắng, ba sắc xám) cho tới khi cấu trúc được duyệt.
Lỗi 2 — Dùng "Lorem ipsum" cho mọi text. Text giả tiếng Latin có nhịp chữ khác tiếng Việt và che giấu vấn đề độ dài. Mẹo: dùng nội dung giả gần đúng thực tế — nếu headline thật sẽ là "Cà phê rang xay mỗi sáng", hãy viết một câu tiếng Việt dài tương đương, đừng để "Lorem ipsum dolor".
Lỗi 3 — Wireframe quá chi tiết đến mức thành mockup. Nếu bạn thấy mình đang căn chỉnh độ đổ bóng trên wireframe, bạn đã đi quá xa. Mẹo: đặt giới hạn thời gian — một wireframe trang đơn không nên tốn quá 30–45 phút.
Lỗi 4 — Chỉ làm một màn hình lẻ. Wireframe mạnh nhất khi thể hiện cả luồng (user flow) với mũi tên nối các màn. Một màn đơn lẻ giấu đi các vấn đề chuyển tiếp. Mẹo: luôn vẽ ít nhất chuỗi 3–4 màn liên quan tới một tác vụ chính.
Lỗi 5 — Quên trạng thái mobile. Nhiều người chỉ wireframe bản desktop. Nhưng phần lớn lưu lượng web ở Việt Nam đến từ điện thoại. Mẹo: phác song song một cột wireframe mobile bên cạnh desktop để sớm thấy nội dung sắp xếp lại thế nào.
Mẹo công cụ: Với người mới, Balsamiq cố tình cho ra wireframe trông như vẽ tay (giúp tránh sa đà vào chi tiết). Whimsical nhanh và gọn cho sơ đồ + wireframe. Figma linh hoạt nhất và là nơi bạn sẽ tiến lên mockup sau này — nên nếu muốn học một công cụ, hãy đầu tư vào Figma.
Bài tập thực hành
- Phác giấy (15 phút). Chọn một app bạn dùng hằng ngày (Grab, ShopeeFood, Momo...). Lấy giấy bút, vẽ low-fi lại 4 màn hình của một luồng cụ thể — ví dụ luồng "đặt một ly trà sữa" trên ShopeeFood. Chỉ dùng hộp, đường kẻ và mũi tên. Không tẩy xóa cầu toàn.
- Dựng mid-fi (45 phút). Mở Figma. Dựng mid-fi cho trang chủ một tiệm bánh mì với đầy đủ: header + menu, khu hero có nút "Đặt online" nổi bật trên fold, khối 3 món bán chạy, khối giới thiệu, footer có địa chỉ. Chỉ dùng thang xám. Dùng text giả tiếng Việt đúng độ dài.
- Thêm annotation (10 phút). Trên bản mid-fi vừa làm, thêm ít nhất 5 chú thích giải thích hành vi: nút dẫn đi đâu, khối nào cuộn ngang trên mobile, phần nào hiện khác khi đăng nhập.
- Xin phản hồi. Gửi wireframe cho một người bạn và hỏi đúng một câu: "Nếu bạn muốn đặt bánh, bạn sẽ bấm vào đâu đầu tiên?" Nếu họ ngập ngừng hoặc bấm sai chỗ, cấu trúc của bạn cần sửa — và bạn vừa tiết kiệm được nhiều ngày làm việc.
Tóm tắt
- Wireframe là bản phác low-fidelity tập trung vào cấu trúc và nội dung, cố tình bỏ qua màu sắc, font và ảnh để mọi người tập trung vào những câu hỏi quan trọng nhất.
- Ba cấp độ fidelity: low-fi (sketch giấy, dạo ý tưởng nhanh), mid-fi (xám trắng đúng tỷ lệ — dạng dùng nhiều nhất trong công việc), high-fi (đã bước sang mockup, học ở Bài 37).
- Nguyên tắc vàng: fidelity tỷ lệ thuận với độ chắc chắn về ý tưởng — ý tưởng càng mơ hồ, càng nên low-fi. Đừng nhảy thẳng vào high-fi vì nó khiến sửa cấu trúc đắt đỏ và khiến người xem ngại góp ý lớn.
- Quy trình: liệt kê nội dung → xác định mục tiêu trang → phác low-fi nhiều phương án → chọn và xác định above-the-fold → dựng mid-fi → annotation → review và lặp.
- Wireframe vừa là công cụ làm việc, vừa là công cụ giao tiếp kỳ vọng: trông càng thô, người xem càng hiểu đúng đây là bản nháp cần phản hồi thẳng thắn.