Bản phác thảo giao diện (wireframe) là bộ khung của một thiết kế. Các ô vuông cho hình ảnh. Các đường kẻ cho văn bản. Các nhãn cho nút bấm. Không có màu sắc. Không có phông chữ. Không có hình ảnh được trau chuốt. Chỉ là cấu trúc, được lược bỏ đến mức tối thiểu.

Bản phác thảo giao diện (wireframe) xuất hiện sớm trong quá trình thiết kế, sau các bản vẽ phác thảo ban đầu nhưng trước các bản mô phỏng chi tiết. Nhiệm vụ của chúng là trả lời các câu hỏi về bố cục: thanh điều hướng đặt ở đâu, có bao nhiêu cột, thứ bậc hiển thị như thế nào. Việc giữ cho chúng trông "xấu xí" là có chủ đích. Nếu bản phác thảo giao diện trông quá hoàn thiện, các bên liên quan sẽ bắt đầu tranh luận về màu xanh lam thay vì xem xét bố cục có hiệu quả hay không.

Bản phác thảo giao diện (wireframe) thể hiện điều gì?

• Vị trí của các yếu tố chính: tiêu đề, thanh điều hướng, nội dung, chân trang
• Kích thước tương đối và mức độ ưu tiên của các thành phần
• Luồng chuyển đổi giữa các màn hình hoặc trang
• Các yếu tố tương tác như nút bấm và biểu mẫu

Các công cụ như Balsamiq và Figma đã giúp việc tạo khung sườn nhanh chóng hơn. Một số nhà thiết kế vẫn sử dụng giấy và bút dạ. Phương tiện không quan trọng bằng tư duy. Khung sườn là một khởi đầu cho cuộc thảo luận. Nó nói lên: đây là cấu trúc, bạn nghĩ sao? Việc thay đổi ở giai đoạn này rất rẻ. Một khi thiết kế trực quan đã hoàn tất, việc di chuyển một thanh bên có nghĩa là phải làm lại tất cả mọi thứ ở các bước tiếp theo. Thay vào đó, hãy di chuyển nó trong khung sườn.