Xác định bố cục trang web chính xác là một trong những bước đầu tiên và rất quan trọng trong thiết kế trang web. Bố cục trang web là nền tảng của thiết kế của bạn và nó có thể ảnh hưởng lớn đến nhận thức trực quan, trải nghiệm khả năng sử dụng và tỷ lệ chuyển đổi của bạn.
Hôm nay, Sao Vàng sẽ chia sẻ với các bạn 10 cách bố trí website hiệu quả đã và đang được ưa chuộng hiện nay.
1. Bố cục trang web là gì?
Bố cục trang web (bố cục trang web hoặc bố cục trang web) là sự sắp xếp của tất cả các yếu tố trực quan trên một trang web và mối quan hệ giữa chúng.
Thông qua việc định vị có mục đích các thành phần trang, bố cục trang web có thể cải thiện khả năng truyền tải thông điệp cũng như khả năng sử dụng của trang web.
Bố cục trang web là một phần quan trọng của thiết kế web. Nó xác định thứ tự các phần tử của trang web được trình bày cho khách truy cập, phần tử nào nhận được nhiều sự chú ý nhất và sự cân bằng tổng thể của thiết kế.
Nói tóm lại, một thiết kế bố cục trang web tốt có thể thu hút sự chú ý của người dùng và hướng dẫn họ một cách có mục đích.
Nó giúp chủ sở hữu trang web điều hướng người dùng đến nội dung quan trọng nhất trước tiên, sau đó chuyển sang phần tiếp theo trong tập lệnh dựng sẵn.
2. Làm thế nào để chọn một bố cục trang web?
Khi bắt tay vào thiết kế website, bạn nên chú ý 2 điểm khi quyết định lựa chọn bố cục website:
2.1. Nội dung trang web phù hợp
Bố cục trang web phải hỗ trợ thông điệp của bạn và tham gia vào việc kể câu chuyện mà bạn muốn kể.
Một số bố cục trang web phù hợp nhất để hiển thị sản phẩm/dịch vụ, trong khi những bố cục khác giúp truyền tải thông tin thực tế và nhanh chóng phù hợp với các trang tin tức, blog.
Do đó, bạn nên chọn một bố cục trang web phù hợp với loại nội dung mà bạn có.
2.2. Sử dụng các bố cục phổ biến
Mặc dù bạn có thể thử những điều mới một cách sáng tạo, nhưng các bố cục trang web phổ biến, nổi tiếng đã được thử nghiệm và thử nghiệm thường là lựa chọn tốt nhất.
p>
Những bố cục phổ biến này làm cho trang web của bạn trở nên thân thiện với người dùng vì chúng được xây dựng dựa trên kỳ vọng của người dùng hoặc trải nghiệm trước đó với các trang web khác.
Bố cục quen thuộc dẫn đến giao diện trực quan hơn và dễ sử dụng hơn.
Dưới đây, digital venus trình bày 10 bố cục trang web hiệu quả và phổ biến nhất, giải thích lý do tại sao bố cục này hoạt động và loại nội dung nào bố cục phù hợp nhất.
3. 10 bố cục trang web hiệu quả nhất
- chế độ z
- loại f
- Bố cục hình ảnh toàn màn hình
- Bố cục chia đôi màn hình
- Bố cục bất đối xứng
- Bố cục một cột
- Bố cục dựa trên hộp
- Bố cục nhãn
- Bố cục tạp chí
- Bố cục thanh ngang
Bố cục #1: z
Khi nhìn thấy một trang web mới, mắt của chúng ta sẽ lập tức quét qua trang đó để nắm được ý chính của mọi thứ.
Việc quét nhanh này được gọi là đọc lướt và thường được thực hiện theo hình chữ z hoặc hình chữ chi.
Cái nhìn của chúng ta di chuyển từ góc trên bên trái sang góc trên bên phải, sau đó đến góc dưới bên trái và cuối cùng quay lại góc trên bên phải.
Đây là thói quen đọc và viết mà chúng ta được dạy từ thời thơ ấu.
Kết quả là khi lướt web, chúng ta sử dụng thói quen này để đọc/quét nội dung trang web.
Sử dụng thói quen đọc này, các nhà thiết kế web triển khai tất cả nội dung quan trọng trên hình chữ z. Vì vậy, chúng tôi có một bố cục trang web hình chữ z.
Bố cục này thường đặt biểu trưng của công ty ở góc trên bên trái để tạo ấn tượng đầu tiên.
Ngoài ra, ở góc ngoài cùng bên phải, bạn có thể đặt menu điều hướng với lời kêu gọi hành động nổi bật.
Phần đường chéo của hình chữ chi chạy từ trên xuống dưới trên trang và là nơi thông tin được chú ý nhiều nhất.
Bạn có thể đặt các hình ảnh và văn bản hấp dẫn để mô tả ngắn gọn nội dung trang web của mình.
Phần dưới của chữ z phải là đỉnh của mọi thứ dẫn đến nó. Bây giờ là lúc dành cho lời kêu gọi hành động (cta) cực kỳ quan trọng của bạn, kêu gọi người dùng làm điều gì đó.
bố cục trang web z phù hợp cho: các trang có tính trực quan cao với ít văn bản, chẳng hạn như các trang đích cho các mục tiêu chuyển đổi cụ thể.
Bố cục #2: f
Giống như bố cục mẫu z, bố cục trang f này dựa trên hành vi thu thập thông tin trang phổ biến. Trong các trang web có nhiều văn bản, chúng ta có xu hướng đọc lướt hoặc đọc thông tin một cách nhanh chóng.
Điều này có nghĩa là phần nằm ngang trên cùng của trang thu hút sự chú ý của chúng ta và từ đó, mắt họ di chuyển xuống dưới theo chiều dọc, tập trung vào bên trái.
Khi sử dụng bố cục trang f, hãy đảm bảo đầu tư tài nguyên ở đầu trang, vì đây là khu vực mà người dùng thường nán lại lâu hơn.
Mẹo: Đầu của chữ f viết thường, bao gồm tiêu đề, phụ đề và hình ảnh nổi bật.
Phần tiếp theo bên dưới nên viết mô tả tiêu đề chi tiết hơn và giới thiệu phần còn lại của trang.
Đường kẻ dọc hình chữ f ở phía bên trái của trang giúp làm cho văn bản hấp dẫn hơn.
Mẹo: Bạn cũng có thể sử dụng hình ảnh, biểu tượng hoặc định dạng như danh sách, số
bố cục trang f là lý tưởng cho: Các trang có nội dung văn bản quan trọng hơn các yếu tố khác. f Bố cục trang web phù hợp với trang chủ và các trang đăng bài trên blog cá nhân.