3 Loại Wireframe thường gặp trong thiết kế UI/UX

Wireframe luôn là bước quan trọng trong quá trình thiết kế một sản phẩm UI/UX. Vậy hãy cùng Capi Demy tìm hiểu wireframes là gì và gồm những loại nào nhé!

1. Wireframe là gì?

‍

Wireframes (cấu trúc dây, khung xương) trong thiết kế UI/UX là bản phác thảo trước khi thiết kế một ứng dụng hoặc trang web. Wireframes cho bạn cái nhìn tổng quan, rõ ràng về cấu trúc của từng trang, bố cục, kiến trúc thông tin (IA), luồng người dùng, chức năng và các hành vi dự kiến của người dùng. Thông thường, wireframes có 3 loại chính.

2. Các loại Wireframe thường gặp trong thiết kế UI/UX

2.1. Low Fidelity Wireframe (Wireframe độ trung thực thấp)

‍

Low Fidelity Wireframe là bản phác thảo thô, thể hiện bố cục cơ bản của các phần tử trên màn hình. Bạn chủ yếu sẽ thấy các đường kẻ và khung màu xám. Chúng thường được vẽ trên giấy hoặc bảng trắng.

Loại wireframe này giúp UI/UX Designer nắm được ý tưởng, concept tổng thể về những gì ứng dụng mobile app hoạt động.

>> Đọc thêm: Tìm hiểu về Quy Trình Thiết Kế UI/UX từ A đến Z

2.2. Mid Fidelity Wireframe (Wireframe độ trung thực trung bình)

‍

Mid Fidelity Wireframe là phiên bản chính xác và chi tiết hơn Low Fidelity Wireframe. Vì vậy, chúng thường được tạo ra bằng các công cụ số.

Ở các wireframes độ trung thực trung bình trong thiết kế UI/UX, bạn sẽ nhìn thấy sự xuất hiện của spacing, các headlines hay buttons.

2.3. High Fidelity Wireframe (Wireframe độ trung thực cao)

‍

High Fidelity Wireframe là bản gần nhất với thiết kế cuối cùng của dự án. Phiên bản này cũng cần những công cụ số hỗ trợ để tạo nên.

Các wireframes độ trung thực cao thường bao gồm kiểu chữ, màu sắc, hình ảnh, icon và các button CTA. Những loại wireframe này mất nhiều thời gian cũng như nguồn lực hơn so với độ trung thực trung bình và thấp.

Tổng hợp bởi đội ngũ Capi Demy. 

Nếu bạn có câu hỏi nào đừng ngần ngại kết nối với đội ngũ Capi Demy nhé, chúng mình luôn ở đây và làm điểm tựa vững chắc cho các bạn!

Thông tin liên hệ tư vấn: 

Fanpage: Capi Demy

Email: capidemy@gmail.com

Website:

Capidemy.com

Địa chỉ:

Cơ sở 1 HN: Tầng 6, số 35 Tô Vĩnh Diện, Khương Trung, Thanh Xuân, Hà Nội

Cơ sở 2 HN: Tầng 2 số 2 ngách 28, ngõ 93, Hoàng Văn Thái, Thanh Xuân, Hà Nội.

‍