Sự sáng tạo gói gọn trong 20 thiết kế web dạng lưới grid

Thứ hai - 21/09/2015 21:49

Cuối cùng thì xu hướng thiết kế website dạng lưới grid đã đủ sức lan tỏa và trở thành xu hướng thiết kế tiêu biểu hiện tại. Chỉ bằng những đường kẻ ngang hoặc dọc, chúng ta đã có một bố cục trang rành mạch, gọn gàng, rõ ý. Các ô được tạo ra chính là vị trí để đặt các chi tiết thiết kế khác.

Sự sáng tạo gói gọn trong 20 thiết kế web dạng lưới grid

Thiết kế website dạng này là một giải pháp thông minh cho cả người lập trình website lẫn designer. Ngoài ra nó còn giúp người dùng trang web dễ dàng hiểu được cách điều hướng trên trang đó. Phong cách lưới grid mang đến trật tự ngăn nắp cho các thành phần. Nó rất thích hợp đển áp dụng vào các trang portfolio hoặc thiết kế website bán hàng nếu bạn đang muốn tìm cách giới thiệu sản phẩm hoặc công việc của mình theo một cách có tổ chức nhất. Vì vậy, sẽ rất hợp lý nếu bạn dành thời gian để ngắm nhìn 20 thiết kế website dạng lưới grid mà chúng tôi chọn đưa vào bài này. 

Bernd Kammerer

Sự phân cấp thứ bậc của các ô lưới được tạo ra nhờ sự khác biệt trong kích thước. Mỗi ô là một hình ảnh đẹp mắt, góp phần truyền thông điệp về sản phẩm.

Thiet ke web dang luoi grid

Curioos

Tông màu khá ngọt ngào và dễ thương được dùng cho mỗi hình ảnh trong lưới này. 

Thiet ke web dang luoi grid

Pierrick Calvez

Vẻ đẹp hiện đại kết hợp với phong cách tối giản trong hình ảnh đã làm nên đẳng cấp cho thiết kế này. 

Thiet ke web dang luoi grid

Jonathan Patterson

Thêm một sự kết hợp giữa màu sắc của phong cách thiết kế phẳng giúp mang tới diện mạo đậm đà cho website.

Thiet ke web dang luoi grid

Another

Portfolio của một studio thiết kế với phong cách đơn giản, tinh tế và tận dụng tốt lưới grid.

Thiet ke web dang luoi grid

Faebric

Thiết kế website thương mại điện tử điển hình, nó đã được làm gọn và có bố cục chặt chẽ nhờ sử dụng lưới grid hợp lý. Bố cục hợp lý này nếu được "cải tiến" lại đôi chút sẽ là một mẫu thiết kế web nhà hàng tuyệt vời.

Thiet ke web dang luoi grid

Hommard

Mỗi hình ảnh là một mảnh ghép làm nên phong cách lịch lãm cho cả website mà bạn đang xem. 

Thiet ke web dang luoi grid

Daniel Vane

Trang chủ được ghép bởi nhiều hình vẽ kỳ quái và đậm cá tính. 

Thiet ke web dang luoi grid

Killingsworth Station

Cách dùng lưới của trang này khá độc đáo, hình ảnh ở mỗi ô lưới được làm mờ giúp tạo hiệu ứng hình ảnh tốt. 

Thiet ke web dang luoi grid

Teruhiro Yanagihara

Mỗi ô lưới đưa người xem đến với một nội dung riêng trên trang này. 

Thiet ke web dang luoi grid

Wood Work

Các mảnh ghép dài với màu sắc ngọt ngào chạy song song với một sidemenu màu đen tinh tế. 

Thiet ke web dang luoi grid

My Poor Brain

Website có cách chia ô khá dễ thương với kích cỡ nhỏ xinh của mỗi ô, tại đó là các link dẫn đến những tính năng khác nhau của trang. 

Thiet ke web dang luoi grid

M.A.P.

Cá tính và khá giống phong cách một tạp chí thời trang online. 

Thiet ke web dang luoi grid

Lundgren+Lindqvist

Màu xám trắng bao trùm bố cục trang, lưới grid là giải pháp mang đến sự gọn gàng và nhẹ nhàng cho cả trang. 

Thiet ke web dang luoi grid

Swirls Bake Shop

Một cách thông minh để trưng bày những sản phẩm sinh động nhất lên trang chủ website, trông thật giống một tủ kính xinh xắn của cửa hàng. 

Thiet ke web dang luoi grid

KEX Hotel

Sự phân chia của màu sắc có phần không tương phản nhau lắm nhưng thực chất đây là một bố cục dạng lưới. 

Thiet ke web dang luoi grid

Silktricky

Làm thế nào để đưa nhiều nội dung cùng lúc lên một diện tích trang nếu đó không phải là một một lưới grid?

Thiet ke web dang luoi grid

Postersinamsterdam

Cách làm rất sáng tạo với portfolio của công ty này. 

Thiet ke web dang luoi grid

Where They At

Khá giống với cách làm ở ví dụ trên nhưng có sự khác biệt về cách dùng màu. 

Thiet ke web dang luoi grid

Studio Mister

Cả trang chủ hầu như chỉ có các hình ảnh xếp thành dạng lưới, cách làm đơn giản nhưng truyền thông điệp hiệu quả về công việc mà họ làm là gì. 

Thiet ke web dang luoi grid

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Web & Brand Solutions