Các bố cục trình bày website hiện đại không thể bỏ qua

Hàng năm, chúng ta thấy các yếu tố và phong cách mới trong thiết kế trang web bắt đầu xuất hiện. Một số yếu tố – khi được kết hợp một cách cẩn thận – giúp kể những câu chuyện và giải thích về công ty của bạn. Các yếu tố khác hoạt động để cải thiện giao diện nội dung trên một thiết bị cụ thể. Mặc dù không cần thiết phải theo đuổi xu hướng này, nhưng nó có tiềm năng cải thiện trải nghiệm của khách truy cập.

Hãy cùng chúng tôi điểm qua các bố cục bắt mắt và được đánh giá là phù hợp với website hiện đại ngày nay.

Hero – Hình ảnh banner khổ lớn kèm hình ảnh

Những hình ảnh lớn loại bỏ khái niệm trên và dưới màn hình đầu tiên. Bằng cách chỉ tập trung vào hình ảnh với văn bản thay vì nút bấm hoặc các nút xã hội, bố cục này tạo ra trải nghiệm hình ảnh mạnh mẽ khuyến khích bạn cuộn xuống để đọc thêm.

Hình ảnh khổ lớn cũng thường được đặt làm nền với văn bản và nội dung khác được phủ lên trên, giống như trên trang web của Uber. Bất kể bạn sử dụng phương pháp nào, hình ảnh lớn có thể giúp kể câu chuyện của bạn một cách trực quan mà không cần chỉ dựa vào văn bản.

Tại sao nó hữu ích?

Khách hàng của bạn đến từ nhiều nơi và có nhiều kỳ vọng. Bạn không chắc liệu họ có đang tìm thấy trang web của bạn từ điện thoại, máy tính bảng hay máy tính để bàn hay không. Hình ảnh khổ lớn sử dụng vô cùng mạnh mẽ mà nếu chỉ nhìn thấy từ điện thoại thì có lẽ nhiều người sẽ không cảm nhận được.

Điều đó nói lên rằng, việc đảm bảo hình ảnh của bạn đáp ứng tốt trên các thiết bị sẽ tạo ra trải nghiệm người dùng tốt. Khách truy cập trang web có thể xem các hình ảnh khác nhau – cho dù đó là hình nền hay hình ảnh sản phẩm – và có thể có được trải nghiệm giống nhau cho dù họ đến từ thiết bị nào.

Video làm nền

Các video tự động phát trong nền có thể gây ảnh hưởng rất nhiều vào một trang web. Chúng có thể được sử dụng để kể một câu chuyện và giảm đáng kể lượng nội dung khác cần thiết để giải thích doanh nghiệp của bạn đang làm gì.

Hãy lấy ví dụ trang web của Wistia. Khi bạn truy cập trang chủ của họ, một video lớn sẽ tự động bắt đầu phát trong nền và bằng cách nhấp vào nút phát, bạn sẽ có cái nhìn sâu hơn về Wistia.

Tại sao nó hữu ích?

Video nền tập trung vào việc thu hút khách truy cập ngay từ khi họ truy cập vào trang của bạn. Video cho phép khách truy cập của bạn hiểu những điểm chính về công ty của bạn mà không cần phải đọc một dòng văn bản nào.

Ngoài ra, video được bộ não của chúng ta xử lý nhanh hơn 60.000 lần so với văn bản. Trong khi mọi người thường do dự khi đọc các khối văn bản nặng, video có vẻ dễ dàng và có thể được tiêu thụ rất nhanh. Nó cũng giúp tốc độ kết nối ngày càng tăng và kích thước thiết bị di động ngày càng lớn, mang đến trải nghiệm video tốt hơn.

Menu ẩn

Có khả năng là hầu hết các trang web bạn tiếp xúc đều có một menu dài các tùy chọn để bạn lựa chọn. Ưu điểm của điều này là menu có thể đưa khách truy cập trực tiếp đến nơi họ muốn đến. Tuy nhiên, nhược điểm là chúng thường chiếm rất nhiều không gian màn hình có giá trị.

Menu ẩn, hoặc hamburger menu, thay đổi điều này. Menu này phổ biến trong các ứng dụng web trước khi bắt đầu thiết kế web – ngay cả trong Google Chrome, bạn có thể tìm thấy menu trông như hình bánh hamburger ở phía bên tay phải.

Tại sao lại tên là menu hamburger?

Nếu bạn sử dụng trí tưởng tượng của mình, ba đường xếp chồng lên nhau trông giống như miếng bánh hamburger. Dễ hiểu đúng không nào?

Tại sao nó hữu ích?

Các trang trên trang web của bạn phải có một đường dẫn rõ ràng để người dùng đi đến. Loại bỏ điều hướng phức tạp giúp trải nghiệm rõ ràng hơn và không bị phân tâm. Trải nghiệm cải tiến này giúp cải thiện khả năng người dùng sẽ tìm thấy thông tin họ cần để hoàn thành một hành động mong muốn.

Grid: Thiết kế bố cục cột dòng dạng thẻ

Với sự nổi lên của Pinterest, các nhà thiết kế cũng như các nhà tiếp thị đã bị thu hút với những tấm thẻ. Các thẻ riêng lẻ giúp phân phối thông tin một cách trực quan để khách truy cập có thể dễ dàng xem các phần nội dung nhỏ mà không bị choáng ngợp.

Trang chủ của Brit + Co đóng vai trò là một ví dụ tuyệt vời về thiết kế thẻ trong thực tế.

Bằng cách chia nhỏ các phần nội dung khác nhau thành các thẻ, người dùng có thể chọn bài viết hay nội dung nào họ muốn mở rộng. Điều này giúp giữ cho trang nội dung chính luôn sạch sẽ và có tổ chức mà không cần dựa vào nhiều văn bản.

Tại sao nó hữu ích?

Thiết kế thẻ ngày càng trở nên phổ biến trên các trang web B2B và B2C vì nó giúp cung cấp các khối thông tin dễ đọc cho người dùng. Sử dụng thiết kế này trên trang web của bạn có thể giúp làm nổi bật nhiều sản phẩm hoặc giải pháp song song với nhau.

Hãy nhớ rằng thẻ của bạn phải đáp ứng. Điều này có nghĩa là khi kích thước màn hình nhỏ hơn hoặc lớn hơn, số lượng và kích thước thẻ hiển thị sẽ thích ứng với nhau. Chẳng hạn như máy tính là 4 cột, nhưng tablet là 2 cột và mobile có thể chỉ là 1 cột.

Tổng kết

Chúng ta vừa điểm qua 1 số bố cục được website hiện đại ngày nay thường xuyên sử dụng nhằm mang lại cách trình bày dễ hiểu và thu hút người đọc hơn. Chúng ta sẽ còn khám phá làm cách nào để web công ty thực sự thu hút thông qua hình ảnh, màu sắc, hay các cách thức xây dựng web bán hàng mang lại trải nghiệm mua hàng tốt hơn trong những phần sau nhé.

Bài viết liên quan