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?

[Blog nghề web] Số 01(08/2020): Ngành thiết kế web có bị ảnh hưởng bởi Covid?

[Blog nghề web] Số 01(08/2020): Ngành thiết kế web có bị ảnh hưởng bởi Covid?

Đây là bài viết đầu tiên trong chuỗi bài viết mới tổng hợp thông tin hàng tuần trong tháng riêng cho các nhà thiết kế web cập nhật kiến thức. Ngôi Sao Số sẽ cân nhắc chọn lọc kỹ lưỡng nguồn thông tin chính thống nhằm giúp tạo ra kiến thức hữu ích nhất cho các nhà phát triển trang web.

[Blog vũ trụ thiết kế] Số 01(14/9/2020): Intel thay logo, Lightweight trình duyệt web siêu nhẹ

[Blog vũ trụ thiết kế] Số 01(14/9/2020): Intel thay logo, Lightweight trình duyệt web siêu nhẹ

Hàng tuần, nhiều nội dung thú vị về thiết kế ở mọi ngóc ngách trên thế giới được Ngôi Sao Số tổng hợp gởi đến chị em thiết kế.

[9/2020] Nghiên cứu quan trọng cần biết cho các nhà thiết kế web

[9/2020] Nghiên cứu quan trọng cần biết cho các nhà thiết kế web

Ở Việt Nam chúng ta đa phần phán theo cảm tính. Nhưng hãy tập tin vào số liệu, vì nó như xác xuất thống kê giúp bạn đong đếm chính xác các vấn đề của bạn. Những dữ liệu quý giá này không phải ai cũng có thể làm và biết. Cùng khám phá với Ngôi Sao Số nhé.

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