Die digitale Medienwelt dreht sich schnell, doch nicht jeder Besucher scheint willkommen zu sein. So können bspw. Blinde und Sehbehinderte die <a href="https://www.aleksundshantu.com/digitalagentur/social-media-marketing/">Social-Media-Videos</a> der Unternehmen häufig gar nicht verstehen. Die visuellen Botschaften sind zu klein, zu dunkel und es fehlt vor allem an Erklärungen. Um ein Bewusstsein für diese Benachteiligung zu schaffen, hat uns der DBSV für die Entwicklung eines Erklärvideos angefragt. Aufgabe war es, die fünf wichtigsten Tipps abzubilden, mit denen Online- und Social-Media-Videos für jedermann zugänglich werden, und in einem 2D-Erklärfilm anschaulich, unterhaltsam und vor allem barrierefrei umzusetzen.

dbsv-tara_kathrin_arthur_meeting-aspect-ratio-10-7-2

dbsv-tara_kathrin_arthur_meeting-aspect-ratio-10-7

DBSV Logo im Film-Tipps für inklusive Videos

dbsv_logo-2

dbsv_logo

Illustration aus den 5 Film-Tipps für inklusive Videos

tara_am_arbeitsplatz

dbsv_gebaeude-aspect-ratio-7-10

dbsv_gebaeude

Das barrierefreie Erklärvideo mit den 5&nbsp;Tipps

Im Projekt „Video für alle“ des Deutschen Blinden- und Sehbehindertenverbandes&nbsp;e.&nbsp;V. sollte unsere Motion-Design-Agentur ein animiertes <a href="https://www.aleksundshantu.com/digitalagentur/erklaervideos/">Erklärvideo</a> produzieren. Aufgabe war es, die fünf wichtigsten Tipps abzubilden, mit denen Online- und Social-Media-Videos für jedermann zugänglich werden, und in einem 2D-Erklärfilm anschaulich, unterhaltsam und vor allem barrierefrei umzusetzen.

Wir erklären Barrierefreiheit – im Erklärvideo

Wir unterstützen. Der DBSV unterstützt als Selbsthilfeorganisation sehbehinderte, blinde, hörsehbehinderte und taubblinde Menschen und vertritt ihre Interessen. Zentrale Ziele sind die Förderung ihrer Selbstbestimmung sowie eine gleichberechtigte gesellschaftliche Teilhabe.

Um die Tipps so eindrücklich wie möglich zu transportieren, entwickelte unser <a href="https://www.aleksundshantu.com/digitalagentur/animationsstudio/">Animationsstudio</a> zunächst eine unterhaltsame Storyline um die einzelnen Tipps. Da es sich bei der Zielgruppe um Agenturen und Verantwortliche im Bereich Unternehmenskommunikation handelt, schrieben wir eine Narration um eine fiktive, aber dennoch ziemlich charakteristische Erklärvideo-Agentur.

Storyline für ein Erklärvideo

dbsv_video_fuer_alle

tara_am_laptop

Erklärfilm für den Deutschen Blinden- und Sehbehindertenverband

dbsv_fuenf_tipps_erklaerfilm

dbsv-fuenf_tipps_erklaerfilm

Figuren ansprechend und unverwechselbar zu gestalten, gehört zur Grundlage des Charakterdesigns. Unsere <a href="https://www.aleksundshantu.com/insight/illustratorinnen-striche-farben-formen-und-geschichten-die-weit-leuchten/">Illustratorin</a> schuf mehrere Agentur-Charaktere mit ganz individuellen Zügen, hellen Farben und speziellen Texturen. Zudem entwickelten wir im engen Austausch mit dem Kunden eine starke Textvorlage und ein hilfreiches Animatic. Nach der Abnahme wurden die <a href="https://www.aleksundshantu.com/digitalagentur/illustrationen/">Illustrationen</a> an das <a href="https://www.aleksundshantu.com/insight/motion-design-agentur-berlin/">Motion Design</a> übergeben, die die Styleframes zum Leben erweckten.

Custom-made Illustrationen

Die Motion-Design-Module wurden dann im Schnitt zusammengefügt. Nun wählten wir die passenden Sprecher für das Erklärvideo aus. Dabei achteten alle Beteiligten auf eine möglichst klare und gut verständliche Sprechweise. Einzelne Aufnahmen mussten wiederholt werden, um den perfekten Ton für die Zielgruppe und für Sehbehinderte zu garantieren.

Erzähl ’s mir!

no_barriers_com

Das helle und anziehende Video zu entwickeln hat allen Beteiligten viel Verständnis geschenkt. Dabei war es auch während einer Produktion nicht einfach, jeden der im Grunde einfachen fünf Tipps zu beachten. Doch wir lernen. Um Blinden und Sehbehinderten einen guten und positiven Zugang zum Netz zu gewährleisten, haben wir es in der Hand. Veränderung beginnt immer bei einem selbst.

Das Narrativ macht den Unterschied

Tel.: +49 30 40045775

Schreib mir!

Aleksandar Mijatovic

Nimm Kontakt zu uns auf!

Inspiration in jedem Projekt: Entdecke Weiteres aus unserem Portfolio!

Erklärvideos

Für den Deutschen Blinden- und Sehbehindertenverband e.V. animierten wir einen 2D-Erklärfilm mit 5 wichtigen Tipps für barrierefreie Videos.

Video für alle – 5 Tipps DBSV

2D-Erklärfilm mit 5 wichtigen Tipps für barrierefreie Videos

Outlast ist ein modernes Unternehmen, das Weltraum-Technologien nutzt. Es stellt einen Stoff her, der die Körpertemperatur reguliert. Ja, hier auf der Erde! Das Unternehmen suchte nach einer Animationsagentur, die ihm ein Produktvideo für diese besonderen Textilien produzieren würde. Da unsere Motion-Design-Agentur häufig für Modeunternehmen arbeitet, war es naheliegend, dass wir das nur zu gern umsetzten.

outlast

outlast-technologie-explainer-header

Outlast Explainer - Astronaut und andere Linien-Elemente

aleksundshantu-outlast-portraislider

Outlast

Ohne Kälte in den Weltraum

outlast_featuregif_700x490-2

outlast_featuregif_700x490

Niemand kommt auf die Idee, im T-Shirt zum Mond zu fliegen. Textilien, die für den Weltraum entwickelt wurden, zu nutzen, das ist schon naheliegender. Ziel des animierten Produktvideos von Outlast ist es, Mehrwert und Nutzen der Outlast-Thermo-Technologie den (B2B-)Kunden zu erklären. Das animierte Produktvideo sollte&nbsp;– multifunktional wie das Outlast-Produkt&nbsp;– auch für B2C-Kunden geeignet sein, z.&nbsp;B. für Webseiten der Brands, Onlinemarketing, Produktmessen.

Zieh mich an, Astronaut! 

Wärmende Textilien gibt es viele, aber Outlast ist der führende Temperatur-Spezialist unter den Herstellern für textile Hochleistungsmaterialien. Das Unternehmen investiert in ein hocheffizientes textiles Wärme- und Feuchtigkeitsmanagement. Das große Interesse an leistungsfähiger Isolierung führt Outlast-Materialien bis in die unendlichen Weiten des Weltraums.

Outlast wollte in dem englischsprachigen <a href="https://www.aleksundshantu.com/digitalagentur/produktvideo/">Produktvideo</a> beschreiben, wie sein Weltraumgewebe genau funktioniert und wofür es verwendet wird. Im Zentrum stehen die Vorteile der Outlast-Technologie. Dafür musste unsere Animationsagentur das Storytelling komprimieren und das Look-and-Feel edel und modern gestalten. Gut, dass wir uns durch unsere langjährige Zusammenarbeit mit der Modemesse PANORAMA BERLIN in diesem Segment bestens auskennen.

Das schwebende Produktvideo 

Von ALEKS & SHANTU animiertes Erklärvideo für Outlast 

komp-1-0001623-e1663224487495

Komp-1-0001623-e1663224487495

Nach der Bestätigung des Briefings entwickelten unsere <a href="https://www.aleksundshantu.com/insight/illustratorinnen-striche-farben-formen-und-geschichten-die-weit-leuchten/">Illustratorinnen</a> mehrere Grafikstile. Gleichzeitig schrieben wir einen Sprechertext. Nachdem Outlast sich für den Lineart-Stil entschieden hatte, weil das Unternehmen einen cleanen, minimalistischen Look mit sauberen, feinen Linien und perfekten Rundungen anstrebt, entwickelten wir unter Einbindung des Sprechertextes das Animatic. Mit ihm legen wir fest, welche filmischen Elemente unser Motion-Design-Studio parallel zum Text zeigt. So können wir im Vorfeld eine genaue Vorstellung von Timing und Tempo definieren.

Lineart – viel Stil fürs animierte Produktvideo

ALEKS & SHANTU – Grafik für Outlast-Stofftechnologie

komp-1-0013527

Komp-1-0013527

Sobald ein Storyboard bestätigt worden ist, entwickelt unser Illustrationsteam mit <a href="https://procreate.com/" rel="noopener" target="_blank">Procreate</a> erste Skizzen für sämtliche Motive. Wenn vektorbasierte Dateien animiert werden, wechseln sie im Anschluss auf Adobe Illustrator.

Wie unsere Illustratorinnen und Illustratoren arbeiten

outlast-technologie-explainer-skizze

Outlast Explainer - Astronautenskizze aus Procreate

Vektorgrafiken zu verwenden ist sinnvoll, wenn einfache Silhouetten genutzt oder sich eine Form in eine andere Form umwandeln soll. Wenn unser Animationsstudio das pixelbasiert machen müsste, würde man bei solchen Transformationen Frame-by-Frame animieren. Das sprengt im Allgemeinen den Zeit- und Budgetrahmen.

Ausarbeitung in Illustrator

outlast-technologie-explainer-umsetzung-after-effects

Szene aus Outlast Explainer mit Linien-Animation

Diese Vektordateien dienen als Keyframes. In der finalen Arbeitsphase nutzen Motion Designer sie in After Effects, um mit der Animation des Produktvideos zu beginnen. Später werden die einzelnen 2D-Animationen im Schnitt zusammengeführt, vertont und in den jeweiligen Formaten ausgespielt. So kann ein Produktvideo auch im Social-Media-Marketing verwendet werden.

Die Motion Designer übernehmen

ALEKS & SHANTU –  Produktvideo für Outlast-Technologie

komp-1-0010323-e1663224860991

Komp-1-0010323-e1663224860991

In jedem animierten <a href="https://www.aleksundshantu.com/digitalagentur/produktvideo/">Produktvideo</a> geht es darum, Informationen in einem kurzen, prägnanten Film zu verpacken. Die technischen Informationen dazu, wie Outlast Fabric funktioniert und wie es verwendet wird, müssen in der Narration effizient zusammengefasst werden. Nur so bleibt das Video für den Zuschauer interessant.

Wie wir Informationen im Produktvideo verpacken

Outlast ist ein besonderer Kunde. Das Produkt überzeugt alle im Team, und der Lineart-Stil gab uns großen kreativen Spielraum. Das Unternehmen stellte uns zudem ein großzügiges Zeitfenster für die Umsetzung bzw. bis zur Deadline zur Verfügung. Dies ermöglichte uns, dass wir mit zeitlichem Abstand das Projekt mehrmals begutachten und optimieren konnten. Eben jenen stressfreien Projektprozess strahlt das animierte Produktvideo aus. Wenn Einzelheiten geändert werden mussten, erhielten unsere Motion Designer genügend Zeit, sich für die beste Option zu entscheiden.

Zeit ist ein kreativer Faktor

Das Outlast-Produktvideo beschreibt die Vorteile der Verwendung eines Hightech-Produkts. Der Stil ist reduziert und klar. Die Animationen sind fließend, z.&nbsp;B. wenn der Astronaut durch den Weltraum und zur Erde fliegt. Von Beginn an ließen wir unsere Erfahrung in der Präsentation von Fashion ins Video einfließen: von der <a href="https://www.aleksundshantu.com/insight/zeit-die-welt-zu-erfinden-die-fabelhafte-rueckkehr-der-modeillustration/">Modeillustration</a> bis zu Modemessen.

Völlig losgelöst

„Danke, lieber Aleks, du und dein Team habt mit einer perfekten Organisation, viel Engagement und dem richtigen Gefühl für unser Vorhaben einen passgenauen Film produziert, der sich durch einen eigenen unverkennbaren Stil von der Masse absetzt. Sehr gerne arbeiten wir wieder mit euch zusammen!“

Anne Sickor

1614887303037

Lass dich von uns animieren!

Für Outlast erstellte unsere Motion-Design-Agentur animierte Lineart-Illustrationen in einem Produktvideo über Thermo-Technologie-Textilien.

Animiertes Produktvideo für Outlast: ohne Kälte in den Weltraum

Religions for Peace mit Sitz in New York hat es sich seit seiner Gründung 1970 zur Aufgabe gemacht, die unterschiedlichen Weltreligionen miteinander im stetigen Dialog zu verbinden und so für den Weltfrieden zu werben. Sie wird dabei von mehr als einhundert Führungskräften aus allen Glaubensrichtungen vertreten und von der Stiftung Friedensdialog gefördert. Der Ring for Peace soll die Botschaft für Frieden und Verständigung als Marke widerspiegeln. | <a href="https://de.ringforpeace.org/" target="_blank" rel="noopener">www.ringforpeace.org</a>

Vorschaubild Religions for Peace. Foto des großen Rings aus Holz in der Landschaft.

aleksundshantu-rfp-beitragsbild

ring_for_peace

Logo von Ring for Peace

ring_for_peace-headerbild-website

montage_ring-for-peace_quer_3zu4_1800px-aspect-ratio-7-10

montage_ring-for-peace_quer_3zu4_1800px

Die Welt etwas näher zusammenbringen

Für ihre Tätigkeit benötigte die Organisation 2020 eine neue Website mit sehr viel Kraft, schließlich wurde das statische Webangebot den Ansprüchen einer international tätigen Stiftung, die in einer vernetzten und interaktiven Welt Gespräche initiiert, Tagungen organisiert und humanitäre Projekte unterstützt, schlicht nicht mehr gerecht. Innerhalb kürzester Zeit sollten wir deshalb eine neue Website aufsetzen, mit der bereits die Pressekonferenz zur 1st Assembly on Women, Faith &#038; Diplomacy unterstützt werden konnte. Doch war das überhaupt möglich?

Die Idee hinter der Website

Religions for Peace ist eine von den Vereinten Nationen offiziell anerkannte NGO. Ihr Ziel ist es, das friedliche Zusammenleben von Menschen unterschiedlicher Religionen auf der ganzen Welt zu fördern. Sie organisiert internationale Tagungen, bei denen Religionsvertreter aus der ganzen Welt ins Gespräch kommen. Mit der Marke Ring for Peace soll die Kommunikation gestärkt werden.

ring_for_peace-grau

Ring for Peace Logo

Das Team von Religions for Peace hatte von Beginn an eine klare Vorstellung, wie ihre neue Website aussehen sollte und was sie leisten musste. So erhielten wir eine erste Grundstruktur und ein Basislayout, welches wir mit unseren UI-/UX-Designern sukzessive weiter ausarbeiteten. Die Struktur war dabei äußerst raffiniert. Sie musste in der Lage sein, eine differenzierte Kategoriensystematik abzubilden und verschiedenste Rich-and-Deep-Content-Inhalte wiederzugeben.
Der User musste dabei so schnell wie möglich seine gewünschten Daten erhalten, die wiederum in einem intuitiven Layout integriert waren. Hinzu kam eine 3D-Animation, mit der die Stiftung ihre Besucher begrüßen wollte. In mehreren Zoom-Meetings überlegten wir zunächst gemeinsam, wie wir das Webdesign zusätzlich optimieren konnten und machten uns dann an die Arbeit.

Webplanung und Webkonzeption

screens-konzept-1

Die Startseite beginnt nun in der Hero Area mit einer 3D-Animation und dem Claim der Stiftung. Zusätzlich bauten wir einen Slider für die wichtigsten Stiftungsthemen und gaben diesen ein eigenes Farbschema, um die späteren Artikel und Content-Arten präzise zuordnen zu können. Hinzu kamen noch ein Magazin-, Presse- und Medienbereich plus eine Selbstbeschreibung und ein Suchmodul.
Anstatt einer klassischen Paginierung, auf der User gezwungen zwischen den Seiten wechseln, entschlossen wir uns, eine dynamische Nachladefunktionalität zu implementieren. Diese garantiert eine gute Usability, indem sie schnell und sicher reagiert, weil sie eben immer nur die benötigten Inhalte nachlädt und nicht die ganze Seite. Das bedeutet auch eine überzeugende Webperformance, und zwar nicht nur mit modernen Browsern, sondern auch mit älteren, was weltweit einen niedrigschwelligen Zugang erleichtert.

Vorgaben

professionelles_webdesign-ring_for_peace_v1

professionelles_webdesign-Ring_For_Peace_v1

Das Team von Religions for Peace hatte von Beginn an eine klare Vorstellung, wie ihre neue Website aussehen sollte und was sie leisten musste. So erhielten wir eine erste Grundstruktur und ein Basislayout, welches wir mit unseren UI-/UX-Designern sukzessive weiter ausarbeiteten. Die Struktur war dabei äußerst raffiniert. Sie musste in der Lage sein, eine differenzierte Kategoriensystematik abzubilden und verschiedenste Rich-and-Deep-Content-Inhalte wiederzugeben. 
Der User musste dabei so schnell wie möglich seine gewünschten Daten erhalten, die wiederum in einem intuitiven Layout integriert waren. Hinzu kam eine 3D-Animation, mit der die Stiftung ihre Besucher begrüßen wollte. In mehreren Zoom-Meetings überlegten wir zunächst gemeinsam, wie wir das Webdesign zusätzlich optimieren konnten und machten uns dann an die Arbeit.

Webplanung und Webkonzeption  

Für das <a href="https://www.aleksundshantu.com/digitalagentur/professionelles-webdesign/">professionelles Webdesign</a> nutzten wir WordPress und erweiterten es nicht nur bis an seine Grenzen, was wir gerne tun, sondern bohrten es für das umfangreiche Projekt regelrecht auf. Die klassischen WordPress-Funktionalitäten bauten unsere Developer um und schufen so eine ganz eigene Backend-Systematik, die mit der klassischen WordPress-Logik eigentlich nichts oder nur sehr wenig zu tun hat.
Das Frontend erstellten wir mit dem CSS-Framework (the beloved) Bulma. Schnell, clever, wartungsarm können Entwickler damit responsive bzw. fluide Inhalte deviceübergreifend optimal darstellen. Zusätzlich verbauten wir zahlreiche auf JavaScript basierende dynamische Content-Elemente. Dabei verzichteten wir auf das mittlerweile veraltete jQuery und verwendeten stattdessen Vanilla-JavaScript.
Auf ACF setzten unsere Webentwickler fürs Backend, um höchstmögliche Freiheiten beim Content-Management zu gewährleisten, und für die Mehrsprachigkeit auf WPML, das ultimative Standard-Plug-in.

WordPress nutzen, erweitern und selbst definieren

wordpress-nutzen-grafik-1

Neben den Start-, Projekt- und Themenseiten fügten wir noch eine Magazinfunktion hinzu, die einen eigenen Editorialbereich mit hochklassigen Interviews beherbergen wird. Um hier visuell zu überzeugen, setzten wir ein Zitat-Element ein.
Obwohl wir unter Hochdruck am Projekt arbeiteten, war der Zeitdruck immens, so dass wir uns hinsichtlich Prozessgestaltung etwas überlegen mussten, um die Deadline einhalten zu können. Deshalb übergaben wir bereits während der Programmierung einzelne Content-Bereiche den Content-Managern von Religions for Peace, damit diese parallel die umfangreichen Inhalte einfügen konnten. Ihr konstruktives Feedback in Form von Bugfix-Tickets nutzten wir als eine Form des Testings und behoben reziprok die Fehler. Durch diese Zeitersparnis konnten wir die Testphase massiv verkürzen und den Termin nicht nur einhalten, sondern sogar noch eine weitere Aufgabe ausführen.

Onlinemagazin-Funktionalität

projekt-ringforpeace-start-magazin

Für die internationale Konferenz 1st Assembly on Women, Faith&nbsp;&amp;&nbsp;Diplomacy, die eigentlich als hybride Konferenz geplant war (vor Ort und virtuell), bekamen wir&nbsp;– pandemiebedingt&nbsp;– den Auftrag, eine eigenständige <a href="https://www.aleksundshantu.com/digitalagentur/eventfilm/">Eventpage</a> zu entwickeln. Diese Seite war ursprünglich dafür gedacht, das Event zu streamen, die unterschiedlichen Speaker darzustellen sowie die einzelnen Veranstaltungen in einem Kalender abzubilden. Nun musste das Event auf ‚virtual only‘ umgestellt werden. Das hieß für uns, den Fokus auf die Eventsite zu intensivieren. 
Weitere Funktionalitäten mussten kurzfristig angedacht, umgesetzt, aber auch integriert und abgebildet werden. Doch welche Technik war passend für ein großes, internationales, weltumspannendes Event wie dieses? Nach kurzem Abwägen entschlossen wir uns, einen One-Pager als Landingpage auf der Website zu implementieren, auf der ein Event-Livestreaming der Veranstaltung gezeigt werden soll. Für die völlig unabhängige Landingpage orientierten wir uns am Layout der Stiftungssite und versahen es in der Hero Area mit einem Störer.

Microsite für ein globales <a href="https://www.aleksundshantu.com/digitalagentur/eventfilm/">Livestreaming-Event</a>

aunds-mobile-doublescreen-highres

AUNDS-mobile-doublescreen-highres

Für die Welt dort draußen gab es ein Streaming-Fenster über Vimeo, das barrierefrei erreichbar war. Es wurde auf mehreren Social-Media-Plattformen geteilt und war für jedermann zugänglich. Zudem gab es spezielle Sonderveranstaltungen und Workshops, die wegen ihrer Interaktivität ausschließlich über Zoom-Räume besucht werden konnten. Natürlich war es für jeden Interessierten vorher möglich, sich anzumelden. Ach, übrigens: Die Einladesystematik und der Log-in kamen von uns. Wir ergänzten nun noch:
<ul>
<li>Social Wall – alle sozialen Medien werden auf einer Seite angezeigt und gebündelt,</li>
<li>Greeting Platform – alle Teilnehmer können Grußbotschaften schicken,</li>
<li>Chat – zusätzlich installierten wir einen Chat, was wir über Slack (Chatila) lösten,</li>
<li>Medientraining.</li>
</ul>
Darüber hinaus integrierten wir in die Navigation als Widget eine Echtzeituhr, die in den Ländern die jeweilige lokale Zeit anzeigt, und einen Countdown.

Social Wall, Greeting Platform und Chat

ring_for_peace-desktop-eventpage

as-relaunch-ringofpeace_quickndirty-test-1

A&S relaunch ringofpeace_quickndirty test (1)

Auch die Navigation wurde aufgrund der neuen Anforderungen komplett umgebaut. Wir fügten eine <a href="https://www.aleksundshantu.com/insight/scroll-animationen/">Scroll-Animation</a> hinzu, bei der die Navigation aufklappt und zu bestimmten Trigger-Punkten führt.
Letztendlich fügten wir der Landingpage ein Event-Plug-in hinzu, das zur Registrierung und Anmeldung genutzt werden konnte und last but not least für alle Teilnehmer die Möglichkeit bereithält, eine Begrüßungsnachricht zu verschicken. Die Eventteilnehmer erhielten per Mail einen Auto-Log-in, einen temporären Log-in, um an den Sonderveranstaltungen und Workshops teilnehmen und interaktiv kommunizieren zu können.

Scroll-Animation

Bild zeigt das Tablet mit einer Unterseite der Eventpage.

aleksundshantu-projekt-ringforpeace-navigation-2

aleksundshantu-projekt-ringforpeace-navigation

Der Eventfilm

Wir erstellten in einer rekordverdächtigen Höchstgeschwindigkeit die Stiftungs- und Eventsite und nutzten dabei unseren bewährten Workaround. Das Feedback der User und natürlich auch das der Stiftungsverantwortlichen war sehr gut. Als wir livegingen, waren alle froh, dass wir gemeinsam diese Herausforderung, einschl. Zusatzaufgabe mitten in der Entwicklung bestanden hatten. 
Doch das war ja erst der Beginn! Eine Website muss sich schließlich weiterentwickeln, muss Luft und Mut zum Wachsen haben. Es gilt, neue Features zu implementieren und eine fortwährende Optimierung aller Elemente zu garantieren und auch <a href="https://www.aleksundshantu.com/digitalagentur/suchmaschinenoptimierung/">SEO-seitig</a> muss alles im Blick bleiben. Was nutzt schließlich die beste Seite, wenn sie nicht gefunden wird? All diese Arbeiten werden im Rahmen eines Betreuungsauftrags umgesetzt.

Schnelle Umsetzung auf hohem Niveau

Ruf uns an +49 30 40045775 oder schreib uns eine E-Mail.

Janine Kulbrok

Wir machen deine Website barrierefrei!

Eventfilm

Die Marke Ring for Peace steht für den Weltfrieden. Für die Stiftung Friedensdialog haben wir ein modernes Webdesign entwickelt.

Die Welt etwas näher zusammenbringen (Ring for Peace)

Die Welt näher zusammen bringen: Webdesign für den Frieden

Unsere Agentur besitzt einige gute Erfahrungen mit E-Health-Kunden. Wenn wir nur an <a href="https://www.aleksundshantu.com/project/professionelles-webdesign-reactive-robotics/">Reactive Robotics</a> denken, für die wir die modulare Website-Entwicklung</a> umgesetzt haben. Vielleicht hat aus diesem Grund der Anbieter <a href="http://www.ehealth-tec.de/erpath" rel="noopener" target="_blank">eHealth-Tec</a> unser <a href="https://www.aleksundshantu.com/digitalagentur/animationsstudio/">Animationsstudio</a> beauftragt, ein Erklärvideo für seinen Messestand zu produzieren? Der <a href="https://www.aleksundshantu.com/digitalagentur/erklaervideos/">Explainer</a> sollte Schritt für Schritt den Ablauf und die Wirkung des neuen Informationssystems für die Notaufnahme abbilden.

ehealthtec

ehealth_erpath_fdoc

ehealth-path-portfolio-portrait

eHealth Path

Unser Animationsstudio goes ERPath

erklaervideo_animationsstudio_grafik_vorschaubild-2

erklaervideo_animationsstudio_grafik_vorschaubild

Ich denke, jeder hat schon mal eine Notaufnahme von innen gesehen. Manche gehen rein und raus, bei anderen ist es eben ein ganz klein wenig anders. Wie bei meinem entfernten Bekannten, der in Berlin war und wegen einer Infektion in die Notaufnahme kam. Dort lag er mehrere Stunden im Bett, hörte der Stimme eines alten Mannes zu, der um Hilfe rief, während ein Student ihn bat, ihn umzudrehen, weil der Pfleger nicht greifbar war. Vielleicht lag unser Bundesgesundheitsminister zur gleichen Zeit wie mein Bekannter in der Notaufnahme. Jedenfalls hat er zu Beginn dieses Jahres die Notfallversorgung gründlich reformiert.

Das Animationsstudio in der Notaufnahme

Wer sich nach einer Krankheit nicht bewegen kann, ist auf Hilfe angewiesen. Genau dann ist eHealth-Tec der digitale Partner für das Gesundheitswesen von morgen. Dank seiner modernen Software-Lösungen digitalisiert das Unternehmen Versorgungsprozesse im Gesundheitswesen. Die Lösungen bewähren sich heute in Praxen, Kliniken und Apotheken.

ehealthtec-2

Es gibt Aufträge, die kommen ganz natürlich zu einem, und dann gibt es welche, die schon eher ungewöhnlich sind. In diesem Fall begann es damit, dass <a href="https://ceeceecreative.com/" rel="noopener" target="_blank">Cee Cee Creative</a> unser <a href="https://www.aleksundshantu.com/digitalagentur/animationsstudio/">Animationsstudio</a> gefragt hat, ob sie uns nicht einen Auftrag für ein <a href="https://www.aleksundshantu.com/digitalagentur/erklaervideos/">Erklärvideo</a> „schenken“ sollen? – Äh, ja! Warum nicht. Nur um dann gleich mal ganz kräftig zu überlegen. Aber da war kein Trick and Treat zu erkennen. Die Agentur war wirklich so nett – wie sie vor dem Kostenvoranschlag behauptet hatten. Und wir sind so dermaßen gut miteinander ausgekommen, dass wir nun kurz vor dem Double Drop in die Tube sind. Was so viel heißen will wie, dass wir sehr bald wieder gemeinsam arbeiten werden.

Wir werden zusammen leuchten

Um in Rekordzeit ein gutes <a href="https://www.aleksundshantu.com/digitalagentur/erklaervideos/">Erklärvideo</a> zu produzieren, bedarf es einiger ausgesuchter Ressourcen und spezieller Fähigkeiten, die nicht jedes <a href="https://www.aleksundshantu.com/digitalagentur/animationsstudio/">Animationsstudio</a> bereithält. Bei diesem zukunftsweisenden Auftrag kam noch der Zeitdruck hinzu. Wir hatten ganze vier Tage bis zur Messe …

Unser Animationsstudio blickt durch

ehealth-tec_docnpatient

Um das <a href="https://www.aleksundshantu.com/digitalagentur/erklaervideos/">Erklärvideo</a> knapp, verständlich und auch interessant zu halten, haben sich unsere Animatoren in Absprache mit dem Kunden für eine übersichtliche <a href="https://www.aleksundshantu.com/insight/animatic-storyboard-animationsstudio/">Storyline</a> eine Art Mininarrative entschieden. Zuerst beschreibt die Szene den Istzustand in der Notaufnahme. Also Zettel überall, lange Wartezeiten etc. Dann, mit der Einführung der neuen Software, ändert sich der audiovisuelle Sound, alle sind wacher und mit einem Kameraschwenk beschreiben wir nun den deutlich verbesserten Zustand.

Storytelling und Mininarrative

Der kreative Animationsprozess begann für uns damit, dass unsere Illustratoren die Charaktere in Illustrator als Lineart zeichneten, wobei sie sich an die CI-Vorlagen unseres Kunden hielten. Das heißt, unsere Formsprache lehnte sich an deren Icons an, und auch was die spätere Farbgebung betraf, arbeitete unser <a href="https://www.aleksundshantu.com/digitalagentur/animationsstudio/">Animationsstudio</a> mit den gestellten Farben. In After Effects animierten die Motion Designer die Charaktere, wobei sie den Hintergrund zunächst eher dunkler und dann später die Farbigkeit freundlich und heller gestalteten. Der raffinierte Kniff? Durch leicht aufsteigende Bubbels erzeugten sie jene charmante Nonchalance, ohne die es nicht geht. Zudem produzierten sie im <a href="https://www.aleksundshantu.com/digitalagentur/erklaervideos/">Erklärvideo</a> die App als ein schematisches Interface, das sehr leicht zu verstehen war.

Leichtigkeit ist schwerer, als du denkst

Erklärvideo für ERPath. ✓✓✓ Unser Animationsstudio hat ein sehr starkes Erklärvideo für den Anbieter eHealth-Tec produziert.

Unser Animationsstudio goes ERPath mit einem starken Erklärvideo

Das Fraunhofer-Institut ist Experte für anwendungsorientierte Forschung in Deutschland. Das hauseigene Siegel gilt als Qualitätsversprechen, denn in dem Institut versammelt sich ein besonders hoch qualifizierter Kreis an Tech-Experten&nbsp;– die Crème de la Crème. Doch wer untersucht hier eigentlich was und wie kann dein Unternehmen davon profitieren?

fraunhofer_static_code_analyse_preview

fraunhofer

fraunhofer_staticcodeanalyzer

fraunhofer_portfolio_portrait

Fraunhofer

Wenn die Experten dreimal klingeln

Für eine Kampagne benötigt das Fraunhofer-Institut von unserem <a href="https://www.aleksundshantu.com/digitalagentur/animationsstudio/">Animationsstudio</a> drei animierte <a href="https://www.aleksundshantu.com/insight/erklaervideos-die-klueger-machen/">Erklärvideos</a> zu den Themen Code- und App-Entwicklungssicherheit. Die Explainer sollten bspw. auf der Website des Fraunhofer-Instituts für Verständnis und Transparenz sorgen und auf ein Problem der digitalen Entwicklung hinweisen: die IT-Sicherheit.

Wir benötigen drei animierte Erklärvideos

Die <a href="https://www.fraunhofer.de/" target="_blank" rel="noopener">Fraunhofer-Gesellschaft</a> beschäftigt sich mit der Förderung der angewandten Forschung. Wissenschaftler untersuchen bspw. Kunststoffe, um sie vielseitiger zu machen, und tragen dazu bei, die Energiewende in Deutschland voranzutreiben. Finanziert wird die Fraunhofer-Gesellschaft von Bund und Ländern.

Das Fraunhofer-Siegel nimmt in dem animierten Erklärvideo eine herausragende Rolle ein. Durch das leicht verständliche <a href="https://www.aleksundshantu.com/insight/wie-du-mit-diesem-storytelling-beispiel-ein-exzellentes-animationsvideo-konzipierst-at/">Storytelling</a> werden die Mechanismen der Produkte „Static-Code-Analyse“, „AppSecure Developer“ und „AppSecure Product Owner“ erklärt und für den Einsatz der vom Fraunhofer-Institut bereitgestellten Techniken beworben. Aus diesem Blickwinkel begann das <a href="https://www.aleksundshantu.com/insight/motion-design-agentur-berlin/">Motion Design</a>.

Auf das Siegel kommt es an

fraunhofer_productowner

Zunächst entwickelte uns unsere <a href="https://www.aleksundshantu.com/insight/illustratorinnen-striche-farben-formen-und-geschichten-die-weit-leuchten/">Illustratorin</a> anhand der Sprechertexte eine ganze Anzahl unterschiedlichster <a href="https://www.aleksundshantu.com/digitalagentur/illustrationen/">Illustrationen</a> für die isometrischen 2D-Animationen. Bei diesen 2,5D-Animationen können die einzelnen Assets wie Maschinen und Abläufe ganz einfach und säuberlich auseinandergeschoben werden, um das Innere deutlich sichtbar zu machen. Nun wurden die Motive und Räume durch das Motion Design animiert und dabei flüssig und kreativ in Bewegung gesetzt.

Wie wir rollen

fraunhofer_dummies

<a href="https://www.aleksundshantu.com/digitalagentur/erklaervideos/">Animierte Erklärvideos</a> sind nicht einfach zu entwickeln. Je nach Produkt und Dienstleistung variiert der Animationsstil, das Tempo, der Tone of Voice, aber auch die Tiefe der Erklärung. Beim Fraunhofer-Institut mussten wir bspw. sehr präzise in die technischen Details gehen. Ein Fest für unseren Motion Designer: Hier gilt es, unsere langjährige Expertise abzurufen, um die unterschiedlichen Stile anbieten zu können und dem Kunden abschließend ein Lächeln ins Gesicht zu zaubern.

Die Präzision der Technik

Fraunhofer IEM: statische Codeanalyse und AppSecure für mehr Sicherheit in IT-Produkten. Erklärfilme von ALEKS & SHANTU zeigen, wie es geht.

Fraunhofer-Institut – Erklärvideos

Unsere isometrischen Erklärvideos fürs Fraunhofer-Institut

Für das Büro des EU-Abgeordneten von Bündnis 90/Die Grünen <a href="https://rasmus-andresen.eu/" rel="noopener" target="_blank">Rasmus Andresen</a> hatten wir eine frische und ‚customized‘ <a href="https://www.aleksundshantu.com/digitalagentur/politiker-website-digitale-kommunikation/">Politiker-Website</a> umgesetzt, mit dem Schwerpunkt auf kommunikative und darstellende Möglichkeiten, um den Politiker und sein Team im kommenden Wahlkampf zu unterstützen. Rasmus Andresen plante darüber hinaus, eine neue Reihe von <a href="https://www.aleksundshantu.com/digitalagentur/erklaervideos/">Aquarell-Erklärvideos</a> auf der Site einzubinden, um damit seine politischen Überzeugungen und Ziele allgemein verständlich zu präsentieren.

beitragsbild-rasmus-andresen-erklarvideo

rasmus-andresen-logo

erkla%cc%88rfilm-politik-eu-parlament-rasmus-andersen2-aspect-ratio-1154-900

Erklärfilm Politik EU-Parlament Rasmus Andersen

erkla%cc%88rfilm-politik-eu-parlament-rasmus-andersen2

Erklärfilm-Politik-EU-Parlament-Rasmus-Andersen2-aspect-ratio-1154-900

beitragsbild-rasmus-andresen-erklarvideo-aspect-ratio-7-10

Das animierte politische Erklärvideo für Website und Social Media

Rasmus Andresen begann seine politische Karriere bereits als Jugendlicher in seinem Landkreis. Seitdem hat er vieles umgesetzt und dafür mit seinen politischen Gegnern gestritten. Eine <a href="https://www.aleksundshantu.com/digitalagentur/politiker-website-digitale-kommunikation/">politische Website</a> nutzt er längst, denn er ist ein echter Digital Native und weiß, dass besonders Videos im Web vielfach angeklickt werden und Botschaften wirkungsvoll vermitteln. Das können auch politische Erklärvideos sein, die etwa die programmatische Kommunikation genau dort unterstützen, wo Appelle und umfangreiche Analysen versagen. Wenn es um europäische Belange geht, wirken Bilder manchmal besser und emotionaler als Tausende Worte. Speziell in Europa, wo die Bewohner unterschiedlichste Sprachen und Dialekte sprechen, macht ein <a href="https://www.aleksundshantu.com/digitalagentur/erklaervideos/">Erklärvideo</a> besonders deutlich, welche politische Meinung genau vertreten wird.

Das politische Erklärvideo für Europa

Europäische Politik ist ein demokratischer Prozess. Rasmus Andresen ist ein Grünen-Politiker und seit 2019 Mitglied des Europäischen Parlaments. Dort engagiert er sich für eine ökologische und klimagerechte EU, die Minderheiten schützt und eine unabhängige europäische Digitalpolitik praktiziert.

Durchschnittliche Explainer gibt es im Web an jeder Ecke für unter 80 Euro zu kaufen, kein Problem. Meist sind es recht lieblose Werke. Sie wirken austauschbar, schnell produziert und beliebig. Einzigartige <a href="https://www.aleksundshantu.com/digitalagentur/animationsstudio/">Erklärvideos</a> wirken besser, weil viele kreative Menschen intensiv darüber nachdenken, wie man sie besser machen kann und lange daran arbeiten – so wie wir bei ALEKS &#038; SHANTU. Für sein erstes politisches Erklärvideo hat sich das Büro Rasmus genau dieses ganz bestimmte Stückchen Extra-Know-how und kreative Detailverliebtheit gewünscht. – Wir haben alles dafür getan, dass sie das auch bekommen.

Mach es mit Liebe und Hingabe!

aleksundshantu-rasmusevideo-koechin

Zunächst präsentierten unsere Motion Designer dem Kunden unterschiedliche Stile wie etwa die filigran wirkende Lineart, das liebevolle DIY-Low-Poly und etwas Fotorealistisches. Doch das Team Andresen hatte zu jenem Zeitpunkt bereits das Erklärvideo der amerikanischen Demokratin Alexandria Ocasio-Cortez entdeckt.
Dieses Video nutzt den Aquarell-Stil, der lange nachhallt. Es ist emotional einzigartig, aber auch zutiefst überzeugend, da es nicht an der Oberfläche bleibt und stumpf erklärt, sondern seine Zuschauer kreativ und emotional mitreißen will. Wichtig war unserem Kunden, eine comicähnliche Weiterentwicklung durch Aquarell-Animation zu erzielen. Wir waren uns alle einig, dass sich dieser Stil perfekt für die politische Kommunikation eignet.

Unsere gemeinsame Stilfindung

Erklären, dass es alle verstehen

Ein Aquarell-Animationserklärvideo ist ein Unikat, weil es nur für diesen einen Zweck erstellt wird. Es gibt für die Aquarell-Animation auch keine Stock-Bibliothek, aus der sich ein Motion Designer oder Illustrator fertige Figuren zieht, wie das nicht selten bei einer Whiteboard-Animation funktioniert. Nein, diese Technik weist je nach Illustrator formalästhetisch ganz unterschiedliche Ergebnisse auf. Wir mussten ein wenig suchen, bis wir in unserem Netzwerk einen passenden Illustrator gefunden hatten, doch als wir ihn dann hatten, ging es sehr schnell. – Nun, so schnell, wie es mit dieser kunstfertigen Technik eben geht.

Für jedes einzelne Bild benötigen wir zwischen 4 und 5 Stunden. Es wurde getuscht und zudem mit einigen Finelinern durch Figuren und Setting ergänzt. Übrigens: Die Aquarell-Animation ist eine sehr analoge Form der Animation. Ja, wenn wir ehrlich sind, ist es nicht mal eine richtige Animation. Die Bilder werden nicht einzeln animiert, sondern abgefilmt. Die Kamera läuft von oben, während der Illustrator das Bild aufträgt. Später laden wir das Material bspw. in ein Schnittsystem und spielen es mit einer hohen Geschwindigkeit aus. Die Nutzer erkennen nun, wie sich das Bild vor ihren Augen in Sekundenschnelle entfaltet. So ist jedes Bild eine einzige fantastische Szene, birgt aber auch die Gefahr, dass ein falsch gesetzter Pinselstrich alles verdirbt.

Wir können auch Party

High Life

Wir sind wer!

Wenn wir feiern

Inspiration in jedem Projekt: Entdecke Weiteres aus unserem Portfolio!