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

Kursdokumentation Basics Interface 13|02

Kursdokumentation Basics Interface 13|02

Dieses Projekt dokumentiert meine Arbeiten im Rahmen des Grundstudiumskurses Basics Interface im Wintersemester 2013/2014 bei Prof. Boris Müller. Die Dokumentation besteht aus vier Teilprojekten: „Digitales Buch“, „GUI“, „Klangbild“ und „1000 Worte“.

01: Digitales Buch

Dieses Projekt habe ich gemeinsam mit Izabela Mac Van bearbeitet.

Aufgabe Es soll eine digitale Version eines Buches gestaltet werden. Dabei sollen Konzepte für zwei Formate ausgearbeitet werden: 1024 x 768 Pixel sowie 240 x 320 Pixel. In den Entwürfen sollten nicht nur die Inhaltes des Buches dargestellt, sondern auch ein Navigationskonzept erarbeitet werden.

Umsetzung Wir haben uns dafür entschieden, das Spielzeitbuch des Hans Otto Theaters Potsdam (HOT) in eine digitale Form zu bringen. Dieses Buch enthält ausführliche Informationen zu den Stücken, Regisseuren und dem Ensemble des HOT.

spielzeitheft_inhalt.jpgspielzeitheft_inhalt.jpg
spielzeitheft_tobi.jpgspielzeitheft_tobi.jpg
spielzeitheft_turm.jpgspielzeitheft_turm.jpg

Beispiel-Seiten aus dem Spielzeitheft (Quelle: [Hans Otto Theater Potsdam](http://www.hansottotheater.de/pressecenter/unser-aktuelles-spielzeitheft.htm „Hans Otto Theater Potsdam“))

Bei der Ausarbeitung haben wir uns an der Farbgebung der Buchvorlage orientiert um an das visuelle Erscheinungsbild des HOT anzuknüpfen. Um Fließtexte typographisch von anderen Texten abzugrenzen wählten wir für die Umsetzung zwei Schriften aus. Eine Schrift mit Serifen (Ledger) für Fließtexte, sowie eine Serifenlose Schrift (Signika) für Überschriften und weitere Texte.

Die Interaktion zwischen Nutzer und Buch basiert auf Klicks und Wischgesten. Im kleinen Format (240 x 320 px) lässt sich mit durch das Ziehen an einer kleinen „Lasche“ am oberen Bildschirmrand zur letzten Ansicht zurück navigieren.

D_240x320-01.pngD_240x320-01.png
D_240x320-02.pngD_240x320-02.png
D_240x320-03.pngD_240x320-03.png
D_240x320-04.pngD_240x320-04.png
D_240x320-05.pngD_240x320-05.png
240x320_lang-06.png240x320_lang-06.png

Im großen Format (1024 x 768 px) haben wir die aus dem kleinen Format bekannte „Lasche“ zu einer Art Breadcrumb ausgebaut. So weiß der Nutzer immer, wo in der Navigationsstruktur er sich gerade befindet.

Sobald man mehr als eine Ebene tief in die Navigationsstruktur eintaucht stapeln sich am oberen Rand des Bildschirms Leisten, mit denen man direkt zum letzten Seite oder zum Inhaltsverzeichnis zurück gelangt. Auch hier kann navigiert werden indem man die gewünschte Leiste herunterzieht.

Der Verweis auf das Inhaltsverzeichnis ist dabei mit einem Vogel-Symbol versehen das zugleich das Logo des HOT ist. So wird eine Verbindung zwischen diesem Link und dem Inhaltsverzeichnis hergestellt, in dem das Logo das bestimmende optische Element ist.

C_1024x768_FLAECHE-01.pngC_1024x768_FLAECHE-01.png
C_1024x768_FLAECHE-02.pngC_1024x768_FLAECHE-02.png
C_1024x768_FLAECHE-03.pngC_1024x768_FLAECHE-03.png
C_1024x768_FLAECHE-04.pngC_1024x768_FLAECHE-04.png
C_1024x768_FLAECHE-05.pngC_1024x768_FLAECHE-05.png

Fazit Die Aufgabe stellte für mich eine Herausforderung dar. Insbesondere das Hauptaugenmerk der Aufgabe - der Typographie auf Bildschirmen - war für mich bis dahin Neuland und bereitete mir Schwierigkeiten. Umso mehr Wissen konnte ich aus der Bearbeitung der Aufgabe und der Beschäftigung mit der Typographie gewinnen.

02: Graphical User Interface

Aufgabe Ziel der Aufgabe ist es, ein GUI für eine iPhone-App zum Thema „Brainstorming“ zu entwickeln. Diese soll sich an den Vorgaben des iOS-Design-Guides orientieren und in einer Bildschirmauflösung von 320 x 480 Pixeln umgesetzt werden. Der logische Programmablauf der App soll in einem Ablaufdiagramm („Flowchart“) dargestellt werden.

Umsetzung Ich hatte die Idee eine App zu gestalten, die Nutzer dabei unterstützt, zu einem bestimmten Thema möglichst viele Ideen von verschiedenen anderen Nutzern zu sammeln. Hierfür formuliert der Nutzer seine Idee in eine Frage. Diese wird in der Folge zufällig ausgewählten anderen Nutzern zur Beantwortung angezeigt. Eine Antwort kann hierbei etwa aus einem Text, einem Foto, Ton, Video oder einem Link bestehen. Die gesammelten Antworten werden dem Fragesteller anschließend angezeigt.

Der Flowchart dieses Bedienprozesses sieht wie folgt aus:

flowchart.pngflowchart.png

Flowchart zum Programmablauf

Zum Zeitpunkt der Bearbeitung der Aufgabe hatte ich noch keinerlei Erfahrung in der Gestaltung von Apps oder im Umgang mit dem iOS-Design-Guide. Darum hielt ich mich möglichst exakt, wenn nicht sogar etwas überpenibel an diese Vorgaben. So entstanden Screens die iOS-konform sind, in ihrer visuellen Ausgestaltung jedoch mehr Individualität vertragen könnten.

app_01 - Deine Fragen A.pngapp_01 - Deine Fragen A.png
app_02 - Neue Frage leer.pngapp_02 - Neue Frage leer.png
app_03 - Neue Frage voll.pngapp_03 - Neue Frage voll.png
app_04 - Deine Fragen B.pngapp_04 - Deine Fragen B.png
app_05 - Deine Fragen C Löschen.pngapp_05 - Deine Fragen C Löschen.png
app_06 - DIe Stadt ohne Autos.pngapp_06 - DIe Stadt ohne Autos.png
app_07 - DIe Stadt ohne Autos - Designerin.pngapp_07 - DIe Stadt ohne Autos - Designerin.png
app_07b.pngapp_07b.png
app_08 - Deine Antworten A.pngapp_08 - Deine Antworten A.png
app_09 - Verkehrszeichen leer.pngapp_09 - Verkehrszeichen leer.png
app_10 - Verkehrszeichen bearbeiten.pngapp_10 - Verkehrszeichen bearbeiten.png
app_11 - Verkehrszeichen fertig.pngapp_11 - Verkehrszeichen fertig.png
app_12 - Deine Antworten B.pngapp_12 - Deine Antworten B.png

Detailansicht der einzelnen Screens

Fazit

Durch die Bearbeitung der Aufgabe habe ich wichtige Kenntnisse dazu gewonnen, wie man sich mit Styleguides auseinandersetzt und mit ihnen arbeitet. Bei zukünftigen Projekten kann ich nun mehr Augenmerk darauf legen, einer App bzw. einer GUI ein individuelles Aussehen zu geben.

03: KlangBilder (Narratives in Time and Space)

Aufgabe Ziel dieser Aufgabe ist es, ein Gespräch zwischen zwei oder mehr Personen zu visualisieren. Aus der Visualisierung soll der zeitliche Ablauf, die Emotionalität und eventuell vorhandene Hintergrundgeräusche sichtbar werden.

Umsetzung Ich habe mich dafür entschieden, einen Mitschnitt einer Fußball-Live-Reportage zu visualisieren. Hierbei handelt es sich um die 93. Minute des Fußballspiels Borussia Dortmund gegen FC Málaga (3-2, Champions League Viertelfinale, Rückspiel, 09. April 2013). Der Mitschnitt ist hier zu finden: [Mitschnitt auf Youtube (Länge 00:42, von 07:14 bis 07:56)](http://www.youtube.com/watch?v=-q6H2zy8jpo#t=7m14s „Mitschnitt auf Youtube“). Mein Ziel war es, die akustisch wahrnehmbaren Emotionen und Geschehnisse der 42 Sekunden visuell darzustellen.

Der Mitschnitt enthält nicht direkt ein Gespräch zwischen zwei oder mehr Personen. Vielmehr existieren zwei Ebenen: - Kommentator - Fans

Der Kommentator wird durch eine (gelbe) Kurve visualisiert. Je höher diese ausschlägt, desto emotionaler ist sein Kommentar. Zusätzlich wird vermerkt, wann der Kommentator ein Spielernamen ausspricht, und wann er bei einem Tor in Jubel ausbricht.

Die Fans werden durch strichmännchenartige Figuren visualisiert. Sie drücken durch verschiedene Gesten Emotionalität aus. Beim Torjubel werden die Figuren durch fantypische Accessories ergänzt, um die Emotionalität des Augenblicks zu unterstreichen.

strichmaennchen-01.pngstrichmaennchen-01.png
strichmaennchen_party-01.pngstrichmaennchen_party-01.png

Detailansicht der für die Visualisierung der Fans entwickelten Figuren

Während der 42 Sekunden des Mitschnitts reagieren beide „Protagonisten“ auf verschiedene Ereignisse. Auffällig ist, dass die Reaktion des Kommentators hier meist ein wenig früher geschieht. Insgesamt betrachtet sind die Reaktionen aber vergleichbar.

Bei der visuellen Ausarbeitung des Klangbildes wurden ausschließlich die Farben Gelb und Schwarz verwendet, die auch im Vereinslogo von Borussia Dortmund vorkommen.

Der Titel des Klangbildes - „Hier rasten alle aus!“ - ist der letzte Satz des Kommentators im Mitschnitt.

klangbild.pngklangbild.png

Das fertige Klangbild

Fazit Ich bin mit meinem Klangbild grundsätzlich zufrieden. Dennoch habe ich einige Kritikpunkte daran: Ich glaube ich habe mich zu früh auf die vorliegende Darstellungsform festgelegt. Eventuell wäre es besser gewesen, diese noch einmal zu überdenken und hierbei auch freiere und kreativere Ansätze in Betracht zu ziehen, um die Emotionalität noch besser visualisieren zu können. In seiner jetzigen Form wirkt das Klangbild im Bezug auf den Mitschnitt etwas zu nüchtern.

04: 1000 Worte

Dieses Projekt habe ich gemeinsam mit Nadia Zeissig bearbeitet.

Aufgabe In dieser Aufgabe sollte ein komplexer Sachverhalt so aufbereitet und in einem Schaubild dargestellt werden, dass er für Betrachter klar verständlich ist. Hierbei durfte kein Text verwendet werden.

Umsetzung Als Thema für das Schaubild haben wir die Entstehung der Immobilienkrise in den USA ([U.S. Suprime Mortage Crisis](http://en.wikipedia.org/wiki/Subprime_mortgage_crisis „U.S. Suprime Mortage Crisis“)) gewählt. Die größte Herausforderung war hier zunächst, die komplexe Thematik zu überblicken und zu reduzieren, ohne zu viel inhaltliche Tiefe zu verlieren. Erst nach längeren Versuchen und mehreren verworfenen Entwürfen erreichten wir dieses Ziel.

Der finale Entwurf illustriert die Immobilienkrise anhand verschiedener Symbole. So entwickelten wir etwa Zeichen für eine Bank und Eigenheime. Ebenso versuchten wir, Familien verschiedener sozialer Schichten graphisch zu differenzieren. Stilistisch orientierten wir uns dabei an zweidimensionalen Pixelgrafiken.

detail-01.pngdetail-01.png
detail-02.pngdetail-02.png
detail-03.pngdetail-03.png

Detailansichten ausgewählter Grafiken

Anhand dieser Symbole bauten wir ein Schaubild auf, dass sich horizontal in sechs Phasen gliedert und die Immobilienkrise so schrittweise erläutert.

1000_worte_FINAL_2560x1440-01.png1000_worte_FINAL_2560x1440-01.png

Das Ergebnis der Aufgabe

Fazit Die Bearbeitung der Aufgabe war zeitaufwendiger als von mir zunächst erwartet. Grund hierfür war vor allem die langwierige Reduktion des thematischen Inhaltes. Dennoch (oder gerade deswegen) habe ich aus der Bearbeitung zahlreiche Kenntnisse gewonnen. So wurde mir noch einmal verstärkt klar, dass zur Gestaltung einer Infografik nicht nur der visuell-gestalterische Part, sondern auch eine Menge Konzeption gehört.

Reflexion

Aus allen vier Teilprojekten habe ich neues Wissen und Erfahrungen gewinnen können. Insbesondere die Beschäftigung mit Bildschirmtypographie im ersten Projekt hat mir auch in den weiteren Projekten und in anderen Kursen weiter geholfen. Auch die Visualisierung von Tönen oder komplexen Prozessen in den Aufgaben 03 und 04 war für mich vor allem auf Grund des damit verbundenen Denkprozesses spannend.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2013 / 2014