Phác thảo ý tưởng cùng wireframe

Sau khi đã thu thập đầy đủ yêu cầu từ phía khách hàng và đã trao đổi, thỏa thuận dựa trên các yêu cầu trên thì theo kế hoạch, chúng ta bắt đầu phác thảo và trình bày ý tưởng thiết kế – vẽ wireframe.

1. Wireframe là gì?

Vẽ wireframe tức là phác thảo và bố trí các thành phần cơ bản của trang web sao cho hợp lý và phải tuân thủ nguyên tắc: chỉ tập trung vào bố cục (layout), không tập trung giao diện đồ họa (hình ảnh, màu sắc, font chữ, …). Hãy tưởng tượng một họa sĩ phác thảo nhân vật truyện tranh như hình sau:

Phác thảo ý tưởng cùng wire frameBạn có thể vẽ wireframe bằng công cụ tùy thích như vẽ trên giấy, dùng công cụ đồ họa (photoshop, …). Mỗi cách thể hiện đều có những ưu, nhược điểm riêng. Ví dụ, bạn vẽ trên giấy, bạn vẫn có thể chia sẻ cho đồng nghiệp gần bạn nhưng muốn chia sẻ cho người ở xa thì khá bất tiện và hơi khó chỉnh sửa hoặc có thể là mất thời gian hơn là bạn sử dụng tools. Sau đây là hình wireframe của SharePoint 2010:

Phác thảo ý tưởng cùng wire frame

Vì chỉ là phác thảo nên trong bản vẽ thường chỉ dùng 2 màu trắng đen. Chỉ một số thành phần đặc thù (như đường dẫn, …) sẽ có hình ảnh, màu đặc trưng để phân biệt. Lý do đơn giản là vì wireframe tập trung vào bố cục là chính và chắc chắn sẽ chỉnh sửa sau này theo yêu cầu của khác hàng. Do vậy mà hầu như tất cả các tools wireframe ít cho bạn sự lựa chọn về màu sắc, hình ảnh sặc sỡ.

2. Wireframe tool miễn phí

Việc vẽ wireframe sẽ là tiền đề cho bạn có thể tạo dựng 1 bản design hoàn chỉnh cho nên wireframe khá quan trọng trong quá trình thiết kế. Tuy nhiên, với những website nhỏ như web bán hàng, cá nhân thì chúng ta có thể bỏ qua bước phác thảo wireframe mà có thể design trực tiếp trên Photoshop (hoặc công cụ đồ họa thay thế khác).

Cám ơn các bạn đã đọc bài viết này!

Duy Viking

Gửi bình luận tại đây