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

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

Ngày nay chúng ta thấy rất nhiều kiểu phần chia các ô lưới trên website.

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

Xu hướng bố cục dạng lưới hay dạng thẻ (card layout) đã trở nên phổ biến trong thiết kế website hiện đại, mang lại diện mạo gọn gàng và sáng sủa cho website. 

Ngày nay chúng ta thấy rất nhiều kiểu phần chia các ô lưới trên website. Cách thay đổi này để đáp ứng các xu hướng thiết kế web hiện đại như thiết kế website responsive , thiết kế phẳng...Dưới đây là một số ví dụ về các website sử dụng rất thành công bố cục dạng thẻ trong thiết kế của mình. 

By Landry

Đây là một gallery ảnh đen trắng được thực hiện bởi Landry A. Nền của nó có màu đen và tổng thể màu sắc cũng là màu tối. Những hình ảnh được phủ màu tối nhẹ sẽ xuất hiện khi bạn di chuột vào. 

1 bylandry card layout trong thiet ke web

We Are Marketing

Dạng lưới này yêu cầu bạn click vào để câu trả lời cho câu hỏi: "Bạn muốn điều gì từ một công ty?". Các ô lưới mang các màu pastel khác nhau và chuyển sang hộp màu xám với viền tím khi di chuột qua. Khi bạn chọn và chạm vào nút ‘Proceed’, bạn sẽ đến với trang có nhiều nội dung chi tiết hơn liên quan đến lựa chọn của bạn. 

2 wearemarketing card layout trong thiet ke web

Will Do

Hãng thiết kế này sử dụng bố cục dạng thẻ để thể hiện thumbnail công việc của họ. Khi bạn cuộn trang xuống, thanh navigation sẽ cố định ở bên trái.

3 willdo card layout trong thiet ke web

Di Jones Real Estate

Thiết kế website bất động sản này sử dụng dạng lưới đẹp mắt để thể hiện những bức ảnh với màu đen trong suốt bao phủ. Khi di chuột vào, lớp phủ màu đen đó sẽ biến mất. 

4 dijonesrealestate card layout trong thiet ke web

4NewsWall

Đây là trang web được giới thiệu bởi British TV channel, Channel 4. Khi bạn di chuột qua các ô và bất kỳ này nào ở bên phải màn hình, tất cả câu chuyện không thuộc ngày đó sẽ được làm tối màu. Nhiều hiệu ứng animation làm cho trang này trở nên sống động. 

5 4newswall card layout trong thiet ke web

Lukkos

Hãng thiết kế web này sử dụng lưới đơn sắc cho landing page của mình với một số điểm nhán màu đỏ. Lưới cũng chính là meni nhưng đồng thời cũng là hướng dẫn từng bước các quá trình duyệt web này. Đâu tiên là xemAbout page, cho đến cuối cùng là Contact page.

6 lukkos card layout trong thiet ke web

Quadra Tenis

Website của Brazil mang người đọc đến với những tin tức mới nhất về quần vợt. Khi bạn di chuột qau ảnh, phần chữ headline trắng di chuyển lên và mờ dần, đồng thời bức ảnh được phóng to. 

7 quadratenis card layout trong thiet ke web

Van Houtte Coffee Services

Công ty cung cấp dịch vụ cà phê cho các văn phòng của Canada với những thành phần website được đặt trong một chiếc hộp, phần nội dung có phần tràn ra ngoài so với đường viền nhưng như vậy lại tạo ra một diện mạo khác biệt cho bố cục dạng lưới. 

8 vanhouttecoffeeservices card layout trong thiet ke web

Made By Few

Trang web quảng bá cho hội thảo về thiết kế website. Các lưới mà nó sử dụng chính là navigation menu với những khối có màu sắc sáng sủa và chéo một góc rất phá cách. 

9 madebyfew card layout trong thiet ke web

Rigas Geto Muzejs

Trong tiếng Anh, đây là Riga Ghetto và Holocaust ở Latvia Museum, và ở trang About có những dòng thông tin về những người Do Thái trong nạn Diệt chủng. Trang chủ của website có bố cục dạng thẻ với 6 bức ảnh của những người  có liên quan đến Diệt chủng. Khi bạn di chuột qua tiêu đề màu đen sẽ xuất hiện với kích thước lớn với một màu đỏ đậm trong suốt. Câu chuyện đằng sau các bức ảnh đều rất đáng đọc. 

10 rigasgetomuzejs card layout trong thiet ke web

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