Digitales Buch

Bei der ersten Aufgabe ging es darum ein digitales Buch zu gestalten. Lele und Ich entschieden uns für das Buch „Linus lässt nichts anbrennen“ von Christina Björk und Lena Anderson. Dafür designten wir horizontale (1024x768 Pixel) und vertikale Screens (240x320 Pixel).

Da dies ein Kinderkochbuch ist wollten wir es einfach und ansprechend lassen. Wir wählten die Avenir Next in Regular für unsere Texte und für Überschriften die Cul de Sac, welche den Screens einen leichten Comic-Charackter verleihen. Zudem setzten wir in jeden unserer Screens die Illustrationen aus dem Orginalbuch ein, um es für Kinder einfacher zu machen zu verstehen, aber natürlich auch um das Interesse an den Geschichten und Rezepten zu wecken  

Wir entschlossen uns für ein Inhaltsverzeichnis, welches möglichst einfach zu navigieren und verstehen ist. Deswegen ließen wir den Inhalt auf einem eigenen Screen. Zu jedem Rezept gibt es ein zugehöriges Piktogramm, dies findet man auch auf der Seite des Rezeptes wieder. 

Die erste Aufgabe wäre mir alleine wahrscheinlich sehr viel schwerer gefallen, da ich zuvor mich nicht sehr viel mit typografischen Grundlagen beschäftigt habe. Es war ein sehr guter Einstieg für mich und eine super Übung. Grade die kleineren Screens waren nicht einfach zu gestalten. Vor allem habe ich gelernt, worauf man bei der Gestaltung eines Textes achten muss. Und wie viel kleine Veränderungen an Illustrationen oder der Anordnung die Lesbarkeit verbessern können.

Klangbild

Bei der zweiten Aufgabe ging es um die Umsetzung eines ca. 1 Minuten langen Klanges zu einer visuellen Darstellung. 

Dabei habe ich einen Klang bekommen, bei welchem das Signal sehr gut zwischen links und Rechts wanderte. Ich entschied mich dazu ein Bild zu erstellen, auf welchem man einen Zeitstrahl, sowie den eine Linie für die Unterscheidung von Links und Rechts sieht. Auf dieser Grundlage habe ich die Klänge, immer als Rechtecke, in verschiedene Klanggruppen eingeteilt. Blau für Wasser, weiß für metallene, rot für tiefe und lila für prägnante Geräusche. Bei dem Hintergrund entschied ich mich für ein leichtes Grün, da es einen sehr guten Kontrast zu den anderen Farben bildete.

 Um die Richtung von verschiedenen Klängen darzustellen benutze ich zuerst einen Übergang von Schwarz zur jeweiligen Farbe, änderte dies dann aber zu einen durchsichtigen Fläche, da dies sauberer aussah. Zudem fügte ich noch Schlussstriche an Flächen an, nach welchen in der Aufnahme eine kurze Pause folgte, damit man der Grafik besser folgen kann. Mein letzter Arbeitsschritt war die Unterteilung der Klangflächen auf verschiedene Raster. Diese sind zwar kaum wahrnehmbar, lassen das ganze Bild aber deutlich geordneter, aber auch gleichzeitig detaillierter aussehen.

Bei diesem Projekt hat war die größte Schwierigkeit die Klänge unterscheidbar, sowie an den für mich sich richtig anhörenden stellen zu platzieren. Dazu kam die Schwierigkeit, dass es sehr schnell sehr kleinteilig und unordentlich aussah. Diese Probleme habe ich jedoch durch das Raster gelöst und bin auch mit dem Endergebnis zufrieden.

GUI

Bei der dritten Aufgabe mussten wir ein Grafical User Interface zu dem Thema Inspiration zu erstellen. Wir haben uns bei ihr für Material Design entschieden. Dabei sind uns die ersten Versuche nicht  besonders gut gelungen, haben uns dann aber auf den richtigen Weg geführt. 

Unsere erste Idee war „Entsperr“, eine App welche man zum Vermitteln von Sperrmüll benutzen könnte. Durch die gefundenen Objekte hätte man dann inspiriert werden können. Jedoch wurde uns nach dem ersten Besprechungstermin bewusst, dass die Idee nur indirekt etwas mit dem vorgegeben Thema zutun hatte, weswegen wir sie verworfen haben.

Unsere zweite Idee zu dem Thema war ein einfacher und spaßiger Akkord-Generator. Dieser sollte zufällig generierte Akkorde abspielen, von welchen man dann eine bestimmte Anzahl speichern konnte um diese als Inspiration für das Komponieren eines Liedes benutzen zu können.

Unsere erste Visuelle Umsetzung der Idee war jedoch sehr unansprechend und wäre wahrscheinlichdurch den zu simplen Aufbau kein Spaß gewesen länger zu benutzen. Deswegen entschieden wir uns einen etwas komplexeren Aufbau zu wählen und von einem simplen Modell bei welchem die Akkorde durchlaufen würden zu einem Sequencer-Modell zu wechseln, dieses würde etwas komplexer sein um dem User mehr Möglichkeiten zum experimentieren zu geben, aber immer noch simpel genug um es nach ein paar mal benutzen zu begreifen.

Dabei haben wir mit einer 4x4 Fläche angefangen. diese bildet den Mittelpunkt des Sequencers und der App. Auf ihr werden zufällig generierte Akkorde angezeigt, welche man auch durch den Actionbutton neu generieren lassen kann. Wir haben Ausgewählte Flächen durch einen Drücke-Effekt und einen pinken Rand hervorgehoben und die Angespielten durch eine pinke hervortretende Fläche. Das gleiche Prinzip haben wir auch bei den anderen Buttons angewendet.

Zum navigieren in der App haben wir uns für eine einfache Liste entschieden. In ihr soll man nur zwischen Projekten wechsel, diese in Ordner packen, suchen, ordnen, gleichzeitig oder alleine abspielen und löschen können. Dabei achteten wir darauf es möglichst einfach und übersichtlich zu gestalten, da die fülle an Möglichkeiten das Menü sehr schnell unübersichtlich und überladen erscheinen hätten lassen.

Für mich persönlich war dies ein harter Einstieg in die Grundlagen des Materialdesigns, da mir nicht bewusst war wie viele Regeln es zu befolgen gilt um eine übersichtliche App zu gestalten. Es hat mir trotzdem sehr viel Spaß gemacht es zu versuchen, da mir beim kreieren der Benutzeroberfläche noch sehr viel mehr Ideen gekommen sind wie man die App verbessern könnte. Dabei war es nicht immer einfach zu durchschauen welche Funktionen davon tatsächlich nötig waren, oder es nur unnötig kompliziert gemacht hätten.

Mehr als 1000 Worte

Bei der letzten Aufgabe sollten wir einen komplexen Sachverhalt in einer Infografik beschreiben, ohne dabei Worte zu verwenden. Ich entschied mich eine Grafik zu erstellen, die einem zeigt wie man sich nach eine nuklearen Explosion schützen kann. 

Dabei kam Ich auf die Idee die Zeit und Ortsangaben auf die gleiche Achse zu legen. Dies erweiterte die Gestaltungsmöglichkeiten, erschwerte es aber auch es übersichtlich zu lassen und verschiedene Zeitperioden zu kennzeichnen. 

Grundlegend ist die Grafik in Zweigeteilt. Oben wird die Situation mit ihren Gefahren dargestellt, wie Radius der tödlichen Schockwelle und das beste Verhalten für ein Individuum. Diese Abschnitte habe ich durch Comic Panels im Hintergrund abzugrenzen. Darunter werden Zeitangaben sowie wichtige Zusatzinformationen geliefert. Ich habe dabei versucht die Piktogramme so einfach und deutlich wie möglich zu gestalten und mit Signalfarben zu versehen, damit sie hervorstechen. Deswegen habe ich auch alles andere in Grau gelassen.

Es fiel mir nicht einfach das Blatt nicht zu überladen aber gleichzeitig die Wichtigsten Informationen so weit in den Vordergrund wie möglich zu rücken. Diese Aufgabe hat mir gezeigt wie wichtig und schwer es ist verschiedene, Zeitlich abgegrenzte, Situationen klar darzustellen. Vor allem da sich meine Achsen überschneiden.

Fazit

Das bearbeiten der Aufgaben hat mir sehr viel Spaß bereitet und gleichzeitig die grundlegenden Aspekte des Interfacedesigns, sowie generell gestalterischen Mittel gelehrt. Zudem weiß ich nun für die kommenden Semester, welche Kurse mir mehr oder weniger Spaß machen, sowie mich voranbringen würden.