In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
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“.
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.
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.
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.
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.
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:
©Fabian Ehmel
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.
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.
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.
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.
©Fabian Ehmel
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.
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.
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.
©Fabian Ehmel
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.
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
Fabian Ehmel
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
Prof. Boris Müller
Entstehungszeitraum
Wintersemester 2013 / 2014