Wireframes Web 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 nó có thể để tạo wireframes phức tạp với số lượng lớn các chi tiết, lập kế hoạch của bạn có thể bắt đầu bằng một khăn ăn và một cây bút. Chìa khóa để làm cho wireframes tốt là để lại tất cả các yếu tố thị giác. Sử dụng hộp và đường để đại diện cho hình ảnh và văn bản.
Những điều bao gồm trong một trang web wireframe:
hộp cho các yếu tố đồ họa chính
vị trí của tiêu đề và người đứng đầu
bố trí cấu trúc đơn giản
kêu gọi hành động
văn bản khối
Làm thế nào để xây dựng một Wireframe Web đơn giản
Tạo một khung dây trang web sử dụng bất kỳ phế liệu giấy, bạn có ích. Đâ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 hoặc toàn bộ trang hoặc chỉ là phần nhìn thấy được. Tôi thường bắt đầu với phần có thể nhìn thấy, và sau đó mở rộng nó để bao gồm các yếu tố đó sẽ là dưới đây gấp.
Phác thảo bố trí 2 cột, 3 cột?
Thêm vào một hộp cho một tiêu đề đồ họa - Vẽ trên các cột của bạn nếu bạn muốn nó là một tiêu đề duy nhất ở trên các cột, hoặc chỉ cần thêm nó vào nơi bạn muốn 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 tiêu đề H2 và thấp hơn được. Nó giúp nếu bạn làm cho họ theo tỷ lệ h2 nhỏ hơn so với h1, h3 nhỏ hơn h2,.
Thêm vào hộp cho hình ảnh khác
Thêm trong việc điều khiển. Nếu bạn đang lập kế hoạch các tab, chỉ cần vẽ hộp, và viết "chuyển hướng" trên đầu trang. Hoặc đặt gạch đầu dòng liệt kê các cột mà bạn muốn chuyển hướng không ghi các nội dung Chỉ cần viết "navgation" hoặc sử dụng một đường để đại diện cho văn bản .
Thêm các yếu tố bổ sung trang - xác định những gì họ với các văn bản, nhưng không sử dụng nội dung văn bản thực tế. Ví dụ, nếu bạn muốn có một cuộc gọi đến hành động nút ở phía dưới bên phải, đặt một hộp ở đó, và đặt tên nhãn là "kêu gọi hành động". Không viết "Mua hàng"! trong hộp thoại đó.
Một khi bạn đã có khung dây đơn giản của bạn bằng văn bản, và nó không nên đưa bạn hơn 15 phút để phác thảo một trong những động, hiển thị nó cho người khác. Yêu cầu họ nếu có bất cứ điều gì mất tích và cho ý kiến phản hồi khác. Dựa vào những gì họ nói rằng bạn có thể viết một khung dây khác hoặc giữ một trong những bạn có.
Tại sao Wireframes giấy tốt nhất cho nháp đầu tiên
Trong khi nó có thể để tạo wireframes sử dụng chương trình như Visio, buổi ban đầu não của bạn, bạn nên dính vào giấy. Giấy không có vẻ như lâu dài, và nhiều người sẽ cho rằng 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 thông tin phản hồi tốt. Nhưng khi bạn sử dụng một chương trình để tạo wireframes ưa thích với hình vuông và màu sắc hoàn hảo, bạn có nguy cơ bị bắt trong chương trình chính nó và giờ chi tiêu hoàn thiện một cái gì đó không bao giờ sẽ đi trực tiếp.
Wireframes giấy dễ dàng để làm. Và nếu bạn không thích nó, bạn chỉ cần hấp thụ xung lực lên trên tờ giấy, ném nó trong việc tái chế và lấy một tờ mới.