Motion Design mit Figma: Animationen, Motion Graphics, UX/UI

Nehmen Sie an unserem Motion Design-Kurs teil, um das Fachwissen zu erwerben, das Sie von anderen Designern abhebt, Ihre Anerkennung als Elite-Kreativer steigert und Ihnen ermöglicht, Premium-Preise für Ihre Fähigkeiten zu verlangen.

Wir schlagen nicht vor, dass Sie sich um $5/Stunde Angebote für Logodesigns auf verschiedenen Freelancer-Plattformen bewerben.

Nachdem Sie diesen Kurs abgeschlossen haben, können Sie mindestens 10-20 Mal so hohe Preise verlangen.

Sie werden Motion Design in einer lebendigen Gemeinschaft lernen.

Mit Ihrer Anmeldung heute erhalten Sie Zugang zu unserem exklusiven Live-Online-Community-Klassenzimmer, in dem Sie mit Tausenden von Mitschülern, Alumni, Mentoren, TAs und Ausbildern zusammenarbeiten.

Sie werden von Daniel lernen, einem erfahrenen Designprofi mit praktischer Erfahrung als Lead-Produktdesigner für führende globale Unternehmen.

Dieser Kurs wird Sie mit den neuesten Methoden des Motion Designs, der Benutzeroberfläche (UI) und der Benutzererfahrung (UX) ausstatten, wobei der Schwerpunkt auf praktischen Fähigkeiten liegt, um beeindruckende Interaktionen, Animationen und Motion Graphics für Ihre Web- und mobilen App-Projekte zu erstellen.

Wir verwenden Figma und Figma Smart Animate, die bevorzugten Tools moderner Designer, die veraltete Optionen wie Adobe After Effects ersetzen.

Außerdem erhalten Sie alle Figma-Dateien, Premium-Designvorlagen und Ressourcen aus diesem Kurs, die Sie für Ihre zukünftigen Kundenprojekte verwenden können!

Hier ist, was Sie lernen werden, um ein Motion Design-Experte zu werden

Dieses Curriculum ist praxisnah. Daniel führt Sie Schritt für Schritt vom Anfänger zum Experten im Motion Design, sodass Sie Ihre eigenen beeindruckenden, professionellen Projekte erstellen können.

1. Einstieg in Figma - Entdecken Sie die wesentlichen Komponenten von Figma und was Sie für Ihre Reise benötigen. Wir werden jedes Detail behandeln, um jegliche Verwirrung zu beseitigen.

• Einstieg in Figma
• Einführung in Figma
• Figma Dashboard
• Figma Tools
• Ebenen + Seiten
• Top Bar-Funktionen
• Design-Eigenschaften
• Prototyping in Figma
• Übung: Erstellen eines responsiven Layouts

2. Grundlagen von Figma Smart Animate - Figma's Smart Animate ist revolutionär. Sie lernen, dessen verschiedene Eigenschaften anzupassen und dieses Verständnis anzuwenden, um einfache Prototypen zu erstellen.

• Skalierung
• Position
• Deckkraft
• Drehung
• Füllung
• Übung: Interaktive Elemente erstellen
• Übung: Animationen navigieren
• Übung: Einen größeren Prototyp entwickeln

3. Erstellen einer Foto-Inspirations-App - Sie starten Ihr erstes Projekt, indem Sie die bereitgestellten Ressourcen und erlernten Konzepte nutzen, um Ihren Prototyp einer Foto-Inspirations-App zu entwickeln.

• Design von Assets
• Kategoriefilterung
• Bildschirmwechsel + Drag-Interaktivität
• Einfache Mikro-Interaktionen

4. Bedeutung von Bewegung - Lernen Sie, wie Bewegung die Benutzerfreundlichkeit eines Produkts erheblich verbessert, Geschichten erzählt und mentale Modelle unterstützt.

• Häufige Missverständnisse im Motion Design
• Die Rolle der Bewegung in der Benutzerfreundlichkeit
• Erzählung & mentale Modelle

5. Prinzipien des Motion Designs - Dieser Abschnitt behandelt die grundlegenden Prinzipien des Motion Designs und deren entscheidende Bedeutung für den Erfolg Ihrer Designs.

• Einführung in die Prinzipien des Motion Designs
• Easing-Techniken
• Versatz & Verzögerung
• Elternelemente
• Transformationstechniken
• Wertänderungen
• Maskierungstechniken
• Overlay-Effekte
• Klontechniken
• Verdunklungstechniken
• Parallax-Effekte
• Dimensionale Techniken
• Dolly- & Zoom-Effekte

6. Erstellung von Bewegung in Figma - Kombinieren Sie Theorie mit Praxis, während Sie erneut in Figma eintauchen, um kleinere Prototypen zu erstellen. Daniel führt Sie durch jeden Schritt.

• Übung: Sanfte Navigationsübergänge
• Übung: Scroll-Effekte
• Übung: Paging-Mechaniken
• Übung: Drag-Aktionen
• Übung: Erstellung von Mikro-Interaktionen
• Übung: Erfreuliche Effekte

7. Workflow im Motion Design - Lernen Sie, wie Sie Motion Design in den typischen Designprozess integrieren. Daniel erläutert seinen Ansatz zur Identifizierung optimaler Bewegungsstrategien für Benutzeranforderungen.

• Discovery & Research Teil 1
• Discovery & Research Teil 2
• Designgrundlagen & Storyboarding
• Prototyping-Techniken
• Testprotokolle
• Nützliche Tipps

8. Projekt: National Geographic-Karussell - Erforschen Sie, wie Sie sowohl einfache als auch komplexe Karussell-Effekte in Figma erstellen.

• Schnelles & einfaches Landingpage-Karussell
• Erstellung eines komplexen Parallax- und 3D-Bildeffekts

9. Die Kunst der Mikro-Interaktionen - Vertiefen Sie die Bedeutung von Mikro-Interaktionen und erstellen Sie Ihre eigene Animation in Figma mit Daniel unter Nutzung des Figmotion-Plugins.

• Verständnis von Mikro-Interaktionen
• Die Bedeutung von Mikro-Interaktionen
• Figmotion: Teil 1
• Figmotion: Teil 2

10. Projekt: Smart Home Mobile App - Da die Smart Home-Technologie immer beliebter wird, lernen Sie, einen einfachen Startbildschirm zu gestalten und diesen mit Figma zu animieren. Folgen Sie Daniel, während er eine komplexe Temperaturanpassungs-Interaktion erläutert.

• Design des Startbildschirms
• Erstellung von Toggle-Interaktionen
• Techniken zur Temperaturanpassung

11. Effektives Feedback - Verstehen Sie die besten Strategien für das Geben und Empfangen von konstruktivem Feedback zu Ihren Designs.

• Die Bedeutung von Design-Feedback
• Konstruktives Feedback geben

12. Projekt: Home Renovation Landing Page - Wollten Sie schon immer eine fesselnde Landingpage mit animierten Elementen gestalten? Hier ist Ihre Gelegenheit. Begleiten Sie Daniel, während er Sie durch die Dekonstruktion einer Landingpage in mehrere Prototypen führt.

• Design der Landing Page
• Prototyping der Landing Page
• Parallax-Effekte: Teil 1
• Karussell-Design
• Parallax-Effekte: Teil 2
• Galerie-Design

13. Projekt: Home Renovation Form - Formulare werden oft übersehen, aber durch das Hinzufügen von Bewegung können Benutzer bei wichtigen Aufgaben erheblich unterstützt werden. Daniel zeigt Ihnen, wie Sie subtile Animationen in Formularinteraktionen integrieren, um die Benutzerfreundlichkeit zu erhöhen.

• Einbindung von Bewegung in Formularelemente
• Formularektionsdynamik
• Animation von Formularinhalten
• Inputs & Buttons: Teil 1
• Inputs & Buttons: Teil 2
• Inputs & Buttons: Teil 3
• Inputs & Buttons: Teil 4
• Verbesserung durch Tooltips
• Karussell-Inputs

14. Projekt: Food Delivery Mobile App - Meistern Sie die Erstellung auffälliger Interaktionen mithilfe von Maskierungstechniken und erstellen Sie anschließend einen komplexen Prototyp des Bestellvorgangs, während Daniel Sie durchführt.

• Einführung in das Projekt
• Verwendung von Parallax zur Aufmerksamkeit
• Übergänge in Listen
• Alternative Overlay-Techniken
• Maskierungs- und Overlay-Techniken
• Mikro-Interaktionen und Floating-Action-Buttons
• Bestellvorgang: Teil 1
• Bestellvorgang: Teil 2

15. Präsentation Ihrer Arbeit - Sie haben verschiedene Prototypen entwickelt, aber wie präsentieren Sie sie in Ihrem Portfolio? Wir werden mehrere Aufzeichnungsoptionen sowohl für Mac als auch Windows erkunden, um Ihre Prototypen im bevorzugten Format vorzustellen.

• Verwendung von Kap für Mac
• Kap Nutzungshinweise
• Integration von Kap-GIFs in Figma
• Screenity für Chrome & Windows
• Screenity Nutzungshinweise
• Integration von Screenity-GIFs in Figma

Was ist das endgültige Ergebnis?

Dieser Kurs ist nicht nur passives Anschauen von Tutorial-Videos.

Wir werden Sie dazu ermutigen, sich von einem vollständigen Neuling im Motion Design zu jemandem zu verwandeln, der zu den Top 10% der Motion Designer zählt 💪.

Wie können wir so zuversichtlich sein?

Tausende von Zero To Mastery-Absolventen haben Jobs bei Branchenführern wie Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify und mehr bekommen.

Sie gedeihen als Top-Freelancer und genießen Remote-Möglichkeiten weltweit.

Unabhängig von Ihrem Alter, Hintergrund oder Ihrer Erfahrung— viele unserer Studenten begannen als völlige Neulinge.

Sie können auch einer von ihnen sein.

Es gibt nichts zu verlieren; beginnen Sie noch heute mit dem Lernen, und wenn unser Kurs nicht Ihren Erwartungen entspricht, können Sie innerhalb von 30 Tagen eine vollständige Rückerstattung anfordern. Kein Ärger, keine Fragen.