Aufgabe 01 - "Digitales Buch"

Aufgabe 01 - »Digitales Buch«

Für die erste Aufgabe sollten wir ein Buch unserer Wahl als digitale Adaption in zwei Displaygrößen darstellen.  In das Desktop-Seitenverhältnis (1024×768px), sowie in ein sehr kleines mobiles Format (240×320px). Ein besonderer Fokus lag hierbei auf der Lesbarkeit und der Darstellung bei niedrigen Pixelauflösungen, sowie der Navigation zwischen den erstellten Screens. Die Aufgabe löste ich in einer Gruppe mit Sara Nowakowska.

Vorlage - Berlin Bars

Als Vorlage wählten wir den Titel „Berlin Bars“, von Peter Eichhorn, da uns hier sowohl das Layout, als auch die Typografie besonders gefielen.

Wir entschlossen uns für unsere digitalen Adaptionen das unkonventionelle Cover des Buches aufzubrechen und zu vereinfachen:

Die Navigation durch verschiedene Berliner Stadtbezirke und Themenbereiche realisierten wir über ein Menü aus quadratischen Tiles, welche durch die Verwendung von Bildern ansprechender und für ein digitales Produkt passender sind, als das klassische Inhaltsverzeichnis eines Buches:

In der Typografie und dem Schriftlayout trennten wir uns vom Originaltitel und verwendeten Schriften, die sich durch eine besonders gute Lesbarkeit und Klarheit in der Anzeige auf niedrigauflösenden Screens auszeichneten:

Persönliches Fazit

Obwohl ich mich schon viel mit Typografie in Web und Print beschäftigt hatte, habe ich noch einmal viel über die Unterschiede in der Anzeige bei niedrigeren Auflösungen lernen können. Auch die gemeinsame Arbeit in Figma war für mich ein Novum und hat mir wirklich viel Spaß gemacht.

Aufgabe 02 - "Graphical User Interface"

Für die zweite Aufgabe sollte auf Grundlage der iOS oder Android Human Interface Guidelines eine Inspirations-App gestaltet werden. Die Aufgabe löste ich in einer Gruppe mit Helene Biebinger.

umamiBits - Helene hatte die Idee eine Inspirationsapp zu entwickeln, in welcher die User Medien (Bits) der Wahrnehmung von Sinnesreizen (Synästhesie) zuordnen können. Gemeinsam entwickelten wir ein Konzept für das Suchen von Bits in einem Feed, das speichern dieser Bits in Projekten, sowie das filtern nach bestimmten Sinneswahrnehmungen. 

Im design des GUI wählten wir die iOS Styleguides und versuchten sowohl nah an den Guides zu bleiben, aber auch eindeutig eigene Akzente zu setzen. Darüber hinaus entwickelten wir auch ein Logo, dessen Bildmarke sich auf verschiedene Weise als Gestaltungsidee in den Oberflächen wiederfindet.

Ein klickbarer Prototype findet sich hier: https://www.figma.com/proto/s2aif1ZHWKEFkappN6RY6o/Inspirationsapp?node-id=209%3A280&viewport=527%2C-667%2C0.13909031450748444&scaling=scale-down&page-id=150%3A0

Persönliches Fazit

Die Arbeit nach dem iOS Styleguide war für mich neu und deshalb spannend und sehr informativ. Das Erstellen eines Prototypes in Figma war für mich ebenfalls neu und ist ein nützliches Feature.

Aufgabe 03 - "Klangbilder"

Die dritte Aufgabe haben wir einzeln bearbeitet. Dabei haben alle Gruppenteilnehmer einen Klang bereitsgestellt und diese wurden dann verlost.

Die Visualisierung der Klänge sollte hinreichend komplex sein und über eine einfache Amplitudendarstellung hinaus gehen. Da ich bereits einige Animationen in After Effects erzeugt habe, wusste ich gleich, dass ich versuchen wollte verschiedene Formen Anhand von unterschiedlichen Frequenzbereichen und Lautstärken zu animieren.

Im Mittelpunkt steht die rote Form, die in der Größe und Beschaffenheit des Randes auf die allgemeine Geräuschkulisse reagiert. Die einzelnen Stimmen der Gesprächsteilnehmer erscheinen, sobald die Person spricht. Dabei ist das Morphen der Flächen an die Stimmfrequenz gekoppelt.

Persönliches Fazit

Leider blieb mir nur sehr wenig Zeit für dieses Projekt und ich konnte auch kein Feedback dazu erhalten. Gerne hätte ich die Animationen noch genauer auf das Klangereignis abgestimmt und die Zusammengehörigkeit mehr hervorgebracht.

Aufgabe 04 - "1000 Worte"

Die letzte Aufgabe wurde ebenfalls ohne Gruppe bearbeitet. Es galt einen hinreichend komplexen Sachverhalt ohne den Einsatz von Worten darzustellen. Als Thema wählte eine schematische Darstellung des Datenverkehrs in einer Applikation mit einer Backend Architektur nach dem „Serverless“ Modell und unter Verwendung von „Microservices“.

Unter Verwendung eines eigens kreierten Iconsets zeige ich den Weg der Daten vom User und dem Frontend, neben Authentifizierung und lokalem Gerätespeicher zu sechs exemplarischen Microservices über ein API Gateway. Die einzelnen Services auf der rechten Seite von oben nach unten sind: Dateiverwaltung und Speicher, Datenbanken und CRUD, Cloudservices, Bildkomprimierung, Notifikation und Benachrichtigungen und Datenanalyse.

Persönliches Fazit

Die Visualisierung von komplexen Systemen finde ich besonders faszinierend. Es ist immer wieder interessant zu sehen, wie viel Komplexität in Systemen steckt, die in Ihrem Sinn eigentlich den Umgang für den Nutzer oder Betreiber vereinfachen sollen.

Fazit

Der Kurs bot mir einen tollen Einstieg in das Interfacedesign. Die Vorträge waren immer interessant und lehrreich. Die praktischen haben mir in diesem Kurs am besten gefallen. Besonders das präzise Feedback von Herr Prof. Müller war für mich sehr lehrreich.

Nach diesem Kurs habe ich eine gute Vorstellung, welche weiteren Module ich mir anschauen möchte und worin die Grundlagen des Interface-Designs bestehen.