20 website sở hữu bố cục dạng lưới grid cực gọn và sáng sủa

Thứ tư - 06/05/2015 23:33

Chúng ta nghĩ đến cấu trúc dạng lưới thông thường với hình ảnh của các cột dọc và ngang thẳng hàng nhau.

20 website sở hữu bố cục dạng lưới grid cực gọn và sáng sủa

Tuy nhiên bố cục dạng lưới trong những thiết kế website chuyên nghiệp mà chúng sắp thấy sau đây lại không tuân thủ cấu trúc này.

Mô-đun dạng lưới mang tới bố cục cân bằng và làm cho thiết kế web gọn gàng hơn. Nội dung cũng được phân bố đều và thuận mắt. Chúng ta có thể tạo ra một ô to cùng nhiều ô nhỏ hơn với các kích thước khác nhau, độ to nhỏ của các ô có thể là dấu hiệu cho biết tầm quan trọng của nội dung bên trong đó, thay vì chia ra ô nào cũng giống ô nào.

Chúng ta chắp những ô chứa hình ảnh với màu sắc sáng sủa để tạo nên một bức tranh ghép có trật tự. Nhờ cách này mà rất nhiều nội dung sẽ được đưa ra ngoài trang chính, tăng khả năng tương tác của người dùng với càng nhiều nội dung trên web càng tốt. 

Thiết kế web dạng lưới grid ngày càng trở nên phổ biến và được dự đoán sẽ tiếp tục là xu hướng được ưa chuộng trong những năm tới. Để giúp bạn hiểu thêm về phong cách phân chia bố cục website này, chúng tôi đã chọn ra 20 thiết kế ấn tượng nhất để giới thiệu trong bài này. Chúng đều sử dụng bố cục với các mô-đun lưới xếp kín vào nhau.

Mặc dù vậy, mỗi website lại có cách sắp xếp riêng của mình, không tìm thấy cái nào giống cái nào. Từ số lượng cột trong mỗi website, sự phân bố vị trí và kích thước, cách sử dụng màu sắc của các ô trong từng lưới...đều thể hiện cá tính riêng và mục đích thiết kế của người chủ website. Những bố cục này giúp mang lại sự hài hòa và loại bỏ sự hỗn loạn của phần nội dung và tạo ra tổng thể một thiết kế website đẹp mắt. 

Column Five

Column Five thiet ke web grid

Hatch

Hatch thiet ke web grid

Bodhi

Bodhi thiet ke web grid

The Escape Committee

The Escape Committee thiet ke web grid

Script & Seal

Script & Seal thiet ke web grid

Lees Ferry

Lees Ferry thiet ke web grid

Csaba Gabor-B

Csaba Gabor-B thiet ke web grid

Native Shoes

Native Shoes thiet ke web grid

Design Your Life

Design Your Life thiet ke web grid

Résidence Mixte

Résidence Mixte thiet ke web grid

Leodis Lager

Leodis Lager thiet ke web grid

V76 by Vaughn

V76 by Vaughn thiet ke web grid

Quincy Réquin & Associés

Quincy Réquin & Associés thiet ke web grid

Everlovin’ Press

Everlovin' Press thiet ke web grid

Mercer Tavern

Mercer Tavern thiet ke web grid

Matchstic

Matchstic thiet ke web grid

KATVIG

KATVIG thiet ke web grid

White Frontier Brewery

White Frontier Brewery thiet ke web grid

Peachey Photography

Peachey Photography thiet ke web grid

Sebastian Sejer & Co

Sebastian Sejer & Co thiet ke web grid

Đây chỉ là một phần nhỏ trong vô vàn các thiết kế web sáng tạo đã sử dụng bố cục dạng lưới grid. Thực sự với cách phân chia bố cục như thế này, chúng ta có thể thỏa sức sáng tạo với những ý tưởng mới. Chính bạn cũng có thể là người khám phá ra một cách sắp xếp nội dung ấn tượng và hiệu quả dựa trên cấu trúc lưới kỳ diệu này!

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