Chia Sẻ Khóa Học Motion Design Với Figma - Animation, Motion Graphics & UX/UI [Khóa 5620 A]
Học motion design bằng Figma từ một chuyên gia trong ngành design. Bạn sẽ học được nhiều hơn là chỉ các nguyên tắc và lý thuyết motion design. Khóa học dựa trên dự án này sẽ hướng dẫn bạn cách sử dụng motion để đưa các design (và portfolio) của bạn lên một tầm cao mới.
Những gì bạn sẽ học được:
- ✓ Sử dụng Figma như một pro cho User Interface Design, User Experience Design (UX/UI), Web Design & Mobile App Design.
- ✓ Tìm hiểu các nguyên tắc của Motion Design, quy trình thiết kế, các best practice và prototyping các dự án cho khách hàng và client của bạn.
- ✓ Học cách add Motion Graphics và Animation vào các project của bạn.
- ✓ Học Motion Design bằng Figma.
- ✓ Học cách sử dụng Smart Animate trong Figma.
- ✓ Micro-interaction, animation, transition, parallax.
- ✓ Tạo design portfolio chuyên nghiệp của riêng bạn vào cuối khóa học (chúng tôi cung cấp mọi thứ để bạn tùy chỉnh!).
- ✓ Học Motion Design bằng cách thực sự xây dựng các dự án thực tế cùng với một chuyên gia trong ngành design mà bạn có thể bổ sung để làm cho design portfolio của mình nổi bật.
- ✓ Tìm hiểu các UI/UX best practice bằng cách sử dụng các xu hướng mới nhất trong ngành.
Khóa học Motion Design này sẽ cung cấp cho bạn những kỹ năng giúp bạn nổi bật hơn so với các designer khác, được công nhận là designer hàng đầu và cho phép bạn kiếm được nhiều tiền cho thời gian của mình.
Chúng ta không nói đến việc cạnh tranh để được trả 5 đô la một giờ cho việc thiết kế logo trên các website freelancing ngẫu nhiên.
Bạn sẽ có thể kiếm được ít nhất gấp 10-20 lần mức giá đó sau khi hoàn thành khóa học này.
Sử dụng các best practice mới nhất trong motion design, user interface (UI) và user experience (UX), khóa học này tập trung vào việc dạy bạn một cách hiệu quả về cách xây dựng các tương tác, animation và motion graphic chuyên nghiệp cho mọi dự án web & mobile app trong tương lai của bạn.
Chúng ta sẽ sử dụng Figma và Figma Smart Animate để thực hiện điều này vì đây hiện là công cụ số 1 được các designer hiện đại hàng đầu sử dụng. Figma đang thay thế tất cả các công cụ thiết kế lỗi thời trước đây (chúng tôi đang nói đến Adobe After Effects).
Chúng tôi cũng cung cấp tất cả các file Figma, premium design template và asset trong khóa học này cho bạn, để bạn có thể lưu giữ và sử dụng chúng khi làm việc với tất cả khách hàng tương lai của mình!
Sau đây là nội dung khóa học sẽ hướng dẫn bạn từ Zero đến Motion Design Master:
Chương trình giảng dạy rất thực tế. Nó hướng dẫn bạn từng bước từ đầu đến cuối để trở thành một Motion Designer có thể tự mình xây dựng những dự án chuyên nghiệp và đẹp mắt.
1. Giới thiệu về Figma - Tìm hiểu các phần khác nhau của Figma và những gì bạn cần để bắt đầu. Chúng tôi sẽ đi sâu vào các chi tiết quan trọng để giúp bạn bắt đầu sử dụng Figma mà không gặp bất kỳ khó khăn nào.
- ✓ Bắt đầu với Figma.
- ✓ Giới thiệu Figma.
- ✓ Figma Dashboard.
- ✓ Figma Tool.
- ✓ Layer + Page.
- ✓ Top Bar.
- ✓ Design Property.
- ✓ Prototyping với Figma.
- ✓ Bài tập: Tạo một Responsive Layout.
2. Giới thiệu về Figma Smart Animate - Smart Animate của Figma là một công cụ đột phá. Bạn sẽ học cách điều chỉnh tất cả các thuộc tính khác nhau mà nó hỗ trợ, sau đó áp dụng kiến thức đó vào việc xây dựng và giải thích một số prototype đơn giản.
- ✓ Scale.
- ✓ Position.
- ✓ Opacity.
- ✓ Rotation.
- ✓ Fill.
- ✓ Bài tập: Tạo một tương tác đơn giản.
- ✓ Bài tập: Animating Navigation Item.
- ✓ Bài tập: Tạo Prototype mẫu lớn hơn.
3. Project: Photo Inspiration Application - Bạn sẽ bắt đầu dự án đầu tiên của mình, nơi bạn sẽ sử dụng các tài nguyên được cung cấp và những gì bạn đã học để tạo prototype của một mobile app lấy cảm hứng từ ảnh của riêng mình.
- ✓ Design Asset.
- ✓ Filtering thông qua các Category.
- ✓ Screen Transition + Drag Interaction.
- ✓ Micro-interaction đơn giản.
4. Tại sao Motion lại quan trọng? Bạn sẽ tìm hiểu cách motion đóng vai trò quan trọng trong việc xây dựng các sản phẩm hữu ích và cách nó giúp tạo ra các câu chuyện và củng cố các mô hình tư duy.
- ✓ Những quan niệm sai lầm phổ biến về Motion Design.
- ✓ Motion giúp tạo ra khả năng sử dụng như thế nào.
- ✓ Narrative + Mental Model.
5. Các nguyên tắc Motion Design - Trong phần này, bạn sẽ tìm hiểu các nguyên tắc thiết kế chuyển động và những yếu tố làm cho chúng trở thành một phần không thể thiếu cho sự thành công của bất kỳ thiết kế nào.
- ✓ Easing.
- ✓ Offset + Delay.
- ✓ Parenting.
- ✓ Transformation.
- ✓ Value Change.
- ✓ Masking.
- ✓ Overlay.
- ✓ Cloning.
- ✓ Obscuration.
- ✓ Parallax.
- ✓ Dimensionality.
- ✓ Dolly + Zoom.
6. Tạo Motion trong Figma - Đã đến lúc kết hợp lý thuyết và kiến thức thực hành đã học và quay lại Figma để xây dựng một số prototype nhỏ hơn. Bạn sẽ được hướng dẫn từng bước trong từng bài tập.
- ✓ Bài tập: Navigation Transition
- ✓ Bài tập: Scrolling.
- ✓ Bài tập: Paging.
- ✓ Bài tập: Dragging.
- ✓ Bài tập: Micro-interaction.
- ✓ Bài tập: Delight.
7. Motion Design Process - Motion design phù hợp như thế nào với "qnormal design process"? Đừng lo, chúng tôi sẽ giúp bạn. Khóa học sẽ giải thích quy trình để xác định giải pháp chuyển động phù hợp với nhu cầu của người dùng.
- ✓ Discovery + Research Phần 1
- ✓ Discovery + Research Phần 2
- ✓ Design + Storyboard.
- ✓ Prototype.
- ✓ Testing.
- ✓ Các mẹo hữu ích.
8. Project: National Geographic Carousel - Tìm hiểu cách tạo một version đơn giản và phức tạp của carousel effect trong Figma.
- ✓ Landing Page Carousel nhanh chóng và dễ dàng.
- ✓ Cách tạo một Parallax & 3D Image Effect phức tạp.
9. Micro-interaction - Tìm hiểu sâu hơn về tầm quan trọng của micro-interaction. Sau đó, bạn sẽ chuyển ngay sang Figma để tạo animation của riêng mình bằng Figmotion plugin.
- ✓ Micro-interaction là gì?
- ✓ Tại sao Micro-interaction lại quan trọng đến vậy?
- ✓ Figmotion: Phần 1.
- ✓ Figmotion: Phần 2.
10. Project: Smart Home Mobile Application - Smart home app đang ngày càng phổ biến. Tìm hiểu cách thiết kế một home screen đơn giản và sau đó animate chúng bằng Figma. Hãy cùng xem cách tạo ra một tương tác điều chỉnh nhiệt độ phức tạp.
- ✓ Thiết kế Home Screen.
- ✓ Tạo một Toggle Interaction.
- ✓ Tương tác điều chỉnh nhiệt độ.
11. Feedback - Tìm hiểu cách phù hợp để tạo điều kiện và thu thập feedback mang tính xây dựng cho thiết kế của bạn.
- ✓ Tại sao Design Feedback lại quan trọng?
- ✓ Constructive Design Feedback.
12. Project: Home Renovation Landing Page - Bạn đã bao giờ muốn thiết kế một landing page toàn diện với các yếu tố hoạt hình chưa? Đây là cơ hội của bạn. Hãy cùng xem quy trình chia nhỏ một landing page thành nhiều prototype.
- ✓ Thiết kế Landing Page.
- ✓ Prototyping Landing Page.
- ✓ Parallax Effects: Phần 1.
- ✓ Carousel.
- ✓ Parallax Effects: Phần 2.
- ✓ Gallery.
13. Project: Home Renovation Form - Mọi người thường quên mất form, nhưng việc sử dụng chuyển động để hỗ trợ người dùng thực hiện một nhiệm vụ rất quan trọng là chìa khóa. Bạn sẽ được hướng dẫn cách áp dụng một số animation tinh tế vào các tương tác trên form của bạn, giúp bạn tạo ra những sản phẩm hữu ích hơn.
- ✓ Motion trong các Form Element.
- ✓ Form Progress
- ✓ Animating Form Content.
- ✓ Input + Button: Phần 1.
- ✓ Input + Button: Phần 2.
- ✓ Input + Button: Phần 3.
- ✓ Input + Button: Phần 4.
- ✓ Tooltip.
- ✓ Carousel Input.
14. Project: Food Delivery Mobile Application - Tìm hiểu cách tạo một số tương tác bắt mắt bằng các kỹ thuật masking và sau đó làm theo hướng dẫn về cách tạo một order progress prototype phức tạp.
- ✓ Giới thiệu.
- ✓ Sử dụng Parallax để thu hút sự chú ý.
- ✓ List Transition.
- ✓ Alternative Overlay.
- ✓ Masking + Overlay.
- ✓ Micro-interaction + Floating Action Button.
- ✓ Order Progress: Phần 1.
- ✓ Order Progress: Phần 2.
15. Trưng bày các Prototype của bạn - Bạn có tất cả các prototype này, nhưng làm thế nào để bạn trưng bày chúng trong portfolio của mình? Chúng tôi sẽ hướng dẫn bạn một số tùy chọn cho cả Mac và Windows về cách ghi lại prototype của bạn và export sang định dạng bạn muốn.
- ✓ Kap for Mac.
- ✓ Cách sử dụng Kap.
- ✓ Sử dụng Kap GIF của bạn trong Figma.
- ✓ Screenity for Chrome + Windows.
- ✓ Cách sử dụng Screenity.
- ✓ Sử dụng Screenity GIF của bạn trong Figma.
Những gì bạn sẽ thiết kế:
Cách học tốt nhất là thực hành. Không chỉ xem những hướng dẫn dài dòng. Đó là lý do tại sao một phần quan trọng của khóa học này là các dự án thực tế mà bạn sẽ được thiết kế. Hơn nữa, chúng sẽ rất đẹp mắt trong portfolio của bạn.
Photo Inspo:
Test kỹ năng Smart Animate của bạn và sử dụng Figma ngay để tạo ra những transition mượt mà trong ứng dụng ảnh của riêng bạn.
NatGeo:
Hãy bắt tay ngay vào Figma để tạo một National Geographic prototype tuyệt đẹp. Bạn sẽ học cách sử dụng các nguyên tắc chuyển động tinh tế để thu hút người dùng và cách tạo một prototypeđơn giản nhưng hiệu quả, mô phỏng các carousel dựa trên web.
Smart Home:
Tận dụng sức mạnh của Smart Animate của Figma để tạo ra một Smart Home app thực tế. Bạn sẽ học các tương tác đơn giản thể hiện trạng thái hoạt động và không hoạt động, cùng các tương tác phức tạp hơn cho phép bạn kéo và cài đặt nhiệt độ trong nhà!
Home Reno Web:
Triển khai các parallax interaction và timed automatic interaction trong website prototype này. Chúng tôi cũng sẽ hướng dẫn bạn cách tạo một form tương tác từ đầu, đồng thời áp dụng các nguyên tắc UI & UX motion mới nhất để người dùng luôn tương tác!
Food Deliveroo:
Bạn đang đói bụng? Chúng tôi sẽ giúp bạn với prototype này! Sử dụng GIF trong prototype của bạn để tạo trải nghiệm thanh toán chân thực và mô phỏng trải nghiệm theo dõi food order theo thời gian thực từ khi nhận đến khi giao hàng, tất cả chỉ trong một dự án.