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

Basics Interface 19'

In diesem Kurs wurden die Grundlagen des Interfacedesigns anhand von Themen Screendesign, Klangbild, Graphical User Interface und Semiotik vermittelt. Zu jedem Thema gab es eine Einleitung von Prof. Müller und der Einleitung anschließend eine Aufgabe, die wir wechselweise einzeln und in einer Zweiergruppe bearbeiten sollten.

Digitales Buch

Aufgabe

Die erste Aufgabe bestand darin, ein beliebieges Buch in die digitale Form zu übertragen. Es sollten mindestens vier Screens in Formaten 1024x768 px und 240x319 px erstellt werden.

Umsetzung

Mit meinem Teampartner Tim Hönig haben wir uns für das Buch _Becoming _von Michelle Obama sowie die Arbeit in Figma entschieden. 

In unserer Umsetzung wollten wir den Lesern ermöglichen, nicht nur den Fließtext zu lesen, sondern auch schnell Informationen zu bestimmten Themen des Buches zu finden. So haben wir oben auf unseren Screens 2 Lesemoduse: „Text“ und „Topics“ aufgebaut.

Im Lesemodus „Text“ befindet sich der originelle Text bereichert um die dazugehörigen Fotos mit Unterschriften sowie Informationen zu bestimmten Begriffen (siehe Screen 4). Bezüglich der Textnavigation haben wir auf Seitenzahlen verzichtet und sie mit Jahreszahlen ersetzt um die autobiographische Gattung des Buches zu verdeutlichen. Dabei haben wir die originelle Aufteilung des Buches in 5 Kapitels: „Preface“, „Becoming Me“, „Becoming Us“, „Becoming More“ und „Epilogue“ behalten und sie in Menü „Contents“ platziert.

Im Modus „Topics“ sind dagegen Zitaten und Fotografien als ein „Eyecatcher“ zur Lektüre von bestimmten Textpassagen zu finden. Die Navigation erfolgt hier anhand des Menüs „Filter“, welches eine schnelle Informationsfindung zu Themen: Jugend, Ausbildung, Barack (Obama), Familie und Politik ermöglicht. 

Damit unser digitales Buch kohärent mit der Papierausgabe ist, haben wir als Hintergrundfarbe die Farbe des Papiers genommen. Als Headlineschrift haben wir die Gotham benutzt, welche als Wahlkampfschrift für Barack Obama diente und die Fließtexte in der Utopia gesetzt.

Diese Aufgabe bot einen guten Einstieg in die Materie des Interfacedesigns und die Gruppenarbeit hat viel geholfen.

Klangbild

Aufgabe

In der zweiten Aufgabe sollte ein von anderen Kursteilnehmer aufgenommener Klang visualisiert werden. Die Form der Darstellung war frei. 

Umsetzung

Mir wurde als Klang das Geräusch des Skateboardsfahrens zugeteilt. Als Form der Darstellung habe ich ein Video gewählt.

Zunächst habe ich meinen Klang in einem Audio Editor- Audacity geöffnet um seine Spektrum zu sehen. Leider hat das mir nicht viel geholfen, weil mein Klang sehr einheitlich ist. Da ich aber in diesem Semester auch an dem Processingkurs teilgenommen habe, arbeitete ich weiter an der Klangvisualisierung in Processing. And this is where the magic happened. Auf der Suche nach eine Idee habe ich mit einem Toolkit von Nicholas Felton gespielt und da Code zu einer interessanter Darstellung von einer Linie gefunden (Bild 1). Ich habe dann diese Linie in Loop gesetzt und Sound Library zu meinem Projekt hinzugefügt. Damit könnte ich den Verlauf von Linien an Spektrum meines Klangs anpassen (Bilder 2 und 3). Die Regel ist: je lauter das Garäuschen, desto mehrere Linien werden auf den Bildschirm angezeigt. 

Trotz der Spektrumanalyze in Processing scheinten die Linien immer noch zufällig zu laufen, weswegen ich weitere Akzente in Adobe After Effects gesetzt habe. Dank einer Zeitleiste in After Effects könnte ich schnell bestimmte Akzente im Klang mit Farben verdeutlichen. So habe ich im Zeitpunkt des Sprungs von Skateboard die laufenden Linien weggelassen und alleine grellen Farben benutzt, beim „Kratzen“ des Skateboards an die Fläche die Farbe der Linien und des Hintergrunds geändert sowie bei einem anderen charakteristischen Geräusch, das ich nicht beschreiben kann, nur die Farbe der Linien gewechselt. Bei „normaler“ Fahrt sind die Linien hellgrau. Damit meine Klangvisualisierung nicht monoton aussieht, ändert sich noch die Hintergrundfarbe von hellgrau am Anfang bis schwarz am Ende.

Diese Aufgabe verlangte von mir einen größen Zeitaufwand vor allem bei der Konzeptionsentwicklung, aber hat trotzdem viel Spaß gemacht.

Graphical User Interface

Aufgabe

In dieser Aufgabe sind wir zum Kern des Interfacedesigns gekommen und sollten Screens für eine Inspirationsapp samt eines Flowcharts entwickeln.

Umsetzung

Zusammen mit meinem Teampartner Georg Ander haben wir uns zunächst die Frage gestellt, wie wir nach Inspiration zu unseren Projekten suchen und haben festgestellt, dass ein kreativer Prozess oft mit einem Gespräch mit anderen angefangen wird. Wir sind auf Idee einer App gekommen, die ermöglicht, eine Meinung von anderen Studenten zu eigenen Projekten zu holen- die Feedback-App- bezüglich der Name waren wir uns nicht so einig ;).

Im nächsten Schritt haben wir Design von anderen Apps, wie Whatsapp, Yahoo Mail und Quora analysiert und manche Funktionen zu unseren App hinzugefügt. So teilten wir das Menü oben in drei Teile auf sowie wandten das Swipen von Fragen nach links für Speichern und rechts für Löschen an (Screen 3). Da unsere App für Feedback zu kreativen Projekten gedacht ist, haben wir die Standard-Antwortsmöglichkeiten wie Text, Sprachnachricht, Bild und Dokument um die Antwort mit einem Font oder einer Farbpalette ergänzt (Screen 6). Darüber hinaus fügten wir die Filter zu, die vom Nutzer jederzeit geändert werden können (Screens 11 und 12) und anhand dessen man die Fragen auf dem Feed sortieren kann (Screen 9). Als Font haben wir die Roboto und Roboto Slab genutzt. Schließlich haben wir versucht, die Regeln von Material Design an unseren Projekt anzuwenden. Wir arbeiteten in Figma und Adobe XD.

Während dieser Aufgabe habe ich viel über die Navigation durch eine App, das Material Design sowie die Wichtigkeit der Erstellung eines Flowcharts am Anfang einer Appentwicklung gelernt.

1000 Wörter

Aufgabe

Die letzte Aufgabe bestand darin, einen Sachverhalt mit einer ausreichenden Komplexität (circa 1000 Wörter) grafisch ohne Wörter darzustellen.

Umsetzung

Als Thema habe ich mir die Herstellung eines billigen T-Shirts ausgesucht. In der ersten Phase des Projekts wollte ich sowohl das Wasserverbrauch als auch die Emission von CO2 bei der Produktion eines T-Shirts darstellen, was sich aber als zu komplex gezeigt hat (Skizze 2 und 3). Nach der ersten Feedbackrunde wollte ich mich auf der Darstellung eines Aspekts der T-Shirt-Produktion konzentrieren und habe ein Artikel von Zeit gefunden, in dem die Kosten der Herstellung ausführlich beschrieben werden. 

Link zum Artikel: https://www.zeit.de/2010/51/Billige-T-Shirts

Die Ausgangsituation im Artikel und in meiner Darstellung ist ein T-Shirt für 4,95 Euro. In meiner Umsetzung habe ich das T-Shirt in die Mitte platziert und sein Wert in 2-Euro-, 1-Euro-, 50-Cent-, 20-Cent- und 5-Cent-Münzen gezeigt. Hier bin ich auf ein Problem gestoßen, wie ich die Münzen ohne Ziffern differenziere, was vor allem bei 50- und 20-Cent-Münzen schwierig war. 

Der Preis dieses T-Shirts teilt sich folgend auf: Kosten für die Baumwolle, Transportkosten, Nähkosten, Miete für Filialen samt Gehälte der Verkäufer (am teuersten!), Steuer und den Gewinn. 

Ich wollte den Werten aus den Artikel möglichst treu bleiben ohne die Veranschaulichkeit des Bildes zu verlieren, sodass ich manche Werte um ein paar Cent modifiziert habe.

Während dieser Aufgabe könnte ich meine Skills in Illustrator üben, den ich für die Erstellung meiner Grafik benutzt habe.

Fazit

Den Interfacedesign-Kurs von Prof. Müller kann ich nur weiterempfehlen. Die wöchentlichen Abgaben von Entwürfen, regelmäßige Feedbackrunden und systhematische Arbeit an Projekten haben mir viel beigebracht sowie den Designprozess in realen Arbeitssituationen näher gebracht. Die Aufgaben waren sehr abwechslungsreich, wodurch man das Interfacedesign aus verschiedenen Perspektiven lernen kann und keine Langeweile hat!

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im Grundstudium

Betreuung

Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 19|01

Entstehungszeitraum

Sommersemester 2019

Noch keine Kommentare