Die Erste Aufgabe bestand darin gemeinsam in zufällig gewählten Teams von 2 Studenten ein Buch unserer Wahl in eine digitale Form zu bringen. Das Hauptaugenmerk lag hierbei auf dem Navigationskonzept, welches sowohl auf großen Bildschirmen, wie auch auf kleineren Endgeräten funktionieren sollte.

›Lesbarkeit und Klarheit der Darstellung sind die wichtigsten Kriterien bei der Bearbeitung der Aufgabe.‹

Bei dieser Aufgabe arbeitete ich gemeinsam mit meinem Kommilitonen Sebastian Wloch.

Copyright

©Christian Münch

Sebastian und ich einigten uns recht schnell darauf ein Buch ohne grafische Elemente zu wählen und außschliesslich mit Text zu arbeiten. Beim Heimweg am Potsdamer-Hauptbahnhof fiel mein Blick auf den Ständer mit den Reclam Heften. So kam es dazu, dass wir es uns zur Aufgabe machten für ›Macbeth‹ von William Shakespear eine digitale Ausgabe zu gestalten.

Copyright

©Christian Münch

Zuerst analysierten wir das Buch auf seine Inhalte und Besonderheiten. Wir stellten recht schnell fest, dass die Textform des Theatherstücks einige Eigenheiten mit sich bringt. So mussten nicht nur die Sprecher des jeweiligen Textstücks deutlich gekennzeichnet werden, sondern auch die Beschreibungen der Szenerie und Handlung der Charaktere mit im Text platziert werden. Die Struktur eines solchen Stückes in Akten und Szenen eignet sich allerdings ausgesprochen gut um eine übersichtliche digitale Navigation zu gestalten

Gemeinsam beschlossen wir uns die Arbeit klar aufzuteilen. Sebastian sollte an der Auflösung für Tablets (1024 x 768 Pixel - XGA) arbeiten, während ich mich um die für Smartphones (240x320 Pixel - QVGA) kümmerte.

Bei meiner Arbeit an der QVGA Auflösung erstellte ich zuerst ein simples Raster. Nach einigen Versuchen auf den wenigen Pixeln Navigationselemente zu platzieren, entschied ich mich für eine andere Lösung. Ich ordnete die Akt- und Szenenauswahl in einem Menü ein, auf welches der Nutzer jederzeit vom linken Bildschirmrand aus zugegreifen kann. So liegt der Fokus weiterhin auf dem eigentlichen Text des Stückes und das Menü bietet bei Bedarf genügend Platz für eine übersichtliche Navigation. Auf Seitenzahlen wurde vollständig verzichtet, dafür zeigt ein einfacher Scrollbalken die Position im Bezug auf die aktuell ausgewählte Szene.

Nachdem ich mit verschiedenen Schrifttypen experimentiert hatte, mich aber nicht so richtig entscheiden konnte, beliess ich es ganz klassich bei der ›Times New Roman‹ ohne Anti-Aliasing. Diese vereint zum einem das klassische (Serifen) mit dem technischen (Pixel Ästhetik) und ist obendrein auch noch in kleinen Auflösungen sehr gut lesbar.

Nach einigen Iterationen und viel Feedback von meinem Teampartner Sebastian, unseren Kommilitonen und Boris Müller hatten wir schlußendlich ein zufriedenstellendes Ergebniss. Dabei haben wir beide bewusst auf Farbigkeit und unnötige grafische Elemente verzichtet, um diesen Klassiker für sich selbst sprechen zu lassen.

Diese Aufageb vermittelte mir ein ganz neues Gefühl für Rastersysteme und Typografie, welches mir im weiteren Studiumsverlauf sicherlich weiterhelfen wird. Die Zusammenarbeit mit Sebastian war angenehm unkompliziert und ein guter Einstieg in den Kurs.

Bei der zweiten Aufgabe sollten wir eine App gestalten, welche Designer beim Prozess des Brainstorming unterstützen kann. Dabei ging es weniger um die technische Machbarkeit, als um die sinnvolle Gestaltung des User Interfaces im Rahmen der offiziellen Apple-Guidelines. Als Einschränkung sollten wir mit der Auflösung von Non-Retina Displays arbeiten.

Da ich mich beruflich bereits viel mit Projektmanagement und Mindmapping Software auseinander gesetzt habe, wollte ich mich einmal selbst an etwas ähnlichem versuchen. Ich habe bei verschiedensten Projekten immer wieder gemerkt, dass viele Teilaufgaben eines Projektes erst beim Niederschreiben oder Visualiseren des Gesamtprojektes bemerkt werden. So entsteht ganz natürlich eine art Baumstruktur (wie in vielen Mindmapping Tools) bei der sich Teilaufgaben in praktische ›Häppchen‹ herunterbrechen lassen.

Mit dem Arbeitstitel ›Sprout‹ (engl. spriessen) erstellte ich das Konzept für eine iOS-App mit der Nutzer möglichst unkompliziert Projekte in handhabbare Teilaufgaben herrunterbrechen können. Visuell orientierte ich mich dabei klar am Arbeitstitel und der Analogie der Baumstruktur. Bei Sprout wächst das Projekt mit seinen Aufgaben, wobei die unterschiedlichen Bereiche unabhängige Äste bilden. Die Äste bestehen ihrerseits aus Teilbereichen, die der Übersichtlichkeit halber in Haufen zusammengefasst werden. Wenn der Nutzer einen der Bereiche auswählt ordnen sich die Teilaufgaben neu an, um eine hohe Lesbarkeit zu gewährleisten.

Teilaufgaben die bereits fertiggestellt sind werden bei Sprout grün eingefärbt. Dadurch kann der Nutzer in der Projektübersichts-Ansicht einen Eindruck vom Vorranschreiten seines Projekts auf einen Blick erhalten. Je grüner ein Bereich dargestellt wird, desto mehr Teilaufgaben wurden fertiggestellt.

Für die Darstellung des Konzepts wählte ich exemplarisch das FH-Projekt der CampusAmbulanz und versuchte mich in die Rolle eines potentiellen Nutzers einzufühlen.

Die Konzeptionierung der App war aufgrund ihrer praxisnähe eine sehr interessante Aufgabe bei der ich viel gelernt habe. Mit meinem Ergebniss bin ich allerdings nicht sonderlich zufrieden, da mir gegen Ende die Zeit für die Gestaltung fehlte. Leider sehen meine Mockups daher im Kontrast mit den iOS 7 Elementen etwas altbacken aus.

Hier hatten wir die Aufgabe ein Gespräch von zwei oder mehr Leuten zu visualisieren. Dabei durften wir nicht auf die Darstellung von Text zurückgreifen. Das Format der Visualisierung konnte frei gewählt werden.

Copyright

©Christian Münch

Nach kurzer Überlegung entschied ich mich als Dialog einen echten Klassiker der Filmgeschichte zu wählen. Unter all den Möglichkeiten entschloss ich mich für den Weltbekannten Dialog zwischen Darth Vader und Luke Skywalker aus ›Star Wars - The empire strikes back‹ von George Lucas.

Copyright

©Christian Münch

Mit Hilfe eines kostenlosen Tools schnitt ich den ganzen Dialog (00:43 min) zurecht und speicherte die WAV-Visualisierung aus dem Anzeigefenster. Diese nutzte ich nun zum Erstellen meiner Grafik.

Durch wiederholtes Anhören und Markieren trennte ich zwischen Luke Skywalker und Darth Vader und nutzte die WAV-Form um die Lautstärke der beiden Gesprächspartner darzustellen. Vader erhielt dabei eine rote und Luke eine grüne Linie. Dies sind die Farben der ›Lichtschwerter‹ welche die Charaktere im Film führen.

Um die Grafik nicht unnötig lang zu machen kürzte ich die Redepausen im Dialog auf ein Minimum herunter.

Die von mir subjektiv beurteilte Emotionalität der Stimmlage stellte ich dabei durch die Kantigkeit der Linien-Spitzen dar. Besonders dramatische Stellen des Dialogs erhielten dabei einen steileren Winkel, als die eher ruhigen Stellen.

Als zusätzliches Element wählte ich das Geräusch von Darth Vaders Atemmaske, welches die Szene untermalt und fast ebendso bekannt ist, wie der Dialog selbst. Als letztes Element fügte ich noch das Einsetzen des Orchesters am Ende des Dialogs hinzu, wobei ich die Dramaturgie der Musik als Grundlage für die Form nutzte.

Copyright

©Christian Münch

hier mit Text zum besseren Verständniss

Anfänglich konnte ich mir unter dieser Aufgabe nicht viel vorstellen und war daher wenig begeistert. Sobald ich allerdings den Gedanken hinter der Klangvisualisierung verstanden hatte, konnte ich mich schnell für diese Aufgabe begeistern. Die Freiheit bei der Gestaltung war zuerst etwas einschüchternd, später aber ungemein befreiend.

Ein selbstgewählter möglicht komplexer Sachverhalt sollte hier in einem Schaubild ohne die verwendung von Text vermittelt werden. Dabei durfte erneut kein Text verwendet werden.

Bei dieser Aufgabe arbeitete ich gemeinsam mit meinem Kommilitonen Thorsten Dreßler.

Copyright

©Christian Münch

Nach einem kurzen aber aufschlussreichen Brainstorming hatten Thorsten und ich einige unterschiedliche Themen zur Auswahl. Wir entschlossen uns vorerst jeder für sich Ideen zu skizzieren. Dank dem Feedback im Kurs entschieden wir uns schlussendlich für das Thema Aquaponik

Copyright

©Christian Münch

Beim gemeinsamen skizzieren entschieden wir uns dafür, die Funktionsweise der Aquaponik exemplarisch am Beispiel einer Containerfarm zu zeigen. Aquaponische Systeme können zwar auf die unterschiedlichsten Arten installiert werden, der Aufbau innerhalb eines Frachtcontainers ist visuell jedoch am interessantesten.

Um uns gemeinsam auf einen visuellen Stil zu einigen, nutzten wir die Googles Asset Guidelines welche eine einfache und farbenfrohe Ästhetik erzeugen. Bei unserer Skizze steht der Wasserkreislauf des Systems und die erzeugten Produkte(versch. Gemüse und Fisch) im Vordergrund. Den sich ändernden Zustand des Wassers stellen wir mit unterschiedlicher Farbigkeit dar.

Copyright

©Christian Münch

Nachdem wir für unsere Skizze das Feedback aus dem Kurs verarbeitet hatten machten wir uns daran die finale Grafik in Illustrator zu erstellen. Dabei arbeitete Thorsten an den Icons, während ich den Container und die dazugehörigen Elemente erstellte.

Die Zusammenarbeit mit Thorsten war angenehm produktiv und wir sind beide mit unserem Endergebniss recht zufrieden.

Der Kurs war äußerst spannend und abwechslungsreich. Die Aufgaben sind ein guter Mix aus Design Klassikern (digitales Buch und GUI) und experimentellen Ansätzen Klangvisualisierung). Besonders geschätzt habe ich an dem Kurs die Feedback-Runden mit Prof. Müller. Sein Feedback ist präzise und regt zum eigenständigen Denken an.

Bilder ›Sprouting Onion‹ und ›Aquaponic‹ unter CC-Lizenz von Flickr. Vielen Dank an Theen Moy und Ryan Somma