Aufgabe

Es soll eine digitale Fassung Ihres Lieblingsbuches gestaltet werden. 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 mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln (XGA) und mindestens zwei vertikale Screens im Format von 240x320 Pixeln (QVGA).
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.

Bearbeitung

In Zusammenarbeit mit Bela Kurek.

Für die Bearbeitung der Aufgabe hatten wir ein altes französisches Kochbuch ausgewählt. Neben der Übersetzung ins Deutsche ergaben sich die zentralen Problematiken der Übersetzung vom altertümlichen Stil und der Fließtextformulierung der Rezepte hinzu einem überschaubaren Konzept, das die Herkunft der Rezepte visuell reflektiert.

Zunächst galt es, das Kochbuch in seine wesentlichen Komponenten zu unterteilen. Die oberste strukturelle Ebene - nämlich die Rezeptübersicht - konnten wir eins zu eins aus dem Buch übernehmen. Tiefergehend mussten wir den Fließtext dekonstruieren, um zwischen Rezept und „Unterrezept“ unterscheiden zu können. Da in den Rezepten u. a. beschrieben wurde, wie Mayonnaise herzustellen war, hielten wir es für sinnvoll, das eigentliche Rezept an die moderne Haushaltsausstattung anzupassen. Die „Unterrezepte“ können in Form von Pop-Ups angeguckt werden. Zudem filterten wir alle Zutaten aus dem Fließtext heraus, um schneller abzusehen, was man zum Kochen braucht.

Im Zentrum der digitalen Fassung steht also, wie auch im Buch, das Rezept mit einer extra Seitenleiste für die Zutaten, um den Überblick über seine Lebensmittel zu behalten. Sobald man einen Schritt des Rezeptes erledigt hat, verblasst der Abschnitt und der Pfeil rückt zum nächsten Schritt. Die markierten Begriffe verbergen Pop-Up-Fenster, die die Bedeutung oder Herstellung erklären. Als Einschub von der linken Seite kann im Menüfenster zwischen den verschiedenen Rezepten und Rezeptgruppen navigieren.

Ähnlich wie im großen Screen, hat die Version für den kleinen Screen auch eine Menü-Rezept-„Unterrezept“-Struktur. Das zentrale Fenster ist wieder die Rezeptansicht, die nun zwei Seiten für die Parallelschaltung von Rezept und Zutaten hat.

Mit Serifenschriften soll der erzählerische Stil der Rezepte betont werden. Die monochromatische Einbringung von Burgunder-Rot soll an die traditionelle Cuisine-Kultur erinnern. So birgt die Digitalfassung des Kochbuches Eigenschaften einer Speisekarte in einem französischen Restaurant.

Retrospektive

Die Aufgabe „Digitales Buch“ eignete sich gut zur Einführung. Die anfänglichen Gedanken an die Simplistik der Aufgabe verschwanden schnell, als man mit der Aufgabe der Restrukturierung von Informationen konfrontiert wurde.

Aufgabe

Es soll eine akustische Begebenheit (Gespräch, Klangaufzeichnung, Filmausschnitt, Musik, etc.) 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. Die akustische Begebenheit soll aufgezeichnet und auch präsentiert werden und darf nicht länger sein als eine Minute.

Bearbeitung

Einzelarbeit.

Für die Bearbeitung dieser Aufgabe habe ich einen 3D-Druck des Makerbot Replikator 2 aufgenommen und analysiert. Grundsätzlich war in der Aufnahme zwischen Vordergrund- und Hintergrundgeräuschen zu unterscheiden. Der Vordergrund wurde von einem schrillen, kontinuierlichen Quietschen beherrscht in Begleitung von gelegentlichen Knack-Geräuschen. Der Hintergrund bestand aus einem Staubsauger ähnlichem Rauschen, das nicht weiter zu differenzieren war und scheinbar alle möglichen anderen Hintergrundgeräusche verschluckt hatte.

Ich entschied mich für eine bildliche Darstellung (PNG) mit einer von links nach rechts gehenden Zeitachse.

Das hervorstechende Quietsch-Geräusch hatte insgesamt zwei klar herauszuhörende Tempi, deren Übergang etwas vor der Hälfte der Zeit liegt. Zudem wurde der Ton des Geräusche regelmäßig höher und tiefer. Der Schatten des Geräusches war dagegen greller und monoton.

Die hauptsächliche Schwierigkeit lag in der Nuancierung von Lautstärken der einzelnen Komponenten. Im Bild galt also je intensiver die Farbe, desto lauter das Geräusch. Die andere Seite der Nuancierung war die des Frequenz Filterns. Viele Geräusche hatten den Anschein eines Low Pass Filters an ihnen, was heißt, dass die höheren Frequenzen eines Geräusches abgeschnitten werden und man nur die tieferen hört. Dies habe ich in Blautönen ins Bild integriert und so ergab sich im Hintergrund in Verbindung mit den Grautönen der Lautstärke des Rauschens eine Metalloptik. Die Wellenformen des Körpers an Ober- und Unterkante zeigen die Gesamtlautstärke an.

Retrospektive

Diese Aufgabe fördert auf jeden Fall observatorische und analytische Eigenschaften, fordert aber auch etwas Geduld und Beharrlichkeit. Im Kontext von Interfacedesign wird man hier mit der Gewichtung von Informationen konfrontiert. Man lernt, Kontext zu schaffen, zu dem man Informationen in Beziehung setzen kann.

Aufgabe

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 und Entwürfen unterstützen. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden.
Die Applikation kann unter Umständen über das technisch Machbare hi- nausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr.
Das Ziel ist, einen guideline-konformen und gleichzeitig individuellen Entwurf zu erarbeiten. Zielplattform is iOS oder Android Material.
Es soll die standardisierte UI-Elemente eingesetzt werden - das App soll aber auch eine eigene Note bekommen. Die Entwürfe sollen 375 x 667 PIxel groß sein (für den Entwurf setze ich Punkt=Pixel). Zusätzlich zur GUI soll ein Programmablaufplan (Bewegungspfade durch die App) skizziert werden.
Die Aufgabe soll in Zweierteams bearbeitet werden.

Bearbeitung

In Zusammenarbeit mit Laura Pau Bielsa.

Im Rahmen der Aufgabe haben wir uns die Frage gestellt, was Brainstorming eigentlich ist, um die für uns relevanten elementaren Eigenschaften herauszufiltern.

Das klassische Brainstorming dient der Ideenfindung und Produktivitätsförderung innerhalb einer Gruppe und ist meist zielgerichtet. Es beginnt mit einer kreativen Phase, in der alles richtig ist und es keine schlechten Ideen gibt - dem Brainstorming - wonach eine Evaluierungsphase kommt, die auf Basis der in der ersten Phase entstandenen Informationen den Kontext des Projektes hergibt und gute von schlechten Ideen unterscheidet. Vielleicht wird in dieser Phase noch das ein oder andere hinzugefügt. Dann folgt meist die Endphase, in der man zu einer gemeinsamen Entscheidung kommen soll.

Unsere Idee war, die reine Ideenfindungsphase des Brainstormings mit einer Social Networking Komponente, wie etwa bei Pinterest oder tumblr, zu kombinieren. Man hätte zwar kein konkretes Ergebnis, aber dafür eine stetig wachsende Sammlung von Ideen und Gedanken. Es ist eine Mischung aus Brainstorming und kollektivem Mindmapping, das dazu einlädt selbst etwas zu einer Idee beizusteuern.

Braincloud formiert sich um den Feed eines Users, der gefüllt ist mit Ideen, denen der User folgt. So wird er mit den neusten Gedanken zu diesen Ideen versorgt. Man kann auch selber Ideen aufmachen, zu denen andere User Informationen in Form von Text, Bildern, Links, etc. hinzufügen können. So wird jede Idee zum eigenen Netzwerk. Alles, was dort eingetragen wird, ist jedoch selbstverständlich kein Fakt und kann angezweifelt und in Form von Kommentaren diskutiert werden. Überwacht werden die Ideennetze von ihren Gründern. Außerdem kann jeder User über die Optik, in der eine Idee erscheint, entscheiden, indem er die Style-Einstellungen verändert. Die Nutzung der App würde über bestehende Social Media Accounts laufen.

Retrospektive

GUIs sind womöglich das, was man am meisten mit Interfacedesign verbindet. Ihre Komplexität macht es schwierig den richtigen Zugang zu finden. Man konnte in dieser Aufgabe in jedem Fall einen Einblick in die Welt der App-Gestaltung bekommen. Die Konfrontation mit Style Guides ist unumgänglich und somit ein notwendiger Teil der Aufgabe.

Was ich gelernt habe, ist, dass GUIs sehr kompliziert sind. Wir wussten am Anfang nicht, wo wir anfangen sollten. Aber vielleicht haben gerade weil wir ins kalte Wasser geworfen wurden so viele Lehren daraus ziehen können. Nichts desto trotz hätte ich mir eine theoretische Ein- und Herleitung gewünscht, um etwa die Style Guiides besser nachvollziehen zu können. Diese Aufgabe lässt sich zudem gut in Konzept und Prototyping unterteilen. So würde man die Komponenten und Verbindungen besser verstehen lernen.

Aufgabe

Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild 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 es 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.

Bearbeitung

Einzelarbeit.

Ich habe mir für den komplexen Sachverhalt einen Auszug aus Italo Calvino's „Invisible Cities“ ausgesucht.

Das Buch handelt davon, wie Marco Polo dem mongolischen Herrscher Kublai Khan Städte aus seiner Heimat, Italien, beschreibt. Kublai Khan betont immer wieder, dass er ihm nicht glaubt, hört jedoch mit wachsender Aufmerksamkeit weiter zu. Dabei ist Marco Polos einzige Lüge, dass es nicht mehrere Städte sind, von denen er erzählt, sondern nur eine - Venedig.

Ich habe die Kurzgeschichte Octavia ausgewählt:

„ Now I will tell how Octavia, the spider-web city, is made. There is a precipice between two steep mountains: the city is over the void, bound to the two crests with ropes and chains and catwalks. You walk on the little wooden ties, careful not to set your foot in the open spaces, or you cling to the hempen strands. Below there is nothing for hundreds and hundreds of feet: a few clouds glide past; farther down you can glimpse the chasm’s bed. This is the foundation of the city: a net which serves as passage and as support. All the rest, instead of rising up, is hung below: rope ladders, hammocks, houses made like sacks, clothes hangers, terraces like gondolas, skins of water, gas jets, spits, baskets on strings, dumb-waiters, showers, trapezes and rings for children’s games, cable cars, chandeliers, pots with trailing plants. Suspended over the abyss, the life of Octavia’s inhabitants is less uncertain than in other cities. They know the net will last only so long. “

—Marco Polo, Invisible Cities

Zunächst habe ich alle Begriffe, die Gegenstände beschreiben, herausgesucht und versucht, jedem einzelnen ein Gesicht zu geben. So konnte ich mir besser vorstellen, woraus diese Stadt, die Marco Polo beschreibt besteht. Meine erste Idee war illustrativ geprägt, in derer ich das Leben in dieser Stadt visuell erfassen wollte. Dafür war es notwendig, zwischen den Zeilen zu lesen und in die wenigen Worte hinein zu interpretieren.

Die wohl stärkste Symbolik einer schwebenden Stadt ist das natürliche Gefälle - der Trickle-Down-Effekt, wenn man so will. Demnach leben die Reichen oben und die Armen unten. Auf Basis dieser Regel kann das gesamte Versorgungsnetz aufgebaut sein. Was sich genauer übertragen lässt sind die Verankerungen auf denen die Stadt gebaut ist. Sie kommen letztlich alle von den Bergen an den Seiten.

Da die Essenz von Octavia darin liegt, dass die Stadt hängt, brauchte ich eine physische Repräsentation davon, wie Schwerkraft funktioniert. Dazu habe ich mit Pin-Nadeln Fäden an einer Pinwand befestigt, um die Idee der hängenden Stadt zu manifestieren.

Schnell wurde mir bewusst, dass die Dinge, über die ich mir Gedanken machte, weniger illustrative Aspekte und mehr stadtplanerische hatten. So entschloss ich mich, einen Stadtplan für Octavia zu machen - einen Stadtplan im Profil.

In Braun ist der Wohnraum eingezeichnet. Beige sind die Wege dazwischen. Die schwarzen Linien zeigen die Ankerseile und -ketten an, an denen die Stadt hängt. In Dunkelbraun-, bzw. grau sind in der Horizontale die Schwebebahnlinien („cable cars“) und in der Vertikale die Fahrstühle („dumbwaiters“) eingezeichnet. Die Kreise und Rechtecke symbolisieren Stationen auf diesen Linien. In Blau sind, Wasserkanäle zu sehen, wobei hier die Kreise Wasserspeicher anzeigen. Weiter unten sind in Hellbraun „inoffizielle Wege“ eingezeichet. Man sieht in der Gesamtversorgung deutlich den Trickle-Down-Effekt. Nur die Wassertanks stechen heraus. Sie sind scheinbar gleichmäßig verteilt, bzw. es sind unten mehr. Die oberen Klassen können sich auf den ständigen Zufluss verlassen, während die unteren das wenige Wasser, das ankommt, rationieren müssen.

Retrospektive

Diese Einzelarbeit konzentriert stark auf visuelle Übersetzungsfähigkeiten. Hier muss man ein eigenes System schaffen, in dem sich der darzustellende Sachverhalt wiederspiegeln soll. Mir gefielen hier die kognitiven Aspekte der Darstellung. In jeder Feedback-Runde bekam man mit, was andere im eigenen Entwurf sahen, unabhängig davon was er bedeuten soll. Hier wurde mir die Finesse von Interfacedesign bewusst, in der die kompliziertesten Dinge auf einfachste Weise reduziert und verständlich gemacht werden können. Diese Aufgabe hat meiner Meinung nach viele Gemeinsamkeiten und Überschneidungsmöglichkeiten mit der „Digitales Buch“ Aufgabe.