Aufgabe

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 wichtigen Kriterien bei der Bearbeitung der Aufgabe.

Die Aufgabe soll in Zweierteams bearbeitet werden.

Umsetzung

Das digitale Buch entstand in Zusammenarbeit mit meinem Kommilitonen [Henrik Hagedorn](http://incom.org/profil/4013 „Henrik Hagedorn“). 
Auf der Suche nach einer geeigneten Buchvorlage stießen wir auf »Janosch erzählt Grimms Märchen«. Dazu der Klappentext: »Janosch erzählt die Märchen der Brüder Grimm neu und oft ganz anders. Er fabuliert ungeniert und spart nicht mit lustigen Pointen. Einfallsreich und listig erzählt er [...] wie das eigentlich war mit des Teufels drei goldenen Haaren. Das Lumpengesindel ärgert den Taxifahrer [...] und Hans mein Igel wird zum gefeierten Medienstar.« Diese Neuinterpretation der Grimm-Märchen, kombiniert mit dem großen Charme der farbenfrohen Illustrationen Janoschs, erschienen uns ideal für eine digitale Umsetzung weil es sowohl grafische als auch typografische Schwerpunkte setzt. 
In unserer Umsetzung konzentrierten wir uns deshalb darauf den Charme der Buchvorlage zu bewahren und sie um ein simples digitales Bedienkonzept bei guter Lesbarkeit zu erweitern.

Der große Screen


Auf dem Startscreen kann der Nutzer durch horizontales Wischen durch die Märchen navigieren. Wir legen also eine Touch-Bedienung zugrunde.


Innerhalb eines Märchens selbst wird ebenfalls durch horizontales Wischen durch die Erzählung navigiert. Zusätzlich haben wir auf der linken Seite eine vertikal scrollbare Navigation eingebaut die eine direkte Anwahl der Märchen erlaubt.
Typografisch entschieden wir uns für die Aniuk als Headline-Schrift. Die Aniuk hat einen ausgeprägt organischen Charakter, sie wirkt fast wie Lettering. Der gewählte Bold-Schnitt unterstreicht das weiter. Die Aniuk geht gut mit der Illustration zusammen. Für den Mengentext wählten wir die Fontin Sans im Regular-Schnitt, die den weichen, organischen Charakter der Aniuk fortführt aber in kleineren Schriftgraden sehr viel besser lesbar ist. Um die Lesbarkeit weiter zu fördern begrenzten wir außerdem die Zeilenlänge auf ca. 45 Zeichen und brachen dafür den Text in Spalten um.

Der kleine Screen

Der kleine Screen war eine Herausforderung, weil die Illustrationen Janoschs sehr von einem großen Format profitieren.


Um Platz zu sparen verzichteten wir auf das Lettering-Logo »Janosch erzählt Grimms Märchen« und verkürzten es auf den Schriftzug »Grimms Märchen«. Verhältnismäßig große, panoramaartige Thumbnails dienen als Navigation durch die Märchen. Das angewählte Thumbnail ist höher als die übrigen. Der Nutzer navigiert durch vertikales wischen auf dem Touchscreen.

Innerhalb der einzelnen Erzählungen navigiert der Leser ebenfalls durch vertikales wischen durch den Text. Wird der obere Teil des Touchscreens berührt klappt zudem ein Backlink zum Inhaltsverzeichnis auf.
Wichtig war uns auch hier die Illustrationen so groß wie möglich in den Textfluss einzubauen, ohne diesen jedoch zu unterbrechen. Typografisch haben wir uns auf Grund der kleinen Auflösung auf die Fontin Sans beschränkt, die hier auch als Headlineschrift eingesetzt wird.

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.

Umsetzung

In meiner App IdeaDrill gräbt man sich immer weiter in seine Idee ein. Man beginnt mit einer Startidee (1 Wort) und bekommt dazu automatische Vorschläge aus dem Internet. Diese Vorschläge können selektiert werden und man erhält wieder neue Vorschläge die wieder ausgewählt werden können usw. . So bohrt man sich immer tiefer in seine Idee ein. Am Ende erhält man eine Liste all seiner Ideen.

Gestartet wird in einer Listenansicht in der man neue Projekte anlegen kann. Zum eröffnen eines Projektes muss man seine Startidee eintragen. Danach erscheint das Hauptinterface, wobei die Blase in der Mitte die eigene Idee erhält. Rings um die Idee reihen sich Vorschläge aus dem Internet.

Gestartet wird in einer Listenansicht in der man neue Projekte anlegen kann. Zum eröffnen eines Projektes muss man nur seine Startidee eintragen. Danach erscheint das Hauptinterface, wobei die Blase in der Mitte die eigene Idee enthält. Rings um die Idee reihen sich Vorschläge aus dem Internet.

Durch Tippen auf einen Vorschlag rück dieser in die Mitte und es erscheinen neue Ideen zum eben gewählten Vorschlag. Über die an den Seiten befindlichen Halbkreise navigiert man durch das Programm.

Für spontane eigene Einfälle steht die „+“ Blase zur Verfügung.

Findet man einen Vorschlag interessant, möchte aber keinen weiteren Vorschläge aus dem Internet dazu generieren, kann die entsprechende Blase angefasst und nach außen gezogen werden. Dadurch ist diese Blase markiert und erscheint später in der Zusammenfassung.

Über die Zwei Finger Zoom Geste erhält man einen Übersichtsansicht.

Ist man dann mit den gesammelten Ideen zufrieden gelangt man über den „List“ Tab zur Zusammenfassung in der alle ausgewählten und markierten Ideen aufgelistet sind. Diese können dann sofort weitergeteilt werden.

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

Als Tongrundlage wählte ich eine Aufnahme von einem mexikanischen Markt, da diese zahlreiche verschiedene Geräusche und eine gute Tiefenstaffelung bot.

Für die Visualisierung habe ich die einzelnen Geräusche extrahiert und dann linear auf dem Zeitstrahl abgetragen. Je lauter ein Geräusch ist umso dunkler ist das jeweilige für das Geräusch stehende Symbol. Und je näher sich das jeweilige Geräusch zum Aufnahmegerät befand, umso tiefer liegt es auf den Zeitstrahl. So könnte ich auch Bewegungen im Soundfile sichtbar machen.

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

Die 1000 Worte Aufgabe entstand in Zusammenarbeit mit meinem Kommilitonen [Philipp Steinacher](http://incom.org/profil/4653 „Philipp Steinacher“).

Wir haben uns damit beschäftigt, wie man den CO2-Ausstoß in verschiedenen Bau- und Betriebsschritten von Solaranlagen und Windkrafträdern vergleichend darstellen kann.

Unsere Visualisierung stellt nun die unterschiedlichen Bauzustände dar und zeigt an wie viel CO2 für den jeweiligen Schritt benötigt wurde. Abschließsend ist auch noch einmal eine Übersicht über die gesamte Masse des Austoßes abgebildet.

Ein super Kurs!

Vor allem die konstruktiven Feedbackrunden und die ganz verschieden Themen machen den Kurs besonders lehrreich.