Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

MotionBasis08: Werkschau 98

Im MotionBasis08 Kurs von Prof. Dufke sollte für die Werkschau 2019 ein Trailer mit FUI-Elementen (Fictional User Interface) erstellt werden. Dieser Trailer sollte als Werbung in den Bussen und Straßenbahnen in Potsdam laufen, sowie auf den Social-Media Kanälen und der Werkschau-Webseite.

Fingerübungen

Die erste Übung bestand darin, ein vorhandenes Fictional User Interface zu analysieren und vorzustellen. Dafür bekamen wir eine bestimmte Kategorie (wie Holography, Large Screens, HUDs etc.) zugelost. 

Für das Thema HUDs wollte ich keinen brandneuen Film nehmen, sondern vielmehr zeigen was schon vor einem Jahrzehnt möglich war. Ich erinnerte mich an den Film District 9 und die kleinen aber feinen Sequenzen wo das sogenannte Alien-User-Interface von Aliens als auch von Menschen benutzt wurde. Ich wollte untersuchen, wie man es schafft ein Interface, welches offensichtlich nicht für einen Menschen geschaffen wurde, so zu gestalten, dass man als Zuschauer trotzdem den Überblick behält und weiß was abgeht.

Page 2.png
Page 2.pngPage 2.png
Page 1.pngPage 1.png
Page 3.pngPage 3.png

Ein kurzer Ausschnitt aus der Präsentation:

(Bild 1) Vergleich des Interfaces je nach Benutzer (l. Alien & r. Mensch)

(Bild 2) Detail Alien

(Bild 3) Mensch benutzt Alien-Kampfanzug

In der zweiten Übung sollten wir ein paar einfache UI-Elemente animieren und dann in ein vorhandenes Template einfügen. Da ich vor dem Kurs noch nie mit Adobe After Effects gearbeitet hatte, war natürlich aller Anfang schwer. Durch das Tutorium von Moritz Gruhl (Respekt & Applaus) bekam man allerdings sehr schnell einen guten Überblick und hilfreiche Tips. Wir erstellten immer kleine Projekte an denen wir neue Sachen ausprobierten und so lernte ich relativ schnell die nötigen Handgriffe um die zweite Übung (hier als .gif) zu meistern.

ezgif.com-video-to-gif.gifezgif.com-video-to-gif.gif

Aufgabe und Ideen

Nun fokussierten wir uns auf das Hauptprojekt, den Werkschau Trailer. Durch ein Briefing, welches die Informationen die angezeigt werden sollen sowie technische Infos wie Format, Länge und auch die grafischen Anforderungen (FH Potsdam Richtlinien) umfasste, erhielten wir einen guten Überblick über die Rahmenbedingungen und konnten uns nun auf die Ideenfindung konzentrieren. 

Anfang arbeiteten wir in Gruppen zusammen (Aaron, Aline und Zinan und ich) und hatten nach einer Woche zwei Ideen. Die erste Idee ist unten abgebildet und zeigt eine Person die von hinten gefilmt wird. Sie steht an einem digitalen Spiegel und sieht wie sich ein (Semikolon)-Virus auf den Spiegel hackt. Das Semikolon breitet sich auf dem Spiegel aus und langsam erscheinen die Informationen wie FH;P Logo, Datum und die Studiengänge.

Die zweite Idee beschäftigte sich auch mit dem Thema „Virus/Hacking“. Hier sieht man eine SmartWatch, die auch von diesem (Semikolon)-Virus befallen wird. Das Display glitcht herum und das Semikolon wird als holografisches Bild über der Uhr angezeigt. Der Virus breitet sich immer weiter aus und befällt Glasscheiben und Wände, die im Hintergrund zu sehen sind, mit Informationen über die Werkschau.

erferferfer.001.jpegerferferfer.001.jpeg

Da uns als Gruppe (Aline, Zinan und ich) bisher noch keine Idee 100% gefallen hat und wir diese mit unseren Fähigkeiten in After Effects in der recht kurzen Zeit so nicht umsetzen konnten, suchten jeder von uns selber weiter nach Ideen die nötigen Informationen (Semikolon, Werkschau 2019, Jahresausstellung Design, die Studiengänge, Datum, URL und FHP Logo) in einem 20 Sek. Trailer unterzubringen.

Prozess

Anstatt uns weiter Ideen auszudenken, die für uns nicht umsetzbar waren, haben wir das Blatt umgedreht und geschaut was wir aktuell in After Effects hinbekommen. Der Plan war, dass jeder alleine Lösungen sucht und wir gute Ideen zusammentragen und daraus dann ein Trailer entsteht der allen gefällt. Das ist hier mein erstes Versuch, indem ich mich mehr auf eine grafische Lösung konzentriert habe und kaum bis keine FUI-Elemente vorhanden sind.

adwfijoijwefwe.gifadwfijoijwefwe.gif

Wir als Gruppe haben uns dann entschieden uns aufzuteilen, da wir kein gutes Konzept für den Trailer gefunden haben, an dem jeder gleich viel arbeiten konnte. Und es in Sinne jedes einzelnen ist, so viel wie möglich aus dem Kurs mitzunehmen und das es jetzt am sinnvollsten ist, wenn jeder seine eigene Idee weiter ausbaut und seinen eigenen Trailer macht.

Nach diesem ersten Versuch habe ich weiter mit möglichen UI-Elementen experimentiert, aber daraus ist kein Gesamtkonzept für den ganzen Trailer entstanden. Ich habe bei Dribble & Co. nach visuellen Konzepten gesucht und bin auf das Window-Thema gestoßen. Mir fehlten bisher jegliche UI-Elemente und ich dachte damit eine Lösung gefunden zu haben.

Abschlusspräsentation_Marcus.001.jpeg
Abschlusspräsentation_Marcus.001.jpegAbschlusspräsentation_Marcus.001.jpeg
Bildschirmfoto 2019-07-15 um 21.20.12.pngBildschirmfoto 2019-07-15 um 21.20.12.png

Ich brachte die Anfangsidee „Hacking“ mit dem Thema „Window“ zusammen und erstellte in Illustrator meine Footage-Datei. 

Das Intro soll den Programmstart vom „Werkschau-Virus“ zeigen. Unzufrieden war ich noch mit vielem, u.a. der fortlaufende Programmcode, die langweilige Darstellung der Fenster. Zudem fiel die URL aus dem Fenster-Konzept und das Datum fehlte noch komplett.

Passwort: anfang

Ich verbesserte einige Sachen und Prof. Dufke gab mir in seinen angebotenen Konsultation auch noch hilfreiches Feedback und Tips für passende Plugins. Den Look der Fenster änderte ich auch nochmal komplett. Ich orientierte mich nun an einen Video von Dribble, welches sich mit dem Thema Glitching und Windows 98 beschäftigte. Dort fand ich auch das wichtige Glitch 7in1 Plugin.

Bildschirmfoto 2019-07-15 um 21.19.57.pngBildschirmfoto 2019-07-15 um 21.19.57.png

Nachdem der Trailer nun endlich stand, sollten wir noch am Sound arbeiten. Ich entschied mich gegen Musik, sondern verwendete ausschließlich die UI-Sounds von Windows 98 und ein paar Glitch-Effekte.

Trailer für die Werkschau

Abschlusspräsentation_Marcus.gifAbschlusspräsentation_Marcus.gif

In dieser alternativen Variante erhöhte ich die Frames von 25 auf 60, reduzierte die schwarzen Ränder und fügte die klassische Windows 98 Farbigkeit als Hintergrund ein.

Plugins: 

  • Glitch 7in1 Plugin von aesweets

  • CursorKit von Sebastian Moreno

Trailer Rahmenbedingungen:

1366 x 768 Pixel, max. 20 Sekunden

Infos:

  • Bildmarke: FH;P (klein)

  • Bildmarke: Semikolon (groß)

  • Wortmarke: Werkschau 2019 (groß)

  • Jahresausstellung Design (optional)

  • Termin 12.-13.07.2019

  • URL http://fhp-werkschau.de

  • Studiengänge : KD, ID, PD

Fazit

Die schwierigste Aufgabe an diesem Kurs war auf jeden Fall eine gute Balance zwischen einem grafisch interessanten Trailer und dem fictional-user-interface zu finden. Eine grafischer, einfacher aber plakativer Trailer funktioniert meiner Meinung nach besser als ein Trailer mit FUI Elementen, da der Zuschauer (in der Tram/Bus) die Verbindung zwischen diesen Elementen und der Jahresaustellung (der Werkschau der FH Potsdam) bestimmt nicht sofort versteht.

Aber genau das war ja die Herausforderung an diesem Kurs. Ab einem bestimmten Zeitpunkt wusste ich, dass mein Trailer keiner wird, der der breiten Masse in der Tram/Bus gezeigt werden kann, da er zu sehr in die FUI Richtung geht. Aber damit war ich vollkommen okay, ich habe in den paar Monaten sehr viel über After Effects und Motiondesign gelernt und freue mich auf weitere Projekte, wo ich mich noch weiter vertiefen kann.

Ich danke Moritz für das super Tutorium, was für den Einstieg echt super war und wo man im Gegensatz zum YouTube Tutorial immer einhaken kann wenn man etwas bestimmtes wissen möchte. Ich hoffe, dass in den nächsten Semestern (für AE-Anfänger wie mich) wieder Tutorien für After Effects angeboten werden. Auch danke ich Prof. Dufke für die hilfreichen Konsultationen, Tips für Plugins und die Hinweise auf Motion-Projekte von anderen Studenten. Gerade für Anfänger ist es noch schwierig zu wissen, was in After Effects überhaupt so alles möglich ist.

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Klaus Dufke

Zugehöriger Workspace

MotionBasis08: Fictional User Interface

Entstehungszeitraum

Sommersemester 2019

Keywords