Buổi 06: Thiết Kế UI — Vẽ Trước, Code Sau 🎨

Thành quả: Tạo được 1 wireframe + mockup cho dự án cá nhân!

---

🎯 Mục tiêu buổi học

1. Hiểu tại sao cần "vẽ trước, code sau"
2. Nắm Color Theory cơ bản (chọn màu không xấu)
3. Hiểu Typography (chọn font chữ)
4. Biết Layout & Spacing (sắp xếp gọn gàng)
5. Tạo wireframe bằng AI
6. Dùng cm-ux-master và cm-ui-preview

---

📖 Phần 1: Tại Sao Vẽ Trước?

So sánh: Xây nhà

Không có bản vẽ ❌	Có bản vẽ ✅
Xây xong mới thấy cửa sổ nhỏ	Biết trước kích thước cửa
Phá đi xây lại = tốn x10	Sửa trên giấy = 5 phút
Hàng xóm: "nhà gì xấu vậy?"	Hàng xóm: "nhà đẹp quá!"

Website cũng vậy:

• Wireframe (bản vẽ khung) → 10 phút
• Mockup (bản vẽ đẹp) → 30 phút
• Code lại từ đầu vì xấu → 3 ngày 😭

---

📖 Phần 2: Color Theory — Bí Mật Màu Sắc

Bánh xe màu (Color Wheel)

           🔴 Đỏ     
        🟠      🟣
     Cam    Tím    
   🟡             🔵
  Vàng       Xanh dương
     🟢         💙
       Xanh lá

3 Nguyên Tắc Chọn Màu

1. Complementary (Bổ sung) — 2 màu đối diện trên bánh xe

Đỏ ↔ Xanh lá     |  Hiệu quả: Nổi bật, tương phản mạnh
Cam ↔ Xanh dương  |  Dùng cho: CTA button, warning

2. Analogous (Tương đồng) — 3 màu cạnh nhau

Xanh dương → Xanh lá → Vàng  |  Hiệu quả: Hài hòa, dịu mắt
Đỏ → Cam → Vàng               |  Dùng cho: Background, gradient

3. Monochromatic (Đơn sắc) — 1 màu, nhiều shade

#1a237e (đậm) → #3949ab → #7986cb → #c5cae9 (nhạt)
Dùng cho: Giao diện thanh lịch, chuyên nghiệp

Công cụ chọn màu (MIỄN PHÍ!)

Công cụ	Link	Đặc biệt
Coolors	coolors.co	Nhấn Space = palette mới
Color Hunt	colorhunt.co	Palette có sẵn
Realtime Colors	realtimecolors.com	Xem trực tiếp trên website

Quy tắc 60-30-10

60% = Màu nền chính (Background)    → Trắng/Đen nhẹ
30% = Màu phụ (Cards, sections)     → Màu brand nhạt  
10% = Màu nhấn (Button, links)      → Màu brand đậm

---

📖 Phần 3: Typography — Font Chữ

Font chữ cơ bản

Loại	Đặc điểm	Ví dụ	Dùng cho
Sans-serif	Không chân, hiện đại	Inter, Roboto	Web app, tech
Serif	Có chân, truyền thống	Georgia, Playfair	Blog, luxury
Monospace	Cách đều, kỹ thuật	JetBrains Mono	Code

Quy tắc Typography

Heading h1: 32-48px, Bold (700)
Heading h2: 24-32px, Semibold (600)
Body text:  16-18px, Regular (400)
Small text: 12-14px, Regular (400)

Line-height: 1.5 - 1.8 (cho body text)

Combo font hay dùng

1. Inter (heading) + Inter (body) — Đơn giản, tech
2. Playfair Display (heading) + Lato (body) — Luxury
3. Montserrat (heading) + Open Sans (body) — Thân thiện

---

📖 Phần 4: Layout & Spacing

Grid System (Chia lưới)

┌──────────────────────────────────────┐
│              12 cột                  │
│ ┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┤
│ │ 1│ 2│ 3│ 4│ 5│ 6│ 7│ 8│ 9│10│11│12│
│ ├──┴──┴──┴──┼──┴──┴──┴──┼──┴──┴──┴──┤
│ │  Sidebar  │   Main    │  Sidebar  │
│ │  (4 cột)  │ (4 cột)   │  (4 cột)  │
│ └───────────┴───────────┴───────────┘

Spacing Scale (Thang khoảng cách)

Dùng bội số 4px hoặc 8px:

4px  — rất sát
8px  — sát
16px — vừa (default cho text)
24px — thoáng
32px — section gap
48px — major section
64px — page padding

💡 Quy tắc: Khoảng cách đồng nhất = gọn gàng. Lung tung = xấu!

---

📖 Phần 5: Wireframe bằng AI

Prompt tạo wireframe:

"Tạo wireframe text-based (ASCII art) cho trang landing page 
của app nhắc uống nước. Gồm:
- Header: Logo + Nav (3 mục) + CTA button
- Hero: Heading lớn + subtitle + 2 button + hình minh họa
- Features: 3 cards (icon + title + description)  
- Testimonial: 3 reviews
- CTA: Download app
- Footer: Links + Social"

Wireframe mẫu:

┌─────────────────────────────────────────┐
│ 💧 Logo    Features  Pricing    [CTA] │ ← Header
├─────────────────────────────────────────┤
│                                         │
│   Uống Đủ Nước, Khỏe Mỗi Ngày        │
│   App nhắc nhở thông minh               │
│   [Download] [Xem Demo]                │ ← Hero
│                                 📱      │
├─────────────────────────────────────────┤
│  ⏰ Nhắc nhở   📊 Thống kê  🏆 Thử    │
│  thông minh     chi tiết      thách     │ ← Features
├─────────────────────────────────────────┤
│  "App hay lắm!" "5 sao!" "Must-have!" │ ← Reviews
├─────────────────────────────────────────┤
│         [🔥 Download Ngay!]             │ ← CTA
├─────────────────────────────────────────┤
│  About | Privacy | Contact | 🔗 Social │ ← Footer
└─────────────────────────────────────────┘

---

📖 Phần 6: CodyMaster Skills

cm-ux-master

48 luật UX quan trọng nhất, bao gồm:

• Fitts' Law: Nút càng lớn → càng dễ click
• Hick's Law: Ít lựa chọn → quyết định nhanh hơn
• Jakob's Law: Người dùng quen giao diện giống các site khác

cm-ui-preview

Tạo mockup bằng Google Stitch MCP → xem trước giao diện trước khi code!

cm-design-system

Quản lý màu sắc, font, spacing → nhất quán toàn bộ website.

---

🎓 Tóm tắt

Khái niệm	Nhớ gì
Wireframe	Bản vẽ khung (xương)
Color 60-30-10	Nền-Phụ-Nhấn
Typography	Max 2 fonts, cỡ chữ nhất quán
Spacing	Bội số 8px, đồng nhất
Grid	12 cột, chia đều

---

⏭️ Buổi tiếp theo

Buổi 07: HTML/CSS — Xây "Bộ Xương" và Mặc "Áo" cho Website 🦴👗