Tin tức

10 mẫu layout chuẩn cho thiết kế web - phần 8

19/03/2013

Power Grid

Power Grid - "dạng siêu lưới" là layout phức tạp nhất trong series bài viết này, nhưng đây là một trong số những layout hiệu quả nhất để trình bày trang web có nhiều nội dung liên quan. Từ hình ảnh, nội dung văn bản, nhạc, video... bạn có thể chèn đủ loại nội dung vào trang mà layout vẫn rất đẹp và mạnh mẽ.

thiết kế web layout đẹp


Phần chính nằm ở nửa dưới của hình ảnh ví dụ trên. Để ý thấy nó là một container (vật chứa) lớn bao gồm nhiều khối chữ nhật bên trong. Container này giúp bạn tạo ranh giới nội dung rất rõ ràng, và tất cả nội dung bên trong được trình bày dạng lưới chắc chắn nhưng cũng rất đa dạng, không giống như layout Advanced Grid như giới thiệu ở những bài đầu của series.

Ứng dụng thực tiễn

Dạng layout này thật khó để tưởng tượng ra trong đầu, trừ khi bạn đã xem qua vài ví dụ thực tiễn của chúng. Ví dụ đầu tiên là một trang điển hình về văn hóa nghệ thuật. Trang web như một tấm bảng lớn, trên đó dán đủ các loại thông tin liên quan, nào là Twitter feeds, hình ảnh, danh sách, và nhiều thứ khác.

Tuy thế, nội dung vẫn hoàn toàn gắn kết và hài hòa trong một chỉnh thể do người thiết kế web tạo ra. Layout này dễ dàng mở rộng nếu bạn muốn bổ sung thêm nội dung cho nó, miễn là bạn biết bố trí, sắp xếp một cách hợp lý, thì tổng thể vẫn sẽ gọn gàng và logic.

layout đẹp thiết kế web


Dưới đây ta lại có một ví dụ về thiết kế web của một ban nhạc Rock. Ta thấy nội dung sắp xếp gần giống hệt nhau, tuy nhiên nhìn thì rất khác, đặc biệt là nửa bên dưới web. Thủ thuật nằm ở chỗ tạo ra một box lớn hẳn phía bên trên, sau đó đổi sang những box nhỏ hơn hẳn, chứa đựng nội dung phía dưới.

Nếu tới đây bạn vẫn thấy chưa đủ, hãy xem nốt bài cuối của series này nhé.

layout độc đáo cho thiết kế web

Các bài viết cùng series:

Design Shack