Digitales Buch (Screentypografie)

Aufgabe

Unsere erste Aufgabe bestand darin in Partnerarbeit unser Lieblingsbuch in eine digitale Form zu bringen. Wir sollten mind. vier Screens für die Bildschirmgröße 1024 x 768 Pixel (iPad Querformat) und 240 x 320 Pixel (Hochformat) erstellen. Der Fokus lag hier klar auf einer guten Wahl und Einsatz der Typografie, die auch dem Buchthema entspricht, sowie eines Navigationskonzeptes.

Umsetzung

Memo und ich einigten uns schnell auf die Biografie von Marina Abramovic und jeder sollte nun erste Layout Konzepte für das Querformat erstellen. So kam es aber leider nicht. Ich erstellte einige Screens und suchte zum Buch passende Typografie. Wir haben uns dann getroffen und mögliche Veränderungen oder Problem besprochen. Auch eine neue Idee der Navigation ist uns da eingefallen. Die Biografie besteht aus 13 Kapitel und einem Bildteil am Ende, wobei die Kapitel nur aus den Zahlen 1-13 bestehen. Für eine Inhaltsverzeichnis irgendwie zu wenig. Wir griffen dann das frühere Lesenzeichensymbol in iBooks auf und gaben es einen neue Bedeutung. Wir wählten den Rotton als einzigen Akzent, da er auch im gebunden bzw. digitalen Buch das Cover verziert. 

Probleme hatte wir bei den Bildunterschriften die richtige Größe zu finden. Leider kam da von meinen Partner wenig Input oder Verbesserungsvorschläge, weswegen ich nicht von einer Zweitmeinung profitieren konnte. Ich gestaltete dann noch den Bildteil, wo ich mit der Art der „Vergrößerung“ bzw. die Detailansicht eines Bildes ganz zufrieden bin. Normalerweise kennte man den klassischen Galleryview, bei man nur ein Bild sieht und nach links und rechts wischen kann. Ich wollte mal was anderes ausprobieren. Die Farblichkeit ist hier auch leicht anderes als mit Textteil um sich von Rest abzuheben und der weißen Rahmen um die Bilder um den Fotos einen leichten Gallery-Look zu verpassen.

Als Schriftarten verwendeten wir die Meta Serif Pro, die sich wunderbar lesen lässt und gut zu einer Biografie und der Person Marina Abramovic passt. Und als Kontrast die Roboto in Bold und Regular für die Bildunterschriften, da sie trotz kleiner Größe noch leserlich bleibt.

Ich finde, die Aufgabe war einer guter Einstieg in die Screentypografie und ich habe gelernt wie wichtig der richtige Einsatz von Microtypografie ist.

Navigationskonzept

Klangbild

Aufgabe

Hier wurde jedem ein anderer Sound (60 Sec.) zugelost, der vorher von den Kursteilnehmern aufgenommen wurde. Wir erstellten dann Soundvisualisierungen, welche bewegt oder als Standbild sein konnten. Diese Aufgabe sollte in Einzelarbeit bearbeitet werden.

Umsetzung

Die Aufnahme ist wahrscheinlich auf einem Feldweg im Park/Wald entstanden. Neben Fahrradgeräuschen, das Klappern der Kette, das zwitschern der Vögel und Untergrundgeräusche war auch Wind zu hören.

Ich habe mich früh für eine bewegte Lösung entschieden, da ich gerade angefangen habe in After Effects zu arbeiten und so hier ein paar Sachen ausprobieren wollte. Ich skizzierte am Anfang noch sehr illustrative Symbole, die die einzelnen Töne widerspiegeln sollen. Das kam aber in der Feedbackrunde nicht so gut an und ich wurde abstrakter. Die neue Lösung mit sich bewegendes Rechtecken je nach Lautstärke der einzelnen Töne war visuell allerdings ziemlich langweilig. Mein Sound war so gesehen aber auch recht unspektakulär und außer das Klappern der Fahrradkette passierte nichts lautes, überraschendes. Ich fand es schwierig dafür eine passende Visualisierung zu finden.

Ich entdeckte dann ein Plakat in Potsdam, auf der eine 2D Blüte zu sehen war und versuchte dann diese Idee auf meinen Sound zu übernehmen. Jedes Blatt sollte für einen Ton z.B. Untergrundgeräusche stehen. Ich makierte mir alle Hoch- und Tiefpunkte der einzelnen Geräusche und passt dementsprechend die Größe der Blätter an. Da manche Geräusche ab einem bestimmten Punkt nicht mehr vorhanden sind wirkt es oft nicht wie eine Blüte. Oder wenn die Lautstärke eines Geräuschs sich nicht mehr ändern wird das Bild zum Standbild, und damit ziemlich uninteressant.

Insgesamt fand ich die Aufgabe nicht einfach, gerade weil man so eine Soundvisualisierung (per Hand und nicht ein vorgefertigtes Script) nicht so häufig oder noch nie gemacht hat. Und hatte auch Schwierigkeiten ein für den Sound passendes visuelles Konzept zu finden.

Inspirationsapp (Graphical User Interface)

Aufgabe

Hier sollte eine Inspirationsapp anhand der iOS oder Android Material Design Guidlines entworfen werden. Es sollte ein passender Mix zwischen vorhandenen UI Elementen und eigenen Ideen sein. Neben den mind. 4 Screens sollten auch ein Flowchart erstellt werden, welches das Bedienkonzept verdeutlicht. Diese Aufgabe war wieder in Partnerarbeit.

Umsetzung

Ich arbeitete mit Kenny zusammen und schlug schnell die Idee einer Inspirationsapp für Farben/Farbpaletten vor, worauf wir uns auch gleich einigen konnten. Wir skizzierten erste Screens, die von einer bereits vorhandene Application inspiriert waren. Wir teilten uns auf uns so übernahm Kenny z.B. die Gestaltung vom Color-Picker Screen. Ich hatte vorher schon am Feed und der Farbpaletten-Library gearbeitet. Die größte Aufgabe war es nun, dass all unsere Screens visuell gut zueinander passen und keins aus dem Konzept fällt. 

Als wir an einem Punkt waren wo wir recht zufrieden waren haben wir uns gefragt ob die App denn überhaupt verständlich bedienbar ist? Darauf hin haben wir viele Lücken gefunden und uns an ein Flowchart gesetzt und alle möglichen Option skizziert. Es hat sehr viel Spaß gemacht, durch iterative Prozesse immer wieder neue Probleme und Lösungen zu finden. Wir konnten erahnen wir aufwendig es sein kann eine komplette App von Anfang bis Ende nach diesem Konzept auf die Bedienbarkeit zu überprüfen. 

Schlussendlich sind wir beide recht zufrieden mit unserem Konzept. Z.B. die Möglichkeit Farben hinzuzufügen oder eine bestehende zu bearbeiten sollte aber noch überarbeitet werden sowie den Feed stärker an die Visualisierung von Farbpaletten anzupassen.

1000 Wörter (Semiotik)

Aufgabe

Die letzte Aufgabe bestand darin einen ausreichend komplexen Prozess ohne den Einsatz von Worten darzustellen. Diese Aufgabe sollte in Einzelarbeit bearbeitet werden.

Umsetzung

Da ich mich vor einiger Zeit selbst als möglicher Spender registriert haben, kam ich schnell zum doch recht komplexen Thema der Stammzellenspende. Ich konnte mich gut an den Prozess der Registrierung erinnern, alles weitere wie z.B. die Spendearten und die Wahrscheinlichkeiten einer erfolgreichen Spende bzw. Genesung vom Patienten recherchieren. Ich erstellte dann währenddessen ein Flowchart um meine gesammelten Informationen zu sortieren.

(1. Versuch/Bild)

In meiner ersten Skizze probierte ich, vom Aufbau her, erstmal in der Richtung vom Flowchart zu bleiben. Ich illustrierte „alle“ Prozesse per Hand mit Procreate auf dem iPad. Leider fehlte der ein oder andere wichtige Zwischenschritt. Außerdem war das Problem bzw. Thema am Anfang gar nicht ersichtlich. Durch das Feedback erkannte ich, dass gleich am Anfang gezeigt werden muss, dass es hier um Blutkrebs und eine Stammzellenspende geht. Außerdem war die Darstellungsform der Personen nicht in einem Gestaltungsstil.

(2. Versuch/Bild)

Ich fügte alle nötigen Zwischenschritte hinzu und verfeinerte die Zeichnungen. Leider hatte fehlte mir durch die viele neuen Schritte die Übersicht und eine gute Struktur. Manche Zeichnungen/Zwischenschritte erwiesen sich auch als unnötig oder überzeichnet.

(3. Versuch/Bild)

Ich entfernte einige Zeichnungen, stellte das Thema Blutkrebs in den Fokus und fand eine wiederkehrende Struktur. Die einzelnen Zeichnungen verlieren sich leider etwas in der Farbigkeit und der strikten Trennung der Abschnitte. An dem Aufbau/Struktur könnte man auch noch weiter arbeiten.

Fazit

Insgesamt bin ich zufrieden mit meinen Ergebnissen unter Berücksichtigung der Bearbeitungszeit. Von den vier Aufgaben haben mir persönlich die letzten beiden Aufgabe am besten gefallen. Sich zwei Wochen lang nur auf ein App-Konzept und deren Gestaltung und Bedienbarkeit zu konzentrieren hat mir viel Spaß bereitet. Die letzte, recht freie und unkomplizierte Aufgabe war dann ein guter Abschluss des Kurses.

Ich hätte mir gewünscht, wenn auf die Screentypografie die Inspirationsapp gefolgt wäre. So wäre man im Screendesign geblieben und hätte die Kenntnisse aus der Buchaufgabe gleich übernehmen können. Das wechseln zur Klangaufgabe hat mich dann etwas aus dem Konzept gebracht. 

Durch diesen Kurs habe ich nun einen guten Überblick über versch. Bereiche im Interfacedesign bekommen und möchte mich im weiterem Verlauf des Studium weiter mit Screendesign/typografie beschäftigen.