Khóa học Hi-fi Prototype: UX/UI Motion Design
Lịch khai giảng
-
Sắp có lịch mới
Liên hệ Keyframe để được hỗ trợ -
Sắp có lịch mới
Liên hệ Keyframe để được hỗ trợ
Lịch khai giảng gần nhất
Mô tả Khóa học Hi-fi Prototype: UX/UI Motion Design
Chắc chắn sau khi hoàn thành khóa học Hi-fi Prototype: UX/UI Motion Design này bạn sẽ:
- Khả năng tạo ra các chuyển động cho thiết kế UX/UI, đặc biệt để thể hiện các concept chuyển động như: Micro-Interaction, Landing Page, Prototype Concept...
- Chinh phục các công cụ Lottie, Protopie và ứng dụng Json vào các bản Prototype cũng như có thể nhúng vào Web/App thực tế. Đặc biệt, Protopie một trong những công cụ mạnh mẽ để thể hiện Prototype giúp nâng cao trải nghiệm tương tác.
- Làm chủ các nguyên lý, quy tắc chuyển động cho UX/UI Interaction Design.
- Nắm vững kiến thức cơ bản về Animation, Motion có được nền tảng tự phát triển.
Những ai phù hợp với khóa học Hi-fi Prototype: UX/UI Motion Design:
- Các bạn UX/UI Designer muốn trang bị kỹ năng làm Prototype để phục vụ cho quy trình thiết kế Product.
- Các bạn Motion Graphic Designer muốn tìm hiểu sâu hơn về mảng ngành UX/UI Interaction Design.
Bạn sẽ được học và thực hành trên các phần mềm chuyên dụng như: Protopie, Lottie… Nếu bạn đang lo lắng rằng mình chưa biết sử dụng các phần mềm ấy thì có học được không? Đừng lo, bạn sẽ được hướng dẫn từ đầu khi tham gia lớp học.
Giảng viên
-
Thầy Nguyễn Tuyến có kinh nghiệm hơn “8” năm làm việc sáng tạo video Motion Graphic & Animation. Từng làm việc, cộng tác sản xuất Video cho các Brand lớn như CGV, Pepsi Co, Abbott, Huggie, Acecook, Zalo, Lazada, Generali… Hiện nay, Thầy đang làm việc ở vị trí Motion Artist tại “Shopee” và cũng là một Freelance Motion Designer.
Giáo trình
-
1 Buổi
Buổi 01 - Introduce to UX/UI Motion Design: Thực hành chuyển động Space
- Giới thiệu khóa học
- Tìm hiểu UX/UI Motion, tại sao lại cần tới Motion Designer
- Hướng dẫn cài đặt AEUX cho After Effects & Figma
- Làm quen với giao diện của After Effects
- Các lưu ý khi Export file từ Figma qua After Effects
- Tìm hiểu về Keyframe và các thuộc tính chuyển động cơ bản
- Bài tập diễn hoạt cơ bản Space
-
1 Buổi
Buổi 02 - Interaction Design Anatomy: Thực hành chuyển động Bottom Navigation Clock
- Chia sẻ tài liệu tham khảo về UI Animation
- Giải thích về cấu trúc của các thành phần chuyển động tương tác
- Tốc độ của chuyển động trong UI Animation
- Cách quy đổi tốc độ millisecond về frame
- Bài tập Bottom Navigation Clock
- Hướng dẫn xử lý Path Animation
- Cách Export file trong After Effects
-
1 Buổi
Buổi 03 - Types of Motion: Thực hành chuyển động Splash Screen
- Phân biệt các loại chuyển động và vai trò của chuyển động
- Tìm hiểu về Layer Panel phần 1
- Bài tập Pixel Store phần 1
- Hướng dẫn làm Splash Screen Animation
- Nguyên tắc 60-80, yếu tố chuyển động xen kẽ
-
1 Buổi
Buổi 04 - The 12 Principles of UX in Motion: Thực hành chuyển động Pixel Store
- Tìm hiểu về 12 nguyên tắc chuyển động
- Tìm hiểu Layer Panel phần 2
- Bài tập Pixel Store phần 2
- Hướng dẫn tạo chuyển cảnh giữa các Frame
- Hướng dẫn tạo mô phỏng nút tương tác
- Cách gắn Mockup trong After Effects
-
1 Buổi
Buổi 05 - Preview Panel, Looping Animation: Thực hành chuyển động Icon Loop
- Tìm hiểu về bảng Preview
- Bài tập Icon Animation
- Phương pháp làm chuyển động ngẫu nhiên
- Hướng dẫn lặp lại chuyển động
-
1 Buổi
Buổi 06 - Easing Type: Thực hành chuyển động Morphing Icon
- Hướng dẫn cài đặt Tool Flow và Inspector Spacetime
- Tìm hiểu về Easing Type, cách lựa chọn Easing phù hợp cho từng ngữ cảnh
- Hướng dẫn điều chỉnh biểu đồ chuyển động trên After Effects (Graph Editor)
- Sử dụng Flow để gắn các thư viện Easing
- Đọc thông số chuyển trong After Effects với Inspector Spacetime
- Bài tập Icon Morphling Icon
- Hướng dẫn trình bày chuyển động cho Dev với Motion Spec
-
1 Buổi
Buổi 07 - Illustration Animation: Thực hành chuyển động Lala Bye Character
- Tìm hiểu về cách tách file để làm chuyển động trong Ai
- Hướng dẫn gắn khớp xương nhân vật Lala Bye
- Bài tập Animation nhân vật Lala Bye
- Cách tạo chuyển động nhân vật tự nhiên hơn
- Hướng dẫn cách thêm code Loop để tạo chuyển động lặp lại
- Hướng dẫn Setup nhân vật tiêu chuẩn để Export thành Lottie (Json)
-
1 Buổi
Buổi 08 - Tìm hiểu Motion Tool: Thực hành chuyển động Landing Page Animation phần 1
- Bài tập Landing Page Animation phần 1
- Hướng dẫn diễn hoạt đồng loạt nhiều đối tượng cùng lúc
- Sử dụng Motion Tool để tạo chuyển động trước sau
- Cách Copy và sắp xếp lại hàng loạt đối tượng nhanh chóng
-
1 Buổi
Buổi 09 - Mockup Animation: Thực hành chuyển động Landing Page Animation phần 2
- Bài tập Landing Page Animation phần 2
- Hướng dẫn gắn Mockup
- Hướng dẫn sử dụng Match Comp Duration Tool
- Hướng dẫn làm Auto Scroll
- Tạo chuyển động ngẫu nhiên với Wiggle Expression
-
1 Buổi
Buổi 10 - Lottie (Json) Export: Thực hành chuyển động Loading
- Bài tập Loading Animation
- Tìm hiểu về Body Movin, cách Export Lottie(Json) cơ bản
- Tìm hiểu về LottieFiles
- Lottie for After Effects
- Lottie for Figma
- Hướng dẫn Export nâng cao Lottie sequence
- Tìm hiểu về các Note về Web/App Animation
- Cách đóng gói file Lottie (Json) tiêu chuẩn
-
1 Buổi
Buổi 11 - Hi-fi Prototype with Protopie: Thực hành mô phỏng Onboarding Interaction
- Hi-fi Prototype là gì
- Giới thiệu và làm quen với giao diện của Protopie
- Các yếu tố cơ bản để tạo tương tác với Protopie(Object, Trigger, Response)
- Cách Export từ Figma sang Protopie
- Bước đầu làm quen với Condition trong Protopie
- Cách thiết lập Scrolling Container và Paging Container
- Bài tập Onboarding
- Tìm hiểu điều kiện Range
-
1 Buổi
Buổi 12 - Component, Variable: Thực hành mô phỏng Tiktok App
- Hướng dẫn tạo Component
- Tìm hiểu về biến số (Variable)
- Bài tập Tiktok
- Cách tạo chuyển động lặp lại trong Protopie
- Hướng dẫn sử dụng Mask
- Cách tương tác với điều kiện Range
- Tìm hiểu cơ bản về Send & Receive
-
1 Buổi
Buổi 13 - Drag, Pull, Chain Trigger: Thực hành mô phỏng Dating App
- Tìm hiểu cách làm vòng lặp cho Slide(Infinite Scroll) thông qua điều kiện
- Bài tập Dating App
- Tìm hiểu về Drag Trigger
- Tìm hiểu về Pull Trigger
- Ứng dụng Trigger Chain để tạo sự liên kết chuyển động
- Sử dụng Send & Receive nâng cao
- Áp dụng Variable để tạo vòng lặp cho tương tác
-
1 Buổi
Buổi 14 - Focus Trigger, Length Formulas: Thực hành mô phỏng Signup & OTP Interaction
- Bài tập Signup & OTP
- Hướng dẫn thiết lập Input Text
- Tìm hiểu Focus Trigger
- Ứng dụng công thức(Formula) để tính toán độ dài kí tự
- Cách làm ẩn hiện và liên kết Password
- Mô phỏng OTP Interaction
- Variable nâng cao
-
1 Buổi
Buổi 15 - Map, Music Player Interaction: Thực hành mô phỏng Smart Home App phần 1
- Bài tập Smarthome Prototype phần 1
- Tạo bộ đếm số với Variable
- Làm Animation đơn giản trực tiếp trên Protopie
- Tìm hiểu tương tác với bản đồ (Drag, Pinch, Rotate)
- Tương tác cơ bản với âm thanh trong Protopie
- Tìm hiểu Formula Touch X, toLayerX, Seek to Formula để tua phát nhạc
-
1 Buổi
Buổi 16 - Camera, Voice Command: Thực hành mô phỏng Smart Home App phần 2
- Bài tập Smarthome Prototype phần 2
- Liên kết Mask và Chain
- Cách tạo Camera trong Protopie
- Tương tác tạm dừng, lật Cam trước & sau với Camera Trigger
- Tạo trợ lý ảo để tự động phát câu thoại theo ý muốn
- Tìm hiểu về Formula Voice transcript để phiên dịch giọng nói
- Điều khiển tương tác trực tiếp qua giọng nói(Voice Command)
- Send & Receive nâng cao với Protopie Studio
-
1 Buổi
Buổi 17 - Project Review
- Hỗ trợ đồ án
- Chia sẻ cách thức Present
-
1 Buổi
Buổi 18 - Tổng kết
- Trình bày đồ án
- Nhận xét & Góp ý
- Hỏi đáp, chia sẻ cuối khóa
- Cấp chứng chỉ
-
1 Buổi
Buổi 01 - Introduce to UX/UI Motion Design: Thực hành chuyển động Space
Tác phẩm học viên
563
Website Virtual Influencer Agency “METAHUMAN”
Trang Nguyễn Trung Phát
76
Wont Up
Phạm Hải Yến
107
Wind Breaker
Phạm Bảo Ngọc Trân
31
Showreel Hi-Fi Prototype: UX/UI Motion Design 01
Mai Bảo Trâm - Trần Nguyên An - Trần Nguyễn Huyền My - Võ Ngọc Lan Phương - Nguyễn Thị Mỹ Anh - Nguyễn Quang Thiện - Lê Lan Anh - Đinh Đoàn Quỳnh Như - Nguyễn Thu Hằng - Nguyễn Phước Tài - Nguyễn Ngọc Tú - Trang Nguyễn Trung Phát - Lưu Nguyễn Kim Thư - Bùi Trung Kiên - Kim Thị Quỳnh Hoa - Trần Thị Khánh Ngân - Nguyễn Ngọc Yên
87
AOV Check
Nguyễn Thành Hiệp
129
FastE
Vương Hữu Tài
167
TrueFit
Trần Nguyên An
207
"Italian Pizza App" Touch Able Prototype
Trần Ngọc Minh Trâm
Thông tin chi tiết
Khoá học Hi fi Prototype: UX/UI Motion Design nằm trong Lộ trình học UX/UI Product Design Toàn Diện
- Nếu bạn là người mới thì có thể tham khảo lộ trình dài hạn này nhé.
Tại Sao Bạn Nên Tham Gia Khóa Học Hifi Prototype: UX/UI Motion Design Tại Keyframe?
- Học 100% Offline tại lớp tại Sài Gòn hoặc Remote Teaching Online với hệ thống bài học và bài tập tối ưu cho trải nghiệm và phát triển.
- Được mentor 1:1 thực hiện dự án cá nhân xuyên suốt khóa học. Mục tiêu là hoàn thiện sản phẩm khi hoàn thành khóa học để cập nhật vào Portfolio.
- Hỗ trợ thư viện online video bài giảng, giúp bạn sở hữu trọn vẹn kiến thức dù có vắng học.
- Keyframe cấp chứng chỉ khi hoàn thành khóa học.
Khóa học Hi-fi Prototype: UX/UI Motion Design
có trong chương trình học
Chương trình học UI/UX Product Design Completed
Lộ trình: 4 - 12 tháng
FAQ
-
Quy trình đặt chỗ học
Đóng học phí trực tiếp tại Keyframe
- HCM: Lầu M, 06 Phan Đình Giót, P. 2, Q. Tân Bình, TP. HCM (Xem bản đồ)
- Từ thứ 2 đến thứ 7 : 09h00 – 21h00
- Chủ nhật : 09h00 - 17h00
- Hà Nội: Số 1, Ngõ 21, Lê Văn Lương, P. Nhân Chính, Q. Thanh Xuân, Hà Nội (Xem bản đồ)
- Từ thứ 2 đến thứ 7 : 15h00 – 21h00
Đóng học phí thông qua chuyển khoản nhanh
- Vietcombank
- Tô Dương Phương Bình – 0071004405302
- HCM: Lầu M, 06 Phan Đình Giót, P. 2, Q. Tân Bình, TP. HCM (Xem bản đồ)
-
Học xong có được giới thiệu việc làm không?
- Keyframe cam kết giới thiệu việc làm đối với học viên hoàn thành lộ trình toàn diện của các chương trình học.
-
Giá trị bằng cấp tại Keyframe
- Keyframe cấp chứng chỉ đối với học viên đạt tiêu chuẩn hoàn thành khoá học Offline/ Remote Teaching tại Keyframe (Chứng chỉ này có giá trị xác nhận đã hoàn thành học tại Keyframe)
- Keyframe không cấp chứng chỉ đối với học viên tham gia khoá học Online Video.
26 Reviews
Thầy vui tính và dạy hay, kiến thức bổ ích
Khoá học rất bổ ích giúp cho những người đang làm Graphic Design như mình có thể lấn sân sang UX/UI Design. Giúp mình mở rộng ra nhiều khả năng bản thân, gia tăng thêm cơ hội việc làm
thầy rất nhiệt tình và vui tính
Đây là một trong những môn mình thích nhất trong lộ trình ui/ux dài hạn. Kiến thức của môn khá là nhiều, tuy nhiên giảng viên đã thiết kế bài giảng rất hợp lí và thú vị nên mình rất dễ tiếp thu. Khi mình không hiểu bài, giảng viên cũng tận tình giảng lại tỉ mỉ hơn. Gần về cuối khóa, khi đã nắm được các kiến thức nền tảng rồi mình sẽ có nhiều ý tưởng hơn cho bài cuối khóa cũng như khả năng thực hiện hóa nó cao hơn. Cảm ơn Mr.Nguyễn Tuyến vì sự tận tâm. Cảm ơn Keyframe đã hỗ trợ mình tiếp cận khóa học chất lượng này.
Mình học khóa UX/UI Motion Design của thầy Tuyến ạ, khóa học bổ ích và dui dẻ. Trong đó, bạn có thể tha hồ "ngụp lặn" trong những bài tập đa dạng, thực tiễn mà thầy đưa ra và thầy cũng rất rất rất nhiệt tình hỗ trợ và giải đáp thắc mắc của các bạn trong lớp nữa. Túm lại là rất đáng để học ạ. P/s: Mê cái cách thầy nhiệt tình feedback bài, nhưng học viên thì lại lười làm :333