Bố cục (Layout) là cách bạn sắp xếp các thành phần trên trang. Một bố cục tốt sẽ dẫn dắt mắt người dùng đi đúng lộ trình bạn muốn, ngược lại, một bố cục lộn xộn sẽ khiến họ "ngộp" thông tin.
1. Hệ thống 12 Cột (The 12-Column Grid)
Đây là chuẩn mực trong thiết kế web (được dùng bởi Bootstrap, Tailwind, Figma).
- Tại sao là 12?: Vì số 12 chia hết cho nhiều số: 2, 3, 4, 6.
- Ứng dụng:
- Chia đôi: 6 + 6 cột.
- Chia ba: 4 + 4 + 4 cột.
- Sidebar: 3 + 9 cột hoặc 4 + 8 cột.
tsx:
// ✅ Ví dụ Layout Dashboard với Tailwind Grid
<div className="grid grid-cols-12 gap-6">
<aside className="col-span-3">Sidebar</aside>
<main className="col-span-9">Content</main>
</div>2. Đường đi của mắt: F-Pattern & Z-Pattern
Người dùng không đọc toàn bộ trang web, họ chỉ "quét" (scan).
- F-Pattern: Thường dùng cho các trang nhiều văn bản (Blog, Tin tức). Mắt quét từ trái sang phải ở trên đầu, sau đó lùi dần xuống dưới và quét tiếp từ trái sang phải (ngắn hơn).
- Z-Pattern: Thường dùng cho các Landing Page ít chữ. Mắt đi từ Logo (trái trên) -> CTA/Login (phải trên) -> Hero Image (giữa) -> CTA chính (trái dưới).
3. Các Layout phổ biến cho Startup
Layout 1: Centered (Căn giữa)
- Dùng cho: Trang Login, Landing Page tối giản, trang Docs.
- Đặc điểm: Giữ nội dung ở giữa màn hình (thường giới hạn
max-width: 800px) để tăng sự tập trung.
Layout 2: Sidebar (Thanh bên)
- Dùng cho: Quản trị (Admin), Công cụ SaaS, Dashboard.
- Đặc điểm: Sidebar cố định bên trái (điều hướng), nội dung thay đổi bên phải.
Layout 3: Holy Grail (Bố cục 3 khối)
- Dùng cho: Mạng xã hội (Facebook, Twitter).
- Đặc điểm: Nav trái, Feed giữa, Info phải.
4. Gutter & Margin (Khoảng cách cột)
- Gutter: Khoảng cách giữa các cột. Luôn dùng theo hệ thống 8pt (thường là 16px hoặc 24px -
gap-4hoặcgap-6). - Container Margin: Khoảng cách từ mép màn hình vào bên trong. Đừng để text dính sát lề điện thoại. (Vd:
px-4trên mobile).
5. Responsive Design: Mobile First
Luôn thiết kế cho điện thoại trước, sau đó mới đến Desktop.
- Stacking: Trên Mobile, hãy dồn các cột dọc xuống (1 cột). Trên Desktop mới chia ngang.
- Hide/Show: Ẩn các chi tiết rườm rà trên Mobile để giữ giao diện sạch sẽ (Vd: Ẩn sidebar và thay bằng bộ lọc Popup).
tsx:
// ✅ Responsive Grid (Mobile 1 cột, Desktop 2 cột)
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>Cột 1</div>
<div>Cột 2</div>
</div>6. Alignment (Căn chỉnh) - Quy tắc căn lề
Sự chuyên nghiệp nằm ở việc các thành phần thẳng hàng.
- Căn trái (Left-aligned): Mặc định cho hầu hết mọi thứ (Dễ đọc nhất).
- Căn giữa (Center-aligned): Chỉ dùng cho tiêu đề ngắn hoặc các block nhỏ. Đừng căn giữa đoạn văn dài (vì điểm bắt đầu của mỗi dòng không giống nhau làm mắt mệt mỏi).
Kết luận
Layout không cần phải phức tạp. Hãy chọn một "khung xương" vững chắc dựa trên hệ thống 12 cột, căn lề thẳng hàng và luôn nghĩ đến Mobile trước. Một bố cục rõ ràng là nền tảng để người dùng bắt đầu khám phá các tính năng tuyệt vời của bạn.