Idee

Für die Idee eines Erklärvideos kamen mir (Marcus) verschiedene Themen wie schweizer Schriftgestalter z.B. Adrian Frutiger, Futura aber auch diese Variable Fonts Technologie in den Sinn, mit der ich im Typedesign Kurs von Lucas de Groot gearbeitet hatte. Ich war positiv überrascht, was für Möglichkeiten diese Technologie bietet und war technisch gesehen sehr interessiert. 

Monique machte auch gerade Erfahrungen mit dieser Technologie im Typedesign-Kurs von Lucas de Groot und so schlossen wir uns zusammen, arbeiteten an einer verständlichen und unterhaltsamen Erklärung dieser flexiblen Buchstaben.

Unser Fontexplainer über Variable Fonts sollte in einem informativen, neugierigeren und unterhaltsamen Ton von einem Erzähler, sowie den Interviewgästen Lucas de Groot und Jens Kutílek via Zoom erklärt werden. Dabei soll der Zuschauer einen Einblick in die Welt der Variable Fonts bekommen, wie sie funktionieren und für welche Einsatzzwecke sie aktuell und in Zukunft nützlich sein könnten. Die vorgesehene Videolänge lag zu Beginn bei 6-10 min, am Ende jedoch bei ca. 14 min. Unsere Zielgruppe sind Design Studenten, Design Studios/Werbefirmen und Typefoundries.

Link zum Miro-Board:

Für die inhaltliche und visuelle Rechere nutzten wir Miro. Ihr könnt gern auf unser Miro-Board vorbeischauen, was oben verlinkt ist. Allerdings haben wir auf diesem nur während des Kurses aktiv gearbeitet, da wir Miro auch für unsere Kurs-Präsentationen genutzt haben. Wir sind für die visuelle Ausarbeitung dann auf Adobe XD gewechselt.

Darstellungsmöglichkeiten

Wir haben uns dazu entschieden, Lucas und Jens im klassischen Zoomlayout darzustellen. Solange kein weiteres Fenster als visuelle Erklärung gezeigt werden muss, stehen die beiden im Mittelpunkt. Sobald jedoch ein neues Fenster aufgeht, wird das Zoomfenster kleiner, damit das Veranschuungsmaterial im Fokus ist.

Als Darstellungsmöglichkeit für das Verändern einer Font wählten wir dieses Konzept, welches z.B. in Illustrator zu finden ist. Rechts zeigt unsere Darstellung von Websites inkl. zugehörige Quelle.

Wir haben außerdem verschiedene Fehlermeldungen erstellt.

Hier ein paar Gegenüberstellungen von damaligen und finalen Entwürfen. (links: vorher - rechts: nachher)

Storyboard

Wir teilten unseren Explainer anfangs in verschiedene Unterthemen auf, die wir nach und nach immer mehr ausgefeilt haben:

Teaser → Vorstellung der Gäste → coole variable Fonts → Erstellung → Probleme mit Multiple Master → Ursprung variable Fonts → Was gab es früher nicht? → Effizienz (Interpolation) → Vorteile → Einsatzzwecke im Alltag → Lesbarkeit im Darkmode → Schwierigkeiten bei der Verwendung → Spielraum für schlechtes Design → Outro

(Ausschnitt vom Storyboard auf Adobe XD)

Prozess

Die Erstellung des Storyboards hat uns anfangs sehr geholfen, erstmal einen Überblick zu bekommen. Daraufhin konnten wir die Fragen für Lucas und Jens anpassen. Nachdem wir dann die Interviews geführt haben (Länge 40-60 min), kürzten wir die Videos auf 20-30 min, transkribierten den vollständigen Dialog und erstellten daraufhin das Skript. Als der Text dann nach mehrmaligen Überarbeiten stand, fingen wir damit an, ihn einzusprechen und als Grundbaustein bei After Effects zu nutzen. Nun hatten wir eine bessere Vorstellung vom Timing und konnten unser visuelles Storyboard anpassen. Dafür arbeiteten wir gemeinsam in einem Adobe XD Projekt.

Wir haben uns als Ziel gesetzt, zusätzlich zu dem deutschen Erklärvideo noch eine englische Variante zu erstellen, weswegen das Skript dann nochmal übersetzt wurde und von einer englischen Muttersprachlerin korrigiert wurde.

Explainer DE

Explainer EN (Untertitel)

Fazit

Am Anfang des Kurses hätten wir nicht damit gerechnet, wie viel Arbeit auf uns zu kommt. Das Organisieren der Interviews und der Besuch in der Bleisatzwerkstatt zogen sich dort noch etwas hin, weswegen wir erst Mitte Februar alle Materialien zusammen hatten. 

Wir hatten zwar bereits Erfahrungen aus dem MotionBasis Kurs im Grundstudium, dieses Projekt stellte uns aber vor neue Herausforderungen. Letztendlich können wir beide sagen, dass wir durch dieses große Motionprojekt technisch als auch thematisch sehr viel dazugelernt haben. Zu dem Lernprozess gehören unter anderem die Zusammenarbeit in verschiedenen Programmen, das voneinander Lernen und miteinander Absprechen und eine rechtzeitige Organisation bzw. ein gutes Zeitmanagement. 

Wir hoffen, dass nicht nur wir dazulernen durften, sondern euch unser Fontexplainer auch Wissen übermittelt. :)