VISUAL & MOTION DESIGN · CHARACTER ANIMATION
Ich bringe Charakter in Bewegung.
Ich bringe Charakter in Bewegung.
Ich bringe Charakter in Bewegung.
Visual Design, Character Animation und interaktives Storytelling – von der ersten Idee bis zum fertigen digitalen Erlebnis.
Hallo, ich bin Melanie.
Hallo, ich bin Melanie.
Ich bin Visual & Motion Designerin mit Erfahrung in Character Animation, visuellem Storytelling und interaktiven digitalen Erlebnissen. Mein Schwerpunkt liegt darauf, Figuren durch Bewegung Persönlichkeit zu verleihen und Animation sinnvoll mit Nutzerinteraktionen zu verbinden.
Ich bin Visual & Motion Designerin mit Erfahrung in Character Animation, visuellem Storytelling und interaktiven digitalen Erlebnissen. Mein Schwerpunkt liegt darauf, Figuren durch Bewegung Persönlichkeit zu verleihen und Animation sinnvoll mit Nutzerinteraktionen zu verbinden.
Mehr als nur ein Maskottchen.
Mehr als nur ein Maskottchen.
Bei meiner Auseinandersetzung mit Bechto standen drei Fragen im Mittelpunkt: Wie kann Animation motivieren? Wie verleihen Mimik und Gestik einem Charakter Persönlichkeit? Und wie lassen sich Bewegungen sinnvoll mit Nutzerinteraktionen verbinden?
01 / Motivation
Ein freundlicher Begleiter, der auch kleine Fortschritte wertschätzt.
Ein freundlicher Begleiter, der auch kleine Fortschritte wertschätzt.
02 / Emotion
Ausdrucksstarke Mimik und Gestik schaffen Nähe und Persönlichkeit.
Ausdrucksstarke Mimik und Gestik schaffen Nähe und Persönlichkeit.
03 / Interaktion
Gezielte Animationen reagieren auf Nutzeraktionen, vermitteln Feedback und machen Fortschritte erlebbar.
Gezielte Animationen reagieren auf Nutzeraktionen, vermitteln Feedback und machen Fortschritte erlebbar.
Ein Charakter. Zwei Designrichtungen.
Ein Charakter. Zwei Designrichtungen.
Ausgehend von Bechtos bestehender Gestaltung habe ich zwei Ansätze untersucht: Wie viel lässt sich allein durch Bewegung und Timing ausdrücken? Und welche zusätzlichen Möglichkeiten entstehen, wenn ich auch die Gestaltung des Charakters behutsam weiterentwickle?
Ausgehend von Bechtos bestehender Gestaltung habe ich zwei Ansätze untersucht: Wie viel lässt sich allein durch Bewegung und Timing ausdrücken? Und welche zusätzlichen Möglichkeiten entstehen, wenn ich auch die Gestaltung des Charakters behutsam weiterentwickle?
01 / Markenkontinuität
01 / Markenkontinuität
Bei dieser Variante habe ich mich eng an Bechtos bestehender Gestaltung orientiert. Farben, Formen und die reduzierte Mimik bleiben erhalten. Mein Fokus lag darauf, durch Gesten, Timing und kleine Bewegungen mehr Ausdruck zu schaffen, ohne seine vertraute Erscheinung zu verändern.
Bei dieser Variante habe ich mich eng an Bechtos bestehender Gestaltung orientiert. Farben, Formen und die reduzierte Mimik bleiben erhalten. Mein Fokus lag darauf, durch Gesten, Timing und kleine Bewegungen mehr Ausdruck zu schaffen, ohne seine vertraute Erscheinung zu verändern.
02 / Expressive Weiterentwicklung
02 / Expressive Weiterentwicklung
In der zweiten Variante habe ich untersucht, wie sich Bechtos Ausdrucksmöglichkeiten gestalterisch erweitern lassen. Dafür habe ich die Augenbrauen und Mundformen angepasst, Farbkontraste verstärkt und dezente Schattierungen ergänzt. Seine charakteristische Silhouette bleibt dabei erhalten.
In der zweiten Variante habe ich untersucht, wie sich Bechtos Ausdrucksmöglichkeiten gestalterisch erweitern lassen. Dafür habe ich die Augenbrauen und Mundformen angepasst, Farbkontraste verstärkt und dezente Schattierungen ergänzt. Seine charakteristische Silhouette bleibt dabei erhalten.
Von der Illustration zur Animation.
Von der Illustration zur Animation.
Bei der Charakteranimation beginnt für mich vieles schon vor der ersten Bewegung. Deshalb habe ich beim Aufbau der beiden Bechto-Varianten darauf geachtet, Gestaltung und Animation von Anfang an zusammenzudenken. Die folgenden Schritte zeigen, wie ich dabei vorgegangen bin.
Bei der Charakteranimation beginnt für mich vieles schon vor der ersten Bewegung. Deshalb habe ich beim Aufbau der beiden Bechto-Varianten darauf geachtet, Gestaltung und Animation von Anfang an zusammenzudenken. Die folgenden Schritte zeigen, wie ich dabei vorgegangen bin.
01 / Figurenentwicklung — Zunächst habe ich Bechtos bestehende Gestaltung in Illustrator als Vektorgrafik nachgebaut. Darauf aufbauend entstanden eigene Varianten und Ausdrucksstudien, bei denen ich insbesondere mit Mimik, Farbgestaltung und kleinen Details experimentiert habe.
01 / Figurenentwicklung — Zunächst habe ich Bechtos bestehende Gestaltung in Illustrator als Vektorgrafik nachgebaut. Darauf aufbauend entstanden eigene Varianten und Ausdrucksstudien, bei denen ich insbesondere mit Mimik, Farbgestaltung und kleinen Details experimentiert habe.
02 / Illustration und Vorbereitung — In Illustrator habe ich die Figur in einzelne, animierbare Elemente unterteilt und die Ebenen entsprechend organisiert. So lassen sich Augen, Mund, Arme und weitere Details später in Rive unabhängig voneinander bewegen und animieren.
02 / Illustration und Vorbereitung — In Illustrator habe ich die Figur in einzelne, animierbare Elemente unterteilt und die Ebenen entsprechend organisiert. So lassen sich Augen, Mund, Arme und weitere Details später in Rive unabhängig voneinander bewegen und animieren.
03 / Rigging und Animation —In Rive habe ich Bechtos Arme mit Bones versehen und die einzelnen Bewegungsabläufe animiert. Dabei habe ich besonders auf Timing, fließende Übergänge und kleine Gesten geachtet, die dem Charakter Persönlichkeit verleihen.
03 / Rigging und Animation —In Rive habe ich Bechtos Arme mit Bones versehen und die einzelnen Bewegungsabläufe animiert. Dabei habe ich besonders auf Timing, fließende Übergänge und kleine Gesten geachtet, die dem Charakter Persönlichkeit verleihen.
04 / Modulare Animation — Die Idle-Bewegungen habe ich in Rive als separate Animationen angelegt – darunter Blinzeln, Arm- und Fußbewegungen sowie kleine Veränderungen der Augenbrauen. Für die zweite Designvariante konnte ich das bestehende Artboard duplizieren und die Gestaltung anpassen, ohne die Bewegungsabläufe neu animieren zu müssen.
04 / Modulare Animation — Die Idle-Bewegungen habe ich in Rive als separate Animationen angelegt – darunter Blinzeln, Arm- und Fußbewegungen sowie kleine Veränderungen der Augenbrauen. Für die zweite Designvariante konnte ich das bestehende Artboard duplizieren und die Gestaltung anpassen, ohne die Bewegungsabläufe neu animieren zu müssen.
Charaktere mit Persönlichkeit.
Charaktere mit Persönlichkeit.
Charaktere mit Persönlichkeit.
Neben meiner Auseinandersetzung mit Bechto möchte ich zwei eigene Rive-Arbeiten zeigen. Beide beschäftigen sich mit Charakteranimation und Interaktion – allerdings mit unterschiedlichen Schwerpunkten: emotionaler Ausdruck und interaktives Storytelling.
Neben meiner Auseinandersetzung mit Bechto möchte ich zwei eigene Rive-Arbeiten zeigen. Beide beschäftigen sich mit Charakteranimation und Interaktion – allerdings mit unterschiedlichen Schwerpunkten: emotionaler Ausdruck und interaktives Storytelling.
Wenn Mimik auf
Interaktion trifft.
Wenn Mimik auf Interaktion trifft.
Wenn Mimik auf
Interaktion trifft.
Fünf Emotionen, die sich per Klick auslösen lassen.
Gleichzeitig folgt der Blick der Figur dem Mauszeiger,
während Blinzeln und eine sanfte Atembewegung für
zusätzliche Lebendigkeit sorgen.
Fünf Emotionen, die sich per Klick auslösen lassen. Gleichzeitig folgt der Blick
der Figur dem Mauszeiger,während Blinzeln und eine sanfte Atembewegung
für zusätzliche Lebendigkeit sorgen.
Fünf Emotionen, die sich per Klick auslösen lassen.
Gleichzeitig folgt der Blick der Figur dem Mauszeiger,
während Blinzeln und eine sanfte Atembewegung für
zusätzliche Lebendigkeit sorgen.
Wähle eine Emotion und bewege die Maus über die Figur.
Wähle eine Emotion und bewege die Maus über die Figur.
Wähle eine Emotion und bewege die Maus
über die Figur.
Wähle eine Emotion und bewege die Maus
über die Figur.
Entdecke die beiden orangefarbenen Interaktionspunkte
und begleite die Figur durch die Szene.
Entdecke die beiden orangefarbenen Interaktionspunkte
und begleite die Figur durch die Szene.
Entdecke die beiden orangefarbenen Interaktionspunkte
und begleite die Figur durch die Szene.
Wenn Figuren ihre eigene
Geschichte bewegen.
Wenn Figuren ihre eigene
Geschichte bewegen.
Wenn Figuren ihre eigene
Geschichte bewegen.
Was passiert, wenn ein Charakter nicht nur Teil einer
digitalen Oberfläche ist, sondern selbst mit ihr interagiert?
In dieser Rive-Animation greift meine Figur die Kante eines
Social-Media-Beitrags, zieht den nächsten Beitrag ins Bild
und fällt schließlich selbst hinein. Die Szene verbindet
Character Animation mit einer spielerischen Form
des interaktiven Storytellings.
Was passiert, wenn ein Charakter nicht nur Teil einer
digitalen Oberfläche ist, sondern selbst mit ihr interagiert?
In dieser Rive-Animation greift meine Figur die Kante eines
Social-Media-Beitrags, zieht den nächsten Beitrag ins Bild
und fällt schließlich selbst hinein. Die Szene verbindet
Character Animation mit einer spielerischen Form
des interaktiven Storytellings.
Was passiert, wenn ein Charakter nicht nur Teil einer
digitalen Oberfläche ist, sondern selbst mit ihr interagiert?
In dieser Rive-Animation greift meine Figur die Kante eines
Social-Media-Beitrags, zieht den nächsten Beitrag ins Bild
und fällt schließlich selbst hinein. Die Szene verbindet
Character Animation mit einer spielerischen Form
des interaktiven Storytellings.
Weitere Arbeiten. Andere Perspektiven.
Weitere Arbeiten. Andere Perspektiven.
Neben der Charakteranimation beschäftige ich mich mit unterschiedlichen Formen visueller und interaktiver Gestaltung. Die folgenden Projekte zeigen drei weitere Ausschnitte meiner Arbeit – von organischen Bewegungen über interaktive Elemente bis zum visuellen Storytelling.
Neben der Charakteranimation beschäftige ich mich mit unterschiedlichen Formen visueller und interaktiver Gestaltung. Die folgenden Projekte zeigen drei weitere Ausschnitte meiner Arbeit – von organischen Bewegungen über interaktive Elemente bis zum visuellen Storytelling.
02 / Interaktive Bewerberauswahl — Eine spielerische Karteninteraktion, bei der Animation und Nutzereingaben miteinander verbunden werden.
02 / Interaktive Bewerberauswahl — Eine spielerische Karteninteraktion, bei der Animation und Nutzereingaben miteinander verbunden werden.
02 / Interaktive Bewerberauswahl — Eine spielerische Karteninteraktion, bei der Animation und Nutzereingaben miteinander verbunden werden.
03 / Unterwasserwelt— Eine animierte Unterwasserszene mit Licht, Tiefe und Bewegung – umgesetzt als visuelles Storytelling.
03 / Unterwasserwelt— Eine animierte Unterwasserszene mit Licht, Tiefe und Bewegung – umgesetzt als visuelles Storytelling.
03 / Unterwasserwelt— Eine animierte Unterwasserszene mit Licht, Tiefe und Bewegung – umgesetzt als visuelles Storytelling.
Lass uns Bechto gemeinsam weiterentwickeln.
Lass uns Bechto gemeinsam weiterentwickeln.
Lass uns Bechto gemeinsam weiterentwickeln.
Ich freue mich darauf, Charaktere zu gestalten, die digitale Gesundheitsanwendungen lebendiger, verständlicher und motivierender machen.
Ich freue mich darauf, Charaktere zu gestalten, die digitale Gesundheitsanwendungen lebendiger, verständlicher und motivierender machen.