Copyright

©Galina Emelina

Aufgabe

Gestalte eine digitale Fassung Deines Lieblingsbuches. Das Buch kann ein Roman, ein Sach-, Koch- oder Fachbuch, oder auch ein Gedichtband sein. 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.

Umsetzung

Dieses Projekt entstand in Teamarbeit mit Simone Sollmann. Wir entschieden uns für das Photographie-Lernbuch “Digitale Fotopraxis” von Jaqueline Esen. Es besteht aus vielen Tips und Tricks zur digitalen Fotopraxis uns ist inhaltlich in drei Bereiche unterteilt. Zunächst überlegten wir uns, welche zusätzlichen Funktionen für ein E-book sinnvoll wären.. Wir skizierten unter anderem eine Bookmarking-Ansicht, in der es möglich ist, seine Lieblings-Kapitel in einer Liste als Schnellabruf zu speichern. Die größte Herausforderung bestand darin, die kleinen Screens einfach und klar zu gestalten, ohne die Lesbarkeit zu verlieren. Nach der Vorstellung der ersten Prototypen bekamen wir das Feedback, die formalen Mittel zu reduzieren, um visuelle Unruhe zu vermeiden. Das Ergebnis ist sehr “clean” und minimalistisch geworden und enthält nur ein paar wichtige Features, wie zum Beispiel die Verweise auf inhaltlich ähnliche Themen am Ende eines Kapitels und ist insgesamt sehr einfach und intuitiv zu bedienen.

Aufgabe

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. Ergebnis

Umsetzung

Brainflower ist eine Brainstorming-App, die von mehreren Nutzern zeitgleich oder zeitversetzt innerhalb eines bestimmten Zeitrahmens genutzt werden kann. Jeder Nutzer kann eine neue Brainstorming-Runde eröffnen, indem er eine Frage generiert, zu der gebrainstormt werden soll und die gewünschten Personen, die daran teilnehmen sollen, zum Mitmachen einlädt. Er/Sie legt den Zeitrahmen über die Länge des Brainstormings fest, welches bis zu mehreren Tagen gehen kann. Nach der Startseite öffnet sich eine Liste aller aktuellen Brainstorming-Runden, die der Nutzer entweder selbst angelegt hat oder zu denen er eingeladen wurde. Zu jeder Hauptfrage gibt es spezielle Unterfragen, die mit der Formel “How to ..” anfangen:

Copyright

©Galina Emelina

Der Nutzer kann somit bei offenen Brainstormings (zum Beispiel “How might we save the rainforest”) die bestehenden Unterfragen aufmachen (Beispiel:”How 2 use less tropical wood” ) und seine Ideen eingeben (Bild 2). Wenn ein anderer Teilnehmer eine neue Eingabe getätigt hat, erscheint das Icon dieses Brainstormings mit einem Für erhellten Punkt in der rechten oberen Ecke (Bild 3). Wenn man eine Unterfrage aufmacht, sieht man sogleich, welche Ideen in Form von schon hinzugefügt wurden. Jeder Teilnehmer hat eine andere Farbe, und auf der Zeichenfläche kann man hinein- und hinauszoomen, so ist eine schier endlose Fläche für das Brainstorming vorhanden. Bei Doppelklick auf das Post-It lässt sich eine detailliertere Beschreibung der Idee hinzufügen (Bild 7). In der rechten oberen Ecke wird durch eine Uhr angezeigt, wie viel Zeit insgesamt für das Brainstorming noch bleibt.

Aufgabe

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 diese Aufgabe wählte ich die 13-sekündige Soundspur eines Urlaubsvideos, das im Djungel von Nord-Thailand beim Besuch eines sogenannten “Hilltribe”-Volkes entstand. Mich reizte die Idee, ein Klangbild zu generieren, welches visuell völlig unabhängig von den im Video gezeigten Bildern war. Für die 11 verschiedenen Klangelemente, welche auf der rechten Seite in einer Legende beschrieben sind, wählte ich einfache graphische Entsprechungen und entschied mich dafür, die Farbtemperatur als Indikator dafür zu nehmen, wie nah ein Geräusch am Aufnahmegerät war. Je näher, desto wärmer, je weiter entfernt, desto kälter und durchsichtiger wurden die Farben. Die Größe des abgebildeten Elements entspricht der Lautstärke und die vertikale Anordnung der ungefähren Tonhöhe der Klänge.

Aufgabe

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

Für unsere Infographik wählten Peter Fröde und ich das Thema “Milchherstellung” und entschieden uns dafür, die gröbsten Schritte dieses Prozesses von der Kuh auf der Weide bis zum Endkunden, der die abgepackte Milch im Supermarkt kauft, abzubilden. Die Herausforderung bestand darin, die wichtigsten Schritte auszuwählen und keine allzu großen inhaltlichen Sprünge zu machen, damit der relativ komplexe Prozess der Milchherstellung inklusive Pasteurisierung und Logistik ohne Worte verständlich dargestellt werden konnte. Für die Dokumentation habe ich dieses Thema noch einmal überarbeitet und mich dabei bemüht, durch die Verwendung von Piktogrammen visuell kohärenter zu sein als bei der ersten Ausführung.

Für mich bedeutete dieser Kurs den Einstieg in das Thema Interface-Design und war daher sehr lehrreich. Von der ersten bis zu letzten Aufgabe konnte ich mein Verständnis für die spezifischen Fragestellungen dieses Bereichs schulen, wie etwa die pixelgenaue Gestaltung kleiner Screens, was Usability in diesem Kontext bedeutet und wie sie erreicht werden kann. Auch die Interaktion mit den anderen Kursteilnehmern sowie das ehrliche und konstruktive Feedback des Dozenten haben mir seht gut gefallen.