UI Design System

• Design System là gì? Tại sao cần Design System?
• Phân biệt UI, UI Kit, Style Guide và Design System
• Cấu trúc cơ bản của một Design System
• Design System giải quyết những vấn đề gì trong quá trình thiết kế và phát triển sản phẩm?
• Giới thiệu tư duy system thinking trong design

Bài tập: Audit một sản phẩm để tìm các vấn đề về inconsistency và đề xuất những thành phần cần được systemize.

Hiểu cách biến một bảng màu nói chung thành một color system có cấu trúc và khả năng mở rộng.

• Foundation là gì? Vai trò của Foundation trong Design System
• Phân biệt color palette và color system
  
• Xây dựng color scale và color hierarchy
• Các loại màu: Brand, Neutral & Semantic colors
• Cách đặt tên và tổ chức color token
• Nguyên tắc cơ bản về contrast và accessibility
  

Bài tập: Xây dựng color system cho một brand/product giả định.

Xây dựng hệ thống typography và spacing tạo nên hierarchy, rhythm và tính nhất quán cho giao diện.

• Vai trò của typography trong việc xây dựng hierarchy và visual consistency
  
• Xây dựng type scale và hệ thống typography
  
• Nguyên tắc xây dựng spacing system và visual rhythm
  
• Phân biệt các hệ thống lưới khác nhau, tính ứng dụng và cách xây dựng hệ thống layout cho sản phẩm
  
• Cách tổ chức token cho typography, spacing và layout

Bài tập: Xây dựng typography, spacing và layout foundation cho cùng một product/brand.

Hoàn thiện các thành tố cơ bản khác tạo nên visual language của sản phẩm.

• Các thành tố Foundation khác: Iconography, border, radius, elevation, illustration và motion
  
• Cách xây dựng một visual language nhất quán cho sản phẩm
  
• Nguyên tắc xác định scale, rules và cách sử dụng cho foundation
  
• Phân biệt foundation dùng chung và các rule đặc thù của product

Bài tập: Hoàn thiện foundation library và xây dựng guideline cơ bản.

Học cách tổ chức các thành phần thành một hệ thống thay vì một file UI rời rạc.

• Review mối quan hệ: Foundation -> Token -> Component -> Pattern -> Template
  
• Cách tổ chức Design system library trên Figma
  
• Cấu trúc page, section và component library.
  + Naming convention cho component, property, variant và variable
  
• Nguyên tắc xây dựng một hệ thống dễ tìm, dễ hiểu và dễ mở rộng
  
• Một số vấn đề thường gặp khi design system bắt đầu scale
  

Bài tập: Xây dựng information architecture và naming convention cho design system library.

Hiểu cách xây dựng UI có khả năng tái sử dụng và kết hợp trong toàn bộ sản phẩm.

• Component-based design là gì?
• Nguyên lý atomic design và cách ứng dụng linh hoạt
• Khi nào một UI element nên trở thành component
• Component anatomy và component hierarchy
• Từ component UI đến component behavior
  
• Cách tạo component cơ bản một cách linh hoạt trong Figma

Bài tập: Xây dựng nhóm basic components như Button, Input, Checkbox, Badge…

Học cách xử lý các UI phức tạp bằng tư duy composition thay vì tạo một component khổng lồ.

• Component composition là gì?
  
• Các nhóm complex components phổ biến
  
• Cách xác định component boundary trong UI phức tạp
  
• Tách structure, content và behavior.
  
• Slots và các vùng có khả năng tùy biến
  
• Cân bằng giữa reusability và flexibility

Bài tập: Hoàn thiện một component phức tạp trong Figma

Chuyển từ tư duy giải quyết từng UI riêng lẻ sang giải quyết các vấn đề UX lặp lại.

• Design pattern là gì?
  
• Phân biệt component, component composition, pattern và template
  
• Mental model và mối liên hệ với design pattern
  
• User expectation và behavioral consistency
  
• Các nhóm pattern phổ biến
  
• Cách nhận diện một recurring UX problem
  
• Cách xây dựng một pattern từ nhiều component và UX rules

Bài tập: Phân tích một recurring UX problem và thiết kế một design pattern.

Hiểu rằng pattern không chỉ quy định UI, mà còn quy định cách hệ thống đưa ra quyết định trong từng context

• Decision logic là gì?
  
• Cách xác định các điều kiện và nhánh xử lý trong một pattern
  
• Cách xử lý edge cases và exception
  
• Phân biệt generic pattern và product -specific pattern
  
• Phân biệt business rules và UX rules

Bài tập: Hoàn thiện một pattern bao gồm UI, behavior, decision logic và usage rules.

Học cách biến một Design System thành tài sản chung mà nhiều người có thể sử dụng và phát triển.

• Tại sao Design System cần documentation?
  
• Cách viết guideline cho foundation, token, component và pattern
  
• Cấu trúc documentation: what, why, when, when not, anatomy, behavior, rules, do/don't, examples
  
• Cách làm việc giữa Designer và Developer
  
• Quản lý thay đổi, versioning và maintenance cơ bản

Bài tập: Viết documentation cho 1 component và 1 pattern, xây dựng guideline cơ bản cho việc sử dụng và maintain hệ thống.

Nếu AI trở thành một người cùng làm việc với designer và developer, Design System cần được xây như thế nào để AI có thể đọc, hiểu và sử dụng nó?

• AI-native Design System là gì? AI cần gì để hiểu một Design System?
  
• Phân biệt AI-assisted và AI-native
  
• Từ UI assets -> Structured knowledge
  
• Làm sao để build Design System AI-readable?
  
• AI có thể làm gì với một Design System có cấu trúc tốt?

• Đồ án cuối khóa: Xây dựng một mini design system cho một product/brand, bao gồm: foundation + tokens, component library, 1+ complex component, 2-3 patterns, documentation, ứng dụng vào 1 số màn hình product
  
• Học viên thuyết trình bài làm
  
• Nhận xét và phản hồi