Thiết kế Wireframe – Wireframes và Vai trò của họ trong Thiết kế Web là gì

Thiết kế Wireframe là quá trình tạo ra một hướng dẫn trực quan sơ bộ về khung trang web tiềm năng. Tài liệu này sau đó có thể phục vụ như là một kế hoạch chi tiết cho công ty thiết kế web để mở rộng. Hãy nhớ rằng, phát triển một trang web tùy chỉnh là một quá trình đa điểm. Việc tạo ra các wireframe trang web đại diện cho sự khởi đầu của giai đoạn thiết kế.

Mục tiêu của thiết kế wireframe là thiết lập sơ đồ về cách thông tin sẽ được trình bày và ưu tiên cho khách truy cập, ở đâu và cách các yếu tố liên quan đến chức năng của trang web cũng như luồng hành vi mong muốn và / hoặc mong đợi của trang web khách.

Thiết kế Wireframe được tạo ra như thế nào?

Nhà thiết kế wireframe chỉ có thể dựa vào thông tin được cung cấp và thu thập bởi công ty thiết kế web. Điều quan trọng cần nhớ là đây là đường hai chiều. Sau khi tất cả, thông tin sâu sắc và rõ ràng được cung cấp bởi khách hàng làm cho nó đơn giản cho các công ty thiết kế web để có hiệu quả đưa ý tưởng của bạn vào cuộc sống.

Thông tin này có thể được chuyển tải theo một số cách, bao gồm xem xét các tài liệu đề xuất ban đầu của dự án, các cuộc họp trực tiếp, các cuộc gọi hội nghị, vv Công ty thiết kế web cũng phải đảm bảo rằng tất cả các thông tin liên lạc từ khách hàng đã được chia sẻ nội bộ để tạo điều kiện gắn kết .

Về mặt khái niệm, một thiết kế wireframe có thể đơn giản như một bản phác thảo trên giấy ghi chép hoặc được trình bày dưới dạng một tệp tinh vi được tạo bởi bất kỳ số lượng ứng dụng phần mềm đồ họa thương mại nào.

Thông thường, các nhà thiết kế OuterBox chọn trình bày một wireframe trực tiếp trong trình duyệt web, để miêu tả tốt hơn chức năng được nêu trong môi trường tương lai của wireframe.

Vai trò của Wireframes trong thiết kế web – Mục đích của họ là gì?

Ngoài việc cung cấp cho nhà thiết kế khung xương cần thiết về chức năng và thiết kế của trang web, wireframe là một trong những mục đầu tiên được trình bày cho khách hàng để đảm bảo rằng mọi người đều ở cùng một trang ngay từ khi bắt đầu. Là một khách hàng, điều cực kỳ quan trọng là phải hiểu mục đích của wireframe để có được giá trị cao nhất từ ​​bản trình bày của nó.

Để làm cho mọi thứ trở nên đơn giản, hãy vẽ một so sánh giữa một wireframe trang web và sơ đồ tầng cho một ngôi nhà. Hãy tưởng tượng làm thế nào các kế hoạch sàn có thể tìm kiếm một nhà bếp trong một ngôi nhà mới. Tất nhiên, kế hoạch sàn sẽ phác thảo nơi bếp lò, tủ lạnh và phòng đựng thức ăn có thể là, nhưng nó có khả năng sẽ không giải quyết thương hiệu hoặc màu sắc của tủ lạnh.

Thay vào đó, nó sẽ giải quyết những thứ như có hoặc không bếp sẽ có một lỗ thông hơi trên không, hoặc có hoặc không có sẽ được xây dựng trong lò vi sóng. Nó thậm chí có thể mô tả cách cửa tủ đựng thức ăn sẽ mở ra. Đó là chức năng của các thiết bị này và vị trí của chúng trong nhà bếp, điều quan trọng ở giai đoạn này, không phải là ngoại hình của các thiết bị.

Trong tương tự nhà bếp của chúng tôi, các thiết bị có thể được coi là chức năng của trang web. Trước khi wireframe có thể được thiết kế, nhà thiết kế phải hiểu phạm vi của dự án và nhận thức được bất kỳ chức năng cần thiết hoặc các yếu tố tùy chỉnh khác được nêu trong dự án.

Ví dụ: trang web có cần “tủ lạnh” không? Nếu vậy, nó nên được đặt trong nhà bếp? “Trang web” có cần tủ lạnh cạnh nhau hoặc mô hình tủ đông hàng đầu không? Có lẽ, trang web không cần tủ lạnh trong nhà bếp và thay vào đó, sẽ thích sử dụng thêm không gian trong tầng hầm của họ. Đây là những thứ mà nhà thiết kế phải xem xét và mô tả trong suốt quá trình wireframe.

Làm thế nào để nhận được nhiều nhất của trình bày thiết kế Wireframe của bạn

Là một khách hàng xem xét một thiết kế wireframe, dưới đây là danh sách những điều nên làm và những điều nên tránh để giúp bạn tận dụng tối đa bản trình bày thiết kế wireframe của mình.

Hãy chú ý đến:

• Kiến trúc thông tin: Xem xét luồng kiến ​​trúc thông tin và mức độ ưu tiên của những gì đang được hiển thị trên wireframe từ trên xuống dưới.
• Ưu tiên thông tin: Thông tin này có được trình bày theo cách phù hợp với mức độ ưu tiên mà công ty của bạn đã lên kế hoạch để đặt vào thông tin này không?
• Chiến lược nội dung: Nội dung của bạn có được sắp xếp theo cách phù hợp với các kế hoạch được nêu trong đề xuất của trang web của bạn không? Hãy nghĩ về những thứ như khoảng cách và vị trí của các trường nội dung của bạn. Hãy nhớ rằng, điều này hoàn toàn là từ phối cảnh bố cục, bạn sẽ không thực sự xem xét bất kỳ bản sao thực nào trong giai đoạn thiết kế này. Thay vào đó, nội dung phụ sẽ được sử dụng như một cách để mô tả cách nội dung sẽ được hiển thị mà không có nội dung thực, vì nó có thể làm bạn mất tập trung khi đánh giá wireframe như dự định. Tại OuterBox, nhóm sáng tạo của chúng tôi khá thích văn bản phụ Lorem ipsumphái sinh Latinh .
• Bố cục trang: Các trang của bạn có được trình bày như được mô tả trong đề xuất của bạn không? Ngay cả khi họ đang có, hãy chắc chắn để tự hỏi mình một lần nữa nếu bố trí đó vẫn có ý nghĩa. Ít khi đề xuất phác thảo từng chi tiết của dự án và bản trình bày thiết kế khung dây là thời điểm tốt nhất để khám phá bất kỳ đường ống bị rò rỉ nào cần thắt chặt.
• Chức năng: Tất cả các yếu tố chức năng của trang web của bạn có được thể hiện ở vị trí mong muốn không? Nếu nhà bếp sẽ có một máy rửa chén, nó được đặt chiến lược tiếp giáp với bồn rửa? Có lẽ vì lý do nào đó, trang web của bạn thực sự cần một “máy rửa chén trong phòng khách” thay vì nhà bếp. Đảm bảo rằng bất kỳ chức năng tùy chỉnh nào được biểu diễn như bạn mong đợi để thấy nó trong quá trình wireframe, nhưng một lần nữa, hãy nhớ rằng nó sẽ không phải là một đại diện trực quan về sự xuất hiện thực sự của chức năng đó trên phiên bản cuối cùng của trang web.

Những gì không mong đợi từ thiết kế Wireframe của một Website

Điểm của thiết kế wireframe là cung cấp cho cả nhà thiết kế và khách hàng một cái nhìn khách quan về chức năng cốt lõi và cách bố trí của toàn bộ trang web. Các yếu tố thiết kế trực quan mà người ta có thể mong đợi được xem là có mục đích bỏ qua để giúp nhận ra mục tiêu của bài thuyết trình wireframe.

Đừng lo lắng về:

• Màu sắc: Thông thường trong thang độ xám, khung dây không được thiết kế để mô tả sơ đồ màu chủ đề của trang web. Đây hoàn toàn là sơ đồ xương trần của thiết kế trang web của bạn, rất ít yếu tố thiết kế trực quan sẽ thậm chí là đại diện từ xa của sản phẩm cuối cùng.
• Thiết kế cụ thể: Tránh trở nên bận tâm với hình dạng của hộp, hình dạng của không gian được chụp, vv Đừng lo lắng về văn bản hoặc; như chúng tôi đã đề cập ở trên, nó chủ yếu sẽ là văn bản giữ chỗ ngẫu nhiên đơn giản để mô tả nơi bản sao cuối cùng sẽ được đặt.
• Phrasing / Wording: Mặc dù những thay đổi này chắc chắn có thể được ghi nhận tại thời điểm này, nhưng chúng không đại diện cho phản hồi mang tính xây dựng mà nhà thiết kế đang tìm kiếm.

Loại thiết kế phản hồi là nhà thiết kế tìm kiếm trong quá trình trình bày thiết kế Wireframe?

Để khai thác tối đa bản trình bày thiết kế wireframe của bạn, điều quan trọng là phải biết loại phản hồi mà nhóm thiết kế đang tìm kiếm. Dưới đây là danh sách các loại phản hồi và các thay đổi được đề xuất được coi là đáng giá trong giai đoạn này:

• Tất cả các yếu tố đều được đặt theo cách phù hợp với đề xuất?
• Luồng hành vi của người dùng có trực quan với người dùng không
• Có yếu tố nào cần được loại bỏ, sửa đổi, tái ưu tiên hoặc tái định hướng không?

 

Hãy tổng hợp nó lên!

Đối với cả công ty thiết kế và khách hàng, điều quan trọng là không chỉ hiểu mục đích của wireframe mà còn là quá trình đằng sau nó. Ngoài việc đơn giản phác thảo khung xương và các yếu tố chức năng của trang web trong tương lai, nó tạo ra cuộc trò chuyện giữa khách hàng và nhà thiết kế trong giai đoạn sơ bộ của giai đoạn thiết kế. Tại OuterBox, giao tiếp này là những gì thúc đẩy sự phát triển của các trang web tích hợp liền mạch các chức năng tùy chỉnh với thiết kế tuyệt đẹp.

Bất cứ khi nào bạn nhận thấy thiết kế web đặc biệt, tỷ lệ cược là nó bắt đầu cuộc sống của nó như là một thiết kế wireframe đặc biệt.