Thiết kế UI/UX chuyên nghiệp 2026 — Figma, Design System, Mobile App

Thiết kế UI/UX không phải “làm cho đẹp” — là thiết kế để giải quyết vấn đề người dùng + đạt mục tiêu kinh doanh. Bài này phân biệt UI / UX / UI/UX, giới thiệu pipeline 5 phase Web22, cấu trúc Design System chuẩn, bảng giá tham khảo, và khi nào nên đầu tư UX research thật vs khi nào template đủ.

UI vs UX vs UI/UX — phân biệt

3 thuật ngữ thường bị nhầm:

• UI (User Interface) — phần “nhìn thấy”. Color, typography, layout, icon, animation. Trả lời câu hỏi: trang này trông thế nào?
• UX (User Experience) — phần “trải nghiệm”. User flow, friction, task completion rate, information architecture. Trả lời: user có hoàn thành mục tiêu không?
• UI/UX — kết hợp cả 2. Site đẹp + hoạt động. Web22 build cho cả 2 (không “chỉ UI” hoặc “chỉ UX”).

Ví dụ phân biệt thực tế:

• UI tốt + UX kém: trang sản phẩm rất đẹp nhưng nút “thêm vào giỏ” ẩn dưới fold, người dùng không tìm thấy → conversion thấp.
• UX tốt + UI kém: form đăng ký rõ ràng từng bước nhưng visual cũ kỹ 1990s → người dùng nghi ngờ trust.
• UI/UX tốt: hierarchy rõ ràng + flow trực quan + visual modern → user complete task + tin tưởng brand.

Khi nào doanh nghiệp cần UX research thật

Không phải mọi project cần user testing thực địa. Phân tầng theo budget + complexity:

Đủ template + best practice (5-15tr)

• Marketing site simple, ngành phổ biến (ecom, F&B, blog)
• Có competitor reference rõ ràng
• Budget < 30tr
• → Web22 dùng pattern proven, không cần user research thật

Cần UX research nhẹ (15-40tr)

• Doanh nghiệp ngành đặc thù (B2B SaaS, fintech, healthtech)
• Có brand guideline + research cũ
• Budget 30-100tr
• → 3-5 stakeholder interview + competitor analysis + user persona work

Cần UX research full (40-150tr)

• Web app phức tạp, multi-user role, workflow
• Sản phẩm mới chưa validate
• Budget > 100tr
• → 8-15 user interview + usability test + analytics deep-dive + iterate prototype 3-5 vòng

Web22 phục vụ cả 3 phân khúc, recommend đúng theo brief Phase 1.

Pipeline UI/UX 5 phase tại Web22

Quy trình standard, refined qua 50+ project:

Phase 1 — Discovery (~1 tuần)

Stakeholder interview + competitor analysis + user persona definition. Output: brief 2-4 trang + sitemap + user flow chính.

Phase 2 — Wireframe (3-5 ngày)

Low-fi sketch, structure-only, không màu sắc. Mục tiêu: align về information architecture trước khi đầu tư visual. Tool: Figma low-fi components.

Phase 3 — Hi-fi Mockup (1-2 tuần)

Visual layer: color palette, typography, components. Apply design system nếu có. Review với khách 2-3 vòng.

Phase 4 — Prototype (3-5 ngày)

Clickable Figma prototype, simulate user flow chính. Test internal team + 3-5 user thật nếu budget cho phép. Iterate.

Phase 5 — Handoff (2-3 ngày)

Export design tokens (JSON/CSS), spec sheet, asset library. Dev team team in-house Web22 nhận hoặc bàn giao team khách. Tham khảo: Figma documentation.

Design System — cấu trúc chuẩn 2026

Design System là nguồn duy nhất (single source of truth) cho mọi UI decision. Không phải “1 file Figma + style guide”. Là cấu trúc 5 lớp Atomic Design:

Layer 1: Tokens (móng)

Variables nguyên thủy: color (primary, secondary, accent, neutral), spacing (4/8/12/16/24/32/48/64), typography (family, size, weight, line-height), radius, shadow, breakpoint. Tokens lưu JSON hoặc CSS custom properties.

Layer 2: Atoms

Component cơ bản: button (primary/ghost/icon), input, label, icon, badge, avatar. Mỗi atom không phụ thuộc context.

Layer 3: Molecules

Tổ hợp 2-5 atoms: search bar, form field group (label + input + helper), card header (avatar + title + meta).

Layer 4: Organisms

Section UI hoàn chỉnh: header navbar, footer, hero section, product grid, FAQ accordion. Reusable across pages.

Layer 5: Templates

Page layout: homepage, product detail, blog list, dashboard. Templates tổ hợp organisms theo grid.

Build BOTTOM-UP. Sửa Token = update cả system. Skip layer = chaos sau 6-12 tháng. Chi tiết: Design System service.

Bảng giá UI/UX 2026

Loại	Giá	Timeline
UI mockup landing page (5-8 screens)	5-15tr	1-2 tuần
UI/UX website doanh nghiệp (15-30 screens)	15-40tr	3-5 tuần
Design System 30-60 components	30-100tr	4-8 tuần
Mobile app design (15-40 screens)	40-150tr	6-12 tuần
UX research full + iterate	40-200tr	4-12 tuần
Audit UX + recommendation	10-25tr	1-2 tuần

Dịch vụ UI/UX Web22

• Design System — build hệ thống component reusable cho 3+ sản phẩm
• Mobile App Design — iOS + Android design với native pattern

Dịch vụ liên quan

• Thiết kế website — full pipeline gồm UI/UX
• Phát triển WordPress — implement design vào WP theme
• Tối ưu hiệu năng — performance impact của heavy design

Câu hỏi thường gặp

Tôi chỉ cần “thiết kế đẹp” — cần UX research không?

Nếu site phổ biến (marketing simple, blog, ecom) — không cần. Web22 dùng pattern proven. Nếu sản phẩm đặc thù chưa có competitor — UX research là cần.

Web22 dùng tool gì?

Figma 100% (collaborative, real-time review, prototype native). Plus FigJam cho whiteboard, Notion cho doc. Không dùng Photoshop, Sketch (deprecated cho web).

Có thể chỉ làm UI mockup không build site?

Có. Output Figma file + design tokens + spec sheet, giao team khách hoặc agency khác implement. Phí 5-40tr tuỳ scope.

Bao nhiêu vòng review?

Standard 2-3 vòng (low-fi → hi-fi → final). Vượt > 5 vòng → re-scope (thường brief Phase 1 chưa rõ).

Có cam kết design “convert” cao không?

Không cam kết số tuyệt đối. Cam kết: pattern proven (CTA above fold, friction reduction, mobile-first). A/B test sau launch để measure thật.

Tôi có brand guideline cũ — phải redesign không?

Không. Web22 follow brand cũ + recommend cải thiện cho web context (vd brand cũ in print, web cần thêm component digital). Không “phá brand”.

Mobile design có làm riêng không?

Mặc định mobile-first 2026 (Google index mobile-first). Mọi mockup design cho mobile + desktop. Mobile app design (native iOS/Android) là service riêng.

Design system có ROI không?

Có nếu > 3 sản phẩm internal hoặc team > 5 người. Setup cost 30-100tr, save 40-60% time develop sau 6-12 tháng. SME 1 site không cần.