Bố cục dạng thẻ siêu gọn gàng trong thiết kế web (P.2)

Thứ tư - 01/08/2018 09:15

Chúng ta sẽ tiếp tục phần 2 với những website có bố cục dạng lưới (thẻ) rất bắt mắt.

Bố cục dạng thẻ siêu gọn gàng trong thiết kế web (P.2)

Bố cục dạng thẻ vẫn luôn là một phương án thiết kế thông minh dành cho những thiết kế website giàu nội dung hình ảnh và nội dung chữ. Có rất nhiều kiểu sắp xếp các ô thẻ hay ô lưới để tạo sự mới mẻ và giúp các thiết kế website đẹp hơn.

Chúng ta sẽ tiếp tục phần 2 với những website có bố cục dạng lưới (thẻ) rất bắt mắt. 

Nicolas Tarier

Website này có các khối hộp lệch xuống phía dưới trang chủ. Nếu bạn di chuột qua một bức ảnh, nó sẽ di chuyển nhẹ nhàng và mỗi ảnh cho thấy một khối vuông đặc có màu khác nhau ở dưới.

11 nicolastarier grid layout trong thiet ke web

Pierrick Calvez

Đây là một thiết kế website đẹp với slide ảnh cho thấy những giao diện khác nhau và website được thể hiện ở những thiết bị khác nhau, đi kèm với đó là bố cục dạng lưới với những từ ngữ được lựa chọn. 

12 pierrickcalvez grid layout trong thiet ke web

Rodgers Townsend

Có một số sự chuyển đổi khác nhau khi bạn di chuột qua bất kỳ khối nào trên trang chủ của website này, chẳng hạn như sự trong suốt, đổi chữ và đổi màu...

13 rogertownsend grid layout trong thiet ke web

Hanging Up The Moon

Đây là tiêu đề của một album nhạc của nghệ sỹ Singapore Sean Lam, với sự giúp đỡ của một số người bạn là nhạc sỹ. Mỗi bức ảnh đơn sắc là một link đến một bài hát trong album đó.

14 hangingupthemoon grid layout trong thiet ke web

Teruhiro Yanagihara

Bố cục này rất tương đồng với phong cách bố cục của Pinterest với ảnh thumbnail image, một tiêu đề và chữ nhỏ xuất hiện ở mỗi ô thẻ. 

15 teruhiroyanagihara grid layout trong thiet ke web

Faebric

Bố cục này sử dụng thẻ trong thẻ, mỗi hình ảnh có một màu trong suốt với tiêu đề, miêu tả và ngày tháng. 

16 faebric grid layout trong thiet ke web

Atlason

Đây có lẽ là một bố cục dạng thẻ tối giản nhất có thể, mọi thứ bao gồm logo đều có màu đen/xám trên nền trắng. Thật là một thiết kế độc đáo. 

17 atlason grid layout trong thiet ke web

Fabrica

Trang web này có phần nền aniamtion toàn trang và thay đổi rất nhanh chóng. Lưới của nó biểu thị bởi những đường kẻ mảnh màu trắng, chia trang web ra, một sự tiếp cận khác của phong cách thiết kế này. 

18 fabrica grid layout trong thiet ke web

Yes

Đây là một thiết kế tối giản khác sử dụng bố cục dạng lưới nhưng đáng xem hơn nhiều. Mặc dù chủ đề của nó là đơn sắc, sản phẩm vẫn được thể hiện với đầy đủ mày. Di chuột qua bất kỳ ảnh nào khiến cho phần trong suốt màu trắng xuất hiện với từ "View" màu đen. 

19 yes grid layout trong thiet ke web

Lifestyle Clubbing

Trang này sử dụng nền animation tối với một se-ri các hình kim cương (hoặc hình vuông với độ nghiêng 90 độ). Một trong số đó chạy một slideshow nhỏ trong khi những ô khác có phần trong suốt màu đen với chữ màu trắng ở trên. 

20 lifestyleclubbing grid layout trong thiet ke web

 

Tác giả bài viết: Phùng Thanh Hằng