Wie Sie in 9 Schritten mit Motion Design beginnen können.

Animiert bedeutet voller Leben und Aufregung. Animation bringt Leben in ansonsten eher statische Dinge. Wenn es um Software geht, geht es nicht nur um Freude, sondern auch um die Lösung von Problemen.

Als Menschen sind wir es gewohnt, die Welt um uns herum zu sehen und wenn irgendeine Software kohärente Animationen hat, fühlt sie sich lebendig und natürlich an.

Technologieführer in der Branche drängen ihre Produkte dazu, natürlicher zu werden. Anspruchsvolle Wörter wie Motion Design, Motion UX, UX Choreography gewinnen an Bedeutung.

„Denken Sie daran – Motion baut unbewusst die Persönlichkeit ihrer Anwendung auf. Ähnlich wie Layout, Abstand, Typographie und Farben.“

Haben Sie jemals beobachtet, dass ein elastischer Sprung auf einem iPhone erfolgt, wenn Sie mit dem Scrollen fertig sind? Scheinbar kleine Details wie diese spielen eine große Rolle bei der Gestaltung der Persönlichkeit der Apple Produkte.

Beginnen Sie mit der Beobachtung.

Entwickeln Sie ein Auge für Bewegung. Wenn Sie nicht beobachten können, wie sich Dinge bewegen, werden Sie nicht in der Lage sein, mit ihnen zu arbeiten. Beginnen Sie zu beobachten, wie sich die Dinge auf ihrem Bildschirm bewegen, während Sie ihre Lieblings-Apps verwenden. Schauen Sie noch einmal nach und finden Sie heraus, warum es ihnen gefällt und versuchen Sie, nach den Details zu suchen. Beobachten Sie, was sich alles verändert – Form, Größe, Position, Farbe. Unabhängig davon, ob es winzig oder riesig ist, versuchen Sie herauszufinden, welche Partbewegung in der gesamten Komposition gespielt wird.

Animation ist nicht nur eine Farbschicht.

Die Animation offenbart einen tieferen Sinn. Als Künstler müssen Sie von Anfang an bewusst an Animationen denken. Wenn Sie sich in der Designphase befinden, animieren Sie ihre Prototypen, um diese Dimension der Zeit hinzuzufügen. Wenn Sie sich in der Entwicklungsphase befinden, teilen Sie ihren Code in modulare Komponenten auf, um die Dinge in der Benutzeroberfläche einfach zu bewegen. Erfahren Sie mehr über die Modularität.

„Tipp – Das aufmerksame Nachdenken über die animierte Persönlichkeit deiner Kreation wird ihr einen Charakter verleihen und ihnen helfen, eine tiefere Perspektive auf das zu bekommen, was Sie zu bauen versuchen.“

Wie können Sie Bewegung in ihr Produkt bringen?

Einige einfache Orte, an denen Bewegung in ihr Produkt eingeführt werden kann, könnten sein, wenn sich die Bildschirme ändern, wenn der Benutzer mit einem Element interagiert oder wenn der Benutzer auf etwas warten muss.

Bewegungsarten UX.

Sie können Bewegungen in Produkten kategorisieren als Übergänge (Inhaltsänderungen/Benutzer wechseln zu einem anderen Bildschirm), Mikrotinteraktionen (z.B. Twitter`s Like Button), grafische Animationen (z.B. der Roller-Sprung auf dem Startbildschirm der Zomato Order App).

Bereitstellung von räumlichen Informationen mit Motion.

Wenn ein UI-Element von rechts auf dem Bildschirm eintritt, wird der Benutzer die Position dieses Elements mental so organisieren, dass es sich auf der rechten Seite befindet. Wenn sich beispielsweise eine Hamburger-Menü-Taste oben links auf dem Bildschirm befindet, muss das Menü von links animiert werden. Um zu überprüfen, ob ihre Animationen richtig kommunizieren, zeigen Sie sie den Leuten und hören Sie zu, was sie zu sagen haben. Es ist der einfachste Weg, um mögliche Verwirrung zu vermeiden.

Beginnen Sie, Dinge wie Dauer, Timing-Kurve, Animationspfad, Anfangs- und Endwerte zu verstehen.

Diese Parameter bilden technisch gesehen ihr Animationsstück. Spielen Sie mit ihnen herum und hängen Sie sich an dieses Bedienelemente. Sobald Sie sich in der Lage fühlen, diese zu kontrollieren, können Sie Motion-Meisterwerke erstellen. Für die Benutzeroberfläche hat Google einige schöne Richtlinien.

Lassen Sie niemals Leute mitten in einem Fluss warten.

Verlangsamen Sie niemals Menschen in der Mitte eines Flusses, um sie dazu zu bringen, auf das Ende einer Animation zu warten. Wenn Sie wirklich warten müssen, dann erfreuen sie sich an einer sinnvollen Animation. Denken Sie immer daran, ihre Animation zu verwenden, um ein Problem zu lösen. Es gibt den Grund, warum es animierte Loader gibt. Außerdem sollten Sie ihre Software nicht mit Bewegung überlasten. Es ist kein Film.

„Profi-Tipp – halten Sie die Animationen subtil und in Einklang mit der Handlung ihres Produkts, um ein angenehmes Erlebnis zu schaffen.“

Zu verwendende Tools.

Lottie, Adobe Animate CC, After Effects, Sketch2AE, Framer, Origami, Animatic App, UIDynamics (iOS) sind einige Tools für Motion Design.

„Wir empfehlen, zunächst Stift und Papier zu verwenden, um mit ihrer Idee zu beginnen. Gehen Sie danach zu jeder digitalen Software über. Für Animationen in diesem Artikel habe ich handgezeichnete Rahmen in der Animatic App erstellt. Eine Animation hilft, die Dinge einfach und konzentriert zu halten.“

Erfassen und speichern Sie Dinge, die Sie interessant finden.

Speichern Sie Dinge, die Sie interessant finden. Beobachten Sie sie immer und immer wieder, verlangsamen Sie sie und verstehen Sie, wie sich Elemente bewegen. Lernen Sie durch Kopieren. Sie können auch GIFs auf Dribbble speichern. Darüber hinaus eignet sich Giphy Capture hervorragend, um Dinge auf ihrem Mac-Bildschirm aufzunehmen und aufzuzeichnen.

Bonuspunkt – Verabschieden Sie sich von ihrer Furcht.

Haben Sie immer noch Angst loszulegen? Entspannen Sie sich. Halten Sie einen Stift und ein Stück Papier bereit. Halten Sie das leere Blatt Papier vor sich. Nehmen Sie ihre Stift und skizzieren Sie etwas Zufälliges. Machen Sie eine Form. Zeichnen Sie mehr. Erstellen Sie ein Storyboard. Spüren Sie die Freiheit und bewegen Sie ihre Hände. Sie werden den Fortschritt sehr schnell erkennen können.

„Es ist beängstigender, einen Stift auf Papier zu berühren, als zu zeichnen. Sie müssen kreativ sein, sobald Sie dieses leere Stück Papier in etwas anderes verwandeln.“