KHÓA HỌC UX/UI DESIGN SYSTEM

BUỔI 1: THE FOUNDATION MATERIALS THAT BUILD UP A DESIGN SYSTEM (Lý thuyết)

1. Khái niệm Design System: Định nghĩa, lịch sử hình thành và mục tiêu xây dựng.

2. Kho lưu trữ thiết kế (The design repository): Style guide, Component Library, Pattern Library.

3. Đội ngũ xây dựng và duy trì DS: Cấu trúc, tổ chức team theo 3 dạng chính – Solitary, Centralized, Federated.

4. Điều gì khiến DS bị tan tành và không phù hợp tổ chức?
   * Hoạt động: Set up the working environment on Figma

———

BUỔI 2: THE DESIGN REPOSITORY – Part 1: PREPARATION & SETTING OF THE BASE (Thực hành)

1. Laws of UX: Thực hiện Design Audit bằng các nguyên tắc thực chiến để đánh giá thực trạng.

2. Làm rõ những gì bạn có thể cải thiện sản phẩm thông qua vấn đề và nhu cầu.

3. Tạo ra bộ thư viện nền tảng cho hệ thống bao gồm: màu, chữ, lưới, khoảng cách, độ bo góc...

4. Phân loại và phân cấp các yếu tố cơ bản để tạo ra bộ thư viện sơ khai.

———

BUỔI 3: SỬA BTVN TUẦN 1
QUA ZOOM 30-60 PHÚT THEO NHÓM (book lịch ngoài giờ)

BUỔI 4: DEFINING THE OUTCOMES DERIVED FROM THE DESIGN SYSTEM (Lý thuyết)

1. Tác động của Design System vào quy trình làm việc của các vị trí liên quan: Devs, PM, PO, Sale, Marketing. Và người dùng sản phẩm.
   ↳ Ước tính ROI hệ thống thiết kế sẽ tiết kiệm được bao nhiêu thời gian, và thời gian đó có giá trị bao nhiêu đối với tổ chức.

2. Design Language: Ngôn ngữ thiết kế hướng internal và external + 3 đặc điểm chính.

3. Design Principles: Đặc điểm và các bước chi tiết để xây dựng DP cho DS của bạn.↳ Học thêm các thành phần gồm âm thanh, chuyển động và tương tác.

4. Guidelines: A formal definition + Usages + Technical Sp
   * Hoạt động: Phân loại và phân cấp các component đang hoạt động trên giao diện sản phẩm.

———

BUỔI 5: THE DESIGN REPOSITORY – Part 2: DESIGN TOKENS FOR DESIGNERS & DEVELOPERS (Thực hành)

1. Design Tokens: Định nghĩa và cách sử dụng các loại tokens gồm Global tokens, Alias tokens, Component-specific.

2. The HSB System: Thiết kế hệ thống màu quy chuẩn qua các thông số và lượng hóa.

3. Grids & Layout: Các dạng lưới và bố cục cho đa dạng thiết bị.

———

BUỔI 6: SỬA BTVN TUẦN 2
QUA ZOOM 30-60 PHÚT THEO NHÓM (book lịch ngoài giờ)

BUỔI 7: DESIGN SYSTEM IMPLEMENTATION (Lý thuyết)

1. DS Guidelines: Nguyên tắc hướng dẫn sử dụng Hệ thống thiết kế, gồm Formal Definition, Usage, Technical Guidelines, Related Components.

2. Product Lifecycle và thời điểm thích hợp để xây dựng DS & alternatives.

3. Team structure & SOW: Khối lượng và các loại hình công việc để khai triển DS – Giai đoạn xây dựng DS.

4. Những điều giúp không gây rủi ro khi khai triển DS.
   * Hoạt động: Tạo wireflow các tính năng chính, mục tiêu giúp xây dựng bố cục, và xác định các thành phần giao diện quan trọng trong DS của riêng hệ thống bạn đang làm.

———

BUỔI 8: THE DESIGN REPOSITORY – Part 3: TYPOGRAPHY & REUSABLE COMPONENT LIBRARY (Thực hành)

1. Các yếu tố căn bản tạo nên hệ thống chữ: Typeface, Size units, Type scale

2. Tính dễ đọc và khả năng đọc từ mặt chữ.

3. Discussion: Đơn vị trong hệ thống chữ

4. Hệ thống phân cấp chữ * quan trọng

———

BUỔI 9: SỬA BTVN TUẦN 3
QUA ZOOM 30-60 PHÚT THEO NHÓM (book lịch ngoài giờ)

BUỔI 10: THE SINGLE SOURCE OF TRUTH (Lý thuyết)

1. Documentation (phần 1) tổng thể Design System: Thời điểm thực hiện, khối lượng việc cần làm, và danh sách các hạng mục (checklist).

2. Các yếu tố tạo nên SOT: Phân loại tên thành phần, Cấu trúc và hành vi sử dụng, Bối cảnh và quy định sử dụng, Cập nhật gần nhất

3. Bài mẫu của GV (case study thực tế).
   * Hoạt động: Xây dựng các thành phần quan trọng, được xếp theo thứ tự ưu tiên.

———

BUỔI 11: UI DESIGN PATTERNS & TEMPLATES (Thực hành)

1. UI Pattern: Định nghĩa, mục tiêu và ngữ cảnh sử dụng.

2. Template = Content Structure + Layout + Context.

3. Xây dựng Design Pattern của nhóm: Named Solution + Problem + Context.

———

BUỔI 12: SỬA BTVN TUẦN 4
QUA ZOOM 30-60 PHÚT THEO NHÓM (book lịch ngoài giờ)

BUỔI 13: DESIGN SYSTEM ROADMAP (Lý thuyết)

1. Impact & Measure: Cách đo lường hiệu quả khi khai triển DS

2. Team structure & SOW: Khối lượng và các loại hình công việc để khai triển DS – Giai đoạn duy trì và cập nhật DS.
   * Hoạt động: Tập trung vào chỉnh sửa chi tiết cho Bài tập cuối khóa.

———

BUỔI 14: PREPARING REPORTS AND DOCUMENTATION (Thực hành)
Thực hành trên bảng mẫu dựng sẵn do Staylab cung cấp.

1. Documentation (phần 2) chi tiết từng thành phần + Foundation: Hệ thống tỉ lệ, Cấu trúc tên, Cách sử dụng.

2. Hướng dẫn trình bày chi tiết về Design Tokens, để làm việc với Dev.

3. Giảng viên chia sẻ lớp xem case study thực tế → Tập trung vào bảng kỹ thuật của components.

———

BUỔI 15: RÁP TOÀN BỘ CASE STUDY CUỐI KHÓA
QUA ZOOM 30-60 PHÚT THEO NHÓM (book lịch ngoài giờ)

• Bài tập lớn: Xây dựng Design System dựa vào chủ đề sản phẩm mà nhóm tự chọn (Web app thực tế, hoặc GV sẽ cung cấp)
• Tuần này có 2 buổi Homework Consulting để hoàn thành trọn vẹn đồ án.

Xây dựng Design System dựa vào chủ đề sản phẩm mà nhóm tự chọn

• File Figma: Các bạn thực hiện toàn bộ Design System phù hợp với nguồn lực của nhóm.

• Hoàn chỉnh Document bàn giao Design System cho sản phẩm

• Soạn Case Study (slides) nói về các bước các bạn đã thực hiện, nên vận dụng storytelling theo dạng: Giới thiệu ngữ cảnh → Mục tiêu → Kế hoạch thực hiện → Hoàn cảnh bất ngờ → “Now I know that” bạn đã học được điều gì mới mẻ làm thành kinh nghiệm thú vị → Kết quả dự án.