Tan Phat Media

Lộ Trình UI/UX Designer 2026

Lộ trình học UI/UX Designer chi tiết nhất 2026 với Figma, User Research, Prototyping, Design System. Checklist từng bước, mức lương, cơ hội việc làm và resources miễn phí.

Lộ Trình Chi Tiết 9-12 Tháng

Roadmap được chia thành 6 giai đoạn rõ ràng, từ cơ bản đến nâng cao

1
Tháng 1-2: Design Fundamentals

Mục tiêu: Nắm vững nguyên tắc thiết kế cơ bản

Design Principles (4 tuần):

  • Balance - Symmetrical, Asymmetrical, Radial
  • Contrast - Size, Color, Shape, Texture
  • Hierarchy - Visual importance, Reading order
  • Alignment - Edge, Center, Grid alignment
  • Repetition - Consistency, Pattern, Rhythm
  • White Space - Breathing room, Focus

Color Theory (2 tuần):

  • Color Wheel - Primary, Secondary, Tertiary
  • Color Harmony - Complementary, Analogous, Triadic
  • Color Psychology - Emotions, Brand associations
  • Color Accessibility - Contrast ratios, Color blindness

Typography (2 tuần):

  • Font Categories - Serif, Sans-serif, Display, Monospace
  • Font Pairing - Combining fonts effectively
  • Type Hierarchy - Headings, Body, Captions
  • Readability - Line height, Letter spacing, Line length

Dự án thực hành:

  • • Redesign landing page với color theory
  • • Typography study - analyze 5 websites
  • • Create mood board cho brand concept
2
Tháng 3-4: Figma Mastery

Mục tiêu: Thành thạo Figma - công cụ design #1

Figma Basics (3 tuần):

  • Interface - Toolbar, Layers, Properties panel
  • Frames & Groups - Container hierarchy
  • Shapes & Vectors - Boolean operations, Pen tool
  • Text & Styles - Text styles, Color styles
  • Images & Masks - Image fills, Clipping masks

Auto Layout (2 tuần):

  • Direction - Horizontal, Vertical, Wrap
  • Spacing - Gap, Padding, Alignment
  • Resizing - Hug, Fill, Fixed
  • Nested Auto Layout - Complex layouts

Components & Variants (3 tuần):

  • Components - Main component, Instances
  • Variants - States, Sizes, Types
  • Component Properties - Boolean, Instance swap, Text
  • Variables - Color, Number, String, Boolean
  • Modes - Light/Dark theme, Responsive

Dự án thực hành:

  • • Build button component với all states
  • • Create card component với variants
  • • Design responsive navigation
3
Tháng 5-6: UX Research & Strategy

Mục tiêu: Hiểu user và define problems

User Research Methods (4 tuần):

  • User Interviews - Script writing, Conducting, Analysis
  • Surveys - Question design, Distribution, Analysis
  • Competitive Analysis - Feature comparison, SWOT
  • User Personas - Demographics, Goals, Pain points
  • Empathy Maps - Think, Feel, Say, Do

Information Architecture (2 tuần):

  • Sitemap - Page hierarchy, Navigation structure
  • Card Sorting - Open, Closed, Hybrid
  • Content Inventory - Audit existing content

User Flows & Journey Maps (2 tuần):

  • Task Flows - Single user task
  • User Flows - Multiple paths, Decision points
  • Customer Journey Map - Touchpoints, Emotions, Opportunities

Dự án thực hành:

  • • Conduct 5 user interviews cho app concept
  • • Create user personas và empathy maps
  • • Design customer journey map
4
Tháng 7-8: Wireframing & Prototyping

Mục tiêu: Từ concept đến interactive prototype

Wireframing (3 tuần):

  • Sketching - Paper wireframes, Rapid ideation
  • Low-fidelity - Basic shapes, Content blocks
  • Mid-fidelity - More detail, Real content
  • Responsive Wireframes - Mobile, Tablet, Desktop

Prototyping in Figma (3 tuần):

  • Connections - Navigate to, Open overlay, Swap
  • Triggers - On click, On hover, On drag
  • Animations - Smart animate, Dissolve, Move in/out
  • Scrolling - Vertical, Horizontal, Fixed elements
  • Interactive Components - Hover states, Toggle

Usability Testing (2 tuần):

  • Test Planning - Tasks, Scenarios, Metrics
  • Moderated Testing - Think-aloud protocol
  • Unmoderated Testing - Maze, UserTesting
  • Analysis & Iteration - Findings, Recommendations

Dự án thực hành:

  • • Wireframe mobile app (10+ screens)
  • • Create interactive prototype
  • • Conduct usability test với 5 users
5
Tháng 9-10: UI Design & Visual Design

Mục tiêu: High-fidelity design và visual polish

UI Components (3 tuần):

  • Buttons - Primary, Secondary, Ghost, Icon buttons
  • Forms - Inputs, Selects, Checkboxes, Radio buttons
  • Cards - Content cards, Product cards, Profile cards
  • Navigation - Navbar, Sidebar, Tabs, Breadcrumbs
  • Modals & Overlays - Dialogs, Drawers, Tooltips
  • Tables & Lists - Data tables, List views

Visual Design (3 tuần):

  • Icons - Icon systems, Custom icons, Icon libraries
  • Illustrations - Style consistency, Use cases
  • Photography - Image selection, Cropping, Filters
  • Shadows & Elevation - Depth, Layering
  • Micro-interactions - Hover, Focus, Active states

Responsive Design (2 tuần):

  • Breakpoints - Mobile, Tablet, Desktop, Large screens
  • Grid Systems - 4, 8, 12 column grids
  • Mobile-first - Design approach
  • Touch Targets - Minimum sizes, Spacing

Dự án thực hành:

  • • Design complete UI kit
  • • High-fidelity app design (20+ screens)
  • • Responsive web design (3 breakpoints)
6
Tháng 11-12: Design Systems & Portfolio

Mục tiêu: Build design system và portfolio để xin việc

Design Systems (4 tuần):

  • Design Tokens - Colors, Typography, Spacing, Shadows
  • Component Library - Atoms, Molecules, Organisms
  • Documentation - Usage guidelines, Do/Don't
  • Theming - Light/Dark mode, Brand variations
  • Accessibility - WCAG compliance, Screen reader support

Design Handoff (2 tuần):

  • Dev Mode - Figma Dev Mode, Inspect panel
  • Asset Export - SVG, PNG, PDF formats
  • Specifications - Spacing, Colors, Typography specs
  • Developer Communication - Annotations, Comments

Portfolio Building (2 tuần):

  • Case Studies - Problem, Process, Solution, Results
  • Process Documentation - Research, Wireframes, Iterations
  • Portfolio Website - Personal branding, About page
  • Presentation Skills - Design critique, Storytelling

Dự án thực hành:

  • • Build complete design system
  • • Create 3-5 portfolio case studies
  • • Design personal portfolio website

📚 Resources Học Miễn Phí 100%

Design Tools & Learning
  • Figma - Free forever plan, unlimited files
  • Google UX Design Certificate - Coursera (audit free)
  • Figma YouTube - Official tutorials
  • roadmap.sh/ux-design - UX Design roadmap
  • Interaction Design Foundation - Free articles
UX Research & Theory
  • Laws of UX - UX principles explained
  • Nielsen Norman Group - UX research articles
  • UX Collective - Medium publication
  • Smashing Magazine - Design articles
  • A Book Apart - Free excerpts
Inspiration & Patterns
  • Dribbble - Design inspiration
  • Behance - Portfolio examples
  • Mobbin - Mobile design patterns
  • Awwwards - Web design awards
  • UI Patterns - Common UI solutions
Design Systems & Resources
  • Material Design - Google design system
  • Apple HIG - Human Interface Guidelines
  • Refactoring UI - Free design tips
  • Figma Community - Free templates
  • Unsplash/Pexels - Free stock photos

💼 Thị Trường Việc Làm 2026

Mức Lương UI/UX Designer (VN 2026)
  • Junior (0-1 năm): 10-20 triệu/tháng
  • Mid-level (1-3 năm): 20-40 triệu/tháng
  • Senior (3-5 năm): 40-80 triệu/tháng
  • Lead/Product Designer (5+ năm): 80-150+ triệu/tháng
  • Remote (US/EU): $2,000-6,000/tháng
Skills Được Ưu Tiên 2026
  • Figma expert (Variables, Dev Mode)
  • User Research & Usability Testing
  • Design Systems
  • Prototyping & Animation
  • HTML/CSS basics (bonus)
  • AI tools (Midjourney, DALL-E)
Ngành Nghề Tuyển Dụng Nhiều
  • Tech Startups (lương + equity)
  • E-commerce (Shopee, Lazada, Tiki)
  • Fintech & Banking
  • Design Agencies
  • SaaS Companies
Vị Trí Phổ Biến
  • UI/UX Designer
  • Product Designer
  • UX Researcher
  • Design System Designer
  • Design Lead / Head of Design

Câu Hỏi Thường Gặp

Giải đáp các thắc mắc phổ biến về nghề UI/UX Designer

Zalo
Facebook
Tấn Phát Digital
Zalo
Facebook