Tìm hiểu cách sử dụng Wireframes đơn giản để bắt đầu thiết kế của bạn
Một wireframe Web là một hướng dẫn trực quan đơn giản để cho bạn thấy một trang web trông như thế nào. Nó cho thấy cấu trúc của một trang , không sử dụng bất kỳ đồ họa hoặc văn bản nào. Một wireframe trang web sẽ hiển thị toàn bộ cấu trúc trang web - bao gồm các trang liên kết đến đâu.
Web wireframes là một cách tuyệt vời để bắt đầu công việc thiết kế của bạn. Và trong khi có thể tạo ra các khung hình phức tạp với số lượng chi tiết khổng lồ, kế hoạch của bạn có thể bắt đầu bằng khăn ăn và cây bút. Chìa khóa để tạo ra các khung hình tốt là loại bỏ tất cả các yếu tố hình ảnh. Sử dụng hộp và đường để thể hiện hình ảnh và văn bản.
Những điều cần bao gồm trong một wireframe trang Web:
- hộp cho các yếu tố đồ họa chính
- vị trí của tiêu đề và tiểu thủ trưởng
- một cấu trúc bố trí đơn giản
- lời gọi hành động
- khối văn bản
Làm thế nào để xây dựng một Wireframe Web đơn giản
Tạo một wireframe trang web bằng cách sử dụng bất kỳ mẩu giấy nào bạn có. Đây là cách tôi làm điều đó:
- Vẽ một hình chữ nhật lớn - điều này có thể đại diện cho toàn bộ trang hoặc chỉ phần hiển thị. Tôi thường bắt đầu với phần hiển thị và sau đó mở rộng nó để bao gồm các phần tử nằm dưới màn hình đầu tiên.
- Phác họa bố cục - có phải là 2 cột, 3 cột không?
- Thêm vào một hộp cho đồ họa tiêu đề - Vẽ lên các cột của bạn nếu bạn muốn nó là một tiêu đề duy nhất phía trên các cột hoặc chỉ thêm nó vào nơi bạn muốn.
- Viết "Headline", nơi bạn muốn tiêu đề H1 của bạn được.
- Viết "Sub-Head", nơi bạn muốn H2 và tiêu đề thấp hơn được. Nó giúp nếu bạn làm cho chúng tỷ lệ thuận - h2 nhỏ hơn h1, h3 nhỏ hơn h2, v.v.
- Thêm vào hộp cho các hình ảnh khác
- Thêm vào điều hướng. Nếu bạn đang lập kế hoạch các tab, chỉ cần vẽ hộp và viết "điều hướng" ở trên cùng. Hoặc đặt danh sách có dấu đầu dòng vào các cột nơi bạn muốn điều hướng. Đừng viết nội dung. Chỉ cần viết "điều hướng" hoặc sử dụng một dòng để đại diện cho văn bản.
- Thêm các phần tử bổ sung vào trang - xác định nội dung của chúng với văn bản, nhưng không sử dụng văn bản nội dung thực tế. Ví dụ: nếu bạn muốn nút gọi hành động ở phía dưới bên phải, hãy đặt hộp ở đó và gắn nhãn là "gọi hành động". Đừng viết "Mua ngay!" trong hộp đó.
Một khi bạn đã có một wireframe đơn giản được viết và bạn sẽ không mất quá 15 phút để phác thảo một khung hình, hiển thị nó cho người khác. Yêu cầu họ nếu có bất cứ điều gì còn thiếu và cho phản hồi khác. Dựa trên những gì họ nói bạn có thể viết một wireframe khác hoặc giữ một cái bạn có.
Tại sao Wireframes giấy là tốt nhất cho bản nháp đầu tiên
Mặc dù có thể tạo các wireframes bằng các chương trình như Visio, cho các phiên động não ban đầu của bạn, bạn nên dính vào giấy. Giấy không có vẻ là vĩnh viễn, và nhiều người sẽ giả sử bạn đã ném nó lại với nhau trong 5 phút và do đó không ngần ngại cung cấp cho bạn phản hồi tốt. Nhưng khi bạn sử dụng một chương trình để tạo ra các wireframes lạ mắt với các hình vuông và màu sắc hoàn hảo, bạn có nguy cơ bị cuốn vào chương trình và dành hàng giờ để hoàn thiện thứ gì đó chưa bao giờ phát trực tiếp.
Giấy wireframes là dễ dàng để làm. Và nếu bạn không thích nó, bạn chỉ cần quấy rầy tờ giấy, ném nó vào tái chế và lấy một tờ mới.