Không lâu trước đây, thiết kế web được coi là một sự phản ánh của thiết kế in ấn. Các cột và hàng đều dóng theo các đường cứng nhắc, với nội dung và hình ảnh được neo vào các không gian cố định. Nhưng kể từ khi các công cụ như HTML, CSS và JavaScript phát triển, các layout thiết kế website đã có sự đa dạng hơn. Dưới đây là 7 cách mà các nhà thiết kế đang sử dụng để tạo layout độc đáo và đưa thiết kế website theo hướng mới.

1. Thêm độ sâu với hiệu ứng parallax

(*)Parallax là hiệu ứng mà hình nền của trang web sẽ di chuyển với những tốc độ khác nhau so với các đối tượng khác khi lăn chuột cuộn xuống hoặc lên.

Sử dụng parallax là một cách để tạo chiều sâu cho thiết kế layout. Phân lớp đồ họa, hình ảnh và văn bản trong khi gắn chuyển động của chúng vào vị trí cuộn làm cho bố cục năng động và thú vị hơn. Đặc điểm nhận dạng của hiệu ứng này là di chuyển foreground nhanh hơn background.

Bạn có thể tham khảo bài viết 5 quy tắc trong thiết kế layout bạn cần biết để nắm cách tạo một bố cục đẹp trong thiết kế 

Trong ví dụ Epicurrence, đây là website của một hội nghị phi sáng tạo tập trung vào các hoạt động ngoài trời, các minh họa được kết hợp tốt với parallax. Hãy để ý background trở nên lớn hơn và nhỏ đi khi bạn cuộn nó lên xuống. Parallax khiến bạn có cảm giác như mình đang bước vào một không gian vật lý, thay vì chỉ nhìn chằm chằm vào một màn hình phẳng.

Parallax là một hiệu ứng linh hoạt - ở đây Jaune de Chrome, một công ty sứ của Pháp, đã xếp các hình ảnh bằng gốm với văn bản, để cho ra một layout độc đáo mà đầy tính nghệ thuật - giống như thương hiệu của họ.

2. Sử dụng các element chồng lên nhau

Các nhà thiết kế ngày nay sử dụng trục z để sắp xếp các yếu tố thiết kế. Chúng giúp cho việc hiển thị trông gọn gàng, đơn giản, khép kín với các lớp văn bản, hình ảnh, màu sắc và pattern.

Để chọn màu sắc và kiểu font phù hợp cho website của mình, bạn có thể tham khảo thêm bài viết Thiết kế UI: Màu sắc và font chữ của ColorME nhé

WebINTENSIVE, một công ty phần mềm, thực hiện cách tiếp cận ba tầng trên trang dự án của họ. Họ đặt một khối vuông lên trên một hình ảnh, sau đó đẩy nội dung lên trên khối màu đó 

Phân lớp trên hình ảnh là một cách khác giúp cho thiết kế cảm thấy ít bị giới hạn hơn. Trong ví dụ này từ Bauhem, một agency thiết kế thương hiệu đã sử dụng hiệu ứng làm mờ dần trên cả tiêu đề và văn bản, xếp chúng trên các hình nền đơn sắc. Điều này giúp cho thiết kế không bị bí bách

Tiêu đề nổi trên hình ảnh anh hùng là một cách khác mà các nhà thiết kế chơi với các yếu tố chồng lớp. Nó là một cách thiết kế vô cùng quen thuộc, nhưng một vài trang web đã có những cách tiếp cận độc đáo thực sự nổi bật.

3. Chia nhỏ nội dung với các tiêu đề, tiêu đề phụ và cột

Không phải mọi layout thiết kế đều cần hình ảnh động phức tạp và các chi tiết trang trí khác để thu hút hơn. Đơn giản chỉ cần bù đắp các phần tử và cột để tránh cho bố cục theo mô típ đối xứng nhàm chán.

Alvogen, một công ty dược phẩm, sử dụng phương pháp thiết kế so le này để layout thú vị hơn:

4. Bố trí nội dung với thẻ ngang

Bố cục ngang là một cách đơn giản để giữ cho thiết kế không bị quá tải. Nó cũng hoạt động tốt với các màn hình nhỏ hơn như màn di động. Các thiết kế sẽ chuyển thành cuộn dọc cho nội dung liên quan.

Hypergiant, một công ty cung cấp các giải pháp phần mềm tiên tiến cho các công ty, sử dụng thẻ ngang cho một số nội dung quan trọng nhất của họ:

Trang web về Waangari Maatha, người phụ nữ châu Phi đầu tiên giành giải thưởng Nobel Hòa bình, có các trích dẫn bên cạnh ảnh phong cảnh:

5. Chia màn hình

Chia màn hình cho phép bạn chia nhỏ các khối nội dung lớn trong bố cục và tối đa hóa không gian màn hình. Dành mỗi bên của màn hình cho nội dung bổ sung có thể mang đến một thông điệp mạnh mẽ hơn, thống nhất hơn.

Trong ví dụ này, công ty thực phẩm Ono sử dụng màn hình chia nhỏ với hình động được kích hoạt cuộn cho trải nghiệm người dùng đầy màu sắc và chuyển động.

Công ty xe đạp điện Cowboy cũng sử dụng màn hình chia nhỏ với hình ảnh hiện đại, mát mẻ và bản sao súc tích để nói với người tiêu dùng về sản phẩm của họ.

6. Lựa chọn cuộn ngang

Sử dụng layout này đòi hỏi nội dung trang cần được tổ chức một cách rành mạch. Văn bản, hình ảnh và các yếu tố khác cần được lên kế hoạch và quản lý chặt chẽ để phù hợp với không gian khá giới hạn này.

Grand Image, một công ty artwork, sử dụng cuộn bên với bố cục cẩn thận giúp mọi thứ ngăn nắp và dễ đọc:

Và trong ví dụ này, Keus, một công ty sản xuất ba lô, mọi thứ đều được sắp xếp hợp lý trong một thiết kế cuộn bên mà cảm thấy không lộn xộn.

7. Thanh trượt

Đây là một cách bố trí layout khác mang đến cho nhà thiết kế sự tự do sáng tạo hơn bằng cách tiết kiệm không gian.

Thanh trượt có thể là một thứ gây khó chịu, chúng có thể phá vỡ sự hài hòa của một thiết kế và mang đến trải nghiệm tệ hại. Nhưng các nhà thiết kế đang tinh chỉnh các thanh trượt, làm cho chúng ít gây khó chịu hơn, trong khi vẫn giữ được chức năng của chúng.

Dưới đây là trang web nước tăng lực Mr. X, các thanh trượt có một vị trí khiêm tốn trên không gian màn hình, nhưng không hề bị lạc lõng trong bố cục tổng thể:

Tạm kết,

Hi vọng 7 xu hướng thiết kế layout trên đây sẽ là nguồn tham khảo hữu ích cho các thiết kế website sắp tới của bạn. Nếu bạn quan tâm đến thiết kế trải nghiệm người dùng, tham khảo khóa học thiết kế giao diện người dùng UI/UX tại ColorME nhé.