Làm thế nào để làm một sơ đồ trang web

Khi trang web của công ty bạn phát triển vượt ra ngoài sơ đồ trang web cơ bản, bạn có thể bắt đầu đưa ra quyết định về những gì diễn ra trên các trang riêng lẻ. Một sơ đồ trang web, hoặc khung dây, trình bày các loại hạt và bu lông của chức năng trang mà không kết hợp các yếu tố thiết kế, phối màu, kiểu kiểu hoặc chính các yếu tố tương tác. Hãy nghĩ về sơ đồ như một sơ đồ tầng và trang hoàn thành như một căn phòng được trang bị. Thay vì sơn lại các bức tường và sắp xếp lại hoặc thay thế đồ nội thất để thay đổi cách các trang của bạn kết hợp với nhau, bạn có thể lập kế hoạch không gian trực tuyến của mình bằng cách sử dụng các hộp và trình giữ chỗ để thiết lập cách thức các trang của bạn hoạt động.

Liệt kê các mục định kỳ sẽ xuất hiện trên các trang của bạn. Chúng bao gồm các yếu tố như logo, điều hướng trang web, vùng ảnh, vùng văn bản, tiêu đề, chân trang và thanh bên.

Vẽ sơ đồ hiển thị kích thước tương đối của các thành phần trang và vị trí dọc và ngang của chúng. Bạn có thể phác thảo sơ đồ này trên giấy, xây dựng nó trong một chương trình chỉnh sửa hình ảnh hoặc minh họa hoặc kết hợp nó với nhau bằng một ứng dụng khung lưới trực tuyến.

Tạo sơ đồ trang cho từng loại trang mà trang web của bạn yêu cầu. Trang chủ của bạn có thể có một tập hợp con khác của các thành phần trang so với trang sản phẩm hoặc dịch vụ, trang liên hệ hoặc blog.

Sử dụng văn bản giữ chỗ để chỉ ra nơi xuất hiện. Bạn có thể muốn chọn giữa kiểu chữ serif và sans serif, nhưng sơ đồ không phải là nơi dành cho các thử nghiệm và trình diễn kiểu kiểu.

Chú thích các khung lưới của bạn với các ghi chú về cách các phần tử hoạt động hoặc nơi chúng liên kết. Thêm các biểu tượng liên kết đến các trang web hoặc dịch vụ bên ngoài, bao gồm RSS, Twitter, Facebook và các trang web của đối tác hoặc nhà sản xuất.

Lưu hành khung lưới của bạn để xem xét, thảo luận và phê duyệt, sửa đổi chúng khi cần thiết. Khi bạn đạt đến điểm mà sơ đồ của bạn bao gồm tất cả các yếu tố định kỳ mà các trang thực tế của bạn yêu cầu, và vị trí và kích thước tương đối của các yếu tố phù hợp với nhu cầu trang web của bạn, bạn có thể vượt qua giai đoạn khung dây.

Lời khuyên

Sơ đồ trang web thường đi trước mockup và nguyên mẫu trong quá trình thiết kế. Mockup hiển thị sơ đồ màu, kiểu chữ và các chi tiết thiết kế khác trong các biểu mẫu bạn thực sự đang xem xét thực hiện. Các nguyên mẫu vượt xa các mô hình cho các mẫu được định dạng chặt chẽ cho thấy sự xuất hiện của trang thực.
Nếu bạn dự định tạo một phiên bản di động cũng như phiên bản dựa trên trình duyệt của trang web của mình, bạn có thể cần xây dựng sơ đồ cho nhiều hơn một luồng thiết kế.
Nếu bạn vẽ sơ đồ của mình bằng tay, hãy sử dụng bút màu hoặc bút chì để nhấn mạnh các khu vực cụ thể trong bố cục trang của bạn có tầm quan trọng hơn trong quá trình thiết kế hoặc phát triển. Ví dụ: bạn có thể chọn một màu cụ thể để thể hiện các mô-đun được mã hóa bởi một cá nhân cụ thể. Những màu sắc này chỉ ra các yếu tố quy hoạch, không phải là sự lựa chọn thiết kế.

Cảnh báo

Nếu bạn phát triển sơ đồ của mình trong một công cụ thiết kế trang web và tạo CSS cho khung lưới của bạn, hãy tránh biến giai đoạn sơ đồ phát triển trang web thành một bài tập thiết kế. Wireframes truyền đạt các tính năng, không phải phong cách.