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?

Google PageSpeed Scores được cập nhật với Lighthouse 8.0

Google PageSpeed Scores được cập nhật với Lighthouse 8.0

Google đã công bố bản phát hành Lighthouse 8.0 với sự kết hợp giữa tính năng cho điểm chặt chẽ hơn nhưng "dễ dãi" hơn. Hầu hết các trang web đều được cải thiện điểm số.

Google không xếp hạng dựa trên URL thân thiện, cũng không phân biệt bài blog hay dịch vụ

Google không xếp hạng dựa trên URL thân thiện, cũng không phân biệt bài blog hay dịch vụ

Thông thường Seoer ở Việt Nam luôn muốn xây dựng cấu trúc URL "đẹp". Nhưng với câu trả lời từ John Mueller (Senior Webmaster Trends Analyst) thì tất cả đều ngã ngửa.

Google nói về cách sử dụng từ khoá trong nội dung

Google nói về cách sử dụng từ khoá trong nội dung

Các SEOer thường cố gắng làm bài viết có chứa quá nhiều từ khóa, bài viết đôi khi đọc rất buồn cười và vô giá trị. Điều này sẽ không còn nữa?

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