Ở bài trước mình đã hướng dẫn các bạn Cách tạo Wireframe bằng Google Docs? - ở bài viết này mình sẽ hướng dẫn các bạn cách vẽ wireframe nhé!

1. Vẽ wireframe là gì?

Nôm na, Wireframe là một bản thiết kế nháp, chứa nội dung cơ bản của một giao diện website hay ứng dụng trong UI UX. Chính vì thế, các designer cũng thường trao đổi xoay quanh wireframe để dễ dàng sửa chứ không phải bản thiết kế cuối trên máy.

Mẫu minh hoạ Wireframe:

2. Cách vẽ wireframe?

Bước 1: Xác định tỷ lệ khung hình của cửa sổ trình duyệt hoặc thiết bị của bạn.

Tỷ lệ này không nhất thiết phải chính xác, đặc biệt nếu bạn đang phác thảo bằng tay.

- Đối với khung dây web, một số kích thước điểm dừng phổ biến là 1024x768 pixel và 1920x1080 pixel. 

- Đối với thiết bị di động, kích thước sẽ dao động dựa trên thiết bị cụ thể (ví dụ: máy tính bảng)

Bước 2: Vẽ định hướng và tìm kiếm.

Điều hướng và tìm kiếm thêm ngữ cảnh vào wireframe. Nếu bạn đang theo một thiết kế hoặc mẫu hiện có, hãy vẽ khung đã có sẵn.

Tính năng tìm kiếm có thể được thể hiện thông qua biểu tượng tìm kiếm và hộp tìm kiếm được liên kết, như trong các ví dụ bên dưới. Nếu cần, bạn có thể hiển thị đề xuất tìm kiếm trong hình chữ nhật bên dưới hộp tìm kiếm.

Bước 3: Xác định và vẽ các yếu tố lớn nhất trong thiết kế của bạn. 

Tiếp theo, hãy tập trung vào việc vẽ các phần chính trong ý tưởng của bạn — ví dụ: tiêu đề, biểu ngữ và hình ảnh lớn hoặc thậm chí là các phần lớn của nội dung. Dưới đây là một số quy ước wireframing phổ biến:

- Tiêu đề được minh họa bằng cách sử dụng các dòng dày.

- Văn bản nội dung được phác thảo bằng các đường mảnh hơn.

- Một hình ảnh được biểu diễn dưới dạng một hình chữ nhật có dấu x.

Bước 4: Điền các thông tin còn lại. 

Danh sách thả xuống được làm bằng hình chữ nhật và dấu mũ.

- Hộp kiểm và các nút radio có hình vuông hoặc hình tròn tương ứng.

- Các nút có thể được biểu diễn theo nhiều cách khác nhau.

- Biểu ngữ có một hoặc hai dòng văn bản.

- Các hộp thoại chứa tiêu đề, 1–2 dòng văn bản, 1–2 nút và biểu tượng Hủy .

- Các biểu tượng có thể được thể hiện theo cách giống như hình ảnh (có dấu X).

3. Phần mềm vẽ wireframe?

Mình sẽ tổng hợp cho mọi người 5 phần mềm vẽ wireframe tốt nhất?

- Balsamiq Mockups:


Hệ điều hành: Mac, Linux, Windows và web - based

Giá: $ 79

Balsamiq Mockups bao gồm các yếu tố kéo - thả, từ các nút bấm cho đến dạng list, mỗi kiểu đều giống như được vẽ bằng tay. Một điều cơ bản của công cụ này là gây khó khăn khi tạo các mock-ups và chúng có độ trung thực thấp, điều này nhằm khuyến khích càng nhiều những thông tin phản hổi càng tốt.

- Axure

Hệ điều hành: Mac & Windows

Giá: 289 $ - 589 $

Cũng như tạo ra các mock-up, Axure cho phép bạn thêm chức năng cho việc sắp xếp và tạo Prototype tương tác. Các tính năng của công cụ wireframing này bao gồm sitemap và ‘widgets’ đa dạng trong các form của nhiều giao diện người dùng khác nhau. Mock-ups HTML tương tác có thể được tạo ra cho cả website và apps, bạn thậm chí có thể xem thiết kế ứng dụng của mình trên điện thoại với việc tích hợp sẵn một chức năng chia sẻ.

- Pidoco

Nền tảng: Web-based

Giá: $ 9 - $ 59 mỗi tháng

Pidoco tương tự như Axure, công cụ bao gồm các thư viện của các yếu tố giao diện kéo-thả khác nhau, cũng như chúng có khả năng thêm nhiều trang và lớp. Mẫu của bạn có thể được chia trực tiếp với khách hàng, có chức năng phản hồi và thảo luận. Xem mẫu của bạn trên điện thoại để dễ dàng tải ứng dụng Pidoco.

- Viseo

Nền tảng: Windows

Giá: $ 599.95- $ 999

Sức mạnh thực sự của Viseo nằm trong sơ đồ kỹ thuật hơn là wireframing. Tuy nhiên, những người đã quen với các ứng dụng của Microsoft như word hoặc excel, giao diện này sẽ rất quen thuộc. Nó khá phiền phức, Viseo không phục vụ nhiều công cụ như Swipr, mà chúng cho phép bạn tạo và xuất ra các mẫu [HTML] hữu ích.

- InDesign

Hệ điều hành: Mac, Windows

Giá: £ 660,51

Bằng cách đưa hình ảnh động, video và trạng thái của đối tượng, nó dễ dàng tạo ra một mock-up cho website hoặc app trong các form của PDF với Indesign. Phần mềm này cũng bao gồm khả năng tạo các thư viện của các yếu tố trang, vì vậy bạn có thể tạo ra bộ sưu tập các biểu mẫu giao diện khác nhau.