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

Basic Interface

»Basic Interface«
12FOId-XD Interaction Design
Prof. Boris Müller

Sommersemester 2019
Peter Schwarz

Im Kurs Basic Interface wurden uns die Grundlagen des Interface-Designs vermittelt. Der Kurs wurde in vier Themen gegliedert: Screen-Typografie, Datenvisualisierung, Graphical User Interfaces (GUI) und Semiotik.

Die Themen wurden durch Vorträge eingeleitet und durch anschließende Aufgaben, die entweder in Gruppen- oder Einzelarbeit bearbeitet wurden, vertieft. Die praktischen Arbeiten wurden von Feedbackrunden begleitet, die zu schnellen Fortschritten geführt haben.

Screen-Typografie: Digitales Buch

Unsere erste Aufgabe war es in Partnerarbeit ein Buch unserer Wahl in eine digitale Form umzugestalten. Dabei sollten die Bildschirmgrößen 1024 x 768px und 240 x 320px exemplarisch gestaltet werden.

Meine Teampartnerin Sabrina und ich wählten »James Turrell: A Retrospective« welches sich mit den Arbeiten des Lichtkünstlers Turrell beschäftigt. Diese werden in dem Buch vor allem durch großformatige Bilder gezeigt. 

Wir wählten dieses Buch aus, weil wir eine Digitalisierung dieses Werkes für sinnvoll erachteten. Da die Werke von Turrell vor allem Licht und Farben behandeln, kann die Farbdarstellung von Displays einem Printmedium durchaus überlegen sein.

Im ersten Umsetzungsversuch hielten wir uns relativ strikt an die Grundstruktur vom Ausgangswerk. Dabei waren die Bilder in unserer Darstellung anteilig etwa gleichauf mit den Texten.

Für die Fließtexte verwendeten wir zunächst die »Garamond Premiere Pro« und für die Headlines die »Walbaum«, wie im Ausgangswerk. Die »Garamond Premiere Pro« zeigte sich aufgrund der kurzen Mittellänge und den gestauchten Punzen als eher ungeeignete Schrift für Displayanwendungen. Die Walbaum hat einen eher klassischen Charakter und wurde unserem futuristischem Künstler auch nicht wirklich gerecht. Daraufhin wollten wir unseren Entwurf nach der ersten Feedbackrunde weitestgehend verwerfen und entschieden uns für die Grotesque Font »GT America«.

Außerdem ist uns nach der ersten Feedbackrunde einmal mehr bewusst geworden, dass es vor allem um die Bilder geht. Wir wollten den Fokus also hauptsächlich auf die Bilder legen und Texte ein- und ausblendbar machen. Über Wisch-Bewegungen navigiert man durchs Kapitel. Die Punkte geben Aufschluss darüber an welcher Stelle man sich befindet. Die Kapitelübersicht haben wir auch reduziert und die Bilder nur um die Kapizelzahlen ergänzt.

Unsere finalen Entwürfe waren dann die Folgenden:

1024 x 768px

240 x 320px

Datenvisualisierung: Klangbild

Die zweite Aufgabe haben wir einzeln bearbeitet. Dabei haben alle Gruppenteilnehmer einen Klang beigesteuert und diese wurden dann verlost.

Die Visualisierung der Klänge sollte hinreichend komplex sein und über eine einfache Amplitudendarstellung hinaus gehen. Da ich dieses Semester außerdem den Kurs »Programming with Processing« von Tank Thunderbird besucht habe und darüber die »Slit-Scan« Technologie entdeckt habe, hatte ich die Idee diese mit meiner Visualisierung zu kombinieren.

Inspiriert von »Amnon Owed« hatte ich die Idee meinen vermeintlich nieder kompelxen harten Klang organisch und detailliert darzustellen.

Amnon Owed – Eternalism & the Art of Slitscanning

Für einen Slit-Scan wird ein Ausschnitt von Videomaterial über eine definierte Pixelmatrix in ein neues Bild kopiert. Für dieses Ausgangsmaterial wollte ich meinen Klang in »Adobe After Effects« visualisieren und den Slit-Scan dann mit diesem Material füttern. Mithilfe der Expressionen von After Effects habe ich die Volumen-Amplituden sowie das Stereobild als Ausgangsdaten gewählt und ein recht differenzierte Ausprägung der einzelnen Geräusche erreicht. Dieses Bild habe ich dann kaleidoskopartig gespiegelt. Das Zwischenergebnis ist hier zu sehen:

pw: kaleidoskop

Aus diesem Video wollte ich meinen Slit-Scan erstellen. Der Slit-Scan-Code von Amnon Owed basierte allerdings auf alten Java-Frameworks -und Libraries und war schon seit Jahren nicht mehr kompatibel mit aktuelleren Processing-Versionen – Ich habe ihn einfach nicht zum laufen bekommen. Außerdem war dieser für meinen bisherigen Wissensstand viel zu komplex und ich konnte ihn auch nicht teilweise verwenden. Also, schrieb ich einen simplen Code der nur die Grundfunktion eines Slit-Scan erfüllte:

pw: slit

Mit dem Slit-Scan war ich weniger zufrieden als mit dem Zwischenergebnis – die Feedbackrunden haben mir hier die Augen geöffnet. Anstatt mich weiter in den Slit-Scan zu vertiefen und an dieser Technologie festzuhalten, entschied ich mich, mein Zwischenergebnis als finalen Entwurf zu präsentieren.

Graphical User Interfaces: Inspirationsapp

Die dritte Aufgabe war wieder eine Teamarbeit. Meine Teampartnerin Stefanie Lüthen und ich wollten eine Inspirationsapp gestalten, die ähnlich wie Pinterest erlaubt Moodboards zu erstellen.

Dabei sollten nicht nur Bilder als Inspiration dienen, sondern auch Videos und Musik. Beim Brainstormen und Layouten wurde uns immer klarer wie komplex so eine App ist, besonders wenn mehrere Medien einbezogen werden sollen. Weitere Schwierigkeiten hatten wir beim Erstellen des Content-Feeds – wo platzieren wir die Moodboards?

Nach dem ersten Feedback haben wir unseren Entwurf grundlegend überarbeitet. Unser Layout war zu überfrachtet mit verschiedenen Bedienelementen. Außerdem war unser erster Entwurf noch nicht UI-Guideline konform.

Die Anpassung an den UI-Guideline war ein entscheidender Schritt in Richtung eines stimmigeren Designs. Außerdem haben wir unsere Icons überarbeitet und von Platzhalter-Bildern abgesehen. Die Erstellung des Flowcharts war der wichtigste Schritt, um uns einmal mehr darüber klar zu werden was wir uns strukturell von unserer App wünschen.

Das Endergebnis ist nicht perfekt, dennoch konnten wir einen Fortschritt vom Erstentwurf bis zum Finalen Entwurf feststellen.

Entwurf

Flowchart

1000 Worte - Semiotik

Die letzte Aufgabe war einen hinreichend komplexen Sachverhalt ohne den Einsatz von Worten darzustellen. Als Thema wählte ich die Zubereitung eines Hawaii-Toast (ohne Erwärmung).

Ich fand das Thema interessant, weil es ein unfassbar niederkomplexes Gericht ist. Außerdem hat mich fasziniert, dass die Zutaten weites gehend aus geometrischen, industrialisierten Grundformen bestehen, welche verschiedenen Verpackungen die einzelnen Zutaten haben und welche verschiedenen Techniken beim Öffnen dieser benötigt werden. Diese Öffnungsmechanismen wollte ich in einer Komplexität darstellen, dass das ganze einen karikaturartigen Charakter bekommt.

Da ich unglücklicherweise wegen einer Erkrankung und einem Krankenhausaufenthalt, alle- bis auf die finale Feedbackrunde verpasst habe, ist das das Projekt bei dem ich an wenigsten Fortschritte machen konnte.

Trotzdem hatte ich Spaß an der Aufgabe. Ich illustriere nicht häufig und fand eine gute Gelegenheit um nochmal etwas wärmer mit »Adobe Illustrator« zu werden. Interessant fand ich auch in wie weit die Abstraktion des Objekts gehen kann, damit man den Kontext versteht.

Fazit

Der Kurs hat meine Erwartungen übertroffen. Die Vorträge waren stets interessant und lehrreich. Kombiniert mit den praktischen Aufgaben und dem professionellem Feedback war die Lernkurve sehr steil. Vor allem das Feedback war seitens der Gruppe und von Prof. Müller stets konstruktiv.

Die Struktur des Kurses hat mir auch sehr gut gefallen. Der Workload war über das ganze Semester realisierbar und durch die Abwechslung der verschiedenen Aufgaben, stets interessant.

Nach diesem Kurs habe ich eine weitaus klarere Vorstellung, welche weiteren Module ich mir anschauen möchte und worin die Grundlagen des Interface-Designs bestehen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Basics Interface 19|01

Entstehungszeitraum

Wintersemester 2019 / 2020

Noch keine Kommentare