-
Anh Tiến Thành có hơn 3 năm kinh nghiệm làm việc trong lĩnh vực Product Design. Từng là UI/UX Design Team Leader tại 1 Startup Việt Nam. Hiện là UI/UX Designer tại tập đoàn FPT.
Giáo trình
- 1 Buổi Buổi 01 - Tổng quan về Figma, các thao tác cơ bản
- Giới thiệu lộ trình học
- Giới thiệu các sách về sáng tạo và UI/UX
- Khái niệm về UI và UX
- Công việc thiết kế UI Design
- Các nguồn tham khảo tin cậy về UI/UX
- Giới thiệu 1 số định luật và nguyên tắc cần chú ý trong thiết kế UI/UX
- Vai trò của Figma trong dự án thực tế
- Đăng ký Figma Education Plan
- Figjam
- Community của Figma
- Thực hành
- Chọn Đề tài cá nhân
- 1 Buổi Buổi 02 - Component, Vector network & Style
- Shape, Group, Frame, Pages và các thuộc tính
- Giới thiệu về Vector và các tính năng của Vector
- Components và Variants
- Vẽ icon máy bay, ô tô, ví, document, mic, back 10s….
- 1 Buổi Buổi 03 - Component, Vector network & Style [tiếp theo]
- Vẽ và tô màu hình Vector huy hiệu, kim cương
- Components và Variants
- Hướng dẫn vẽ và diễn hoạt mẫu switcher
- Plugin Figmotion
- Plugin Mockup
- Plugin Easometric
- Bài tập
- 1 Buổi Buổi 04 - Wireframing, User flow, Auto layout
- Design Thinking
- Auto layout và ứng dụng
- Layout Grid
- Hướng dẫn tạo Wireframe
- Hướng dẫn tạo User Flow
- Thực hành wireframe lại 1 trang đã có sẵn
- Bài tập
- 1 Buổi Buổi 05 - Design System
- Atomic Design và ứng dụng trong Design System
- Màu sắc và Phân cấp thông tin
- Hướng dẫn tạo hệ thống màu
- Plugin Color Scheme
- Tạo theo mẫu của Material Design
- Tạo hệ thống chữ cho đề tài cá nhân
- Plugin Styler
- Thực hành generate, extract style
- Bài tập tạo component, variants và set thuộc tính
- 1 Buổi Buổi 06 - Design System [tiếp theo]
- 10 nguyên tắc kiểm tra tính khả dụng
- Hướng dẫn grid và giới thiệu 1 số bố cục phổ biến
- Constraint
- Luật 8-point grid
- Hướng dẫn tạo hệ thống Icon
- Hướng dẫn tạo hệ thống Button
- Responsive
- Một số tips tăng tốc độ thiết kế figma
- Bài tập Hệ số 1 thứ 2. Calendar
- Thực hành Table Auto layout, Component
- 1 Buổi Buổi 07 - Prototype
- UX writing
- Lỗi UI thường gặp
- Tính dễ dùng
- Prototype
- Text field
- Hướng dẫn vẽ UI trang Login
- 1 Buổi Buổi 08 - Thực hành
- Hướng dẫn vẽ giao diện Landing page
- Hướng dẫn vẽ giao diện trang Contact
- Thực hành Component Interaction
- Scrollbar, Fillter
- 1 Buổi Buổi 09 - Thực hành nâng cao: App nhắn tin, Dashboard
- Thực hành input form và Table
- Hướng dẫn vẽ UI App nhắn tin
- Dashboard
- 1 Buổi Buổi 10 - Thực hành nâng cao: App nhắn tin [tiếp tục] & Mạng xã hội
- Hướng dẫn vẽ UI App nhắn tin [Cont]
- Responsive cho tablet và mobile
- Plugin Breakpoint
- Tạo prototype
- Hướng dẫn vẽ UI Social network
- 1 Buổi Buổi 11 - Thực hành nâng cao: Giao diện trang thương mại điện tử
- Hướng dẫn vẽ giao diện app thương mại điện tử
- Hướng dẫn tạo component chip chọn thuộc tính sản phẩm
- Hướng dẫn tạo component nhãn răng cưa chọn mã giảm giá
- Hướng dẫn tạo component stepper
- Hướng dẫn tạo component milestone giao hàng
- 1 Buổi Buổi 12 - Thực hành nâng cao: Giao diện CMS
- Hướng dẫn vẽ giao diện CMS quản lý sản phẩm
- Hướng dẫn tạo component cấu trúc dòng của bảng
- Hiểu về độ phân giải
- Các định dạng file svg, png, jpeg, pdf
- Hướng dẫn quy hoạch, đặt tên, sắp xếp, ghi chú cho các thành phần trong file thiết kế.
- Hướng dẫn xuất PDF nhiều trang
- Hướng dẫn tạo webfont bằng icomoon
- Bài tập
- 1 Buổi Buổi 13 - Prototype nâng cao, Trình bày và Handoff
- Thực hành tạo Prototype Splash screen
- Các kiểu chuyển động nhanh chậm dần
- Ứng dụng After Delay
- Carousel
- Ứng dụng Interactive component
- Ứng dụng After Delay, Drag to, Scroll to
- Giao diện app bản đồ
- Plugin Mapsicle
- Ứng dụng Scroll to
- 1 Buổi Buổi 14 - Trình bày đồ án & Tổng kết khóa học
- Trình bày đồ án
- Tổng kết khóa học
- Chia sẻ hướng đi, apply Job, Freelancer
- 1 Buổi Buổi 01 - Tổng quan về Figma, các thao tác cơ bản
-
Anh Lê Minh Quang có hơn 5 năm kinh nghiệm thiết kế. Là một người yêu thích và mong muốn chia sẻ các kiến thức và lợi ích mà Figma mang lại cho UI/UX Design. Hiện đang làm Freelancer.
Giáo trình
- 1 Buổi Buổi 01 - Tổng quan về Figma, các thao tác cơ bản
- Giới thiệu lộ trình học
- Giới thiệu các sách về sáng tạo và UI/UX
- Khái niệm về UI và UX
- Công việc thiết kế UI Design
- Các nguồn tham khảo tin cậy về UI/UX
- Định luật Jacob và sự quen thuộc trong thiết kế UI/UX
- Vai trò của Figma trong dự án thực tế
- Đăng ký Figma Education Plan
- Figjam
- Community của Figma
- Thực hành
- Đề tài cá nhân
- 1 Buổi Buổi 02 - Vector network & Style
- Phương pháp Squint test
- Hướng dẫn vẽ viên kim cương bằng Vector network.
- Plugin: Color Scheme
- Vẽ icon new document.
- Ứng dụng Component vẽ huy hiệu
- Mask
- Plugin Figmotion
- Hướng dẫn vẽ và diễn hoạt mẫu switcher
- Bài tập
- 1 Buổi Buổi 03 - Vector network & Style [cont]
- Thực hành vẽ nâng cao
- Hướng dẫn ứng dụng component vẽ viên gạch
- Hướng dẫn vẽ căn phòng isometric
- Plugin Easometric
- Bài tập
- 1 Buổi Buổi 04 - Atomic Design, Design System, Color System, Type System
- Cách tìm cảm hứng màu sắc
- Hướng dẫn tạo hệ thống màu
- Plugin Color Scheme
- Tạo theo mẫu của Material Design
- Tạo hệ thống chữ cho đề tài cá nhân
- Plugin Styler
- Thực hành generate, extract style
- Bài tập
- 1 Buổi Buổi 05 - Layout, grid, spacing, Icon, Button
- Hướng dẫn tạo grid
- Constraint
- 8-point grid
- Hướng dẫn tạo hệ thống Icon
- Hướng dẫn tạo hệ thống Button
- Hướng dẫn vẽ mẫu Modal
- Bài tập
- 1 Buổi Buổi 06 - Thực hành component, auto-layout
- Hướng dẫn variant component Text field
- Hướng dẫn vẽ UI trang Login
- Bài tập
- 1 Buổi Buổi 07 - Thực hành component, auto-layout [Cont]
- Hướng dẫn vẽ giao diện trang Contact
- Hướng dẫn tạo prototype
- 1 Buổi Buổi 08 - Thực hành nâng cao: App nhắn tin
- Hướng dẫn vẽ UI App nhắn tin
- 1 Buổi Buổi 09 - Thực hành nâng cao: App nhắn tin [tiếp tục] & Mạng xã hội
- Hướng dẫn vẽ UI App nhắn tin [Cont]
- Responsive cho tablet và mobile
- Tạo prototype
- Hướng dẫn vẽ UI mạng xã hội
- Ứng dụng đối tượng chứa hình giữ đúng tỉ lệ
- 1 Buổi Buổi 10 - Thực hành nâng cao: Giao diện trang thương mại điện tử
- Hướng dẫn vẽ giao diện app thương mại điện tử
- Hướng dẫn tạo component chip chọn thuộc tính sản phẩm
- Hướng dẫn tạo component nhãn răng cưa chọn mã giảm giá
- Hướng dẫn tạo component stepper
- Hướng dẫn tạo component milestone giao hàng
- 1 Buổi Buổi 11 - Thực hành nâng cao: Giao diện CMS
- Hướng dẫn vẽ giao diện CMS quản lý sản phẩm
- Hướng dẫn tạo component cấu trúc dòng của bảng
- Bài tập
- 1 Buổi Buổi 12 - Prototype nâng cao
- Thực hành tạo Prototype Splash screen
- Các kiểu chuyển động nhanh chậm dần
- Ứng dụng After Delay
- Carousel
- Ứng dụng Interactive component
- Ứng dụng After Delay, Drag to, Scroll to
- Giao diện app bản đồ
- Plugin Mapsicle
- Ứng dụng Scroll to
- 1 Buổi Buổi 13 - Trình bày, bàn giao thiết kế
- Hiểu về độ phân giải
- Các định dạng file svg, png, jpeg, pdf
- Hướng dẫn quy hoạch, đặt tên, sắp xếp, ghi chú cho các thành phần trong file thiết kế.
- Hướng dẫn xuất PDF nhiều trang
- Hướng dẫn tạo webfont bằng icomoon
- 1 Buổi Buổi 14 - Trình bày đồ án & Tổng kết khóa học
- Trình bày đồ án
- Tổng kết khóa học
- Chia sẻ hướng đi, apply Job, Freelancer
- 1 Buổi Buổi 01 - Tổng quan về Figma, các thao tác cơ bản