Nội dung
Học xong bạn làm được gì
01
Visual Design Principles
02
Color Theory và Accessibility
03
Figma Basics và Dev Handoff
04
Size, Weight, Color, Spacing
05
Bài 5 — Gestalt Principles trong UI
06
Bài 6 — Typography Scale & Type System
07
HSL, Contrast, A11y
08
Columns, Gutters, Margins
Chương trình học
60 bài học, 1 bài kiểm tra
Học theo thứ tự, hoặc nhảy tới phần bạn cần. Không khoá bài nào cả.
01
Bài học
46 bài
Visual Design Principles
→
Color Theory và Accessibility
→
Figma Basics và Dev Handoff
→
Bài 5 — Gestalt Principles trong UI
→
Bài 6 — Typography Scale & Type System
→
Bài 9 — Spacing System & The Power of 8
→
Bài 12 — Components & Variants
→
Bài 13 — Component API Design Thinking
→
Bài 14 — Design Tokens — Foundation Layer
→
Bài 16 — Building a Color System trong Figma
→
Bài 17 — Typography System trong Figma
→
Bài 19 — Elevation, Shadows & Depth
→
Bài 20 — Border Radius System
→
Bài 21 — Motion Design Tokens
→
Bài 22 — Button Anatomy & States
→
Bài 24 — Navigation Patterns
→
Bài 26 — Empty States, Loading & Error
→
Bài 27 — Modal, Drawer, Popover, Tooltip
→
Bài 28 — Mobile-First Design Approach
→
Bài 29 — Responsive Breakpoints & Fluid Type
→
Bài 30 — Dark Mode Design Principles
→
Bài 31 — Microinteractions & Feedback
→
Bài 32 — Prototyping trong Figma
→
Bài 33 — Design Systems vs UI Kits
→
Bài 34 — Naming Conventions trong Design Systems
→
Bài 35 — Design Tokens Sync — Tokens Studio
→
Bài 36 — Design System Documentation
→
Bài 37 — Versioning a Design System
→
Bài 38 — Cross-Platform Design (Web, iOS, Android)
→
Bài 39 — Accessibility Basics cho UI Designer
→
Bài 40 — Inclusive Design Beyond Disability
→
Bài 41 — Design QA Process
→
Bài 42 — Figma Dev Mode Overview
→
Bài 43 — Annotations cho Dev Handoff
→
Bài 44 — Spec Documents & Redlines (Legacy)
→
Bài 47 — Motion Specs cho Dev
→
Bài 49 — Handoff Checklist trước khi Ship
→
Bài 50 — Working with Engineers Effectively
→
Bài 51 — Design Critique Culture
→
Bài 52 — User Testing Designs sớm và rẻ
→
Bài 53 — Brand vs Product Design Boundary
→
Bài 54 — Design Ops Foundations
→
Bài 55 — Portfolio Building cho UI Designer
→
Bài 57 — Working with AI Tools (Midjourney, v0, GPT)
→
Bài 58 — Common UI Mistakes của Junior Designer
→
Bài 59 — UI Designer Career Path
→
02
Bài 4 — Visual Hierarchy
1 bài
Size, Weight, Color, Spacing
→
03
Bài 7 — Color Theory cho UI
1 bài
HSL, Contrast, A11y
→
04
Bài 8 — Grid System
1 bài
Columns, Gutters, Margins
→
05
Bài 10 — Figma Basics
1 bài
Frames, Groups, Constraints
→
06
Bài 11 — Auto Layout
1 bài
Cốt lõi của Figma hiện đại
→
07
Bài 15 — Figma Variables
1 bài
Modes & Theming
→
08
Bài 18 — Icon System
1 bài
Library, Sizing, Stroke
→
09
Bài 23 — Form Design
1 bài
Input, Label, Error
→
10
Bài 25 — Data Display
1 bài
Tables, Lists, Cards
→
11
Bài 45 — Design-to-Code Sync
1 bài
Storybook
→
12
Bài 46 — Figma to Code
1 bài
Anima, Locofy, Visual Copilot
→
13
Bài 48 — Asset Export
1 bài
SVG, PNG, Sprite
→
14
Bài 56 — Case Study
1 bài
Redesign Banking Mobile App
→
15
Bài 60 — Final
1 bài
Continuous Learning
→
Bài kiểm tra
UI Design Quiz
Đăng ký để làm →
Luyện tập
Tự luyện với AI
Bấm để chép câu lệnh, dán vào Claude hoặc ChatGPT. AI sẽ đóng vai người hướng dẫn: hỏi bạn, chấm điểm và chỉ chỗ còn yếu.
Tạo tài khoản để lưu tiến độ khóa này.
Miễn phí. Học tới đâu lưu tới đó, xong khóa có chứng chỉ, và bạn thấy được ai đang học gần mình để rủ nhau học chung.