In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Basics Interface 11|02 – Lennart Hildebrandt
Dies ist die Dokumentation über meine Arbeitsergebnisse aus dem Kurs „Basic Interface 11|12“ - gehalten und betreut von Prof. Boris Müller.
Gestalte eine digitale Fassung Deines Lieblingsbuches. Das Buch kann ein Roman, ein Sach-, Koch- oder Fachbuch, oder auch ein Gedichtband sein. (Keine Comics!)
Die digitale Fassung des Buches soll exemplarisch anhand von vier Screens in zwei verschiedenen Formaten vorgestellt werden - zwei horizontale Screens im Format von 1024 x 768 Pixeln und zwei vertikale Screens im Format von 240 x 320 Pixeln.
Die Screens sollen nicht nur die Inhalte des Buchs wiedergeben, sondern sollen auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können.
Lesbarkeit und Klarheit der Darstellung sind die wichtige Kriterien bei der Bearbeitung der Aufgabe.
Die Aufgabe soll in Zweierteams bearbeitet werden.
Diese Aufgabe habe ich zusammen mit Mareka Pährisch bearbeitet.
Umsetzung:
Für die Umsetzung entschieden wir uns für „Die Karte meiner Träume“ - einen Roman von Reif Larsen. Seine detaillierten Illustrationen und das Genre waren dabei ausschlaggebende Kriterien.
Der aufmerksame Junge T.S. Spivet, die Hauptfigur des Romans, und seine zahlreichen Illustrationen, die Spivet in verschiedenen, nach Farbe sortierten Notizbüchern dokumentiert, bestimmen den Stil des Buches. Immer wieder werden Teile seiner Notizen in Randbemerkungen zitiert, die wiederum über Pfeile in den Fließtext des Buches eingebunden werden.
Wir entschieden uns dafür, die Notizbücher aus dem eigentlichen Roman zu extrahieren und separat zu platzieren. Webähnliche Links im Fließtext sollen den Leser dann über einen Slideeffekt zu Illustrationen und ergänzenden Texten leiten. Über eine ausfahrbare Karte am oberen Rand ermöglichen wir die Navigation durch den Roman. Diese Karte ist auch ein Hinweis auf das von uns angestrebte Skeuomorphic Design, über das wir einen schreibtischähnlichen Eindruck mit mehreren Büchern erzeugen möchten.
Als Schriftart wählten wir die Skolar, die zum einen der Typografie des Orginals ähnelt und anderseits besonders für die Lesbarkeit auf Screens optimiert ist.
Um bei der Umsetzung die in der Aufgabe geforderte Lesbarkeit und Klarheit zu erreichen, verwendeten wir die Skolar als Webfont. Über eine speziell für die Bearbeitung angelegte Webseite kombinierten wir Bild und Text. Die sehr gute Textglättung moderner Webbrowser und einfache Screenshots der Webseite brachten uns dann die fertige Screens.
Anmerkung:
Aus gesundheitlichen Gründen kamen wir gegen Ende der Gruppenarbeitsphase in Zeitnot, weshalb eine Umsetzung mit der Skolar im großen Screen-Format nicht mehr möglich war.
Fazit:
Neben der Tatsache, dass Mareka und ich einige Zeit damit verbrachten, eine Display-Schrift zu finden, die auch auf dem kleinen Screen gut funktionieren sollte, machten wir viele Entdeckungen im Bereich des digitalen Screens. Die Herausforderung, ein funktionierendes Navigationskonzept und eine gute inhaltliche Struktur zu schaffen, machte mir großen Spaß. Dabei übte ich auch den Umgang mit einem Storyboard und durfte im Anschluss feststellen, welche Fehler uns dadurch erspart blieben.
Es soll ein Brainstorm-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designer / Entwicklern bei der Generierung von Ideen unterstützen. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden.
Die Applikation kann unter Umständen über das technisch Machbare hinausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr.
Das Ziel ist, einen möglichst iPhone-konformen Entwurf zu erarbeiten. Daher soll weitesgehend die standardisierte iPhone-GUI eingesetzt werden. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. Zusätzlich zur GUI soll ein Programmablaufplan (Flowchart) skizziert werden.
Umsetzung:
Auf dem Weg der Brainstorming- und Konzeptionsphase für ein Layout sind [MoodBoards](http://de.wikipedia.org/wiki/Moodboard „MoodBoards“) ein hilfreiches Mittel um die grobe gestalterische Richtung abzustecken und sich besser im Team und mit dem Kunden absprechen zu können.
Die „MoodBundler“-App soll helfen, verschiedene Materialien zu sammeln und dabei neue Denk- und Gestaltungswege aufzuzeigen.
©Lennart Hildebrandt
Die folgenden Nummerierungen beziehen sich auf den im oberen Bild dargestellen Programmablauf.
- Ladescreen
- Projektübersicht In diesem Screen erhält der Benutzer eine Übersicht über seine bisher angelegten Projekte. Diese erreicht er über einfaches klicken der Projektschaltfläche. Daneben gibt es jedoch noch die Möglichkeit, diese Schaltfläche zur Seite zu ziehen und eine Übersicht der abgelegten Elemente zu erhalten. Zieht man die Schaltfläche ganz nach rechts, öffnet sich ebenfalls das Projekt.
- „Neues Projekt“-Formular
- MoodBoard-Übersicht Dieser Screen zeigt eine Übersicht über die im Projekt abgelegten MoodBoards. Durch einfaches Swypen erhält der Benutzer hier eine Übersicht über zusammengestellte Elemente. Von links erscheinen von der App vorgeschlagene MoodBoards, die mit einem oder mehreren Schlagwörtern aus bereits vorhandenen MoodBoards verwandt sind. Diese können über den Plus-Button dauerhaft zur Liste hinzugefügt werden.
- „Neues MoodBoard“-Formular Auf Grundlage der ausgewählten Element-Typen und der Eingabe mehrere Schlagwörter über Siri, sucht die App im Folgenden Elemente aus Bild-, Schrift- und Farbarchiven aus.
- Element-Bewertung Durch Sliden nach links oder rechts können die vorgeschlagenen Elemente bewertet und so zur MoodBoard-Liste hinzugefügt oder abgelehnt werden. Auf Basis dieser Bewertung werden dann weitere Vorschläge angezeigt, bis die maximale Anzahl erreicht wurde.
- MoodBoard-Übersicht
- Detail- & Info-Ansicht
Fazit:
Diese Aufgabe machte mir neben der Informationsgrafik über den Straßenfeger in Aufgabe 4 am meisten Spaß. Durch die Hilfe des Kurses und im besonderen Boris Müller, entdeckte ich immer wieder Schwachstellen in meinem Programmablauf. So schaffte ich es letztendlich doch, mit Hilfe des Feedbacks aus dem Kurs die Aufgabenstellung an meine App stark herunterzubrechen und ein einfaches Navigationskonzept aufzusetzen.
Eine interessante Herausforderung war es auch, den schmalen Grad zwischen iOS-GUI und eigenständigen, gestalterischen Ansätzen zu gehen.
Es soll eine akustische Begebenheit (kein Musikstück!) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvollziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Einzige Einschränkung: es soll keine Bildschirmorientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.
Umsetzung:
Für die Visualisierung wählte ich die Klänge der Instrumente im Orchestergraben, kurz bevor die eigentliche Vorführung beginnt.
Während nun also die Musikinstrumente einen gemeinsamen Ton suchen, mischen sich immer wieder Einzelgänger dazwischen. Daneben hört man Besucher, die ihre Plätze suchen oder gespannt auf die kommende Vorführung warten.
Für die Umsetzung wählte ich eine notenähnliche Darstellung, in der bestimmte Tonlagen und Toneigenschaften durch Position und Form mehrerer wellenförmiger Linien dargestellt werden.
©Lennart Hildebrandt
Anmerkung:
In der unter Materialien aufgeführten zip-Datei findet sich neben der zu visualisierenden Audiodatei auch eine PDF mit schwarz-weiß Darstellung, die noch dichter an der Idee des Notenblattes orientiert ist. Sie tut sich aber schwerer in der Sinnhaftigkeit der horizontalen Linien, als die finale Version, die ohne diese Markierungen auskommt.
Fazit:
Sowohl die Auswahl einer passenden Tonspur, als auch die visuelle Darstellung der enthaltenen Töne, sind Gründe dafür, dass ich mit dieser Aufgabe am meisten Schwierigkeiten hatte.
Trotz dieser Schwierigkeiten, war es eine lehrreiche Erfahrung, mit der Komponente Zeit und eigenen Kriterien eine derartig freie Visualisierung zu erarbeiten.
Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung darf keinerlei Text enthalten. Der Sachverhalt soll möglichst deutlich und klar kommuniziert werden.
Bei der Auswahl eines Themas sollte drauf geachtet werden, dass das Thema hinreichend komplex ist. Naturwissenschaftliche Themen sind z.B. gut geeignet. Es können aber auch Alltagsthemen genommen werden wie z.B. die Zubereitung eines Essens.
Die Aufgabe soll in Zweierteams bearbeitet werden.
Diese Aufgabe habe ich zusammen mit Ben Schmitt bearbeitet.
Umsetzung:
Wir entschieden uns in unserer Gruppe, einen Sachverhalt aus einem sozialen Kontext zu visualisieren. Neben Themen wie einem nachhaltigen Naturschutz, viel unser Augenmerk bald auf eine regionale Organisation, dem Straßenfeger - Berlins soziale Straßenzeitung.
Da über das Magazin nach einer einfachen Webrecherche immer noch viele Fragen offen blieben, vereinbarten wir direkt mit dem Chefredakteur des Magazins Andreas Düllick einen Termin für ein Interview. Dieser signalisierte schon per E-Mail eine große Bereitschaft, uns während unserer Recherche zu unterstützen.
Nach unserem Gespräch gingen wir mit Unmengen an Informationen wieder an unsere Visualisierung zurück und entwickelten ein erstes Konzept.
Als wir Skizzen dieser ersten Ansätze in unserem Bekanntenkreis evaluierten, mussten wir bald feststellen, dass wir zu sehr in der Materie steckten und unsere bisherige Struktur nicht zielführend genug war und zu viel Verwirrung schaffte. So entwickelten wir mit dem gewonnen Feedback ein neues Konzept, dass bereits als Skizze besser zu funktionieren schien.
Der nächste Schritt bestand nun darin, einen Stil zu finden, der dem Inhalt und der sozialen Komponente des Straßenfegers gerecht wird. Wir entschieden uns, unsere Skizzen in handgefertigte Illustrationen umzusetzen, um die viele ehrenamtliche Arbeit und den sehr persönlichen Charakter, den wir während unseres Interviews erlebten, wiedergeben zu können.
Um im Endergebnis eine gleichmäßige Strichstärke und ein einheitliches Bild zu schaffen, teilten wir die Umsetzung in drei verschiedene Phasen auf.
Die erste Phase bestand darin, die vor mir gestalteten Illustrationen der von uns in der Konzeptionsphase entwickelten Icons abzufotografieren und grob auf dem Endformat zu platzieren. Diese erste Umsetzung wurde dann im nächsten Schritt ausgedruckt, von mir mit zwei verschiedenen Strichstärken über Pauspapier abgezeichnet und eingescannt. So konnte Ben diese im letzten Schritt in der Endversion wie vorgegeben mit gleichbleibender Größe platzieren und digital colorieren.
©Lennart Hildebrandt
Fazit:
Die Arbeit in der Gruppe ist an sich häufig schon eine große Herausforderung. Ben und ich spielten uns jedoch immer wieder neue Ideen zu, sodass wir trotz der kurzen Zeit von drei Wochen ein Endergebnis zu Stande brachten, mit dem wir beide sehr zufrieden sind.
Während der Konzeptionsphase zeigte sich jedoch auch, was die große Herausforderung der Darstellung eines komplexen Sachverhalts ohne Worte sein kann. Begriffe, wie „Obdachloser“ oder „Offene Redaktionsrunde“ sind ohne Worte kaum darstellbar und wären ohne eine Evaluation wohl auch unverständliche Icons geblieben.
Eine sehr fruchtende Erfahrung war auch die Arbeit mit dem illustrativen Stil und den verschiedenen Arbeitsphasen, die für ein druckbares Endergebnis nötig waren.
So hängt die finale Version vielleicht auch bald in den Redaktionsbüros des Straßenfegers, dessen Chefredakteur wir als Dank für seine große Hilfe das Endergebnis als Plakat überlassen möchten.
Das durchweg sehr konstruktive Feedback, dass Boris Müller jeder Gruppe und jedem Einzelnen zuteilwerden ließ, war immer auf hohen Niveau und brachte mir viele neue Kenntnisse über die Grundlagen der Gestaltung im Bereich Interfacedesign.
Weniger zufrieden war ich mit der Aufteilung der Gruppenarbeiten. So wäre die doch sehr kreative Aufgabe „KlangBilder“ meiner Meinung nach sehr viel besser als Gruppenprojekt geeignet gewesen, als die Aufgabe „Digitales Buch“.
Trotz alledem lernte ich viel über Schriften im digitalen Raum, grundlegende GUI-Konzepte und den weiten Bereich der Informationsvisualsierungen. Geschichtliche Zusammenhänge und Ausblicke in weitere Bereiche des Interfacedesigns fasste Boris Müller immer wieder in seinen Präsentationen für uns zusammen.
So bin ich mit der Wahl und den Ergebnissen des Kurses sehr zufrieden.
Ein Projekt von
Lennart Hildebrandt
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
Prof. Boris Müller
Entstehungszeitraum
Wintersemester 2011 / 2012