Please enable JavaScript.

Coggle requires JavaScript to display documents.

UI Design Fundamentals - Coggle Diagram

- - - - Size (to → nhỏ)
      - Weight (đậm → nhạt)
      - Color (nổi → trung tính)
      - Position (trên → dưới)
      - Spacing (gần → liên quan)
- - - - Cần học:
        
        Primary / Secondary color
        
        Color harmony (analogous, complementary)
        
        Contrast & accessibility (WCAG)
        
        Tâm lý màu sắc (màu tạo cảm giác gì)
      - ❌ Tránh:
        
        Dùng quá nhiều màu
        
        Màu chữ & nền không đủ tương phản
      - 👉 Tip: 1 primary + 1 secondary + neutral là đủ.
- - - - Serif vs Sans-serif
      - Font cho body vs heading
      - Font weight & line-height
      - Hierarchy chữ (H1, H2, body, caption)
      - Letter spacing
- - - - White space (macro & micro)
      - Grid system (8pt grid, 4pt grid)
      - Alignment (trái, giữa, phải)
- - - - Button style (primary / secondary)
      - Icon style
      - Border radius
      - Shadow usage
      - Component reuse
- - - - Button
      - Input / Form
      - Dropdown
      - Modal
      - Card
      - Navigation (tab, sidebar, bottom nav)
- - - - Hover / Active / Disabled
      - Error / Success state
      - Loading / Empty state
      - Micro-interaction cơ bản