Thiết kế layout với cột trong website

Dưới đây là các layout thường được sử dụng.

Một cột (Single column)

Thiết kế một cột dựa trên phương pháp thiết kế đơn giản. Đây là giao diện mặc định của các blog nhỏ do chỉ tập trung vào nội dung.

Thiết kế giao diện một cột của trang web medium.com
Thiết kế giao diện một cột của trang web medium.com

Ghi chú: thường giao diện một cột sẽ để menu “fix” trên trang. Như vậy sẽ tránh được người dùng sẽ cuộn chuột quá nhiều.

Thiết kế chia đôi

Đây là thiết kế đặt biệt mà nội dung được chia làm 2 phần bằng nhau trong trang web.

Chia đôi giao diện trên trang 62 models
Chia đôi giao diện trên trang 62 models

Chia đôi được sử dụng khi bạn muốn chia nội dung về chức năng trang web ra các thành phần như nhau, ví dụ như trang Dropbox guide.

Chia đôi giao diện trên trang Dropbox Guide
Chia đôi giao diện trên trang Dropbox Guide (https://www.dropbox.com/guide)

Ghi chú: 
Tránh sử dụng nhiều nội dung trên mỗi trang chia đôi. Vì chức năng là muốn người dùng chọn các trang để truy cập, nên nội dung quá nhiều sẽ khiến người dùng sao nhãng.
Có thể sử dụng thêm các hiệu ứng để làm nổi bật cho trang phần nội dung.

Chia cột to nhỏ

Khi muốn tạo ra các giao diện khác biệt thì có thể sử dụng cách này.

Giao diện không bằng nhau của Dropbox.com
Giao diện không bằng nhau của Dropbox.com

Ghi chú:
Nội dung của hai phần này cũng không bằng nhau. Nội dung thì tương đương với độ lớn của mỗi cột.
Nhấn mạnh vào màu sắc. Để người dùng có thể thấy được sự khác nhau của hai phần này.

Chia nhiều cột bằng nhau

Đây là cách chia cột thông thường nhất. Ví dụ chia hai cột một bên là hình ảnh, biểu đồ một bên là nội dung.
Ví dụ khác là các nội dung có độ quan trọng bằng nhau, hoặc đưa cho người dùng các lựa chọn tương đương.

Chia cột bằng nhau trong trang dropbox
Chia cột bằng nhau trong trang dropbox

Hệ thống lưới (grid system)

Đây là giao diện thường thấy của danh sách các gallery (bộ sưu tập, album ảnh) hoặc danh sách các mục có hình ảnh đại diện. Ví dụ youtube:

Giao diện website youtube
Giao diện website youtube

Ghi chú:

  • Mỗi card thì có thể click ra một trang chi tiết được. Tốt hơn khi di chuột vào thì sẽ có hiệu ứng xảy ra.
  • Thiết kế mỗi card có một hình ảnh đại diện nhỏ sẽ đẹp và chi tiết hơn.
  • Để các khoảng trống giữa các card là đủ lớn.

Thiết kế dạng bài báo, tạp chí

Đây là thiết kế các nhiều cột và hàng không đều nhau phù hợp với các trang báo, tạp chí, blog, tin tức. Vì nội dung mỗi mục là nhiều hay ít khác nhau nên nó cũng hiển thị khác nhau.

Chia cột trang web wired.com
Chia cột trang web wired.com

Ghi chú:
Layout này nhấn mạnh vào hình ảnh và tiêu đề. Nếu nhấn mạnh vào mục nào đó thì hãy để phần đó có tiêu đề lớn hơn, hình ảnh to hơn và nội dung nhiều hơn.

Phong cách thiết kế trang nytimes
Phong cách thiết kế trang nytimes

 

Leave a Reply

avatar
  Subscribe  
Notify of