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. 

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. 

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.

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. 

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. 

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.

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. 

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. 

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. 

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.