Thủ thuật

Các bố cục trang web hiệu quả nhất trong thiết kế web

06/09/2021

11158

Các bố cục trang web hiệu quả nhất trong thiết kế web. Đối với các nhà thiết kế web, sự hiểu biết về các loại bố cục trở thành nền tảng của quy trình làm việc thiết kế và con đường dẫn đến thành công của họ. Bằng cách nhìn vào các ví dụ hàng đầu về thiết kế bố cục trang web, chúng ta có thể củng cố sự hiểu biết và kỹ năng của chúng ta về những gì làm cho một trang web trông tuyệt đối tốt nhất.

Các bố cục trang web hiệu quả nhất trong thiết kế web

Bố cục cột đơn: iPad nổi tiếng thế giới

Khi nào nên dùng bố trí Cột Đơn

Câu chuyện văn bản trong một blog cá nhân hoặc một bài báo.
Thiết kế tối giản.
Thiết kế web thân thiện với thiết bị di động.

Bố trí hai cột: earmark

Bố trí hai cột mô tả một trang được chia thành hai phần / cột dọc, chia màn hình thành hai phần dọc (các phần có thể có chiều rộng bằng nhau nhưng cũng có thể được chia không đồng đều). Hai bố cục cột được khuyến nghị cho các trang có hai phần nội dung chính có chung mức độ quan trọng.

Khi nào nên sử dụng bố trí hai cột

Giới thiệu hình ảnh và các yếu tố văn bản có tầm quan trọng lẫn nhau.
Một trải nghiệm hấp dẫn, hoặc thậm chí tương tác.

Nhìn chung, khi bạn đang tìm cách tránh sự đơn điệu trực quan tẻ nhạt, bố cục hai cột là một giải pháp tuyệt vời.

Bố cục ba hộp: KatchMe

Các bố cục trang web “ba hộp” mô tả một trang web có một khu vực nội dung đồ họa chính, tiếp theo là hai hộp hoặc phần nhỏ hơn bên dưới nó. Mỗi phần riêng lẻ này có thể chứa nội dung dưới bất kỳ hình thức nào – đồ họa, văn bản hoặc kết hợp cả 2. Bố cục ba hộp rất thường được sử dụng cho các trang muốn trình bày một số hình ảnh lớn theo cách có tổ chức, phân cấp.

Khi nào nên sử dụng bố trí ba hộp

Kết hợp nội dung video và nội dung hình ảnh tĩnh
Trang danh mục đầu tư của một vài đồ họa mẫu hoặc hình ảnh.
Phân cấp trực quan giữa nhiều hình ảnh trên một trang.
Các trang web thương mại điện tử với hình ảnh sản phẩm nổi bật và các sản phẩm liên quan.

Bố cục chia màn hình: Bose

Các bố cục trang web của bố cục chia màn hình tồn tại khi vùng nội dung chính của trang được chia thành hai hoặc nhiều phần dọc. Khi bộ phận được thực hiện một cách hợp lý, có tổ chức, bố cục chia màn hình có thể cung cấp trải nghiệm xem có một không hai cho người dùng của bạn.

Khi nào nên sử dụng bố trí chia màn hình

Hai (hoặc nhiều) tùy chọn riêng biệt để người dùng lựa chọn.
Tô sáng một hình ảnh dọc.
Bố cục trực tiếp tương ứng chính xác với luồng thị giác.
Hình ảnh tĩnh đặt cạnh nhau với video hoặc hoạt hình.
Tương phản giữa hai hoặc nhiều loại nội dung hoặc khu vực.

Bố cục bất đối xứng: Underbelly

Trang chủ của Underbelly là một bố cục bất đối xứng trong tất cả các phần của nó, vì nó hoàn toàn đại diện cho định nghĩa cơ bản nhất về bố cục bất đối xứng là gì: phân phối nội dung có kích thước khác nhau không đồng đều trên khắp trang – không có sự đối xứng nào giữa chúng.

Khi nào nên sử dụng bố cục bất đối xứng

Cân bằng thị giác là ưu tiên hàng đầu.
Nhiều yếu tố hình ảnh và loại nội dung.
Bộ sưu tập ảnh nâng cao.
Cân bằng giữa các màu tương phản.
Động lực tương tác với người truy cập.

Webvocuc

Cảm ơn bạn đã theo dõi bài viết của Webvocuc.com! Cập nhật các bài viết khác từ Webvocuc để biết thêm nhiều thông tin mới nhất về thiết kế website chuyên nghiệp và marketing online.