Ở những bài viết trước, chúng ta đã có đầy đủ thông tin từ cuộc khảo sát và sơ đồ trang web mà chúng ta muốn tạo. Bây giờ, chắc hẳn bạn cũng đã tưởng tượng ra được diện mạo của trang web của mình sẽ như thế nào. Vậy bạn sẽ tiến hành như thế nào ở bước tiếp theo?
Với một trang web có giao diện đẹp, màu sắc thu hút, nội dung thú vị và dễ sử dụng, chắc chắn sẽ tạo ấn tượng tốt với người truy cập. Họ sẽ quay lại trang web của bạn nhiều lần hơn. Vì vậy, bước này sẽ giúp bạn xây dựng diện mạo của trang web của mình, kết hợp các yếu tố thành một cách chặt chẽ và hiệu quả nhất.
Bạn đang xem: Thanh Hải (Thiết kế Website)
Nhưng bạn có nghĩ rằng bây giờ là lúc bắt đầu với Photoshop, Illustrator hay Fireworks? Có lẽ không, ít nhất là không nếu bạn muốn có nhiều hơn 1 ý tưởng cho trang web. Ngay bây giờ, tất cả những gì bạn cần là một tờ giấy trắng và cây bút chì để tập trung vào thiết kế mà không phải lo lắng về công nghệ sau đó. Thực tế, nếu bạn phác thảo nhiều ý tưởng trên giấy trong 10 phút, bạn cũng có thể áp dụng chúng vào máy tính.
Dựa trên thông tin từ cuộc khảo sát và sơ đồ trang web, bây giờ bạn cần phác thảo các khu vực quan trọng của trang web. Do đó, mục đích của phần này là một bản phác thảo chi tiết của trang web. Bạn chỉ cần vẽ những đường nét phác thảo (wireframe) để biểu thị vị trí các yếu tố, thay vì sử dụng hình ảnh và văn bản thật. Hãy nghĩ về logo, thanh điều hướng, nội dung chính, thanh bên và chân trang. Làm thế nào để chúng có mối quan hệ chặt chẽ với nhau?
Contents
Cách thực hiện:
- Hãy bắt đầu trên một tờ giấy.
- Tiến hành phác thảo tỉ lệ trên trang giấy.
- Lưu ý kích thước phù hợp với các kích thước màn hình thông dụng.
Phác thảo chi tiết
Thông thường, hầu hết các trang web bao gồm các phần sau:
1. Khối chứa (Containing Block)
Mỗi trang web đều cần một khối chứa (wrapper) để chứa toàn bộ nội dung của nó. Điều này giúp đảm bảo rằng nội dung trang web sẽ không bị ảnh hưởng bởi độ phân giải màn hình. Dù bạn sử dụng màn hình có độ phân giải bất kỳ như thế nào, nội dung trang web vẫn sẽ nằm ở giữa màn hình. Khối chứa chứa tất cả các yếu tố của trang web và giữ chúng trong giới hạn của cửa sổ trình duyệt.
Bạn có thể tùy chỉnh chiều rộng của khối chứa, cho phép hiển thị toàn màn hình hoặc cố định ở giữa màn hình. Điều này giúp trang web hiển thị đúng theo những gì bạn đã thiết lập.
2. Logo
Logo là một phần quan trọng không thể thiếu cho một công ty hay trang web. Nó đại diện cho thương hiệu của bạn và tạo ấn tượng với người truy cập. Logo thường hiển thị ở tất cả các trang và người truy cập có thể nhấp vào nó để quay trở lại trang chủ.
3. Thanh điều hướng
Thanh điều hướng, hay thanh menu, chứa các liên kết đến các trang khác trong trang web. Điều này giúp người truy cập dễ dàng điều hướng và khám phá trang web. Vị trí thường được đặt ở đầu trang để thuận tiện sử dụng.
4. Nội dung chính
Xem thêm : Cách viết trang giới thiệu website: Mẹo để tạo ấn tượng
Nội dung chính của trang web nên được đặt ở một vị trí dễ tìm thấy và dễ đọc nhất. Đây là nội dung mà người truy cập đang tìm kiếm. Nếu họ không thấy nội dung chính một cách dễ dàng và nhanh chóng, họ có thể rời đi và không quay trở lại nữa.
5. Thanh bên
Thanh bên là một khu vực nằm ở bên trái hoặc bên phải của trang web. Nếu trang web của bạn đơn giản, có thể bạn không cần sử dụng thanh bên. Tuy nhiên, thanh bên có thể cung cấp thông tin chi tiết hơn cho người truy cập. Nó có thể chứa tin tức mới, hình ảnh nổi bật, bài viết quan trọng hoặc quảng cáo.
6. Chân trang
Chân trang thường được đặt ở cuối trang và chứa thông tin bản quyền, liên hệ, thông tin pháp lý và các liên kết quan trọng. Hiện nay, chân trang không chỉ còn là phần cuối cùng của trang mà còn cả cửa sổ trình duyệt. Khi bạn nhìn thấy chân trang, bạn biết rằng đó là cuối cùng, không có nội dung hay khoảng trống nào phía dưới nó.
Đó là những phần chính thường được sử dụng trong các trang web hiện nay. Bạn có thể sử dụng tất cả hoặc chỉ một số phần tùy theo ý thích cho trang web của mình. Bằng cách vẽ layout bằng bút chì, bạn sẽ tránh được những lỗi phát sinh sau này khi thực hiện trên máy tính.
Nguồn: http://uyen.vn/quy-trinh-thiet-ke-web-part-3-content-overview/
Nguồn: https://laptrinhc.edu.vn
Danh mục: Web