1. Wireframe là gì?
Wireframe là một bố cục cơ bản, đen trắng phác thảo cấu trúc của website hoặc ứng dụng. Wireframe tập trung vào kiến trúc website, xác định kích thước và vị trí của các thành phần trang và xác định đường dẫn giữa các trang.
2. Chức năng của wireframe
- Wireframe giúp người thiết kế dễ hình dung được cấu trúc và tổng thể
- Wireframes hiển thị kiến trúc trang web một cách trực quan
- Wireframe cho phép làm rõ các tính năng của trang web
- Wireframes dễ cập nhật
- Wireframe tiết kiệm thời gian cho toàn bộ dự án
- Wireframe giúp việc sửa đổi nhanh chóng và ít tốn kém
3. Cách thiết lập wireframe
Bước 1: Nghiên cứu UX - tìm hiểu hành vi người tiêu dùng đang hướng đến
Trước khi thiết kế, bạn cần biết mình đang thiết kế cho ai, giải quyết vấn đề gì, tại sao giải pháp của bạn là tốt nhất.
Bầu bằng cách tiến hành nghiên cứu kỹ lưỡng về người dùng và doanh nghiệp của bạn.
Hiểu người dùng của bạn là ai, nhu cầu/mong muốn của họ là gì, nỗi sợ hãi của họ là gì, họ hiện đang sử dụng sản phẩm nào, v.v
Bước 2: Phối hợp với các bên liên quan : dev, SEO, tester.. => đưa ra yêu cầu/mục tiêu
Bước 3: Lập flow - bản đồ luồng người dùng
Luồng người dùng là một sơ đồ minh hoạ trực quan các đường dẫn mà người dùng đi qua ứng dụng hay trang web. Người dùng truy cập trang chủ > sử dụng chức năng tìm kiếm để tìm sản phẩm > nhấp vào liên kết đầu tiên > truy cập trang sản phẩm > nhấp vào nút "mua ngay" > thêm thông tin chi tiết về thẻ tín dụng > đơn hàng được xác nhận > người dùng rời khỏi trang web.
Bước 4: Phác thảo sơ bộ bản mobile
- Bắt đầu bằng cách lập bản đồ luồng người dùng mục tiêu
- Phác thảo phần cốt lõi của luồng người dùng
- Bắt đầu tạo khung bằng cách thiết lập khung di động
- Xác định bố cục bằng hộp
- Sử dụng các mẫu thiết kế
- Đưa vào bản sao thực tế
- Kết nối các trang với nhau để tạo luồng
Kiểm tra các thiết kế
Bước 5: Phác thảo sơ bộ bản PC
- Chọn kích thước phù hợp
- Có thể thay đổi các thành phần để đạt được thiết kế trực quan, thân thiện với người dùng.
- Cân nhắc tập trung vào cách sắp xếp nội dung và ưu tiên thông tin dựa trên tầm quan trọng của nó.
- Làm nổi bật các nút, liên kết và các mục có thể nhấp khác.
- Bao gồm các yếu tố tĩnh như menu, tiêu đề, chân trang, v.v.
- Lựa chọn độ trung thực: Quyết định mức độ chi tiết. Các giai đoạn đầu có thể sử dụng các bản phác thảo có độ trung thực thấp, trong khi các dự án chi tiết hướng tới các thiết kế có độ trung thực cao.
Bước 6: Thiết kế wireframe hoàn chỉnh
Tạo các mô phỏng chi tiết và chuyển đổi thành một bản khả thi khi bản phác thảo được thông qua.
4. Một số công cụ thiết kế wireframe
a. Sketch
Ưu điểm:
- Người xem và khách không giới hạn
- Trình chỉnh sửa hoạt động ngoại tuyến
Nhược điểm:
Được tạo riêng cho Mac
b. Moqups
Ưu điểm
- Cực kỳ thân thiện với người mới bắt đầu và dễ sử dụng
- Nhiều tùy chọn cộng tác nhóm
- Bạn có thể sử dụng nó cho sơ đồ luồng, sơ đồ, khung dây và mô hình
Nhược điểm
- Bạn không thể sử dụng khi ngoại tuyến
- Tính năng hạn chế so với các công cụ khác có trong danh sách này
c. Figma
Ưu điểm:
- Triển khai bản cập nhật hàng tuần
- Số lượng người xem không giới hạn để cải thiện khả năng cộng tác
Nhược điểm:
Có tính phí
d. UXPin
Ưu điểm
- Lập khung lưới có độ trung thực cao
- Khả năng trình bày trực tiếp và lập tài liệu mạnh mẽ
- Tập trung vào hoạt động thiết kế; mỗi thành phần đều đi kèm với HTML
Nhược điểm
Nó có thể có đường cong học tập khá dốc
e. Justinmind
Ưu điểm:
- Các thành phần UI được cập nhật thường xuyên
- Phiên bản miễn phí
Nhược điểm:
- Phiên bản miễn phí nhưng hạn chế nhiều tính năng
- Để xoá thương hiệu Justinmind cần phải tốn phí
f. Uizard
Ưu điểm
- Tạo khung lưới từ bản phác thảo vẽ tay
- Nhập ảnh chụp màn hình của các ứng dụng/trang web khác và biến chứng thành khung lưới có thể chỉnh sửa
Nhược điểm
Trình tạo văn bản AI tạo ra kết quả chất lượng thấp
Xem thêm: Contact Form Trong Web/App | UX UI Design
