In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
MotionBasis08: Werkschau Circle
Im MotionBasis08 Kurs von Prof. Dufke sollen wir ein Trailer erstellen, der FUI-Elemente enthält und als Werbe-Trailer für unsere Jahresausstellung in den Straßenbahnen abgespielt werden soll. Außerdem sollen wir durch den Kurs einen Einblick darin erhalten, wie man die Motion-Grafikarbeit analysieren soll und wie der Entwurfs-Workflow vom Motion Graphic aussieht.
Unsere erste Aufgabe ist, eine Sequenz aus Sci-Fi-Filmen suchen und diese zu analysieren. Die Analyse zu den Filmen sollen die folgenden Punkte miteinbeziehen:
Animation
Ein-und-Ausblenden
Farbigkeit
Typographie
Diese Analyse gilt als die Vorbereitung zu unserer finalen Arbeit, da wir am Ende auch ein FUI-Trailer entwerfen werden.
Diese Aufgabe ist nicht so einfach. Wir sollen dadurch erfahren, wie der Workflow vom Entwurf der FUI aussieht. Außerdem sollen wir auch dadurch lernen das komplizierte Motion-Design von verschiedenen Aspekten zu beobachten und zu analysieren, bzw. uns mit den Bestandteilen von Motion-Design auseinanderzusetzen.
Um die Aufgabe zu lösen habe ich das Buch »Make it So« von Nathan gelesen, welches mir viel geholfen hat. Im Kapital 3 »Visual Interfaces« hat Nathan FUI aus vielen Movies analysiert und verglichen. FUI haben in Stil-, Animations-, und Typografie-Auswahl viele Gemeinsamkeiten. Durch die Analyse hat Nathan ein paar Regel für FUI-Entwurf zusammengefasst, bzw., an welchen Stil man sich halten soll, wenn man selbst ein FUI entwickeln will. Die Regeln finde ich sehr praktisch. Meine Analyse in der Präsentation beruht auf diesem Buch.
Meine Aufgabe sind DISPLAYS. Ich habe eine Sequenz vom Film »Winter Soldier« ausgewählt und analysiert. Die FUI im Film finde ich von Farblichkeit und Layout sehr schön und das Display für FUI in diesem Film ist auf einem Glasbildschirm, welches ich modern und großzügig finde. Außerdem ist die Interaktion zwischen den Schachspielern und FUI auch interessant. Der Bildschirm wird durch die Augen aktiviert, aber kann man auch mit Fingern den Bildschirm bedienen.
Konzept
Mir gefällt der Stil der schwarzen Poster aus den 80ern. Daher bin ich auf die Idee gekommen, dynamische Typographie auf weißem Hintergrund zu animieren und dann die drei Studiengänge mit jeweiligem Namen und eine Illustration zu präsentieren.
Die Skizzen
Bei der Präsentation des Konzepts habe ich nicht viel Feedback bekommen. Nur Prof. Dufke meinte, dass der Stil der Illustration nicht zum Stil der restlichen Arbeit passt, was ich im Nachhinein auch so sehe. Außerdem fehlen die FUI-Elemente.
Das Moodboard
©Zinan Zhang
Umsetzung
©Zinan Zhang
Feedback
Diese Idee wird bei der Konsultation von Prof. Dufke stark kritisiert. Vor allem aus zwei Gründen. Man kann die Studiengänge nicht einfach durch ein Poster präsentieren. Es ist verwirrend und der Stil der Poster entspricht auch nicht dem Styling-Guide der Werkschau. Außerdem ist die Animation der Typografie sehr unruhig. Besonders die schnelle Drehung der Quadratelemente, wirkt sehr unharmonisch und stört. Darüber hinaus ist noch das Problem, das es immer gibt: Keine FUI-Elemente im Trailer, die eigentlich das Hauptthema des Semesters sind.
Ich habe deswegen meinen ersten Entwurf gänzlich verworfen und versucht einen neuen Weg zu finden. Ich finde es in Ordnung einen Neuanfang wagt. Manchmal weiß man am Anfang auch nicht, wie man die Aufgabe am Ende löst, aber durch Experimentieren und ausprobieren kann man zumindest falsche Ansätze aussortieren.
Konzept
Die FUI sind normalerweise auf einem Display, damit es holographisch aussieht und manchen sind auf Glas-Display, damit der Regisseur auch durch das Display die Schauspieler filmen kann, während etwas auf dem Display passiert. Außerdem vermitteln es auch einen futuristischen Charakter. So bin ich auf die Idee gekommen, animierte Typographie auf einem Glas-Display zu machen.
Umsetzung
Ich habe ein Glas-Display gezeichnet und das Realbild von Haus D als Hintergrund benutzt. Die Lesbarkeit der Typografie wird durch das Hintergrundbild stark beschädigt. Außerdem sieht es immer noch nicht wie FUI aus. Die Typografie wirkt viel zu groß und es gibt nicht genug Inhalt (Fenster, Texte, Geometrische Formen, Animation usw.) auf dem Bildschirm. Die meisten FUI haben oft mehrere Fenster gleichzeitig auf einem Screen geöffnet, die mit verschiedenen Animationen und Geschwindigkeiten sich gleichzeitig bewegen. Auf einem FUI Screen passiert innerhalb einer Sekunde schon sehr. So einen Busy-Bildschirm kann ich auch nicht nachmachen, weil unser Trailer auf Bildschirmen in der Tram abgespielt wird. Wenn einmal zu viel passiert fällt es nur den Zuschauern schwieriger die wichtigen Informationen, wie z.B. Datum, Standort, URL und Begriffe, im Gedächtnis zu behalten. Aus diesem Grund habe ich auf den Entwurf der Animation verzichtet.
©Zinan Zhang
Konzept
Beim zweiten Versuch versuchte ich mich an den Stil von FUI zu halten. Ich habe einen Kreis aufgebaut und den auch animiert. Die Farben sind technisches Grün und Blau. Der Hintergrund ist Schwarz und mit einem Gitter und die Animation ist auch die, die in FUI häufig verwendet werden.
Dieser Entwurf hat vor allem als ein technischer Prototyp gedient, da ich mir zu der Zeit nicht sicher war, was technisch für mich möglich ist und ob ich meine Idee mit Adobe After Effects umsetzen kann. Bei dem Aufbau des Prototypen habe viel über 3D-Ebene, Kamera und Null-Objekt gelernt, was mir bei der Umsetzung der richtigen Trailers geholfen hat. Außerdem erfuhr ich durch das Entwickeln des Prototypen auch was für mich möglich und machbar ist. Dadurch ist meine dritter Entwurf auch viel einfacher und realistischer geworden.
Umsetzung
Der Prototyp sieht schon sehr nach Sci-Fi aus, aber jetzt habe ich die neue Herausforderung, mich dem Styling-Guide der Werkschau anzunähern. Nach dem Styling-Guide sind nur Schwarz und Weiß erlaubt und als Typographie können wir auch nur »FH Sun« verwenden. Kann der Trailer trotzdem in einem FUI-Stil sein, obwohl die übliche Farblichkeit für FUI Grün und Blau sind und die Typografie Eurostile ist? Gibt es eine Lösung dafür?
©Zinan Zhang
Konzept
Mein Grid-System dient auch als Hintergrund. Mit dem Grid System sieht die Komposition sehr sauber und gut geordnet aus. Außerdem vermittelt das Grid-System auch einen Sci-Fi-Charakter und um die Ablenkung durch visuelle Elemente zu reduzieren, habe ich vor allem nur Kreise und Quadrate verwendet. Um die Zuschauer nicht zu langweilen, habe ich alles in 3D-Layers gebaut und mit Kameraeinstellungen experimentiert, damit die grafischen Elemente von verschiedenen Perspektiven betrachtet werden können. Bei den wichtigsten Informationen habe ich die Kamera ein gezoomt und den Fokus verstellt, um die Zuschauer darauf aufmerksam zu machen.
Ergebnis
Meine finale Arbeit hat einen klaren und abstrakten Stil, welcher auch den Anforderungen der Werkschau entspricht. In manchen Szenen sind die Information immer noch zu viel und überfordern die Zuschauer, wie z.B. die Landkarte von der FH Potsdam.
©Zinan Zhang
Ich habe mir zuerst Sorgen gemacht, ob ich wirklich mit Adobe After Effects umgehen kann. Das Tutorium von Moritz und die Konsultation mit Prof. Dufke hat alles stark vereinfacht. Jetzt habe ich auch mehr Selbstbewusstsein im Umgang mit Adobe After Effect.
Am Anfang des Semester haben wir viele Filmanalysen gesehen, was uns beim späteren Entwurf viel inspiriert hat. Wir haben auch dadurch einen Einblick darin bekommen, wie der Workflow von Motion Graphics aussieht und aus welcher Perspektive man Motion Graphics analysieren und beobachten kann.
Ich finde es sehr wichtig für die Künstler, sich mit der Arbeit der anderen auseinandersetzen zu können und die verwendeten Elemente davon zu erkennen und entsprechende Anpassung bei eigenen Arbeiten zu machen.
Die Konzepte der Entwurfsphase finde ich auch interessant, da wir damals noch nicht die technische Umsetzung ausprobiert haben. Viele von uns hatten am Anfang sehr verrückte und unrealistische Ideen. Wir haben so viele verschiedene Storyboards entworfen und keiner ist am Ende bei dem ersten Entwurf geblieben. Ich finde die vielen Ideen, die wir am Anfang hatten, eigentlich sehr süß und kreativ, auch wenn sie nicht wirklich umsetzbar sind. Aber der Prozess, der eigene Vorstellungskraft freien Lauf zu lassen und mit anderen zu kommunizieren hat echt Spaß gemacht. Ich habe Funkenflüge der Kreativität von mir und anderen gesehen. Es ist für mich eine tolle Erfahrung.
Durch den Kurs kann ich auch eventuell sehen, wie viel Arbeit in einem guten FUI steckt. Es ist nicht einfach grafisch gut aussehende UI-Elemente zu entwerfen und passende Animationen, Typografien, und Musik dafür zu finden. Ich werde in der Zukunft noch viel dazu lernen, um bessere Motion-Graphic-Arbeit zu machen.
Ein Projekt von
Zinan Zhang
Fachgruppe
KommunikationsdesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
Prof. Klaus Dufke
Zugehöriger Workspace
MotionBasis08: Fictional User InterfaceEntstehungszeitraum
Sommersemester 2019