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 Interfacedesign

Dieser Kurs vermittelte die Grundlagen des Interfacedesigns anhand der Themen Screentypografie, Klangbilder, Graphical User Interfaces und Semiotik. All diese Inhalte wurden anhand von Vorträgen aufbereitet und durch praktische Übungen mit professionellem Feedback vertieft.

Digitales Buch (Screentypografie)

Aufgabe

Die erste Aufgabe bestand darin in Partnerarbeit ein Buch unserer Wahl in eine digitale Form zu übertragen. Dabei sollten die beiden Bildschirmgrößen 1024 x 768 Pixel und 240 x 320 Pixel exemplarisch bespielt werden. Der Fokus lag auf einem stimmigen und übersichtlichen Einsatz von Schrift.

Umsetzung

Meine Teampartnerin Aleksandra Wingert und ich wählten die Autobiografie Becoming von Michelle Obama als Buchvorlage. Nach einer inhaltlichen Analyse, skizzierten wir zunächst die für uns wichtigsten Screens, welche wir anschließend in figma übersetzten. 

Ein Grundgedanke unserer Umsetzung war es eine Navigation der Inhalte sowohl klassisch durch Kapitel, als auch über behandelte Themen zu ermöglichen. Hierfür verwendeten wir Zitate und Bilder aus dem Buch. Da wir Seitenzahlen für das Medium als unpassend empfanden, entschieden wir uns die jeweils passenden Jahreszahlen als Orientierungshilfe im Text zu verwenden. 

Als Headlineschrift wählten wir die Gotham, welche als Wahlkampfschrift für Barack Obama diente. Die Fließtexte sind in der Utopia gesetzt.

Die Arbeit im Team war sehr bereichernd und half bei der Erkundung eines für uns beide weitestgehend unbekannten Themenfeldes. Die Aufgabe hat mir viel über Komposition am Screen vermittelt und war eine ideale Grundlage für die folgenden Aufgaben.

Text_Becoming_More.pngText_Becoming_More.png
Start_Topics_ Youth.pngStart_Topics_ Youth.png
Mobil_1.pngMobil_1.png
Mobil_3.pngMobil_3.png
digitales_Buch_Skizze.jpgdigitales_Buch_Skizze.jpg
Mobil_6.pngMobil_6.png
Mobil_8.pngMobil_8.png

Klangbild

Aufgabe

Ein zuvor von anderen KursteilnehmerInnen aufgenommenes Geräusch sollte visuell dargestellt werden.

Umsetzung

Als Ausgangspunkt diente mir hierbei eine Aufnahme, die höchstwahrscheinlich auf dem Jahrmarkt erstellt wurde. Ich begann mit einer Analyse von Dauer und Lautstärke der einzelnen Geräuschquellen in der Aufnahme, die ich in mehreren Skizzen festhielt. Um die Atmosphäre und Thematik des Klangbeispiels aufzugreifen, setzte ich mir als Ziel meine Visualisierung in Farbe und Form an ein Riesenrad bei Nacht anzulehnen. Dafür arbeitete ich mit einem Moodboard. 

Nach meinen analogen Entwürfen, setzte ich die Grafik mithilfe von Illustrator um. Ein kreisförmiges Raster mit zwei Unterteilungen pro Sekunde half mir bei der exakten, strukturierten Abbildung der einzelnen Geräusche. Der Fokus lag hierbei auf einem Gesamtbild, dass das Verhältnis von Lautstärke und Dauer der einzelnen Geräuschquellen adäquat wiederspiegelt und gleichzeitig den thematischen Kontext des Geräuschs wiedergibt. Dabei nutzte ich unterschiedlich stark kontrastierende Farben, die aus dem Moodboard abgeleitet wurden.

Die sehr freie, nicht nutzerorientierte Arbeitsweise bei dieser Aufgabe war für mich eine ungewohnte Herausforderung, die mir meine persönliche Bewertung meiner Arbeit abseits von formalästethischen Faktoren erschwerte. Am meisten habe ich hierbei durch die unterschiedlichen Herangehensweisen und den Prozess der anderen KursteilnehmerInnen gelernt.

1.jpg1.jpg
190513_Klangbild.png190513_Klangbild.png
3.png3.png

Inspirationsapp (Graphical User Interfaces)

Aufgabe

Aufbauend auf übliche UI-Standards, sollte in Partnerarbeit eine eigene Inspirationsapp entworfen werden. Neben der Erstellung beispielhafter Screens, sollte ein Programmablaufplan skizziert werden.

Umsetzung

Meine Teampartnerin Lena Zagora und ich entwarfen zunächst in Einzelarbeit mehrere Konzeptideen für mögliche Inspirationsapps. Bei unserem ersten Treffen entschieden wir uns dann für das Konzept Museum Island. Die UserInnen befinden sich hierbei auf einer fiktiven Insel, auf der sich in thematisch aufgegliederten Bereichen verschiedene Museen befinden, die sie besuchen können. Ziel war es den Prozess eines Museumsbesuchs mit Auswahl und Besuch einer Ausstellung spielerisch digital umzusetzen.

Für die Umsetzung der App arbeiteten wir mit Sketch und Illustrator. Die Gestaltung der Karten und Museen leiteten wir aus mehreren Moodboards ab. Die iOS Guidelines dienten als Basis für unsere Navigation innerhalb der App, wobei wir versuchten der Gesamterscheinung eine eigene gestalterische Note zu verpassen. Um den Aufbau der App zu illustrieren erstellten wir relativ spät im Prozess ein Flowchart, welches uns sehr weiter half und schon wesentlich früher angebracht gewesen wäre.

Die größte Herausforderung in der Umsetzung bestand darin, gestalterisch eine Brücke zwischen der Auswahl der Ausstellung und dem Besuch der Ausstellungsräume zu schaffen. Das Feedback half uns dabei sehr, wobei das Problem auch im Endergebnis noch nicht ideal gelöst ist. Trotzdem bin ich gerade mit dem Prozess sehr zufrieden, auch weil ich sehr viel über GUI Guidelines und durch die Erstellung des Programmablaufplans, viel über die Strukturierung einer App gelernt habe.

0_Flowchart.png0_Flowchart.png
1.png1.png
3.png3.png
2.png2.png
6.png6.png
5.png5.png
4.png4.png
Inspirationsapp_Skizze.jpgInspirationsapp_Skizze.jpg

1000 Worte (Semiotik)

Aufgabe

Die letzte Aufgabe bestand darin einen Prozess mit einer ausreichenden Komplexität, ohne den Einsatz von Worten darzustellen.

Umsetzung

Als Thema für die Aufgabe wählte ich die Rolle von Mehrarbeit und Mehrwert in der marxistischen Wirtschaftstheorie. Hierbei war mein Ziel den Prozess der Arbeit beispielhaft zu illustrieren und das Verhältnis von KapitalistIn zu ArbeiterIn in unsere heutige Zeit zu übertragen. Da der Prozess sehr theoretisch ist, entschied ich mich für die Umsetzung einfache Icons mit klarem symbolischen Charakter zu verwenden. Dabei dienten mir die Arbeiten von Otto Neurath, die auch im Kurs behandelt worden waren, als wichtige Inspirationsquelle. 

Nach mehreren Skizzen und dem ersten Feedback erstellte ich die Grafik mithilfe von Illustrator. Als Grundlage nutzte ich hierbei teilweise Icons von thenounproject.com, welche ich formal an meine selbst entworfenen Icons anpasste. Um einen aktuellen Bezug und leichteren Zugang zu schaffen, verzichtete ich auf traditionell marxistische Darstellungen von ArbeiterInnen und Produktionsmitteln und achtete darauf den Prozess möglichst wertfrei abzubilden. Der Einsatz von Farbe dient zur Markierung der zentralen Punkte im Prozess.

Auch wenn das Endergebnis ohne zusätzliche Erklärung schwer zu lesen ist, bin ich zufrieden damit, wie die Grafik einen marxistischen Blick auf Arbeit illustrieren kann. Der Prozess hat mir gezeigt, wie wichtig der Umgang mit Details ist und wie bestimmte Symbole je nach Sozialisation und Wissensstand unterschiedlich interpretiert werden können. Die Aufgabe hat mich gelehrt bei kommen Arbeiten auch schon während dem Prozess Entwürfe mehrfach an NutzerInnen zu testen.

Mehrarbeit.jpgMehrarbeit.jpg
190715_1000_Worte_Mehrarbeit.png190715_1000_Worte_Mehrarbeit.png

Fazit

Der Kurs war für mich sehr wichtig, um die Disziplin des Interfacedesigns zu verstehen. Die Erkenntnisse aus den Vorträgen, den Literaturtipps und dem Feedback von Prof. Müller haben mir geholfen eine kritische Sicht auf Interfaces zu entwickeln und mir Mut gemacht meinen Arbeitsprozess künftig iterativer zu gestalten. Auch wenn die Endergebnisse nicht besonders beeindruckend sind, war der Kurs für mich prägend und ich kann ihn nur weiterempfehlen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 19|01

Entstehungszeitraum

Sommersemester 2019