Mình chưa từng cầm công cụ thiết kế nào mà vẫn theo kịp, nhờ chị Linh dạy rất chậm phần auto layout và component. Case study ứng dụng đặt lịch cuối khóa là bài đầu tiên trong portfolio của mình.
UI/UX với Figma từ cơ bản
Từ người mới đến thiết kế được app và website hoàn chỉnh trên Figma, có case study để xin việc.
Giảng viên: Vũ Khánh Linh · Senior Product Designer
Bạn sẽ làm được gì
- Thực hiện phỏng vấn người dùng và tổng hợp thành persona, user flow
- Vẽ wireframe low-fi và hi-fi cho một ứng dụng di động hoàn chỉnh
- Dựng design system gồm màu, chữ, component và biến số trong Figma
- Làm prototype tương tác đủ để thử nghiệm với người dùng thật
- Thiết kế responsive cho website với lưới và auto layout
- Trình bày case study và bàn giao file thiết kế cho lập trình viên
Khóa học dành cho người mới hoàn toàn với thiết kế giao diện: sinh viên, người trái ngành muốn chuyển sang UI/UX, hoặc lập trình viên, marketer muốn tự thiết kế sản phẩm của mình. Bạn chỉ cần máy tính và tinh thần thử đi thử lại, không cần biết vẽ.
Học xong, bạn đi hết quy trình thiết kế sản phẩm: tìm hiểu người dùng, vẽ luồng và wireframe, dựng giao diện có hệ thống bằng Figma, làm prototype tương tác, thử nghiệm với người thật và bàn giao cho lập trình viên. Ba dự án cuối khóa được trình bày thành case study sẵn sàng đưa vào portfolio.
Giảng viên là người làm sản phẩm thật nên bài học bám sát cách làm việc trong team: dùng component, auto layout, biến số, ghi chú bàn giao. Bạn nhận nhận xét chi tiết cho từng dự án và có thư viện template để dùng lại.
Khóa học dành cho
- Người trái ngành muốn chuyển sang UI/UX designer
- Sinh viên thiết kế, công nghệ thông tin cần portfolio đầu tiên
- Lập trình viên, marketer muốn tự thiết kế giao diện sản phẩm của mình
- Freelancer thiết kế web muốn nâng cấp tư duy sản phẩm
Yêu cầu đầu vào
- Laptop hoặc PC có thể chạy Figma trên trình duyệt hoặc ứng dụng desktop
- Không cần biết thiết kế hay vẽ trước đó
- Dành khoảng 5 đến 6 giờ mỗi tuần để học và làm dự án
Công cụ sử dụng
FigmaFigJamMaze hoặc UseberryGoogle FormsNotionWhimsical
Giáo trình
6 chương · 36 bài học · 22 giờ 20 phút · 3 bài học thử miễn phí
Chương 1: UI/UX là gì và làm quen Figma6 bài · 220 phút
- UI và UX khác nhau thế nào, một ngày làm việc của designerHọc thử30′
- Làm quen giao diện Figma: frame, layer, công cụ cơ bảnHọc thử35′
- Vẽ màn hình đầu tiên bằng shape và textHọc thử40′
- Căn lề, khoảng cách và lưới 8 điểm35′
- Typography: chọn font, cỡ chữ và phân cấp thông tin40′
- Màu sắc, độ tương phản và tiêu chuẩn dễ tiếp cận40′
Chương 2: Nghiên cứu người dùng và định hướng sản phẩm6 bài · 220 phút
- Chọn đề tài app di động cho dự án chính30′
- Phỏng vấn người dùng: câu hỏi nên hỏi, câu nên tránh40′
- Tổng hợp insight bằng affinity map trên FigJam35′
- Persona và hành trình người dùng40′
- Phân tích đối thủ và xác định tính năng cốt lõi35′
- Vẽ user flow và sơ đồ cấu trúc ứng dụng40′
Chương 3: Wireframe và design system6 bài · 240 phút
- Phác thảo wireframe low-fi bằng giấy và Figma40′
- Component và variants: tạo nút, ô nhập, thẻ40′
- Auto layout: làm giao diện co giãn đúng ý45′
- Style và biến số cho màu, chữ, khoảng cách40′
- Dựng thư viện component dùng chung cho nhóm35′
- Wireframe hi-fi cho các màn hình chính40′
Chương 4: Thiết kế giao diện hoàn chỉnh6 bài · 220 phút
- Màn hình đăng nhập, đăng ký và onboarding35′
- Màn hình trang chủ, danh sách và chi tiết40′
- Biểu mẫu, thanh toán và xử lý lỗi40′
- Trạng thái rỗng, đang tải và thông báo35′
- Icon, hình ảnh và minh họa nhất quán35′
- Chế độ tối và biến thể giao diện35′
Chương 5: Prototype, kiểm thử và responsive6 bài · 220 phút
- Prototype cơ bản: liên kết màn hình và chuyển cảnh35′
- Hoạt ảnh vi tương tác bằng smart animate40′
- Kiểm thử khả dụng với 5 người dùng40′
- Tổng hợp phản hồi và điều chỉnh thiết kế35′
- Thiết kế responsive cho website: lưới và breakpoint40′
- Dự án 2: landing page responsive từ wireframe đến hi-fi30′
Chương 6: Bàn giao, case study và đi làm6 bài · 220 phút
- Chuẩn bị file bàn giao: đặt tên, ghi chú, xuất tài nguyên35′
- Làm việc với lập trình viên bằng chế độ Dev Mode35′
- Viết case study: cấu trúc, câu chuyện và số liệu40′
- Dựng portfolio trên Behance hoặc website cá nhân35′
- Chuẩn bị phỏng vấn và bài test thiết kế40′
- Bảo vệ dự án cuối khóa35′
Dự án thực hành
Ứng dụng di động đặt dịch vụ
Thiết kế trọn vẹn một app từ nghiên cứu, wireframe đến giao diện hi-fi và prototype, kèm file thiết kế có design system.
Landing page responsive
Một trang đích cho sản phẩm có bản desktop, tablet và mobile, dùng lưới và auto layout, sẵn sàng bàn giao.
Case study cho portfolio
Bài trình bày dự án chính gồm vấn đề, quy trình, kết quả kiểm thử và bài học, định dạng đăng lên Behance.
Giảng viên
Vũ Khánh Linh
Senior Product Designer · 8 năm kinh nghiệm
Senior Product Designer dạy UI/UX và branding theo cách làm việc thật của đội sản phẩm.
Xem hồ sơĐánh giá của học viên
- 5 sao2
- 4 sao1
- 3 sao0
- 2 sao0
- 1 sao0
Dân code như mình hay bỏ qua khoảng cách và phân cấp chữ. Sau phần design system, mình trao đổi với designer trong đội dễ hơn hẳn và tự dựng được bản mẫu trước khi code.
Bài phỏng vấn người dùng và vẽ luồng rất thực tế, đúng thứ mình thiếu. Chỉ tiếc phần nghiên cứu hơi ngắn so với phần giao diện, mình phải tự đọc thêm, còn lại khóa học rất đáng.
Chỉ học viên đã hoàn thành khóa mới có thể đánh giá (mô phỏng).
Câu hỏi thường gặp
Tôi không biết vẽ có học UI/UX được không?
Được. UI/UX nặng về tư duy, bố cục và logic hơn là vẽ tay. Bạn dùng hình khối, lưới và component có sẵn, kỹ năng vẽ không phải điều kiện.
Tôi cần mua Figma không?
Không. Gói miễn phí của Figma đủ cho toàn bộ bài tập trong khóa. Khóa học có hướng dẫn cách tổ chức file để không vượt giới hạn gói miễn phí.
Được hỗ trợ thế nào khi bị kẹt?
Bạn hỏi dưới từng bài hoặc gửi link file Figma trong nhóm hỏi đáp. Giảng viên và trợ giảng nhận xét trực tiếp trên file, phản hồi trong 48 giờ làm việc.
Có chứng chỉ và hoàn tiền không?
Có chứng nhận hoàn thành của SKILLUP sau khi bạn nộp đủ 3 dự án. Bạn được hoàn tiền trong 7 ngày nếu thấy khóa học chưa phù hợp.
Máy tính cấu hình thấp có chạy mượt không?
Figma chạy trên trình duyệt nên máy 8GB RAM là đủ cho phần lớn dự án. Nếu máy yếu, bạn nên dùng bản ứng dụng desktop và hạn chế mở quá nhiều tab.
Bài viết liên quan
UI/UX là gì? Khác nhau thế nào
UI/UX là gì? Phân biệt giao diện và trải nghiệm người dùng qua ví dụ dễ hiểu, quy trình làm việc của designer và cách…
Kỹ năng Figma cần biết để đi làm
Những kỹ năng Figma cần biết để đi làm: Auto Layout, Components, Variables, Prototype, Dev Mode và cách phối hợp với…
Cách làm freelance và có khách đầu tiên trong 60 ngày
Cách làm freelance và có khách đầu tiên: chọn dịch vụ, dựng portfolio mẫu, tìm khách quen biết, báo giá và chốt hợp…


