Kursdokumentation Grundlagen Visual Interface Design – David Röttger

Dokumentation zum Kurs „Grundlagen Visual Interface Design“ bei Prof. Constanze Langer im WS 2013/2014.

Kursbeschreibung

Nach wie vor spielt der visuelle Sinn eine zentrale Rolle im Interfacedesign. Trotz vielfacher Innovation im Bereich multi-modaler Interaktion ist die zentrale Schnittstelle zwischen Mensch und Computer nach wie vor der Screen. Das Fach Visual Interface Design stellt formal-ästhetische Fragestellungen von interaktiven visuellen Systemen in den Mittelpunkt.

Part I: Informationsgrafik

Meine Abhängigkeit zum Stromnetz soll in der erstellten Informationsgrafik ersichtlich werden. Als ich angefangen habe meine Wohnung nach elektronischen Geräten zu inspizieren, ist mir aufgefallen, dass ich als einzelner Mensch täglich ziemlich viele elektronische Geräte benutze.

Daraufhin habe ich eine Liste meiner elektronischen Geräte erstellt und diese mit Illustrator gezeichnet.

Entstanden ist eine, wie ich finde, schnell überschaubare Infografik mit illustrativen Elementen. Farblich orintieren sich die Illustrationen an den realen Gegenständen. Die realen Proportionen untereinander sind, aufgrund des verfügbaren Platzes, nur angedeutet.

Ich habe mich für die Illustrierung der Gegenstände entschieden, um den „Haufen” meiner elektronischen Geräte schnellst möglichst erfassen zu können.

Die Geräte hängen mit ihren Kabeln an einer Steckerleiste. In den roten Steckdosen stecken die Geräte, die 6-24 Stunden pro Tag laufen, der andere Pol sind die grünen Steckdosen, an denen Geräte hängen, die maximal 0 – 1 Stunde pro Tag laufen. Die Kabel, die zu den Geräten führen, haben die Farbe der jeweiligen Stecker.

Räumlich sind die Geräte in Kategorien aufgeteilt.

Part II: Entwicklung einer formal eigenständigen Pixelschrift

Im zweiten Kurs-Abschnitt haben wir uns mit Pixelschriften beschäftigt. Ein Teil der Aufgabe bestand darin, Pixelschriften im eigenen Umfeld zu entdecken und zu fotografieren. Dabei wurde deutlich, dass Pixelschriften häufiger als gedacht eingesetzt werden. z.B. in Displays des Bahnverkehrs, von Musikinstrumenten und Haushaltsgeräten etc. Im Kurs haben wir die Pixelschriften genauer analysiert. Welche Rasterart wurde eingesetzt? Wie hoch ist die Pixelanzahl/Pixeldichte? Welche Pixelform wurde eingesetzt? Diese Fragen galt es zu klären.

Nachdem wir einen großen Input an Beispielen selbst recherchiert und vom Rest des Kurses bekommen haben, galt es eine eigene Pixelschrift zu entwickeln. Am Anfang stand die Frage des Werkzeuges im Vordergrund: Welches Tool eignet sich am besten für die Pixelfont-Entwicklung. Schnell bin ich über Google auf den Online-Pixelfont-Editor bitfontcreator gestoßen mit dem ich angefangen habe einen Font zu skizzieren. Die Funktionsweises des Editors ist sehr simpel gehalten, sodass ich schnell einzelne Pixel zu Buchstaben formen konnte.

Die Zwischenpräsentation und Gespräche im Kurs hat mich dazu gebracht meine Tool-Auswahl und das Font-Konzept noch einmal zu überdenken.

Glyphs war nun mein Tool der Wahl. Herausgekommen ist eine Font mit einem Raster von 12x20 Pixeln der das Ziel verfolgt, einen breiten Anwendungs-Bereich abzudecken. Einen eigenen Charakter sollte dem Font trotzdem eigen sein.

Der Grund für den Wechsel meines ursprünglichen Vorhabens zu einer anderen Idee war das Gefühl, dass mich der bitfontcreator als auch meine ursprüngliche Fontidee in unterschiedlicher Weise beschränken. Bitfontcreator aufgrund fehlender Funktionen. Meine Fontidee des ultra-bold-fonts aufgrund des späteren eingegrenzten Anwendungspektrums.

Mit Glyphs hatte ich nun das Gefühl eine kraftvolles Werkzeug an der Hand zu haben, bei dem die Einarbeitung, für mich, auch für die Zukunft nützlich ist.

Part III: Entwicklung einer Zeichenfamilie

Traditionelle Qi-Gong Formen ist das Thema meiner Zeichenfamilie. Zum einen zeigen die Zeichen die zu trainierenden Körperpositionen, zum anderen gibt es im Qi-Gong Training bestimmte Gedankenstützen, die der Trainierende in seinen Fokus holt. Dies können Visualisierungen von Bällen sein, welche dem Übenden erleichtern, die jeweilige Position zu halten. Diese sind in der Zeichenfamilie als gepunktete Kreise/Ellipsen dargestellt. Zusätzlich zu den Gedankenstützen gilt es, auf die korrekte Kraftverteilung acht zu geben, diese wird durch Pfeile gekennzeichnet.

Mein Fokus lag auf der Erkennbarkeit der Zeichen. Ich wollte nur die wesentlichen Informationen darstellen und habe mich deswegen für eine reine schwarz/weiß Darstellung, mit so wenig wie möglich Details, entschieden.

Im Gestaltungsprozess hat mich das Buch „Die Welt der Zeichen, Kommunikation mit Piktogrammen“ von Martin Krampen, Michael Götte und Michael Kneidl aufgrund der vielen Beispiele und Texte zum Thema sehr inspiriert.

Part IIII: Interaktive Schaltflächen

Entstanden ist eine Animation für eine Funktion, welche helfen soll, über den Tag verteilt, die eigenen Gefühlszustände zu tracken. Die fiktionale Funktion wird z.B. jede halbe Stunde automatisch ausgelöst. Gestartet werden soll der Prozess indem der „GefühlsWecker“ mit hin und herwackeln und duch Farbwechsel auf sich aufmerksam macht. Mit einem Mausklick auf den Wecker erscheinen die Auswahlmöglichkeiten. Nach dem Klick auf eine Auswahlmöglichkeit übernimmt der Wecker das ausgewählte Gefühl, ein „+1-Zeichen” gibt an, dass ein weiteres Gefühl getrackt wurde. Kurze Zeit später wechselt der Wecker wieder in seinen Ausgangszustand.

Die Frage der technische Umsetzung war für mich ein andauerndes Thema des Entwicklungsprozesses. Ich habe Javascript-Frameworks ausprobiert, viel gelernt, jedoch nicht genug, um die Animation gerecht umsetzen. Letztendlich ist die Animation als animiertes GIF in Photoshop entstanden. Die Aufgabe hat mein Interesse deutlich geweckt, mich weiter mit dem Thema Screen-Animationen zu beschäftigen.

Fazit

Das eintauchen in die Themenvielfalt des Kurses hat mir zum einen Freude bereitet und zum anderen auf eine positive Art und Weise meine Grenzen aufgezeigt, im technischen wie im konzeptionellen Bereich. Ich fühle mich nun deutlich mehr gewappnet, weitere Projekte im Bereich Visual Interface Design anzugehen.