Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Figma UI/UX Project Course: Design 6 Apps and Get Job Ready

Khóa học Dự án Figma UI/UX: Thiết kế 6 Ứng dụng và Sẵn sàng Đi làm

Khóa học Dự án Figma UI/UX: Thiết kế 6 Ứng dụng và Sẵn sàng Đi làm

Thành thạo Figma qua Học tập Dự án, Thiết kế Ứng dụng Đặt đồ ăn và Cửa hàng Cà phê với Figma Prototypes, Nguyên tắc UI/UX

4.3
(295 đánh giá)
24,752 học viên
Giảng viên
Vapa Academy
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 349.000đ -77%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
34.5 giờ video
300 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026

Bạn sẽ học được gì

Thiết kế UI/UX với Figma
UI/UX Ứng dụng Đặt đồ ăn trên Figma: Dự án Hoàn chỉnh
Hướng dẫn Phong cách và Hệ thống Thiết kế Figma
Tạo Nguyên mẫu (Prototyping) với Figma
Thiết kế Hoàn chỉnh UI/UX Ứng dụng Đặt đồ ăn
Cách Tổ chức Dự án Figma với Các Thực hành Tốt nhất

Yêu cầu

Không cần Kỹ năng Thiết kế trước. Ai cũng có thể học Khóa học này và Bạn sẽ học mọi thứ từ Khóa học này.

Đối tượng phù hợp

Nếu Bạn muốn Thiết kế Hoàn chỉnh một Dự án UI/UX trên Figma
Nếu Bạn muốn học Cách Tổ chức và Tuân theo Các Thực hành Tốt nhất của Figma
Nếu Bạn muốn học Cách Thêm Tính năng Nguyên mẫu vào Dự án của mình
Tìm hiểu Cách Thiết kế Hệ thống và Hướng dẫn Phong cách trên Figma

Nội dung khóa học

7 phần • 296 bài giảng
1 Tổng quan Khóa học
1 Dự án UI/UX Clone Ứng dụng Web Spotify - Tài nguyên
2 Dự án UI/UX Clone Ứng dụng Web Spotify - Bản Demo Trực tiếp
3 Hướng dẫn Chi tiết Dự án UI/UX Clone Ứng dụng Web Spotify
4 Tạo file thiết kế mới Phần - 1
5 Tạo bảng màu mẫu Phần - 2
6 Thêm màu vào hướng dẫn phong cách Phần - 3
7 Tạo danh sách kiểu chữ (Typography) Phần - 4
8 Thêm kiểu chữ vào phần Style Phần - 5
9 Tạo logo thương hiệu Phần - 6
10 Thêm biểu tượng (Icons) Phần - 7
11 Tạo thanh điều hướng (navbar) low-fidelity cho trang chủ Phần - 8
12 Hoàn thiện thanh điều hướng trên cùng low-fidelity của trang chủ Phần - 9
13 Tạo thanh bảng trái trong trang chủ low-fidelity Phần - 10
14 Hoàn thiện thanh bảng trái của trang chủ low-fidelity Phần - 11
15 Tạo thẻ bài hát nhỏ trong trang chủ low-fidelity Phần - 12
16 Tạo thẻ nghệ sĩ trong trang chủ low-fidelity Phần - 13
17 Hoàn thiện phần thẻ của trang chủ low-fidelity Phần - 14
18 Tạo chân trang (footer) của trang chủ low-fidelity Phần - 15
19 Hoàn thiện màn hình trang chủ low-fidelity Phần - 16
20 Tạo trang đăng nhập low-fidelity Phần - 17
21 Hoàn thiện trang đăng nhập low-fidelity Phần - 18
22 Tạo trang chủ cá nhân (home page) low-fidelity Phần - 19
23 Tạo trang chi tiết bài hát low-fidelity Phần - 20
24 Tiếp tục với trang chi tiết bài hát low-fidelity Phần - 21
25 Tạo bảng phát nhạc trên trang chi tiết bài hát low-fidelity Phần - 22
26 Hoàn thiện trang chi tiết bài hát low-fidelity Phần - 23
27 Tạo banner của trang danh sách phát nhạc low-fidelity Phần - 24
28 Hoàn thiện phần banner của trang danh sách phát nhạc low-fidelity Phần - 25
29 Tạo phần danh sách phát trên trang danh sách phát nhạc low-fidelity Phần - 26
30 Hoàn thiện phần danh sách phát của trang danh sách phát nhạc low-fidelity Phần - 27
31 Tạo trang đăng xuất low-fidelity Phần - 28
32 Tạo thẻ nhỏ cho màn hình trang chủ high-fidelity Phần - 29
33 Tạo carousel-1 của trang chủ high-fidelity Phần - 30
34 Tiếp tục với carousel-1 của trang chủ high-fidelity Phần - 31
35 Hoàn thiện carousel-1 của trang chủ high-fidelity Phần - 32
36 Thực hiện chỉnh sửa nhỏ Phần - 33
37 Tạo carousel-2 của trang chủ high-fidelity Phần - 34
38 Hoàn thiện carousel-2 trong trang chủ high-fidelity Phần - 35
39 Tạo carousel-3 của trang chủ high-fidelity Phần - 36
40 Tạo carousel-4 của trang chủ high-fidelity Phần - 37
41 Tạo carousel-5 của trang chủ high-fidelity Phần - 38
42 Tạo carousel-6 và hoàn thiện trang chủ high-fidelity Phần - 39
43 Tạo trang đăng nhập high-fidelity Phần - 40
44 Tạo trang chủ cá nhân high-fidelity & thực hiện chỉnh sửa nhỏ Phần - 41
45 Tạo carousel-6 & 7 của trang chi tiết bài hát high-fidelity Phần - 42
46 Tạo carousel-8,9 của trang mô tả bài hát high-fidelity Phần - 43
47 Hoàn thiện trang chi tiết bài hát high-fidelity Phần - 44
48 Tạo carousel-10 của trang danh sách phát nhạc high-fidelity Phần - 45
49 Hoàn thiện trang danh sách phát nhạc high-fidelity Phần - 46
50 Thêm prototype vào các trang wireframe high-fidelity Phần - 47
51 Hoàn thiện phần tạo nguyên mẫu (prototyping) Phần - 48
52 Tổ chức các thành phần thiết kế & hoàn thành dự án Phần - 49
1 Dự án UI/UX Ứng dụng Di động Đặt vé Máy bay trên Figma - File Nguồn
2 Dự án UI/UX Ứng dụng Di động Đặt vé Máy bay trên Figma - Bản Demo Trực tiếp
3 Dự án UI/UX Ứng dụng Di động Đặt vé Máy bay trên Figma - Hướng dẫn Chi tiết
4 Tạo file thiết kế mới và thiết lập trang Phần - 1
5 Tạo hướng dẫn phong cách màu sắc Phần - 2
6 Tạo hướng dẫn phong cách chữ (Typography) Phần - 3
7 Hoàn thiện hướng dẫn phong cách chữ Phần - 4
8 Bộ sưu tập biểu tượng (Icons) Phần - 5
9 Tạo màn hình hoạt ảnh (animation) low-fidelity Phần - 6
10 Tạo màn hình trang chủ low-fidelity Phần - 7
11 Tạo màn hình đăng nhập low-fidelity Phần - 8
12 Hoàn thiện màn hình đăng nhập low-fidelity Phần - 9
13 Tạo phần banner của wire-frame low-fidelity Phần - 10
14 Tạo phần mới trong màn hình chủ low-fidelity Phần - 11
15 Tạo phần nổi bật (featured) của màn hình chủ low-fidelity Phần - 12
16 Tạo thẻ lớn cho màn hình chủ low-fidelity Phần - 13
17 Hoàn thiện màn hình chủ low-fidelity Phần - 14
18 Tạo màn hình chi tiết đặt chuyến bay Phần - 15
19 Tạo thanh chọn thời gian trong màn hình chi tiết đặt chuyến bay low-fidelity Phần-16
20 Thẻ phần chi tiết chuyến đi trong màn hình chi tiết đặt chuyến bay low-fidelity Phần - 17
21 Thẻ phần chi tiết chuyến đi trong màn hình chi tiết đặt chuyến bay low-fidelity Phần - 18
22 Phần chi tiết chuyến đi trong đặt chuyến bay low-fidelity Phần - 19
23 Hoàn thiện màn hình chi tiết đặt chuyến bay low-fidelity Phần - 20
24 Tạo màn hình Xác nhận Đặt chỗ low-fidelity Phần - 21
25 Tiếp tục màn hình Xác nhận Đặt chỗ Phần - 22
26 Tiếp tục với màn hình Xác nhận Đặt chỗ Phần - 23
27 Hoàn thiện màn hình Xác nhận Đặt chỗ Phần - 24
28 Tạo phần thông tin cá nhân của màn hình hồ sơ low-fidelity Phần - 25
29 Tiếp tục tạo màn hình hồ sơ Phần - 26
30 Thêm tùy chọn tính năng vào màn hình hồ sơ low-fidelity Phần - 27
31 Hoàn thiện màn hình hồ sơ low-fidelity Phần - 28
32 Tạo phần thẻ phần thưởng trong màn hình phần thưởng low-fidelity Phần - 29
33 Hoàn thiện phần thẻ phần thưởng trong màn hình phần thưởng low-fidelity Phần - 30
34 Tạo thẻ voucher cho màn hình phần thưởng low-fidelity Phần - 31
35 Hoàn thiện màn hình phần thưởng low-fidelity Phần - 32
36 Tạo màn hình điểm đến low-fidelity Phần - 33
37 Tạo thẻ chuyến đi điểm đến trong màn hình điểm đến low-fidelity Phần - 34
38 Hoàn thiện màn hình điểm đến low-fidelity Phần - 35
39 Tạo màn hình hoạt ảnh và trang chủ high-fidelity Phần - 36
40 Tạo màn hình đăng nhập high-fidelity Phần - 37
41 Tạo màn hình chủ high-fidelity Phần - 38
42 Hoàn thiện màn hình chủ high-fidelity Phần - 39
43 Thêm hiệu ứng hoạt ảnh vào màn hình chủ high-fidelity Phần - 40
44 Cuộn ngang trong màn hình chủ high-fidelity Phần - 41
45 Tạo màn hình chi tiết đặt chuyến bay high-fidelity Phần - 42
46 Hiệu ứng hover trên các ô ngày & giờ trong màn hình chi tiết đặt chỗ Phần - 43
47 Thẻ tính toán chi phí chuyến đi của màn hình chi tiết đặt chuyến bay Phần - 44
48 Thêm logic điều kiện cho số lượng hành khách Phần - 45
49 Giá trị tính toán chi phí dựa trên tổng số hành khách Phần - 46
50 Thêm điều kiện cho nút radio trong màn hình chi tiết đặt chuyến bay Phần - 47
51 Hoàn thiện màn hình chi tiết đặt chuyến bay high-fidelity Phần - 48
52 Tạo màn hình Xác nhận Đặt chỗ high-fidelity Phần - 49
53 Tạo màn hình hồ sơ high-fidelity Phần - 50
54 Chỉnh sửa thẻ voucher trong màn hình phần thưởng high-fidelity Phần - 51
55 Hoàn thiện màn hình phần thưởng high-fidelity Phần - 52
56 Tạo màn hình điểm đến high-fidelity Phần - 53
57 Tiếp tục màn hình điểm đến high-fidelity Phần - 54
58 Hoàn thiện các thẻ điểm đến high-fidelity Phần - 55
59 Tạo phần thẻ điểm đến cho màn hình điểm đến Phần - 56
60 Tạo thẻ điểm đến thường xuyên được du lịch Phần - 57
61 Hoàn thiện phần thẻ Địa điểm Lịch sử Phần - 58
62 Tổ chức file Phần - 59
63 Thêm prototyping vào các màn hình high-fidelity Phần - 60
64 Hoàn tất việc thêm prototyping vào các màn hình high-fidelity Phần - 61
1 Dự án Hoàn chỉnh Ứng dụng Đặt đồ ăn - File Nguồn Figma
2 Tạo Hướng dẫn Phong cách Màu sắc Phần-1
3 Tạo Hướng dẫn Phong cách Chữ (Typography) Phần-2
4 Thiết lập Tất cả Biểu tượng Có thể có Phần-3
5 Thiết kế Nút và Tạo các Biến thể của nó Phần-4
6 Thiết kế Thanh Điều hướng Trên cùng Phần-5
7 Thiết kế Thanh Tab Dưới cùng Phần-6
8 Thiết kế Trường Nhập liệu Phần-7
9 Thiết kế Thẻ Nổi bật Phần-8
10 Thiết kế Thẻ Danh mục Phần-9
11 Thiết kế Thẻ Phổ biến cho Trang Chủ Phần-10
12 Thiết kế Màn hình Splash của Dự án Phần-1
13 Thiết kế Màn hình Đăng nhập của Dự án Phần-2
14 Thiết kế Màn hình Đăng ký của Dự án Phần-3
15 Thiết kế Màn hình Chủ của Dự án Phần-4
16 Thiết kế Màn hình Chủ của Dự án Phần-5
17 Thiết lập Khung Chung của Dự án cho Hệ thống Thiết kế Phần-6
18 Thiết kế Màn hình Đặt hàng của Dự án Phần-7
19 Thiết kế Màn hình Yêu thích của Dự án Phần-8
20 Tất cả về Prototyping của Dự án Phần-9
1 Dự án UI-UX Ứng dụng Cửa hàng Cà phê trên Figma : File Nguồn Figma
2 Dự án UI-UX Ứng dụng Cửa hàng Cà phê trên Figma - Bản Demo Trực tiếp
3 Hướng dẫn Thiết lập File Figma Phần - 1
4 Tạo Hệ thống Màu sắc và Chữ (Typography) Phần - 2
5 Tạo Hệ thống Thiết kế Phần - 3
6 Các Yếu tố Thiết kế Phần - 4
7 Tạo một Wire-frame (giới thiệu) Phần - 5
8 Sử dụng Đường lưới và Thước kẻ Phần - 6
9 Tạo Wire-frame - Thêm Văn bản Giả Phần - 7
10 Tạo một Wire-frame - Thêm Nút Giả Phần - 8
11 Giới thiệu về Thiết kế High Fidelity Phần - 9
12 Designing a Homepage in High Fidelity Design (I) Part - 10
13 Designing a Homepage in High Fidelity Design (II) Part - 11
14 Designing a Homepage in High Fidelity Design (III) Part - 12
15 Creating Component for Bottom Navigation Bar Part - 13
16 Designing The Product Page in High Fidelity Design (I) Part - 14
17 Designing The Product Page in High Fidelity Design (II) Part - 15
18 Designing The Cart Page in High Fidelity Design Part - 16
19 Designing The Checkout Page in High Fidelity Design (I) Part - 17
20 Designing The Checkout Page in High Fidelity Design (II) Part - 18
21 Designing The Waiting Time Page in High Fidelity Design (I) Part - 19
22 Designing The Waiting Time Page in High Fidelity Design (II) Part - 20
23 Organizing Your Figma File and Introduction to Wire-frames Part - 21
24 Wire-framing Your High Fidelity Design Part - 22
1 Figma Event Management App UI-UX Project - Figma Source File
2 Figma Event Management App UI-UX Project - Live Demo
3 Setting Up Figma File Page Part - 1
4 Create Text Style Part - 2
5 Create Color Style Part - 3
6 Create Brand Logo Part - 4
7 Collect Icons Part - 5
8 Create Top Bottom Navbars Part - 6
9 Create Buttons Part - 7
10 Create Search Bar Part - 8
11 Create Login Input Part - 9
12 Create Posted Message Card Part - 10
13 Create Description Card For Map Part - 11
14 Create Title Card For Map Part - 12
15 Create Event Card Part - 13
16 Create Large Card For Part - 14
17 Create Small Card Part - 15
18 Organize Design File Components Part - 16
19 Create Low Fidelity Landing Screen Part - 17
20 Introduction To Design of Low Fidelity Login Screen Part - 18
21 Hoàn thành Màn hình Đăng nhập Low Fidelity Phần - 19
22 Giới thiệu Màn hình Trang chủ Low Fidelity Phần - 20
23 Hoàn thành Màn hình Trang chủ Low Fidelity Phần - 21
24 Tạo Màn hình Sự kiện Low Fidelity Phần - 22
25 Giới thiệu Màn hình Chi tiết Sự kiện Low Fidelity Phần - 23
26 Hoàn thành Màn hình Chi tiết Sự kiện Low Fidelity Phần - 24
27 Chỉnh sửa Phần Thẻ Khách mời trong Màn hình Chi tiết Sự kiện Low Fidelity Phần - 25
28 Giới thiệu Màn hình Mua Vé Low Fidelity Phần - 26
29 Tạo Phần Bảng Phân tích Giá Vé Low Fidelity Phần - 27
30 Tạo Phần Bảng Phân tích Chi phí Tùy chọn Low Fidelity Phần - 28
31 Tạo Phần Phương thức Thanh toán Low Fidelity Phần - 29
32 Hoàn thành Màn hình Mua Vé Low Fidelity Phần - 30
33 Hoàn thành Màn hình Bản đồ Low Fidelity Phần - 31
34 Hoàn thành Màn hình Hồ sơ Người dùng Low Fidelity Phần - 32
35 Hoàn thành Màn hình Hồ sơ Người dùng Low Fidelity Phần - 33
36 Hoàn thành Màn hình Hồ sơ Người dùng Low Fidelity Phần - 34
37 Thông báo cho Phần Wireframe Low Fidelity - 35
38 Tạo Màn hình Landing High Fidelity Phần - 36
39 Tạo Màn hình Đăng nhập High Fidelity Phần - 37
40 Giới thiệu Màn hình Trang chủ High Fidelity Phần - 38
41 Chuyển đổi Thẻ Lớn sang High Fidelity Phần - 39
42 Thiết lập Thẻ Lớn trong Màn hình Trang chủ High Fidelity Phần - 40
43 Tạo Phần Sự kiện Phổ biến High Fidelity Phần - 41
44 Chuyển đổi Thẻ Nhỏ sang High Fidelity cho Màn hình Trang chủ Phần - 42
45 Thiết lập Thẻ Nhỏ High Fidelity trên Màn hình Trang chủ Phần - 43
46 Giới thiệu Màn hình Sự kiện High Fidelity Phần - 44
47 Chuyển đổi Thẻ Sự kiện sang High Fidelity Phần - 45
48 Hoàn thành Thẻ Sự kiện High Fidelity Phần - 46
49 Hoàn thành Màn hình Sự kiện High Fidelity Phần - 47
50 Giới thiệu Màn hình Chi tiết Sự kiện High Fidelity Phần - 48
51 Chuyển đổi Phần Khách mời của chúng ta sang High Fidelity trên Màn hình Chi tiết Sự kiện Phần - 49
52 Chuyển đổi Phần Tin nhắn sang High Fidelity Phần - 50
53 Hoàn thành Màn hình Chi tiết Sự kiện High Fidelity Phần - 51
54 Cập nhật Văn bản trong Màn hình Chi tiết Sự kiện High Fidelity Phần - 52
55 Chuyển đổi Màn hình Mua Vé sang High Fidelity Phần - 53
56 Hoàn thành Màn hình Mua Vé High Fidelity Phần - 54
57 Giới thiệu Màn hình Bản đồ High Fidelity Phần - 55
58 Giới thiệu Màn hình Hồ sơ Người dùng High Fidelity Phần - 56
59 Hoàn thành Màn hình Bản đồ High Fidelity Phần - 57
60 Chuyển đổi Màn hình Hồ sơ Người dùng sang High Fidelity Phần - 58
61 Chuyển đổi Phần Hoạt động trong Màn hình Hồ sơ Người dùng sang High Fidelity Phần - 59
62 Hoàn thành Màn hình Hồ sơ Người dùng High Fidelity Phần - 60
63 Chỉnh sửa Cuối cùng và Di chuyển sang Trang High Fidelity Phần - 61
64 Tạo Trang Landing có Hiệu ứng Hoạt hình cho Phần Tạo Prototype - 62
65 Thêm Hiệu ứng Chuyển tiếp giữa các Màn hình Trang Landing Phần - 63
66 Thêm Hiệu ứng Hoạt hình cho Biểu tượng Trái tim Phần - 64
67 Thêm Hiệu ứng Chuyển tiếp cho Màn hình Landing, Đăng nhập và Trang chủ Phần - 65
68 Thêm Hiệu ứng Chuyển tiếp trong Màn hình Sự kiện và Chi tiết Sự kiện Phần - 66
69 Thêm Hiệu ứng Chuyển tiếp cho Màn hình Mua hàng và Bản đồ Phần - 67
70 Thêm Hiệu ứng Chuyển tiếp cho Màn hình Hồ sơ Người dùng Phần - 68
71 Giới thiệu Phần Chỉnh sửa Cuối cùng - 69
1 Dự án UI/UX Web App Netflix Clone - Demo Trực tiếp
2 Dự án UI/UX Web App Netflix Clone - Tổng quan
3 Dự án UI/UX Web App Netflix Clone - File Nguồn Figma
4 Tạo File Thiết kế Phần - 1
5 Tạo Hướng dẫn Phong cách Màu sắc Phần - 2
6 Tạo Typography Phần - 3
7 Hoàn thành Phần Typography - 4
8 Thêm Phong cách cho Typography Phần - 5
9 Phần Biểu tượng - 6
10 Tạo Thanh điều hướng Trang Landing Wireframe Low Fidelity Phần - 7
11 Tạo Văn bản Chính & Nút bấm Trang Landing Wireframe Low Fidelity Phần - 8
12 Hoàn thành Trang Landing Low Fidelity Phần - 9
13 Giới thiệu Trang Định giá Gói dịch vụ Low Fidelity Phần - 10
14 Tạo Thẻ Gói dịch vụ Low Fidelity Phần - 11
15 Hoàn thành Thẻ Gói dịch vụ Low Fidelity Phần - 12
16 Hoàn thành các Thẻ Gói dịch vụ Low Fidelity Phần - 13
17 Tạo Chân trang Low Fidelity Phần - 14
18 Hoàn thành Chân trang & Trang Mua gói Low Fidelity Phần - 15
19 Tạo Trang Hồ sơ Low Fidelity Phần - 16
20 Tạo Thanh điều hướng Trang chủ Low Fidelity Phần - 17
21 Hoàn thành Thanh điều hướng Trang chủ Low Fidelity Phần - 18
22 Hoàn thành Phần Banner Trang chủ Low Fidelity Phần - 19
23 Tạo Phần "Tiếp theo nên xem" trong Trang chủ Low Fidelity Phần - 20
24 Tạo Phần "Tiếp tục xem" của Trang chủ Low Fidelity Phần - 21
25 Tạo Phần "Phim Xu hướng Hàng đầu" của Trang chủ Low Fidelity Phần - 22
26 Tạo Phần "Phim Hành động & Hollywood" của Wireframe Low Fidelity Phần - 23
27 Phần "Phim Trò chơi, Châu Á & Gia đình" của Trang Wireframe Low Fidelity Phần - 24
28 Tạo Chân trang của Trang chủ Low Fidelity Phần - 25
29 Tạo Menu Thả xuống trong Trang chủ Wireframe Low Fidelity Phần - 26
30 Tạo Menu Thả xuống trong Trang chủ Low Fidelity Phần - 27
31 Tạo Khung & Banner Trang Chi tiết của Trang chủ Low Fidelity Phần - 28
32 Thêm Nút bấm trong Trang Chi tiết Wireframe Low Fidelity Phần - 29
33 Thêm Mô tả Phim bộ trong Trang Mô tả Wireframe Low Fidelity Phần - 30
34 Tiếp tục Thêm Mô tả trong Trang Mô tả Low Fidelity Phần - 31
35 Tạo Thẻ cho các Tập phim trong Trang Chi tiết Low Fidelity Phần - 32
36 Hoàn thành Phần Tập phim của Trang Chi tiết Wireframe Low Fidelity Phần - 33
37 Tạo Màn hình Tạm dừng Video của Màn hình Tạm dừng Low Fidelity Phần - 34
38 Tiếp tục Màn hình Tạm dừng Low Fidelity Phần - 35
39 Hoàn thành Màn hình Video Tạm dừng Low Fidelity Phần - 36
40 Hoàn thành Màn hình Phát Video Wireframe Low Fidelity Phần - 37
41 Tạo Trang Landing High Fidelity Phần - 38
42 Hoàn thành Trang Landing High Fidelity Phần - 39
43 Hoàn thành Trang Mua gói High Fidelity Phần - 40
44 Hoàn thành Trang Hồ sơ Wireframe High Fidelity Phần - 41
45 Tạo Banner trong Trang chủ High Fidelity-1 Phần - 42
46 Tạo Carousel-1 của Trang chủ High Fidelity Phần - 43
47 Tạo Carousel-1 trong Trang chủ High Fidelity Phần - 44
48 Hoàn thành Carousel-1 trong Trang chủ High Fidelity Phần - 45
49 Tạo Carousel-2 Phần - 46
50 Hoàn thành Carousel-2 Phần - 47
51 Tạo Carousel-3 Phần - 48
52 Hoàn thành Carousel-3 Phần - 49
53 Tạo Carousel-4 Phần - 50
54 Tạo Carousel-5 Phần - 51
55 Hoàn thành Carousel-5 Phần - 52
56 Hoàn thành Carousel 6&7 Phần - 53
57 Tạo Carousel-8 Phần - 54
58 Hoàn thành Carousel-8 Phần - 55
59 Hoàn thành Trang chủ High Fidelity Phần - 56
60 Thêm Khung Modal Đăng xuất trong Trang chủ Phần - 57
61 Tạo Trang Chi tiết High Fidelity Phần - 58
62 Hoàn thành Trang Chi tiết High Fidelity Phần - 59
63 Hoàn thành cả Ba Màn hình Video Phần - 60
64 Tạo Prototype Phần - 61

Giới thiệu khóa học

This practical, project-based course introduces you to the field of UI/UX design by guiding you through the creation of three complete mobile app projects: a Food Ordering App, a Coffee Shop App, and an Event Management App. Designed for both beginners and experienced designers, this hands-on course allows you to learn essential UI/UX design principles while working on real-world projects from start to finish.

Throughout the course, you will delve deeply into the fundamentals of UI/UX design, acquiring essential skills and techniques to create engaging, user-centric applications. You will explore key concepts such as interactive prototyping, wireframing, system design, and crafting cohesive user flows. Each project will teach you to build from low-fidelity designs to polished high-fidelity designs, preparing you to meet the demands of real-world app design.

By focusing on practical, real-world applications, this course equips you with the skills to immediately apply what you've learned to your own projects. Upon completing the course, you’ll have three polished portfolio items and the confidence to tackle any future UI/UX design challenge. Each project will reflect your growing expertise in creating professional, functional, and aesthetically pleasing mobile apps.


Project 1: Food Order Mobile App

  • Design a user-friendly food ordering app with a modern and intuitive interface.

  • Build a comprehensive Figma system design and style guide for consistency.

  • Organize the Figma project for easy collaboration and scaling.

  • Design various essential screens to enable food browsing, ordering, and payment flows.

  • Use Figma prototyping tools to create seamless user flows, from food selection to checkout.

  • Explore best practices for integrating and utilizing a range of icons in your designs.

Project 2: Coffee Shop Mobile App

  • Develop a visually appealing coffee shop app that enhances user experience.

  • Create a style guide that captures the app’s unique branding, including colors, typography, and reusable UI components.

  • Prepare a well-structured Figma project for better design management.

  • Design screens for coffee customization, reward tracking, and store exploration.

  • Implement advanced prototyping techniques to simulate ordering and loyalty program interactions.

  • Learn how to incorporate and optimize the use of icons for a polished design.

Project 3: Event Management Mobile App

  • Craft a sleek and functional event management app interface.

  • Develop a system design and style guide to ensure cohesive visual language throughout.

  • Structure the Figma project for clarity and efficient revisions.

  • Design screens for event discovery, ticket booking, and attendee management.

  • Use Figma’s prototyping tools to create dynamic workflows for event registration and updates.

  • Work with event-related icons, learning how to maximize their usability in UI design.

What You’ll Learn

  • Building style guides to ensure consistent design language across projects.

  • Starting with low-fidelity wireframes and refining them into high-fidelity designs.

  • Creating interactive prototypes that simulate real-world app functionalities.

  • Applying responsive design principles for compatibility across devices.

  • Organizing Figma files for collaboration and future scalability.

  • Integrating icons effectively to enhance usability and visual appeal.


Whether you want to improve your design abilities or start a career in UI/UX design, this project-based course offers the ideal setting to advance your knowledge and let your creativity run wild in the exciting field of UI/UX design.


That's not all, though. Additionally, you will explore the craft of system design in this course, learning how to build scalable, consistent design systems that improve product consistency and expedite workflow. You will learn the techniques for creating efficient design systems that preserve design integrity through practical exercises and real-world examples.



Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Figma
Hiển thị tất cả khoá học Ui Ux Design
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊