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 12|01

Dokumentation der Arbeiten, die im Sommersemester 2012 im Rahmen des Kurses „Basics Interface“ bei Prof. Boris Müller, entstanden sind.

Aufgabe 1: Digitales Buch

„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.“

Die Umsetzung zusammen mit Sebastian Maschner:

Da für uns relativ schnell klar war, dass wir ein illustriertes Kinderbuch als digitales Buch umsetzen wollen, entschieden wir uns für das Buch „Der Kleine Wassermann“ von Otfried Preußler.

Dabei war uns einerseits wichtig, den Duktus des Originals bestmöglich zu erhalten, andererseits wollten wir dabei die Zielgruppe „Kinder“ besonders berücksichtigen und in den Vordergrund unserer Arbeit stellen.

Dieser Herausforderung stellten wir uns, indem wir die Navigation gleichermaßen als illustratives Element nutzten und zusätzlich interaktive Elemente, die auf die Bedürfnisse von Kindern und Leseanfängern zugeschnitten sind, einbauten: 1. Für Wörter ab einer gewissen Silbenlänge gibt es eine Vorlesefunktion 2. Die Buchillustrationen können vergrößert und als Animation abgespielt werden

01_1024_wassermann.png01_1024_wassermann.png
02_1024_wassermann.png02_1024_wassermann.png
03_1024_wassermann.png03_1024_wassermann.png
04_1024_wassermann.png04_1024_wassermann.png
05_1024_wassermann.png05_1024_wassermann.png
06_1024_wassermann.png06_1024_wassermann.png
07_1024_wassermann.png07_1024_wassermann.png

Große Version (1024 x 768)

08_240_wassermann.png08_240_wassermann.png
09_240_wassermann.png09_240_wassermann.png
10_240_wassermann.png10_240_wassermann.png
11_240_wassermann.png11_240_wassermann.png
12_240_wassermann.png12_240_wassermann.png
13_240_wassermann.png13_240_wassermann.png

Kleine Version (240 x 320)

Aufgabe 2: GUI

„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 - MoodStorm

Bei der Brainstorm-App entschied ich mich dazu, dein Brainstorm-Prozess mit der gleichzeitigen Erstellung eines Moodboards zu verbinden. Moodboards sind wichtige Instrumente zur visuellen Darstellung einer Idee, eines Themas, einer Stimmung, etc. In „MoodStorm“ gibt man daher nicht nur schlichte Wörter zum Festhalten von Ideen ein, sondern wird nahtlos nach Eingabe des entsprechenden Begriffs mit einer Bildersuche der Wahl verbunden, z.B. FlickR oder Google. Wenn der Ideenfindungsprozess abgeschlossen ist, bleibt also nicht nur eine Mindmap zurück, sondern es wurde von der App aus den ausgewählten Bildern ein Moodboard erstellt, das sich ausdrucken oder an andere versenden lässt.

02start.png02start.png
03menu.png03menu.png
04add_element.png04add_element.png
05new_element.png05new_element.png
06board.png06board.png
07settings.png07settings.png
08briefing.png08briefing.png
09deadline.png09deadline.png
91share.png91share.png
92moodboard.png92moodboard.png

Aufgabe 3: Klangbild

„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 - „Visualisierung eines Almabtriebs“

Der zugrundeliegende Klang, den ich für das Klanbild gewählt habe, war ein Ausschnitt einer Aufnahme des Almabtriebs der Steinbergalm am Jochberg in Kitzbühel. Ich wählte ihn deshalb, weil es mich schon immer fasziniert hat, dass man den Klang einer Kuhglocke zwar sofort als solchen identifizieren kann, jedoch innerhalb eines gewissen Spektrums jede Kuhglocke einzigartig ist und ihren ganz eigenen Klang hat.

Bei der Visualisierung wählte ich Kreise, deren Größe die Lautstärke des einzelnen Tons angeben und die Lage auf der Y-Achse die Tonhöhe. Die X-Achse gibt die Zeit des Erklingen des Glockentons an (siehe Scala am oberen Bildrand). Die Wahl der Farbe grün tätgte ich aus der Intention heraus, eine Assoziation zum Grün der Bergwiese zu schaffen, die die Kühe am Tag des Almabtriebs verlassen.

Ute_Klangbild.pngUte_Klangbild.png

Aufgabe 4: Tausend Worte

„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.“

Umsetzung zusammen mit Thomas Otto - „Der Teeweg“

Die Entscheidung, die japanische Teezeremonie als Infografik umzusetzen, stand bereits nach kurzem Brainstorming fest, da Thomas und ich sehr schnell einig waren, eine komplexe Tradition einer anderen Kultur verdeutlichen zu wollen, und die japanische Teezeremonie bot sich aufgrund ihres hohen ästhetischen Wertes und ihrer strikt geregelten Abläufe an. Nach ausführlicher Recherche erschloss sich uns erst, wie komplex und durchdacht diese Zeremonie wirklich ist, wieviele Verhaltensmuster und Denkweisen sie beinhaltet, die man als Beobachter nicht sofort sieht.

Ein weiteres Problem, das bei der Erarbeitung erster Ablaufpläne auftrat, war die Tatsache, dass viele japanische Verhaltensweisen und Gestiken für uns als Europäer nicht ohne weiteres deutbar sind, z.B. das Verbeugen mit gefalteten Händen zur Begrüßung. Statt jeder einzelnen Handlung eine „westliche“ Entsprechung gegenüberzustellen, beschlossen wir daher, gänzlich auf eine erklärende Metaebene zu verzichten und lediglich die japanischen Bezeichnungen der Handlungen anzugeben.

Diese Entscheidung führt dazu, dass der Betrachter der Grafik zwar einen ersten Einblick in die Komplexität der japansichen Teezeremonie bekommt, gleichzeitig aber angeleitet wird, sich näher mit ihr und ihren kulturellen Hintergründen auseinanderzusetzen.

teeweg_final.jpgteeweg_final.jpg

Fazit

Der Kurs „Interface Basics“ hält auf jeden Fall, was er verspricht. Durch die lehrreichen Präsentationen von Prof. Boris Müller und die dazu gestellten Aufgaben werden die Grunddisziplinen des Interfacedesigns durchaus einprägsam und abwechslungsreich vermittelt.

Mir persönlich haben die beiden letzten Aufgaben (Klangbild und 1000 Worte) am besten gefallen und viel Spaß gemacht. Besonders gut fand ich ferner die Akribie, mit der Prof. Müller die Aufgaben bei den Zwischenstandspräsentationen auseinanderpflückte, und den Kurs dadurch lehrte, dass ein gelungenes Interface das Zusammenspiel aus vielen Faktoren und Details ist, die einzeln vielleicht auf den ersten Blick unbedeutend erscheinen mögen.

Ein Projekt von

Fachgruppe

Sonstiges

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2012

zusätzliches Material