Grundlagen Visual Interface Design

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-ästhetische Fragestellungen von interaktiven visuellen Systemen in den Mittelpunkt.

![H1](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=01_|_Infografik&fid=e9d80446a6744aea503aa46822cfb24e&fs=30&fc=343534&.png „Infografik“)

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Aufgabenstellung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=EA003D&.png „Aufgabenstellung“)

Aufgabe war es eine Infografik über einen beliebigen Aspekt unseres Lebens zu entwickeln.

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Umsetzung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=EA003D&.png „Umsetzung“)

Ich visualisierte meine Aktivitäten eines durchschnittlichen Wochentag im Wintersemester. Hierfür habe ich alle Aktivitäten die länger als 15 Minuten dauern in einem Ringdiagramm chronologisch im Uhrzeigersinn dargestellt. Jeder Aktivität wies ich eine eigene Farbe und ein Piktogramm zu. Ähnliche Aktivitäten gruppierte ich, indem ich ihnen ähnlichen Farben zuwies. In die Mitte des Diagramm setzte ich noch eine Skala die einen 24-Stunden-Tageszyklus darstellt um einer falschen Assoziation mit einer 12-Stunden-Uhr vorzubeugen.

![H1](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=02_|_Displayschrift&fid=e9d80446a6744aea503aa46822cfb24e&fs=30&fc=343534&.png „Displayschrift“)

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Aufgabenstellung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=EA003D&.png „Aufgabenstellung“)

Es sollte eine Display- oder Pixelschrift entwickelt werden.

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Umsetzung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=EA003D&.png „Umsetzung“)

Als Grundlage für meine Segmentschrift »Circumento« erstellte ich ein Raster aus Kreisen die auf zwei Achsen jeweils um 50% ineinander verschoben sind. Die sich daraus ergebenden Schnittmengen dienen als Segmente aus denen ich die Zeichen bildete. Für die Mittellängen standen 17, für Ober- und Unterlängen jeweils 13 Segmente zur Verfügung. Um Zeichen wie z.B. das versale D bzw. O zu unterscheiden verwendete ich zusätzlich angrenzende Segmente als Serifen.

![H1](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=03_|_Piktogramme&fid=e9d80446a6744aea503aa46822cfb24e&fs=30&fc=343534&.png „Piktogramme“)

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Aufgabenstellung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=EA003D&.png „Aufgabenstellung“)

Es sollte ein eigenes Icon-Set entwickelt oder ein bestehendes überarbeitet werden.

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Umsetzung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=EA003D&.png „Umsetzung“)

Ich entschied mich das Design des OSD's meines Fernsehers zu überarbeiten, da mich dieses nicht anspricht und ich es überladen finde. Dazu vereinfachte ich die bestehenden 3D-Piktogramme und ersetze sie durch monochrome Vector-Piktogramme. Zusätzlich reduzierte ich den Hintergrund auf einfache Formen und machte ihn transluzent. Dadurch integriert er sich besser ins Fernsehbild, hebt sich aber genügend ab.

Bildschirmfoto 2014-02-07 um 21.29.04.png

original Darstellung

überarbeitete Darstellung

![H1](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=04_|_Interaktive_Schaltfläche&fid=e9d80446a6744aea503aa46822cfb24e&fs=30&fc=343534&.png „Interaktive Schaltfläche“)

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Aufgabenstellung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=EA003D&.png „Aufgabenstellung“)

Es sollte eine interaktive Schaltfläche mit alternativen Interaktions-Konzepten gestaltet werden.

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Umsetzung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=EA003D&.png „Umsetzung“)

Ich gestaltete einen Like-Button in Form eines Herzens das je nach Entfernung zum Cursor immer schneller schlägt. Wenn der Cursor über dem Button ist färbt sich die Kontur weiss. Wird Er aktiviert wandelt sich das Herz zu einem Kreis mit einem Häkchen.

Bildschirmfoto 2014-02-08 um 18.24.15.png

normal (ol), darüber (or), aktiviert und darüber(ul), aktiviert (ur)

pw: vid

![H1](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=00_|_Fazit&fid=e9d80446a6744aea503aa46822cfb24e&fs=30&fc=343534&.png „Piktogramme“)

Ich empfand den generellen Aufbau des Kurses als sehr angenehm. Durch die Einteilung in 4 Teilaufgaben und deren Präsentation/Besprechung hatte ich über Semester hinweg immer ein ausgewogenes Arbeitspensum. Die verschiedenen Themengebiete haben mir einen guten Einblick über wesentliche Teilbereiche des Interfacedesigns gegeben. Besonders die Infografik und Schriftgestaltung haben mir spaß gemacht. Auch die freien Aufgabenstellungen haben viel Raum zum experimentieren gelassen.