Animationen für eine Selbsthilfe-App

“Sanadak” App – Hilfe zur Selbsthilfe

Vergangenes Jahre wirkte ich, Hanna, an einer Selbsthilfe-App für traumatisierte syrische Geflüchtete mit produzierte zusammen mit einer Kollegin eine Animationsreihe aus insgesamt 36 Videos. Die Animationen sind jeweils zwischen einer und 5 Minuten lang und zeigen eine Reihe animierte Charakter, die ich vorab für das Projekt entwarf und illustrierte. Neben der Animationsreihe war ich außerdem für die Erstellung der App-Icons und einigen weiteren Illustrationen verantwortlich und designte zusammen mit Dorian über 100 verschiedene Grafiken. Wie ich mein bisher größtes Projekt in insgesamt 9 Monaten auf die Beine stellte, erkläre ich dir im folgenden Beitrag.

Auf einem illustrierten Smartphone ist die Animierte Videoserie der Selbsthilfe App zu sehen.

Was ist “Sanadak”?

“Sanadak” ist eine interaktive Selbsthilfe-App für traumatisierte syrische Geflüchtete, die ihnen durch Übungen und Informationen helfen soll, besser mit ihren traumatischen und belastenden Erfahrungen durch Krieg und Flucht umzugehen. Die App nutzt dazu verschiedene Text-, Audio- und Videoformate, um wichtige Inhalte wie “Wie entsteht eine Traumatisierung?” oder “Was sind Bedürfnisse” aber auch Übungsaufgaben wie Atem- und Entspannungsübungen zu erklären und verständlich darzustellen. Jeder Nutzer hat dabei sein ganz individuelles Profil, um persönliche Angaben zu machen und den individuellen Fortschritt zu verfolgen.

Entwickelt wurde “Sanadak” an der Universität Leipzig und aktuell wird im Rahmen einer wissenschaftlichen Studie getestet, ob und wie wirksam die App ist, damit sie in Zukunft vielen Menschen mit Fluchterlebnissen helfen kann.

Charakter Development & Stilfindung

Bevor meine Kollegin und ich mit den Animationen beginnen konnten, war es meine Aufgabe die Protagonisten für die App zu entwerfen. Dazu bekam ich eine kleine Beschreibung der einzelnen Personen und illustrierte 4 passende Charaktere in Adobe Illustrator. Wichtig war dabei, einen Illustrationsstil zu finden, den meine Kollegin und ich anschließend gut animieren konnten. Immer wieder testeten wir unsere Ansätze und bekamen Feedback von den Herausgebern der App und einer Testgruppe, die während des gesamten Projekts Rückmeldungen zur bisherigen Umsetzung gaben. Nach wir uns auf einen Stil und das Aussehen der 4 Protagonisten geeignet hatten, erstellte ich noch einige weitere Charaktere, wie die Familien und Freunde der Protagonisten und einige Statisten. 

Bei diesem Projekt war es uns allen sehr wichtig, die Mimik der Charaktere so realistisch wie möglich zu gestalten und deren Emotionen gut darzustellen. Nur so können die Nutzer der App sich in den Charakteren wiederfinden und sich verstanden fühlen. Deshalb arbeitete ich gleich zu Beginn des Projekts an passenden Gesichtsausdrücken und erstellte ein Arsenal an Emotionen und Mimiken der jeweiligen Charakter, die ich und auch meine Kollegin später als Vorlage nutzen konnten. Auch erstellten wir bereits die verschiedenen Ansichten, wie Seite- und Profil der Charakter. Zum einen, um bei den Storyboards und Animationen später schneller voran zu kommen, zum anderen aber auch, um zwischen uns beiden ein einheitliches Erscheinungsbild beizubehalten, da wir die Storyboards und Videos separat von einander erstellten.

Ein kleiner Ausschnitt aus dem illustrierten Storyboard der animierten Erklärvideo Serie

Erstellung der Storyboards

Zur Erstellung der Storyboards erhielten wir jeweils ein Skript pro Animation, das bereits visuelle Anhaltspunkte und Ideen enthielt. Diese setzten wir dann mithilfe der bereits fertigen Charaktere und Assets in Adobe Illustrator und Adobe InDesign zu Storyboards um. Eine Besonderheit war dabei, dass wir die Videos nicht wie üblich im 16:9 Format, sondern im 1:1 Format erstellten. Dies entschieden wir, da wir nicht wollten, dass die Nutzer innerhalb der Appanwendung ständig ihr Smartphone drehen müssen und so in ihrer Übung unterbrochen werden. 

Animationen von Illustrationen

Auf Basis des Storyboards und mithilfe eines uns zur Verfügung gestellten Voiceovers erstellten wir dann jeweils eine Animationen in Adobe After Effects. Dazu nutzen wir unsere Charakter-Assets aus Adobe Illustrator und animierten deren Outlines und Gliedmaßen mittels Keyframes. Schon vorab einigten wir uns darauf, dass wir immer “portionsweise” erst ein paar Storyboards und deren Animationen erstellen würden und erst nach deren Fertigstellung mit den nächsten Storyboards beginnen würden. So konnten wir unseren Arbeitsprozess immer wieder überarbeiten und verbessern, um auftretende Schwierigkeiten direkt bei den nächsten Storyboards und Animationen zu vermeiden. Schließlich suchte ich noch eine kleine Auswahl an geeigneten Musikstücken, welche wir je nach Länge und Stimmung in die jeweiligen Animationen einbanden.

Im Folgenden findest du eine Auswahl an Szenen aus den von mir erstellten 24 Animationen. Diese sind vollkommen ohne Kontext zusammengeschnitten und zeigen lediglich den Stil und die Umsetzung der Animationen. Sie repräsentieren nicht den Inhalt der Selbsthilfe-App.

Icons für die App

Die Hauptaufgabe diese Projektes bestand zwar in der Erstellung der Animationen, jedoch war ich auch für Gestaltung der Grafiken innerhalb der Anwendung zuständig. So sollte ich z.B. die Icons für das Menü und die Navigation erstellen, aber auch passende kleine Symbole für Hinweise und Inhalte innerhalb der Kapitel. Alles sollte dabei einen einheitlichen Stil haben. Ich zunächst jeweils eine Auswahl an Symbolen für den jeweiligen Benötigten “Begriff” z.B. “Hilfe rufen” von einer Stockwebseite und nachdem sie sich die Herausgeber für ein Symbol entschied, erstellte Dorian jeweils eine finale Grafik in einem einheitlichen Stil. Insgesamt erstellten wir so über 100 Icons für die Selbsthilfe-App.

Herausforderungen – Animationen in zwei Sprachen

Eine Besonderheit der “Sanadak”-App ist, dass sie bilingual – einmal auf Deutsch und einmal auf Arabisch – produziert wurde. Theoretisch erstellten wir demnach nur 18 Animationen, aber jede einmal mit Deutschem und einmal mit Arabischem Voiceover. Gleich zu Anfang einigten wir uns darauf, dass wir zunächst die 18 deutschen Videos produzieren würden und diese vom Stil und Ablauf abgesegnet werden, sodass wir anschließend das arabische VoiceOver einpflegen können und nur noch das Tempo etwas anpassen müssen. Da niemand von uns arabisch spricht, überlegten wir uns ein System, bei dem die Texte der Voiceover jeweils mit Zahlen versehen wurden. So wussten wir, welcher Satz im Deutschen welchem Satz im Arabischen entspricht. Die Zahlen wurden dann auf einem der Stereokanäle des arabischen Voiceovers gesagt und wir konnten alles zuordnen, einpflegen und anschließend den Kanal löschen, sodass nur das reine Voiceover übrig blieb. Final wurden alle Videos dann von einem arabischen Muttersprachler auf ihre Richtigkeit geprüft.

Neben den arabischen VoiceOver gab es jedoch eine zweite Besonderheit: arabisch wird von rechts nach links gelesen und demnach sind die Nutzer der App es gewohnt von rechts nach links zu schauen. Entgegen dem Deutschen ist daher auch die Sehgewohnheit und der Bewegungsablauf der Animation anders und wir achteten darauf, dass die Bewegungen der Charaktere im Bild grundsätzlich von rechts nach links stattfanden.

Was habe ich gelernt?

Da ich vorher noch ein nie ein Projekt in dieser Größe umgesetzt habe, konnte ich bei diesem Projekt sowohl auf arbeitstechnischer als auch persönlicher Ebene enorm viel lernen. Zum einen habe ich meine Skills in After Effects und Adobe Illustrator vertieft, in dem ich lernte Charakter zu entwickeln und diese auch zu animieren. Zum anderen war das ersten Mal, dass ich auch für andere Freelancer verantwortlich war und mehr als meine eigene Arbeit koordinieren musste. So konnte ich viel über Projektmanagement und Attentionmanagement lernen und auch wie man selbst in stressigen Situationen einen kühlen Kopf bewahrt und schnell eine effektive Lösung für Probleme findet. Dabei konnte ich mich immer auf Dorian verlassen und er war eine große Stütze für mich 🙂 An dieser Stelle noch einmal ein dickes Dankeschön dafür!

Alles in allem bin ich sehr zufrieden mit meiner Arbeit und finde sowohl die Animationen als auch die Icons passen super zur Sanadak-App. Ich freue mich sehr über die Gelegenheit, ein so tolles Projekt wie Sanadak unterstützen zu können und bin sicher, die App wird in Zukunft sehr vielen Menschen helfen. Die Inhalte sind sehr wertvoll und ich freue mich sehr, dass alle zufrieden mit unserer Umsetzung sind.