Geschrieben von

Daphne

am

12.12.2023

Design Systeme: Die Meisterklasse im Visual Design

Die Kunst des Visual Designs erreicht mit der Einführung von Design Systemen ein neues Level.

Die Kunst des Visual Designs erreicht mit der Einführung von Design Systemen ein neues Level. Hier sind einige bahnbrechende Ergebnisse, die du durch unsere Dienstleistungen erwarten kannst:

Konsistenz und Markenidentität

Design Systeme schaffen eine kohärente und einheitliche Ästhetik über alle Plattformen hinweg. Unsere Visual-Design-Experten entwickeln Systeme, die die Markenidentität stärken und ein durchgängiges Erlebnis für deine Zielgruppe bieten.

Effizienz im Designprozess

Durch die Implementierung von Design Systemen beschleunigen wir den Designprozess erheblich. Das bedeutet nicht nur schnellere Markteinführungen, sondern auch effizientere Anpassungen und Aktualisierungen im Laufe der Zeit.

Flexibilität für zukünftiges Wachstum

Unsere Visual-Design-Experten denken voraus. Die entwickelten Design Systeme sind flexibel und skalierbar, um zukünftige Entwicklungen und Erweiterungen nahtlos zu integrieren.

Bessere Zusammenarbeit im Team

Ein gut konzipiertes Design System fördert die Zusammenarbeit im Team, indem es klare Richtlinien für Designelemente und Interaktionen bietet. Das Ergebnis? Ein harmonisches Miteinander, das die kreativen Kräfte freisetzt.

Barrierefreies Design

Unser Ansatz integriert barrierefreies Design von Anfang an. Design Systeme werden so gestaltet, dass sie ein inklusives Erlebnis für alle Benutzer schaffen, unabhängig von ihren Bedürfnissen und Fähigkeiten.

Tauche ein in die Zukunft des visuellen Designs mit unseren maßgeschneiderten Design Systemen. Lass uns gemeinsam die Ästhetik deiner Marke auf das nächste Level heben und dabei die Effizienz steigern. Deine visuelle Revolution beginnt jetzt!

No items found.

Lass uns darüber sprechen.

Dirk Fliescher

Head of Sales und Marketing

Jetzt kontaktieren

Marcel Bieri

Head of Creative

Jetzt kontaktieren

Marcel Bieri

Head of Creative

Termin buchen

6 Mins Read

29.5.2022

Bewegte Illustrationen mit Lottie helfen, die Botschaft zu vermitteln

Mehr lesen

Als Designerin kommt es für mich schon fast nicht mehr in Frage, Illustrationen statisch einzusetzen. Das Erlebnis ist als Nutzer viel intensiver, wenn sich Grafiken bewegen und das Storytelling unterstützen. In meinen früheren Agenturen hatte ich bereits öfters Lottie-Animationen gestaltet. Diese Erfahrung wollte ich bei VIU einbringen. In diesem Artikel berichte ich über den Entstehungsprozess und die das Potential von Lottie.

Wer hat’s erfunden?

Erfunden und entwickelt hat 2015 den Vorreiter Bodymovin nicht Airbnb, wie häufig fälschlicherweise genannt, sondern ein Web-Entwickler namens Hernan Torrisi. Er hatte nämlich die Idee, skriptbasierte Beschreibung einer Animation zu exportieren und entschied sich für das JSON-Datenformat. Das eigentliche Rendern sollte seiner Idee nach erst auf dem Gerät des Betrachters geschehen. 2017 wurde Airbnb dann darauf aufmerksam und sagten der Idee ihre Unterstützung zu. In dieser Zeit wurde auch der Name ‹Lotti› geprägt.

Wie arbeitete ich bei VIU mit Lottie?

Meine erste Chance bei VIU, bei der ich meine Lottie-Erfahrungen einbringen konnte, war ein Projekt für den Kanton Aargau. Die Herausforderung war, ein neues Imageprodukt zu entwickeln, welches die sechs zentralen Themen neu erzählen sollten. Dabei durften wir völlig umdenken. Schnell war uns klar, dass die einzelnen Themen durch animierte Illustrationen besser visualisiert und so mehr Dynamik reingebracht werden konnte. So kam dann alles ins Rollen.

Schritt 1 – Die ersten Skizzen entstehen

Zuerst machten wir uns Gedanken, wie wir die sechs vorgegebenen Themen illustrativ umsetzten wollten. Wie sehen die einzelnen Charaktere aus und welche grafischen Elementen aus dem Kanton Aargau greifen wir auf?

Erste Skizzen entstehen

Als nächstes hiess es dann erst einmal skizzieren, skizzieren, skizzieren. Mit der Procreate App erstellte ich dann mit Stift und Tablet die ersten skizzenhaften Zeichnungen.

Schritt 2 – Pfade reinzeichnen

Als nächstes war es an der Zeit, die Skizzen in Adobe Illustrator umzusetzen. In diesem Schritt galt es einen groben Ablaufplan für die Animation zu überlegen, damit die Illustration entsprechend aufbereitet werden konnten. Wichtig war dabei, dass alle einzelnen Elemente, die später animiert werden sollten, auf separaten Ebenen lagen.

Schritt 3 – Mandalas für Profis

Nun folgte mein Lieblingspart, das Kolorieren. Die zuvor noch linienartigen Zeichnungen werden eingefärbt, so dass sie einerseits sich in das Branding des Kanton Aargau einfügen und andererseits zum Leben erwecken. Mit Detail-Effekten wie Schattierungen konnte den Illustrationen mehr Tiefe verleiht werden.

Die Entstehung von der Skizze, zu den Pfaden, dann zur Einfärbung und zu den Schatten
Schritt 4 – Illustrationen erwachen zum Leben

Die fertig eingefärbten Illustrationen werden nun in Adobe After Effects animiert. Dabei wurden einzelne Elemente der Illustration als Ebene über die Zeitachse bewegt.

Animierte Illustrationen
Schritt 5 – Der Export der Animationspfaden

Die fertige Animation war nun bereit zum Rendern. In diesem Schritt galt es, die erstellten Bewegungen in der Illustration in eine JSON-Datei zu exportieren. Dazu kann in Adobe After Effects die ausgewählte Komposition mittels Bodymovin-Plug-in als JSON-Datei exportiert werden. Beim Rendern kann auch gleich eine Vorschau-Datei mit erstellt werden, welche dann unkompliziert für die Qualitätskontrolle direkt im Browser betrachtet werden kann.

Screenshot Bodymovin
Schritt 6 – Der Austausch der Lottie-Dateien

Für den Austausch mit den Entwicklern wurden die fertigen Dateien dann auf Lottie hochgeladen. Das Profil und die Verwendung von Lottie ist kostenlos. Nach dem Upload und den Tests leitete ich die Links zu den fehlerfreien Lottie-Animationen an das Entwickler-Team weiter. Auf der Website wurde dann das JSON mit dem Lottie-Player verknüpft, welcher heutzutage bereits für viele CMS standardmässig on Bord ist.

Fazit

Die Erstellung von Lottie-Animationen umfassen viele Schritte, welche sich über verschiedene Tools verteilen. Dies verlangt vom Designer einiges an Einarbeit und auch Coding-Verständnis. Auch sind, je nach Projekt, mehrere Personen an der Entstehung involviert. Plant man die Content-Erstellung schon von Anfang an mit den dazu benötigten Lottie-Illustrationen, ist die benötige Zeit dazu planbar und die finale Website entsteht als eine Einheit. Mit Lottie lassen sich schöne Geschichten erzählen

Im Webdesign spielen Animationen eine immer grössere Rolle, können sie doch eine Website mit viel Kreativität zum Leben erwecken. Lottie ermöglicht Designern vollen Spielraum in der Animation und die Option, die Ergebnisse mit wenig Aufwand und ganz ohne technische Anpassungen und Coding-Kenntnisse in die Website zu implementieren. Und auch die reibungslose Integration und die gute Performance sind nicht zu toppen.

Schwächen von Lottie-Animationen können das hohe Gewicht für den Player und das zugehörige JSON sein. Daher ist z.B. ein Einsatz als Ladeanimation weniger geeignet und sollte mittels HTML und CSS erfolgen. Trotzdem gibt es genügend Einsatzmöglichkeiten, welche d

Und konnte ich dir das Potential von Lottie näherbringen? Falls es bei dir nun vor Ideen blubbert, dann lass uns doch zusammen ein Projekt machen. Oder schau mal in das Imageprodukt des Kanton Aargau rein.