Aufgabenstellung

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.

Konzeption und Entwurf

Als Grundlage für die Bearbeitung der Aufgabe wählte ich ein Buch von Horst Evers mit dem Titel „Wedding“. In diesem Buch wird in kleinen Geschichten das Leben des Horst Evers im Berliner Stadtbezirk Wedding erzählt.

Ich konzentrierte mich bei der Konzeption des digitalen Buches zunächst auf das große Display. Hier für entwickelte ich eine Navigation, die sich auf die Kapitelstruktur des Buches bezog. Diese ist in Haupt- und Unterkapitel eingeteilt also legte ich zunächst am unteren Rand des Bildschirms eine horizontale Menüleiste für die Hauptkapitel an. Diese lässt man durch ein kleines Fenster in der linken unteren Ecke des Bildschirms scrollen und es entklappt sich darüber ein vertikales Menü für die jeweiligen Unterkapitel des momentan sich im Fenster befindenden Hauptkapitels. Die Idee dabei war, dass man sich durch horizontales Scrollen ein Hauptkapitel auswählt und durch vertikales Scrollen ein Unterkapitel. Um die Navigation noch zu erweitern ergänzte ich selbige durch einen weiteren horizontalen Scrollbalken, mit dem man sich seitenweise durch das Buch navigiert. Dabei wird durch die Größe und Position des Scrollbuttons dem Nutzer vermittelt an welcher Stelle des Buches er sich befindet und wieviele Seiten er noch vor- bzw. schon hinter sich hat. Um letzteres noch zu präzisieren werden links und rechts neben dem Balken die aktuellen Seitenzahlen angezeigt. Da es wichtig ist, dass man beim Lesen eines Buches auch mal eine Pause machen kann, ist es von Notwendigkeit dem Nutzer eine Lesezeichen-Funktion zur Verfügung zu stellen. Diese findet sich in der oberen linken Ecke des Bildschirms. Bei der Auswahl der Schrift entschied ich mich für die Delicious. Dies ist ein serifenloser Font, der sich meines Erachtens durch gute Lesbarkeit und eine unaufdringliche Schlichtheit auszeichnet. Die Gestaltung des gesamten Screens sollte sehr schlicht und neutral wirken. Ich bezog mich bewusst nicht auf den Kontext des Buches, da der Screen universell für alle Arten von Büchern verwendbar sein sollte. Alles ist in Grautönen gehalten, wobei der Text als einziges Element in schwarz auftritt, denn dieser sollte in den Fokus des Benutzers gerückt und die Navigation möglichst im Hintergrund gehalten werden. Die Navigationsleiste sollte beim Lesen nicht ablenken oder stören, daher auch die Entscheidung, selbige an den unteren Bildrand zu positionieren. So sollte der Weißraum nach oben hin offen gehalten werden, was dem Layout mehr Leichtigkeit verleihen sollte. Die Konzeption der kleinen Displays orientierte sich nun an dem Entwurf für die großen Screens. Ich entwarf drei Oberflächen für die Zustände Lesen, Kapitelauswahl und Lesezeichen setzen. Der Screen für Lesen sah nun aufgrund des veränderten Größen- und Seitenverhältnisses der Screens etwas anders aus. Der Scrollbalken für die seitenweise Navigation befindet sich hier am rechten Rand des Bildschirms und ist vertikal. Darüber in der rechten oberen Ecke wird die aktuelle Seitenzahl angezeigt. Um in den Kapiteln zu blättern oder ein Lesezeichen zu setzen muss man eine der beiden Buttons am unteren Bildrand benutzen. In der Kapitelauswahl wird einem am oberen Bildrand das aktuelle Hauptkapitel angezeigt und darunter die dazugehörigen Unterkapitel. Mit Hilfe der am rechten rand befindlichen Scrollbar kann man sich durch die Kapitel blättern. Möchte man ein Lesezeichen setzen so bedient man den Button in der rechten unteren Ecke im Kapitel- oder Lesen-Menü. Betätigt man ihn einmal so wird ein Lesezeichen gesetzt. Bei schnellem zweimaligen anklicken wird das Lesezeichen-Menü geöffnet, in dem man seine bisherigen Lesezeichen sichten kann oder durch daraufklicken auswählen kann.

Ergebnis

Die Präsentation und Besprechung des ersten Entwurfs zeigte zunächst, dass es doch einen erheblichen Unterschied macht, ob man einen Screen in einem vektorbasierten Programm entwirft oder in einem pixelbasierten. Im weiteren wurde der Entwurf des großen Displays teilweise deutlich umgestellt. So wanderte die Navigationsleiste nun doch an den oberen Bildrand, da sich die erdachte Kapitelstruktur, die durch die Navigationsleiste verdeutlicht werden sollte, in der ursprünglichen Form dem Nutzer nicht erschloss, sondern eher für Verwirrung sorgte. somit wurde das gesamte Menülayout auf den Kopf umgedreht. In der linken unteren Ecke gibt es nun den Lesezeichen-Button und darüber ein neues Fensterchen, dass einem die Seiten des ausgewählten Kapitels in Miniaturen anzeigt und gleichzeitig die aufgeschlagenen hervorhebt. Neu sind auch die Lesezeichen-Miniaturen oberhalb des Textblocks, die sich beim berühren öffnen und die Seitenzahl ihrer Position anzeigen. Das gesamte Erscheinungsbild des Screens wurde noch einmal stark reduziert und die Scrollbar für die Seitennavigation entfernt, da ihr Zweck dem Nutzer nicht deutlich wurde und verwirrte. Dementsprechend wurden auch die kleinen Screens dem neuen Design angepasst und die Navigation in den Lesen- und Kapitel-Menüs ebenfalls verfeinert. Im Kapitel-Menü wurden die Unterkapitel etwas eingerückt um den Unterscheidung zu den Hauptkapitels zu verdeutlichen. Das Lesen-Menü wurde um eine neue Scrollbar erweitert, die in die einzelnen Seiten des aktuellen Kapitels unterteilt ist.

zusammen mit Fabian Frischmann

Aufgabenstellung

Das Instrument soll folgende Möglichkeiten des musikalischen Ausdrucks bieten: Rhythmus, Tonhöhe, Tonlänge, Ausdrucksformen (Legato, Vibrato, Stakkato, etc.) Die abgespeicherten musikalischen Strukturen und Melodien sollen sichtbar und nachvollziehbar dargestellt werden und entsprechende Schnittstellen für das Abspielen der Musik angeboten werden.

Konzeption und Idee

Wir bauten zunächst aus LEGO-Steinen mehrere Treppen mit 8 Stufen. Diese 8 Stufen stehen für die 8 Töne einer Tonleiter, das heißt einer Oktave. Die unterste Stufe bildet den tiefsten, die oberste den höchsten Ton. Es gibt vier verschieden farbige Treppen, die immer für eine viertel Note stehen. Steckt man also vier aneinander, so hat man eine ganze Note Man kann nun mehrere Treppen aneinander stecken und so eine Abfolge von Tönen arrangieren. Diese Töne lassen sich dann mit Hilfe von Knetstreifen variieren und modulieren indem man diese auf diejenige Stufe einer Treppe legt, die der Höhe des gewünschten Tones entspricht. Um die Länge des Tones zu bestimmen breitet man den Knetstreifen der gewünschten Tonlänge entsprechend über die farbigen Abschnitte auf der zuvor gewählten Stufe aus. Will man eine ganze Note erzeugen, so breitet man den Streifen über alle 4 Abschnitte aus. Soll es eine halbe Note werden, so deckt man nur die ersten zwei Abschnitte ab. Drückt man einen Streifen an seinem Ende ab wird ein Legato gespielt. Auch ein Vibrato lässt sich erzeugen durch mehrmaliges Eindrücken entlang des Streifens. Ein Staccato baut man durch dichte Aneinanderreihung mehrerer kleiner Knetbälle. Um eine ganze Sequenz bzw. Melodie bauen zu können muss man der Länge und Anzahl der Töne entsprechend viele Treppen aneinander stecken.

Ergebnis

Das grundsätzliche Konzept des Sequenzers konnte sich bei der Besprechung behaupten und wurde im Wesentlichen so beibehalten. Es wurde aber auch festgestellt, das die Freiheiten, die einem die Bedienoberfläche gewährt, auch zu noch nicht erforschten Ergebnissen führen kann. So stellt sich die Frage was passiert, wenn man die Knete wild über die Stufen verteilt ohne sich an die Regeln zu halten (siehe 2. Bild in der Diashow). Man muss sich also bei der Entwicklung solch eines oder ähnlicher Interfaces stets die Frage vor Augen halten, welche Möglichkeiten der Interaktion diese Oberfläche zulässt und ob man diese auch beantworten kann.

zusammen mit Inka Plöger

Aufgabenstellung

Es soll eine akustische Begebenheit 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 Bildschirm-orientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.

Konzeption und Idee

Für das Klangbild suchten wir uns zunächst einen geeigneten Track, welchen wir glaubten am besten zu visualisieren zu können. Dabei entschieden wir uns erstmal für zwei Stücke von Paul Kalkbrenner, einem berliner Techno-Produzenten, die da heißen „Azure“ und „Square 1“. Beide Stücke hörten wir uns nun an und entwickelten erste Ideen und Skizzen dazu bis wir letztendlich zu dem Schluss kamen, dass das Stück „Azure“ für unser Klangbild am besten geeignet war. Um die Aufgabe im zeitlich vorgegebenen Rahmen bearbeiten zu können, kürzten wir das Stück auf etwas mehr als eine Minute. Anfang und Ende schnitten wir weg und konzentrierten uns somit auf den Mittelteil des Tracks, da hier die meisten musikalischen Elemente auftauchten, auf die wir in unserem Klangbild eingehen konnten. Anhand von weiteren Skizzen beschäftigten wir uns nun intensiver mit der Musik und es entstanden erste konkrete Ideen, wie das Klangbild aussehen könnte. Diese Ideen waren zum einen, das Klangbild anhand von Fraktalen aufzubauen und zum anderen wurden freie Skizzen angefertigt, in denen die verschiedenen Elemente der Musik in unterschiedliche grafische Elemente aufgeteilt und auf eine Art visuellen Klangteppich gemäß des musikalischen Ablaufs positioniert wurden. Aus diesen Skizzen entstand nach einer ersten Vorpräsentation die Idee, ein Modell zu bauen, dass sich an diesen Skizzen orientiert. Dieses Modell ist von der Grundkonstruktion wie ein Fächer aufgebaut, dessen Schirm sich wellenförmig über die Streben zieht. Diese Wellen sollen den wabernden Grundton im Hintergrund darstellen, auf dem sich dann die Melodie und alle anderen auftretenden Elemente aufbauen. Dieser Grundton bildet den Boden für den Rest des Stückes. Auf diesem Schirm positionierten wir weitere Elemente für die Melodie und so weiter in Abhängigkeit der zeitlichen Reihenfolge.

Ergebnis

Das schlussendlich entstandene Modell hatte jedoch nichts mehr mit dem ausgewählten Stück zu tun und sah zu dem zu sehr gebastelt aus. Der synthetische Charakter und die Geradlinigkeit des Liedes konnte in dem Modell nicht transportiert werden, da es dafür viel zu ungleichmäßig und unförmig aussah. Aufgrund dessen waren wir mit dem Endergebnis mehr als unzufrieden und dies zeigte sich auch in der Abschlusspräsentation.

Copyright

©Hermann Dettmann

Leider gibt es kein Foto von dem Modell mehr.

zusammen mit David Junge

Aufgabenstellung

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.

Konzeption und Idee

Als Basis für diese Aufgabe entschieden wir uns nach einigem Suchen für den russisch-ukrainischen Gaskonflikt als Thema welches wir nur anhand von Bildern erklären wollten. Wir wollten mit Hilfe eines kleinen Filmes die grundlegende Problematik des Konfliktes darstellen und damit einen allgemeine Überblick über diese Thema geben. Die Idee bestand nun darin, das ganze auf einer abstrahierten Weltkarte zu erläutern und mit Hilfe von einfachen grafischen Elementen wie Pfeilen, Gas- und Dollarzeichen und abstrakten Menschen-Figuren zu visualisieren. Der Stil der Animation sollte sich an alter russischer Plakatkunst orientieren und einer einfachen und reduzierten Formensprache folgen. All dies sollte aus Pappe und Papier entstehen und dann per Stop-Motion animiert werden.

Ergebnis

Das finale Produkt war ein kleiner Film den wir mittels After Effects produzierten, wobei wir erste Schritte in diesem Programm machten, was man dem Film mehr oder weniger ansieht. Ungeachtet dessen kam das Konzept gut an aber die Umsetzung ließ zu wünschen übrig, da deutlich wurde, dass es besser gewesen wäre, wenn wir uns für den Weg der klassischen Stop-Motion-Animation entschieden hätten, denn mit After Effects lässt sich diese Technik nicht hinreichen nachahmen und das Ergebnis wirkt unfertig und künstlich.