Layout là gì? 8 quy tắc thiết kế layout website cần phải biết

Layout là bố cục tổng thể của một nội dung bất kỳ. Thiết kế layout website là bước đầu tiên trong quá trình thiết kế website. Tuy nhiên, công việc này cũng có những quy tắc riêng. Dựa vào những quy tắc này, nhà thiết kế có thể tạo ra các layout website hợp lý và đẹp mắt. Sau đây, Webico sẽ chia sẻ kiến thức về layout và quy tắc thiết kế layout website cần phải biết. 

Layout là gì?

Định nghĩa layout

Layout là bố cục, hình thức trình bày tổng thể của tài liệu, hình ảnh, video hoặc các phương tiện khác (website, app, …). Đây là bố cục có tác dụng thu hút người xem và giúp người xem xác định những gì họ nhìn thấy được trên trang web của bạn. 

Ví dụ: Website của Webico có layout riêng biệt, giúp người xem dễ dàng nhận diện và cho phép họ truy cập, điều hướng trang web một cách dễ dàng hơn.

Layout website là gì?

Layout website là một mẫu (hoặc khung) thể hiện cấu trúc của trang web. Layout website có vai trò sắp xếp thông tin hiện diện trên trang web, hỗ trợ điều hướng trang web cho cả chủ sở hữu và người truy cập.

Layout website giúp người xem dễ dàng truy cập vào trang web và truyền tải tốt nhất thông điệp của website.  

Tầm quan trọng của layout website

• Một website có layout đẹp sẽ gây ấn tượng với người xem và giữ chân họ ở lại lâu hơn để khám phá những mục khác. 
• Layout cũng là yếu tố góp phần đưa website của bạn lên top Google. 

8 quy tắc thiết kế layout website cần phải biết

Quy tắc bắt buộc: chọn một layout duy nhất

Layout website có quan hệ mật thiết với mức độ tương tác của người xem. Loại layout này ảnh hưởng đến thời gian ở lại và tần suất quay lại trang web của người tiêu dùng. 

Một website trực quan và dễ dàng truy cập sẽ giữ chân được người xem. Ngược lại, một website kết hợp quá nhiều layout sẽ khiến người xem bị rối mắt và khó khăn trong việc tìm kiếm những thứ họ muốn. Do đó, bạn chỉ nên chọn một layout phù hợp nhất cho website của mình.

Quy tắc 1/3

Quy tắc 1/3 rất phổ biến. Vì quy tắc này không chỉ được áp dụng trong thiết kế layout cho trang web mà còn áp dụng trong nhiều lĩnh vực khác: hội họa, nhíp ảnh, kiến trúc, …

Quy tắc ⅓ được thể hiện bởi 3 đường thẳng ngang và 3 đường thẳng dọc cắt vuông góc với nhau tạo thành 9 ô vuông – có tỷ lệ bằng nhau (như hình). Bạn có thể đặt nội dung/thông tin quan trọng của trang web tại 1 trong 4 giao điểm. Mục đích là khiến người xem tập trung vào nội dung quan trọng. Hoặc bạn có thể đặt nội dung tại tất cả các điểm giao nhau. Việc đặt nội dung tại 4 điểm sẽ khiến layout của trang web cân bằng, hơn là tạo tiêu điểm hướng người xem chú ý vào thông tin quan trọng. ⅓ là một trong những quy tắc đơn giản và dễ áp dụng nhất. Do đó, nếu bạn đang loay hoay với việc thiết kế layout website, bạn có thể áp dụng quy tắc này.

Quy tắc lưới

Quy tắc lưới tách layout website thành các ô vuông nhỏ, giúp bạn đặt và phân bố đồng đều các phần tử. Lưới rất dễ để áp dụng cho bất kỹ layout website nào. Quy tắc này nổi bật bởi việc tạo ra các thiết kế gọn ghẽ, cân đối, có trật tự.

Quy tắc phân cấp trực quan

Quy tắc phân cấp trực quan là chia layout website thành 2 phần: chính, phụ. Phần chính sẽ chiếm phần lớn diện tích và thông tin quan trong sẽ được đặt ở phần này. Do đó, bạn cần xác định đâu là nội dung quan trọng mà bạn muốn truyền tải đến người xem và đặt chúng ở phần chính.

Quy tắc cân bằng

Tính thẩm mỹ sẽ mất đi nếu layout của bạn không đảm bảo được sự cân đối. Quy tắc cân bằng yêu cầu đặt các phần tử cân đối với nhau về khoảng cách và không gian. Bạn không nên dồn hết nội dung một bên, bên còn lại để trống. Như vậy là mất cân đối và vi phạm quy tắc này. Layout website của bạn sẽ trở nên hoàn hảo nếu bạn biết cách kết hợp hài hòa giữa quy tắc cân bằng và phân cấp trực quan.

Quy tắc gây sự chú ý bằng hình ảnh

Hình ảnh dễ thu hút sự chú ý của người xem hơn các dạng nội dung khác. Do đó, nếu bạn muốn nội dung đặc biệt nào đó được nổi bật toàn layout, bạn có thể cân nhắc đến quy tắc này.

Quy tắc tạo khoảng trắng

Một layout website hoàn hảo không có nghĩa là bạn phải lấp đầy không gian bằng nội dung. Bạn có thể chừa vài khoảng trắng (không gian trống, không chứa bất kỳ nội dung nào cả). Khoảng trắng sẽ giúp người xem được thư giãn khi phải tiếp nhận quá nhiều thông tin một lúc.

Quy tắc nhất quán

Một layout website tốt phải đảm bảo các yếu tố: điều hướng, giao diện, kiểu chữ, …, quan trọng nhất là màu sắc và kiểu thiết kế. Bạn không nên sử dụng nhiều kiểu thiết kế với các phông chữ, màu sắc riêng biệt cho trang web của mình. Quy tắc này đặc biệt đúng với các trang web muốn xây dựng thương hiệu và tạo dấu ấn với người truy cập. Docker là một ví dụ điển hình.

Các loại layout website phổ biến

Layout một cột

Với layout dạng này, nội dung được sắp xếp tuần tự trong một cột (đã được căn giữa trang web).

Layout 2 cột

Ở kiểu layout này, nội dung được chia đều thành hai cột. Có nghĩa là trang web của bạn gần như chia làm đôi, mỗi bên hiển thị một nội dung nhất định.

Bố cục nhiều cột

Điển hình của loại layout nhiều cột là website của các báo, tạp chí điện tử, doanh nghiệp kinh doanh quần áo, … Ưu điểm của loại layout này là chứa được nhiều thông tin nhưng không quá gây “ngộp” cho người xem. Quy tắc lưới cũng được áp dụng cho loại layout này. 

Layout không đối xứng

Các thành phần trong loại layout này thường được sắp xếp theo tỷ lệ và khoảng cách không bằng nhau. Mặc dù đi ngược lại quy tắc cân bằng và quy tắc lưới nhưng không có nghĩa loại layout này sẽ tạo ra sự hỗn loạn. Mục đích của loại layout này là tăng cường nhấn mạnh, phóng đại các yếu tố quan trọng.

Những câu hỏi thường gặp