KHÓA HỌC UX/UI DESIGN SYSTEM

KHAI GIẢNG: Sáng CN, ngày 6 tháng Tư, 2025

  • Học sáng thứ Bảy và Chủ Nhật hàng tuần.

  • Đảm bảo đầu ra: Xem chính sách →

  • Xây dựng chuẩn chỉnh từng bước tạo nên Design System.

  • Hiểu quy trình và thực thi chắc tay.

  • Sửa bài hàng tuần từ GV / Mentor.

  • Nắm vững các core components để triển khai hi-fi prototype và bàn giao với devs.

  • Tạo dựng quy trình thông minh giúp bạn tiết kiệm công sức và thời gian đáng kể.

  • Đặc biệt lợi thế nếu bạn muốn áp dụng vào các dự án freelance kiếm thêm ngoài giờ.

HỌC UX THỰC TẾ - LÀM ĐƯỢC VIỆC
100% ONLINE QUA ZOOM


1. THỜI GIAN & KHỐI LƯỢNG

  • Mỗi khóa kéo dài 8 tuần (2 tháng).

  • 8 buổi học = 20 giờ → Sáng Chủ Nhật hàng tuần (10:00 AM – 12:30 noon)

  • 8 buổi sửa Bài tập theo nhóm → Sáng Thứ Bảy hàng tuần, book lịch cố định.

  • 1 buổi Tổng kết thuyết trình bài tập lớn (xếp lịch với Giảng viên vào cuối khóa)


2. HỌC PHÍ & THANH TOÁN

  • Học phí chính thức: 7.470.000 (đã bao gồm thuế, phí)

  • Chia nhỏ 3 lần thanh toán:
    30% khi ghi danh; 35% giữa khóa học; và 35% gần cuối khóa học.

  • Nhận đầy đủ hóa đơn cá nhân, hoặc hóa đơn công ty.

  • Cam kết qua Hợp đồng cung ứng dịch vụ Đào tạo với từng bạn học viên.


3. ƯU ĐÃI TIẾT KIỆM

Chọn 1 ưu đãi được lợi nhất dành cho bạn:

  • Học viên từng học ở Staylab: Luôn được ưu đãi 7%.

  • Đăng ký nhóm 2 bạn: Mỗi bạn tiết kiệm được 10%.

  • Đăng ký combo 2 khóa học: Được ưu đãi 10% cho cả 2 khóa.


4. ĐỐI TƯỢNG HỌC VIÊN

  1. UX/UI và Product Designer trên 1 năm kinh nghiệm
    ↳ hiểu về các Universal Principles để đưa ra giải pháp thiết kế giao diện tinh tế, hiệu quả, quan trọng là làm nhanh, scale-up.

  2. Business Analyst, Engineer
    ↳ muốn nâng cao chuyên môn về vận hành hệ thống thiết kế UX/UI.

  3. Product Owner, Product Manager, Marketer hoặc Key Account trong mảng Tech
    ↳ muốn hiểu UX/UI để lên quy trình tốt hơn, xây Design System giúp scale up mạnh và bền vững, feedback chất lượng để hoàn thành dự án nhanh chóng.

HỆ THỐNG BÀI GIẢNG VÀ VIDEO

✅ 60 - 100+ slides cho mỗi tuần, chi tiết từng bước thực hiện và lý do của mỗi nhóm kiến thức.

✅ Video được cắt ghép thành các đoạn nhỏ, dễ dàng xem lại sau khóa học.

✅ Record từng buổi học.

🤫 Chỉ riêng case study thực tế của GV; và câu hỏi cá nhân của Học viên sẽ không record, để đảm bảo tính riêng tư cho từng buổi học.

NỘI DUNG KHÓA HỌC 8 TUẦN

  • 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.

HÃY ĐỂ STAYLAB TƯ VẤN KỸ HƠN CHO BẠN NHÉ!

Hoặc nhắn trực tiếp Zalo admin: 0979-798-313 (Text only)