Kursdokumentation ›Visual Interface Design‹

Dokumentation meiner Ergebnisse aus dem Kurs ›Visual Interface Design Basics‹ von Prof. Constanze Langer.

›Nach wie vor spielt der visuelle Sinn eine zentrale Rolle im Interface-Design. Trotz vielfacher Innovation im Bereich multi-modaler Interaktion ist die zentrale Schnittstelle zwischen Mensch und Computer nach wie vor der Screen – in allen Größen und Ausprägungen. Das Fach Visual Interface Design stellt formal-ästhetische Fragestellungen im Bereich interaktiver visueller Systeme in dem Mittelpunkt. Hierbei spielen grafische und semiotische sowie zeit- und interaktionsbasierte Fragestellungen eine Rolle. Konkret werden im Rahmen des Kurses die Möglichkeiten und Rahmenbedingungen des Screendesigns vorgestellt und untersucht.‹

– Prof. Constanze Langer

01 | Informationsgrafik - ›One day in my Life‹

Die Aufgabe dieser Übung war es einen Tag oder einen Aspekt unseres Lebens mit Hilfe einer Informationsgrafik zu visualisieren.

Da ich schon immer einmal eine Infografik gestalten wollte, war ich bei dieser Aufgabe äußerst motiviert. Nach einem kurzen Brainstorming wählte ich das Thema ›Zeit‹ für meine Infografik und fing an Ideen zu sammeln und zu skizzieren. Ich entschloss mich schlussendlich die gesamte Infografik aus 3 verschiedenen Diagrammen bestehen zu lassen. Hierbei wollte ich zwei der Diagramme mit herkömmlichen Darstellungsformen gestalten und bei einem mit einer neuartigen Darstellungsform experimentieren.

Für das erste Diagramm ›how I spend my daily 24 hours‹ wählte ich ein Balkendiagramm im Querformat in dem ich folgende Bereiche einsortierte: ›work, commuting, sport, web, chores, food, relax, sleep‹.

Das zweite Diagramm sollte das Herzstück meiner Infografik werden, weswegen ich mir hiermit besonders viel Zeit zum Experimentieren ließ. Unter der Beschriftung ›the phases of my day‹ werden die Phasen meines Tagesablaufs dargestellt. Nach einigen Skizzen konzentrierte ich mich auf eine Darstellung durch ein Ringdiagramm. Der Vorteil des Ringdiagramms zur Darstellung eines Tagesablaufs ist, dass der Betrachter die Position der Abschnitte auch ohne Beschriftung einer Uhrzeit zuordnen kann. Um nicht nur 12, sondern 24 stunden unterzubringen legte ich zwei konzentrische Ringe an, wobei der äußere die ersten 12 Stunden des Tages darstellte und der innere die restlichen.

Beim letzten Teil der Grafik wählte ich ein Liniendiagramm, welches ›stress, workload & sleep‹ innerhalb einer für mich durchschnittlichen Woche anzeigt.

Hier die fertige Infografik als Poster-Mockup. Ich bin mit dem Endergebniss recht zufrieden, obwohl mir das bisherige Feedback gezeigt hat, dass das Ringdiagramm noch nicht deutlich genug ist.

02 | Recherche - Pixel-/Displayschriften

Als Vorbereitung für die dritte Aufgabe hatten wir zur Aufgabe rasterbasierte Displayschriften im Alltag zu finden und zu dokumentieren.

Die Ergebnisse meiner Recherche lassen sich auf der Linken Seite (unter ›Materialien‹) als PDF herunterladen.

03 | Entwicklung einer Displayschrift

Die vorrangegangene Recherche sollte jetzt genutzt werden, um eine eigene Schrift mit Hilfe eines bestehenden oder selbst entwickelten Rasters zu entwerfen.

Da ich vorher noch nie einen Font entwickelt hatte, wollte ich bei dieser Aufgabe möglichst bei Altbewährtem bleiben, diesem aber meinen eigenen Anstrich verpassen. Ich wählte daher ein normales Pixelraster, bei dem ich jedoch durch diagonale Unterteilungen die rechteckigen Pixel in je vier Dreiecke aufteilte. Durch diesen Schritt war es mir nun möglich, mit einer recht kleinen Auflösung von 3x8 Pixeln zu arbeiten. Zudem lassen die Diagonalen den Font dynamischer wirken.

Die Schriftart realisierte ich (Dank des Tipps eines Komilitonen) mit dem kostenlosen Tool ›Fontstruct‹, welches äußerst einsteigerfreundlich ist und mich schnell und effizient arbeiten ließ. Nach einigen Experimenten entschloss ich mich dafür, die Versalbuchstaben möglichst schlicht zu halten, die Minuskeln jedoch mit diagonalen Strichen zu versehen, wodurch ich eine der Fraktur ähnliche Charakteristik erzeuge.

Nach vielen Änderungen und Verbesserungen hatte ich endlich die finale Schrift vor mir. Man beachte das @ Zeichen, welches mir einiges an Kopfzerbrechen beschert hat, bis ich die richtige Lösung fand. Obwohl es angeschnitten gezeigt wird, ist es im Kontext seiner Anwendung recht eindeutig.

04 | Piktogramme

In dieser Aufgabe galt es eine in sich stimmige Familie an Piktogrammen für ein Thema seiner Wahl zu entwerfen.

Da eine meiner Leidenschaften das historische Fechten ist, nutzte ich diese Aufgabe, um eine Familie an Piktogrammen für die verschiedenen Disziplinen zu entwerfen. Nach den ersten paar Skizzen wurde mir bewusst, dass die menschliche Silhouette für die Piktogramme irrelevant sein würde, da die Körperhaltung der Disziplinen sich nicht stark genug voneinander unterscheiden.

Nachdem ich mir meine Referenzen (Trainingswaffen) genauer ansah, merkte ich schnell, dass die markanten Merkmale sich hauptsächlich im Bereich des Griffes befinden. Ich entschloss mich also nicht die ganze Waffe, sondern nur einen Ausschnitt darzustellen. Durch diese Entscheidung konnte ich die entscheidenden Bereiche deutlich größer darstellen und somit auch detaillierter werden.

Nach einigen Experimenten hatte ich einen passenden Grad an Detailreichtum gefunden und fing and die Piktogramme zu konstruieren. An den Griffflächen fügte ich einen angedeuteten Schattenwurf hinzu um den Zeichen etwas Volumen zu geben.

Abgebildet sind (links nach rechts oben nach unten) Scheibendolch, langes Messer, Langschwert, Schwert & Buckler, Rapier.

05 | Interaktive Schaltflächen

Das Erscheinungsbild und das Verhalten einer interaktiven Schaltfläche sollte so interessant wie möglich gestaltet werden, um das Interesse des Nutzers zu wecken.

Nachdem ich viele Ideen skizziert hatte, entschloss ich mich dazu, ein altbekanntes Bedienelement, den Login-Button, neu zu überdenken und in eine futuristische Umgebung zu übersetzen. Der Grundgedanke ist eine minimalistische Gestaltung (Flat-Design) mit einer effektlastigen Animation zu verbinden. Dadurch soll das Bedienelement im inaktiven Zustand unauffällig wirken, in der Interaktion jedoch möglichst viel visuelles Feedback liefern.

Um mein Konzept auch ohne Animation zu verdeutlichen, habe ich die einzelnen Zustände des Buttons in einem Flowchart angelegt.

Die unterschiedlichen Transparenzen der Bedienfelder helfen den User durch die gesamte Interaktion zu leiten. Um den Button in inaktivem Zustand möglichst platzsparend zu halten, erscheinen die beiden Eingabefelder für die Benutzerdaten erst bei Bedarf. Nach Eingabe der Daten verwandeln sie sich in einen Ladebalken, der den Fortschritt der Verifizierung anzeigt.

GIF zum Abspielen bitte anklicken!

Um die Funktionsweise meines Bedienelementes zu verdeutlichen, habe ich es in Photoshop animiert. Obwohl ich das visuelle Feedback mit simplen Effekten umgesetzt habe, war es trotzdem interessant, wie stark auch kleine Änderungen des Ablaufs die Gesamtwirkung beeinflussen.

Fazit

Als Erstsemester war der Kurs für mich ein hervorragender Start ins Designstudium. Durch die abwechslungsreichen Aufgaben und die recht kurzen Abgabefristen hatte man immer ein konkretes Ziel vor Augen. Die Aufgabenstellungen waren dabei deutlich genug, um schnell zu einer Idee zu kommen, aber auch frei genug, um jedem Kursteilnehmer seine ganz eigene Interpretation zu ermöglichen.

Ich habe durch die Aufgaben in diesem Kurs viele Dinge angepackt, die ich schon immer einmal machen wollte (Infografik) und habe mich mit Inhalten auseinandergesetzt, die mir bisher fremd waren (Typografie).