Thiết kế web: Khái niệm cơ bản của Wireframing - núm vú

Một wireframe là một sơ đồ xem một trang web sử dụng hình dạng đơn giản và các phần tử văn bản để hiển thị cấu trúc trang, nội dung và điều hướng. Bạn có thể sử dụng một chương trình như Illustrator hoặc InDesign để xây dựng các wireframes, nhưng kiến ​​trúc sư thông tin thường thích Microsoft Visio để phát triển sơ đồ trang web.

tín dụng: © LEVEL Studios | Một công ty Rosetta

Lập bản đồ các vùng nội dung cho một trang web

Việc nghiên cứu những gì diễn ra trên mỗi trang và cách trình bày và điều hướng nội dung là một nhiệm vụ rất lớn, đặc biệt đối với các trang doanh nghiệp lớn. Một số công ty lựa chọn một công việc chuẩn bị preframe wireframe trước và tạo mẫu để giúp nhóm nhanh chóng lập bản đồ các vùng nội dung cho mỗi trang để đảm bảo rằng tất cả chúng làm việc tốt và nhất quán.

Mẫu bao gồm thông tin chính để giúp nhắc nhở đội của các mục tiêu cấp trang. Ví dụ: mục tiêu kinh doanh chính có thể là để giới thiệu các sản phẩm mới trên trang chủ và, trên các trang sau, đề xuất các sản phẩm khác mà người dùng có thể quan tâm. Với kiến ​​thức về các mục tiêu này, bạn có thể xác định một vài vùng nội dung và cho thấy vị trí, kích thước và mức độ ưu tiên của các thành phần này trên trang. Chú ý các phần tử ưu tiên thấp xuống dưới

dưới màn hình (nằm ngoài tầm nhìn ban đầu trên trang web, yêu cầu người dùng cuộn để xem chúng).

Mẫu pre wireframing có thể giúp bạn thiết kế các trang web lớn: Bạn có thể nhanh chóng lập bản đồ các khu trọng điểm và tự nhắc nhở người sử dụng và các mục tiêu kinh doanh trước khi bạn quá chi tiết.

Wireframing trong thiết kế web

Sau khi thực hiện bài tập trước wireframing, bạn có thể điền vào các chi tiết của mỗi trang. (Một vòng pre-wireframing là một bước tùy chọn được đề nghị cho các trang web lớn, phức tạp Hầu hết các trang web chỉ cần đi ngay vào wireframes từ sitemap.)

Wireframes phục vụ như là một loại danh sách giặt là những gì đi trên mỗi trang từ một nội dung và phương tiện truyền thông, và cũng chỉ ra thiết kế tương tác

(cách người dùng sử dụng các công cụ trên trang hoặc điều hướng nội dung). Dưới đây là một số ví dụ về wireframe của bạn có thể hiển thị: Bản sao nào - và bao nhiêu thông tin - sẽ xuất hiện trên trang

• Đối tượng CMS nào đi trên trang (nếu bạn đang sử dụng hệ thống quản lý nội dung) > Những hình ảnh và phương tiện truyền thông (như tệp Flash và video) đi trên trang

• Kế hoạch kỹ thuật và tương tác của bạn cho các liên kết trang, tiện ích con như trình đơn thả xuống, mở rộng các vùng nội dung, các hộp kiểm và các nút

• Wireframing là một bước quan trọng mà bạn không nên bỏ qua trong bất kỳ dự án tương tác nào - cho dù đó là ứng dụng dành cho thiết bị di động, bản trình bày Flash tại triển lãm thương mại, hoặc (tất nhiên) một trang web.Giống như một bản thiết kế kiến ​​trúc tốt, wireframe là cơ hội của bạn để giải quyết tất cả các nội dung và các vấn đề thiết kế tương tác trên giấy với không chỉ khách hàng mà cả đội ngũ kỹ thuật xây dựng trang web.

• Bạn không cần phải xây dựng một wireframe cho mọi trang của trang. Bạn chỉ cần thực hiện một wireframe cho mỗi bố cục độc đáo. Ví dụ: nếu bạn có 100 trang chi tiết sản phẩm trong chỉ mục trang của mình, bạn chỉ có thể xây dựng một khung dây chuyền cho biết trang chi tiết sản phẩm hoạt động như thế nào. Nếu một hoặc hai trang sản phẩm có cách bố cục hoặc nội dung hơi khác với họ, tuy nhiên, bạn nên tạo ra một wireframe chi tiết sản phẩm đặc biệt chỉ dành cho họ.

Điều quan trọng là các mẫu dây của bạn trông như nhàm chán và sơ đồ càng tốt. Chúng thường có màu xám, với các đường kẻ, hộp, hộp màu xám và văn bản giả. Điều này nhằm đảm bảo khách hàng hiểu rõ rằng họ đang nhìn vào một bộ xương chứ không phải là một thiết kế hình ảnh được đề xuất.