Embedded Files
Mục tiêu sau khoá học
Mục tiêu sau khoá học
Ứng dụng các nguyên lý Gestalt vào thiết kế UI mobile
Nắm được cấu trúc một app trên Mobile và các thành phần cơ bản của nó
Biết cách lên dự án tạo một app theo quy trình từng bước.
Nắm được nhu cầu thị trường từ nhóm khách hàng mục tiêu.
Biết cách tạo một giao diện app thông minh, thân thiện dựa vào những nghiên cứu từ nhu cầu thị trường.
Thành thạo công cụ Figma và biết cách áp dụng công cụ này để thiết kế một ứng dụng trên Mobile
Môn học cần chuẩn bị
Sổ tay, giấy phác thảo.
Máy tính truy cập trang www.figma.com.
Link Figma
Cài đặt 1 số Plugin cần thiết
Figma team
01 - Tổng quan về UI trên App Mobile
01 - Tổng quan về UI trên App Mobile
07:50 - 11:30 on 25/03/2025 phòng 705 CAO THẮNG
NỘI DUNG
Sự khác nhau giữa thiết kế ứng dụng Destop và Mobile
Đặc điểm khi thao tác trên Mobile
Thiết lập Grid trên app Mobile
BÀI TẬP
Redesign UI app Coffee shop (hoặc tự thiết kế 1 app nào đó) có áp dụng đầy đủ 5 hệ thống Grid (bài mẫu)
02 - Các nguyên lý Gestalt 01
02 - Các nguyên lý Gestalt 01
7:50 - 11:30 on 01/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Thế nào là luật Similarity, Proximity, Continuity, Symmetry
Ứng dụng chúng trong thiết kế UI mobile và desktop.
BÀI TẬP
Thiết kế một ứng dụng nghe nhạc 5 frame trên mobile áp dụng 4 quy luật trên (bài mẫu)
03 - Các nguyên lý Gestalt 02
03 - Các nguyên lý Gestalt 02
7:50 - 11:30 on 08/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Thế nào là luật Simplicity - Figure & Ground - Closure - Common Region - Common Fate
Ứng dụng chúng trong thiết kế UI mobile và desktop.
BÀI TẬP
Thiết kế một ứng dụng thư viện sách 5 frame trên mobile áp dụng 5 quy luật trên
04 - FIGMA - Background Animation
04 - FIGMA - Background Animation
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Figma - Các kiểu chuyển động background
Nguyên Liệu bài 4
Link Figma BT4
---------- Khởi động bài giữa kỳ ----------
Phổ biến yêu cầu đề bài
Lập danh sách chia nhóm
05 - FIGMA - Text Animation
05 - FIGMA - Text Animation
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Figma
Chuyển động transform
Chuyển động mask
06 - FIGMA - Scrolling
06 - FIGMA - Scrolling
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Các quy luật về bo góc
Các quy luật về Button
Các hiệu ứng chuyển động Scrolling
Chuyển động Paralax
07 - FIGMA - Loading Page
07 - FIGMA - Loading Page
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Các nguyên lý HÌNH ẢNH trong thiết kế mobile apps
Các hiệu ứng trang loading page
Tiếp tục làm bài giữa kỳ
BÀI TẬP
Tiếp tục hoàn thành bài giữa kỳ
------------- KIỂM TRA GIỮA KỲ -------------
------------- KIỂM TRA GIỮA KỲ -------------
Buổi nộp bài: 07:50 - 11:30 ngày 06/5/2025 phòng 705 CAO THẮNG
ĐỀ BÀI - link
QUY ĐỊNH
Bài KTGK là bài cá nhân hoặc bài nhóm (tối đa 3 thành viên).
Thiết kế trên Figma
Nếu là cá nhân thì tối thiểu 10 trang, cứ thêm 1 thành viên là tăng thêm 7 trang. Ví dụ nhóm 2 thành viên thiết kế tối thiểu 17 trang, 3 thành viên là 24...
NỘP BÀI
Share link file Figma trên mLearning
Deadline - 07:50 ngày 06/5/2025 (Thời gian làm bài 3 Tuần)
TIÊU CHÍ CHẤM ĐIỂM
Phần giao diện UI (các nguyên lý Gestalt) - Thẩm mỹ, đơn giản
Phần UX (animation và interaction) - Thông minh, ấn tượng, dễ dùng.
Yếu tố trừ điểm
Không theo Grid
Không dùng style cho color, font
Quá nhiều yếu tố gây mất tập trung
Khó truy cập
08 - Sửa bài KTGK
08 - Sửa bài KTGK
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Góp ý và sửa bài từng SV
---------- Khởi động Đồ Án Cuối kỳ ----------
Phổ biến yêu cầu đề bài
Lập danh sách chia nhóm
09 - FIGMA - Product Interaction
09 - FIGMA - Product Interaction
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
UX process 1/2
Các hiệu ứng product interaction
Tiếp tục làm bài nhóm
BÀI TẬP
10 - FIGMA - Menu Interaction
10 - FIGMA - Menu Interaction
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Nêu các tiêu chí
Tiếp tục làm bài nhóm
BÀI TẬP
Tiếp tục hoàn thành bài cuối kỳ
11 - Tạo danh sách chọn hàng
11 - Tạo danh sách chọn hàng
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Button guideline
sử dụng variable chọn hàng theo danh mục
Responsive là gì?
Các thiết lập Responsive trên Figma
BÀI TẬP
Tiếp tục hoàn thành bài cuối kỳ
12 - Tạo form tính tiền mua hàng
12 - Tạo form tính tiền mua hàng
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
User flow và User Journey
Figma
Conditional
Boolean
BÀI TẬP
Tạo một chuỗi mua và thanh toán online
Lập User Flow
13 - Làm bài nhóm
13 - Làm bài nhóm
7:50 - 11:30 on 15/4/2025 phòng 705 CAO THẮNG
NỘI DUNG
Tập trung các nhóm làm bài Cuối Kỳ
------------- ĐỒ ÁN CUỐI KỲ -------------
------------- ĐỒ ÁN CUỐI KỲ -------------
Ngày thuyết trình 10/6/2025
ĐỀ BÀI - link
NỘP BÀI
Thời gian làm bài - 3 tuần
Hình thức nộp bài - Thuyết trình và nộp bài qua link bên dưới (là file text kèm các link Figma)
Ngày thuyết trình - buổi 14, 15
QUY ĐỊNH
Thiết kế trên Figma
Bài KTGK là bài cá nhân hoặc bài nhóm (tối đa 4 thành viên). Bài cá nhân thì tối thiểu 10 trang, cứ thêm 1 thành viên là tăng thêm 7 trang. Ví dụ nhóm 2 thành viên thiết kế tối thiểu 17 trang, 3 thành viên là 24...
CÁC YẾU TỐ TRỪ ĐIỂM
Layout không theo Grid 4 collumns, 8px rows
Websie load chậm.
Nhiều yếu tố gây sao nhãng, mất tập trung.
CÁC YẾU TỐ CỘNG ĐIỂM
Thành thạo Figma với các tính năng Interaction cao cấp như Variables, Conditional, Boolean, Responsive, ...
Đạt 5 tiêu chí
THẨM MỸ - Biết cách ứng dụng nguyên lý Gestalt vào layout.
ẤN TƯỢNG - ý tưởng độc đáo, animation, interaction,..
THÂN THIỆN - dễ sử dụng, dễ truy cập, ..
VẬN HÀNH - app không bị treo, ì ach, chậm chạp,..
ỨNG DỤNG - app có cấu trúc đầy đủ để trở thành 1 app có thể sử dụng được
Page updated
Google Sites
Report abuse