Mở một app banking trên điện thoại, giao diện gradient đẹp mắt nhưng nút chuyển tiền nằm quá sâu trong menu — người dùng bỏ cuộc sau ba lần chạm. Thiết kế UX/UI dạy cách tránh tình huống đó: hiểu người dùng trước, dựng luồng hợp lý, rồi mới đến visual và interaction.
Môn học thuộc nhóm Thiết kế ứng dụng và digital product — phù hợp học sinh THPT hướng Thiết kế đồ họa, Công nghệ thông tin hoặc Truyền thông đa phương tiện. Kết quả đầu ra là một case study app/web hoàn chỉnh trên Figma: từ research, wireframe, prototype đến usability test và handoff cho developer — đủ nộp portfolio tuyển sinh đại học hoặc internship startup.
01Thiết kế UX/UI là gì?
Thiết kế UX/UI là quy trình thiết kế trải nghiệm và giao diện cho sản phẩm số — app mobile, website, dashboard, e-commerce hay fintech. UX (User Experience) tập trung vào người dùng: user research, persona, journey map, information architecture và luồng tương tác. UI (User Interface) tập trung vào lớp nhìn thấy: visual hierarchy, component, color system, typography và micro-interaction. Hai phần không tách rời — UX tốt mà UI kém khó thu hút; UI đẹp mà UX kém thì sản phẩm vẫn thất bại.
Trong môn học THPT và foundation đại học, người học làm việc chủ yếu trên Figma — auto layout, components, variants, prototype và Dev Mode. Khác với thiết kế đồ họa in ấn, UX/UI đòi hỏi tư duy iterative: wireframe low-fidelity trước, high-fidelity sau; test với người dùng thật; chỉnh sửa dựa trên feedback thay vì chỉ dựa vào cảm tính designer.
Màn hình Figma — wireframe low-fi bên trái, high-fi visual bên phải, user flow và component library cùng một file
UX — trả lời "người dùng cần gì và đi từ A đến B thế nào": interview, persona, journey map, sitemap, wireframe, usability test.
UI — trả lời "màn hình trông và cảm giác thế nào": color, typography, spacing, component, state (hover, active, disabled), animation nhẹ.
Design system — cầu nối hai phần: button, input, card được định nghĩa một lần, dùng lại xuyên suốt product — tiết kiệm thời gian dài hạn cho cả team.
02Học những gì?
Chương trình Thiết kế UX/UI xây từ tư duy người dùng đến handoff kỹ thuật:
- User research & discovery — phỏng vấn người dùng, khảo sát, competitive analysis; chuyển insight thành persona và problem statement; hiểu pain point thật thay vì giả định từ trí tưởng tượng designer.
- Information architecture & user flow — sitemap, card sorting, journey map; vẽ user flow từ entry point đến goal; wireframe low-fidelity (paper hoặc Figma) tập trung cấu trúc, không màu sắc.
- Visual design & UI system — high-fidelity trên Figma; atomic design (atom → molecule → organism); component và variants; auto layout cho responsive; mobile first — tại Việt Nam khoảng 95% truy cập internet qua mobile.
- Prototype & usability test — prototype clickable trong Figma; usability test với 5 người dùng (quy tắc 5-user: đủ phát hiện khoảng 80% vấn đề usability); ghi nhận task success rate, time on task và verbatim quote.
- Accessibility & handoff — WCAG cơ bản: contrast ratio, keyboard navigation, screen reader label; Figma Dev Mode hoặc Zeplin để developer đọc spacing, color token, asset export; làm việc liên tục với dev, không silo.
Workshop research — persona và journey map trước khi mở Figma vẽ màn hình
Design system trên Figma — component, variants và auto layout làm nền cho high-fidelity nhanh và nhất quán
03Tại sao môn này quan trọng?
Mọi doanh nghiệp — từ startup fintech đến e-commerce — đều cần sản phẩm số dùng được, không chỉ đẹp. Thị trường Việt Nam tuyển product designer, UX designer và UI designer với mức lương khởi điểm cạnh tranh nếu portfolio có case study thật: research có method, prototype có test, handoff có spec. Học sinh THPT nắm quy trình UX/UI sớm có lợi thế rõ khi apply ngành Thiết kế, CNTT hoặc Truyền thông số.
Product designer tại startup — end-to-end từ research đến ship; làm việc chặt với PM và engineer trong squad nhỏ.
UX designer tại agency — Designveloper, ELSA và các agency product: nhận brief client, chạy discovery, deliver wireframe và prototype.
UI designer in-house product — Tiki, Shopee, MoMo: visual và component system cho app có hàng triệu user.
Freelance UX/UI — nhận project app landing, redesign; quản lý timeline, revision và case study cho client tiếp theo.
Design system specialist & UX researcher — duy trì thư viện component; chạy user interview và usability test chuyên sâu.
Design ops lead — quy trình, tool và handoff giữa design và engineering ở quy mô team lớn.
Designer và developer review handoff — trao đổi liên tục từ wireframe, không chờ file final mới bàn
04Dự án app/web và portfolio case study
Đồ án mô phỏng thiết kế một app hoặc web product (đặt lịch khám, quản lý chi tiêu, học từ vựng, đặt đồ ăn…). Quy trình bắt buộc: research (interview hoặc survey, persona, competitive scan) → wireframe low-fi + user flow chính → prototype high-fi clickable trên Figma → usability test 5 user, ghi finding → final design + iteration sau test → case study 8–12 trang portfolio: problem, process, solution, metric giả định và lesson learned.
Tiêu chí chấm thường gặp: có evidence research (không chỉ "em nghĩ user cần"); wireframe tách biệt visual; prototype cover happy path và error state; test có script và synthesis; UI nhất quán qua design system; accessibility cơ bản (contrast, touch target); handoff file organized — component đặt tên rõ, Dev Mode sẵn sàng cho dev đọc.
Bảng trình bày case study — research insight, wireframe flow, prototype Figma, usability test finding và màn hình final design
05Những lưu ý khi làm bài
UI đẹp + UX kém = sản phẩm thất bại
Gradient, illustration và animation không cứu được luồng rối, CTA ẩn hoặc copy khó hiểu. Trước khi polish visual, hãy chạy wireframe qua ít nhất một người ngoài team: họ hoàn thành task mục tiêu không? Dừng ở đâu? Nếu wireframe low-fi đã fail, high-fi chỉ làm đẹp thất bại — không phải cải thiện trải nghiệm.
Design system tiết kiệm thời gian dài hạn
Vẽ từng button từ đầu mỗi màn hình nhanh lúc đầu nhưng chậm khi product có 20+ screen. Đầu tư component library sớm — button primary/secondary, input, card, nav — với variants cho state và size. Auto layout giúp resize màn hình mobile/tablet mà không vỡ layout. Case study portfolio thể hiện system cho thấy tư duy product, không chỉ một màn hình đẹp lẻ.
5 user test đủ phát hiện 80% vấn đề
Không cần 50 người để usability test đồ án THPT. Chuẩn bị script 3–5 task, m recruit 5 user gần persona, quay màn hình hoặc ghi chú verbatim. Sau user thứ 3–5, pattern lặp lại — đó là signal ưu tiên fix. Trình bày finding trong case study bằng quote thật và screenshot, không chỉ "em thấy ổn".
Mobile first cho Việt Nam
Khoảng 95% người dùng internet Việt Nam truy cập qua mobile — thiết kế desktop trước rồi thu nhỏ là thói quen sai. Bắt đầu frame 375px, touch target tối thiểu 44px, thumb zone cho CTA chính. Prototype test trên điện thoại thật, không chỉ click trên laptop. Performance và data — loading, offline — cũng là một phần UX dù môn tập trung visual.
Accessibility không phải tùy chọn
WCAG contrast (text trên nền), label cho icon-only button, focus state cho keyboard navigation — không chỉ "làm thêm nếu có thời gian". Nhiều thị trường và hợp đồng enterprise yêu cầu accessibility; pháp lý ngày càng chặt. Figma plugin contrast checker và Stark giúp kiểm tra sớm. Case study ghi một mục a11y cho thấy awareness chuyên nghiệp.
Làm việc với dev = trao đổi liên tục, không silo
Designer nộp file Figma "xong" rồi biến mất là workflow cũ. Dev Mode, annotation và họp sync ngắn sau wireframe giúp phát hiện constraint kỹ thuật sớm — API chưa có, animation quá nặng, edge case chưa design. Designer hiểu HTML/CSS cơ bản giao tiếp tốt hơn; developer tham gia critique sớm giảm rework sau sprint.
06Các bước thiết kế UX/UI
Xác định problem space; phỏng vấn 3–5 người hoặc survey; competitive analysis 2–3 app tương tự. Tổng hợp insight thành persona (goal, pain, behavior) và problem statement một câu. Chưa vẽ UI — chỉ hiểu user và business goal.
Vẽ journey map từ awareness đến goal; sitemap hoặc card sort cho cấu trúc thông tin; sketch user flow chính trên giấy. Xác định MVP scope — feature nào bắt buộc cho đồ án, feature nào để phase 2.
Dựng wireframe grayscale trên Figma hoặc paper; nối flow bằng mũi tên hoặc prototype thô. Review nội bộ: task có hoàn thành trong 3 tap không? Copy placeholder đã rõ ý chưa? Sửa cấu trúc trước khi thêm màu.
Áp design system: color, type scale, spacing 4/8px; component và variants; auto layout. Prototype clickable với transition hợp lý; cover loading, empty và error state. Mobile first frame 375px, mở rộng tablet nếu brief yêu cầu.
Viết script task không gợi ý; recruit 5 user; ghi success/fail, time, quote. Synthesis finding thành 3–5 issue ưu tiên; iterate prototype — không cần redesign toàn bộ, fix điểm nghẽn trước. Document trong case study với screenshot và quote.
Organize file Figma: page Research, Wireframe, UI, Components; đặt tên layer rõ. Dev Mode hoặc spec PDF: spacing, token, export asset. Họp handoff với dev; case study gồm before/after test và lesson learned.
