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

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ẻ 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
Có: 0/0 đã cho sao
tiếc gì 1 click để cho sao

Bạn đã xem chưa?

Microsoft Announces Clarity - Kẻ ngáng đường Google Analytics?

Microsoft Announces Clarity - Kẻ ngáng đường Google Analytics?

Microsoft công bố một công cụ mới mang tên Microsoft Announces Clarity hiển thị bản đồ nhiệt cách người dùng tương tác chính xác những gì đang làm trên trang web của bạn. Liệu Microsoft có đang ngáng đường Analytics của Google?

8 công cụ miễn phí từ Google phải biết và cần cho trang web doanh nghiệp

8 công cụ miễn phí từ Google phải biết và cần cho trang web doanh nghiệp

Nếu bạn đang điều hành một trang web doanh nghiệp hoặc đơn giản là một blog. Bạn có thể có nhiều lượt truy cập hơn, kiếm tiền hay cải thiện trang web của mình bằng cách sử dụng một số công cụ miễn phí của Google.

Nhiều cải tiến bảo mật đáng giá trong Google Workspace

Nhiều cải tiến bảo mật đáng giá trong Google Workspace

Google Workspace được nâng cấp với nhiều cải tiến đáng giá về bảo mật và nhiều tính năng cho trải nghiệm và an toàn hơn.

Quay lại trang Blog
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây