Giới Thiệu Khóa Học Motion Design Với Figma - Animation, Motion Graphics, UX/UI [Mã - 6884 A]

Figma như một Pro! Tìm hiểu Motion Design trên Mobile và Web bằng cách sử dụng các phương pháp hiện đại mà các designer hàng đầu sử dụng + xây dựng các project!

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

✓ Sử dụng Figma như một Pro và nhận được một công việc trong User Interface Design, User Experience Design (UX/UI), Web Design hoặc Mobile App Design.

✓ Tìm hiểu cách xây dựng Motion Design Prototypes bằng Figma và add Animations và Motion Graphics vào project của bạn.

✓ Có một design portfolio tuyệt vời được tùy chỉnh và hoàn thành một cách chuyên nghiệp vào cuối khóa học (chúng tôi cung cấp cho bạn!).

✓ Xây dựng các project này:  Photo Inspiration App, Nat Geo Carousel, Smart Home Mobile App, Home Reno Web Landing Page và Form, v.v!

✓ Tìm hiểu cách sử dụng Smart Animate trong Figma.

✓ Tìm hiểu các phương pháp hay nhất về UI/UX bằng cách sử dụng các xu hướng mới nhất trong ngành.

✓ Tìm hiểu các nguyên tắc của Motion Design, motion design process, best practices và prototyping dự án của bạn cho khách hàng của bạn.

Vừa ra mắt với tất cả các nguyên tắc Motion Design hiện đại và các phương pháp hay nhất cho năm 2024! Đây là khóa học dựa trên dự án, nơi chúng ta sẽ học bằng cách xây dựng nhiều dự án thiết kế để cùng nhau bổ sung vào portfolio của mình! 

Sử dụng các phương pháp hay nhất, mới nhất về Motion Design cũng như User Interface và User Experience Design (UI/UX), khóa học này tập trung vào việc giảng dạy hiệu quả cho bạn tất cả về cách xây dựng Interactions, Animations và Motion Graphic cho tất cả các dự án Web và Mobile App trong tương lai của bạn. Chúng tôi sẽ sử dụng Figma để thực hiện điều này, hiện là công cụ số 1 được các designer hiện đại sử dụng và đ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 sẽ cung cấp cho bạn tất cả các file Figma, premium design template và assets trong khóa học này để 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! Chúng tôi đảm bảo với bạn rằng đây là tài nguyên trực tuyến toàn diện nhất về Motion Design, Microinteractions, Animations và tạo UX/UI đẹp mắt!

Chương trình giảng dạy sẽ rất thực tế khi chúng tôi hướng dẫn bạn từ đầu đến cuối quá trình làm Motion Designer:

Các chủ đề trong khóa học là:

1. Tại sao Motion lại quan trọng? - Tìm hiểu xem motion đóng vai trò quan trọng như thế nào trong việc xây dựng các sản phẩm có thể sử dụng được cũng như cách chuyển động giúp tạo ra câu chuyện và củng cố các mental model.

✓ 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.

✓ Narrative và Mental Model.

2. 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 đi sâu vào các chi tiết quan trọng để giúp bạn thiết lập và vận hành để không có sự nhầm lẫn.

✓ Bắt đầu với Figma.

✓ Giới thiệu Figma.

✓ Figma Dashboard.

✓ Figma Tools.

✓ Layers và Pages.

✓ Top Bar.

✓ Design Properties.

✓ Prototyping với Figma.

✓ Bài tập: Tạo một Responsive Layout.

3. Giới thiệu về Smart Animate - Smart Animate của Figma là một công cụ thay đổi cuộc chơi. Bạn sẽ học cách sửa đổi tất cả các thuộc tính khác nhau mà nó hỗ trợ và sau đó áp dụng kiến ​​thức đó khi chúng ta xây dựng và giải thích một số prototypes đơn giản.

✓ Scale.

✓ Position.

✓ Opacity.

✓ Rotation.

✓ Fill.

✓ Bài tập: Tạo một Interaction đơn giản.

✓ Bài tập: Animating Navigation Items.

✓ Bài tập: Tạo một Larger Prototype.

4. Project: Photo Inspiration Application  - Chúng ta sẽ bắt đầu khóa học một cách thành công! Bạn sẽ bắt tay vào dự án đầu tiên của mình, nơi bạn có thể sử dụng các tài nguyên được cung cấp và những gì bạn đã học trước đó để liên kết prototype của một  ứng dụng di động photo inspiration của riêng bạn với nhau.

✓ Design Assets.

✓ Filtering thông qua Categories.

✓ Screen Transitions và Drag Interactions.

✓ Simple Microinteractions.

5. Motion Design Principles - Bạn cũng sẽ tìm hiểu các nguyên tắc thiết kế chuyển động và điều gì khiến chúng không thể thiếu đối với sự thành công của bất kỳ thiết kế nào.

✓ Giới thiệu.

✓ Easing.

✓ Offset và Delay.

✓ Parenting.

✓ Transformation.

✓ Value Change.

✓ Masking.

✓ Overlay.

✓ Cloning.

✓ Obscuration.

✓ Parallax.

✓ Dimensionality.

✓ Dolly và Zoom.

6. Tạo Motion trong Figma - Lấy lý thuyết và kiến ​​thức thực tế mà bạn đã học và quay lại Figma để xây dựng một số prototype nhỏ hơn. Bằng cách sử dụng các tài nguyên thiết kế được cung cấp, bạn có thể theo dõi hoặc xem cách chúng tôi giải thích cách tạo ra các interaction khác nhau.

✓ Bài tập: Navigation Transitions (Navigation Design).

✓ Bài tập: Navigation Transitions (Heart).

✓ Bài tập: Navigation Transitions (Cart).

✓ Bài tập: Navigation Transitions (Home).

✓ Bài tập: Scrolling (Landing Page).

✓ Bài tập: Scrolling (Anchor Links).

✓ Bài tập: Scrolling (Parallax).

✓ Bài tập: Paging (Simple Carousel Dots).

✓ Bài tập: Paging (Carousel Animations).

✓ Bài tập: Dragging (Listing Card).

✓ Bài tập: Dragging (Image Drag).

✓ Bài tập: Dragging (Dragging Through Content).

✓ Bài tập: Dragging (Drag And Drop).

✓ Bài tập: Microinteractions (File Uploader Part 1).

✓ Bài tập: Microinteractions (File Uploader Part 2).

✓ Bài tập: Microinteractions (Pause And Play).

✓ Bài tập: Microinteractions (Like Button).

✓ Bài tập: Microinteractions (Like Animation).

✓ Bài tập: Delight (Success Modal).

✓ Bài tập: Delight (Confetti Pop).

✓ Bài tập: Delight (Checklist Part 1).

✓ Bài tập: Delight (Check List Part 2).

✓ Bài tập: Delight (Cart Button Part 1).

✓ Bài tập: Delight (Cart Button Part 2).

7. Motion Design Process - Làm thế nào để motion design phù hợp với "normal design process"? Khóa học sẽ giải thích quy trình xác định các giải pháp chuyển động phù hợp với nhu cầu của người dùng.

✓ Discovery And Research Phần 1

✓ Discovery And Research Phần 2

✓ Design And Storyboard.

✓ Prototype.

✓ Testing.

✓ Helpful Tips.

8. Project: National Geographic Carousel  - Tìm hiểu cách tạo cả phiên bản đơn giản và phức tạp của một carousel effect trong Figma.

✓ Landing Page Carousel đơn giản.

✓ Parallax và 3D Image Effect.

9. Microinteractions - Tìm hiểu sâu hơn lý do tại sao micro-interactions lại quan trọng đến vậy. Sau đó, bạn sẽ chuyển ngay sang Figma để tạo animation của riêng mình bằng cách sử dụng plugin Figmotion.

✓ Micro-interaction là gì?

✓ Tại sao Microinteraction lại quan trọng.

✓ Figmotion: Phần 1.

✓ Figmotion: Phần 2.

10. Project: Smart Home Mobile Application - Các Ứng dụng Smart home đang ngày càng trở nên phổ biến. Tìm hiểu cách thiết kế một home screen đơn giản và sau đó tạo animate cho nó bằng Figma. Hãy cùng theo dõi cách tạo ra một temperature adjustment interaction phức tạp.

✓ Thiết kế một Mobile Home Screen.

✓ Tạo một Toggle Interaction.

✓ Temperature Adjustment Interactions.

11. Feedback - Tìm hiểu cách thích 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 Feedback lại quan trọng?

✓ Constructive Feedback.

12. Project: Home Renovation Landing Page - Bạn đã bao giờ muốn thiết kế một landing page lớn với các yếu tố hoạt hình chưa? Đừng lo lắng, hãy làm theo khóa học hướng dẫn bạn quá trình chia nhỏ một landing page thành nhiều prototype.

✓ Thiết kế một Landing Page.

✓ Prototyping một Landing Page.

✓ Parallax Effects: Part 1.

✓ Carousel.

✓ Parallax Effects: Part 2.

✓ Gallery.

13. Project: Home Renovation Renovation Form - Mọi người thường quên các biểu mẫu nhưng việc sử dụng chuyển động để giúp người dùng của bạn thực hiện một nhiệm vụ rất quan trọng là điều quan trọng. Phần này sẽ hướng dẫn bạn cách áp dụng một số animation tinh tế vào các form interaction để giúp bạn tạo ra nhiều sản phẩm hữu dụng hơn.

✓ Motion trong Form Elements.

✓ Form Progress.

✓ Animating Form Content.

✓ Inputs và Buttons: Part 1.

✓ Inputs và Buttons: Part 2.

✓ Inputs và Buttons: Part 3.

✓ Inputs và Buttons: Part 4.

✓ Tooltips.

✓ Carousel Input.

14. Project: Food Delivery Mobile Application - Tìm hiểu cách tạo một số interaction hào nhoáng bằng các kỹ thuật masking và sau đó làm theo khi khóa học giải thích 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 Transitions.

✓ Alternative Overlays.

✓ Masking và Overlay.

✓ Microinteractions và Floating Action Buttons.

✓ Order Progress: Part 1.

✓ Order Progress: Part 2.

15. Trưng bày Prototype của bạn - Bạn có tất cả những prototype này nhưng làm thế nào để bạn thể hiện chúng trong portfolio của mình? Chúng tôi sẽ hướng dẫn bạn qua một số tùy chọn cho cả Mac và Windows về cách ghi lại prototype và xuất nó sang định dạng ưa thích của bạn.

✓ Kap For Mac.

✓ Cách sử dụng Kap.

✓ Sử dụng Kap GIF của bạn trong Figma.

✓ Screenity For Chrome và Windows.

✓ Cách sử dụng Screenity.

✓ Sử dụng Screenity GIF của bạn trong Figma.

Chúng tôi sẽ dạy bạn những kỹ năng cho phép bạn tính phí rất nhiều tiền cho thời gian của mình. Không phải để cạnh tranh kiếm vài đô la một giờ trên một số trang web freelancing ngẫu nhiên. Mục tiêu là cung cấp cho bạn các kỹ năng của một designer hàng đầu và trong quá trình đó, chúng tôi sẽ thiết kế nhiều sản phẩm và dự án mà bạn có thể thêm vào portfolio của mình.

Hẹn gặp bạn bên trong khóa học!

Khóa học này dành cho ai:

✓ Bất kỳ ai quan tâm đến Motion Design và muốn tìm hiểu thêm về sức mạnh của Figma cũng như những gì bạn có thể tạo ra bằng công cụ tuyệt vời này.

✓ Bất kỳ ai muốn bắt đầu kinh doanh Web hoặc Mobile Design với tư cách là một freelancer hoặc làm designer tại một công ty.

✓ Web Developer và Mobile Developer muốn bổ sung thêm một kỹ năng có giá trị khác vào vành đai công cụ của họ.

✓ Bất cứ ai muốn được thuê làm một Web Designer, Mobile Designer, UI/UX Designer.

✓ Bất kỳ ai muốn tìm hiểu về các phương pháp Motion Design mới nhất để xây dựng các ứng dụng hiện đại và đẹp mắt.