Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Grundlagen Visual Interface Design WS1314

Grundlagen Visual Interface Design WS1314

Gesamtdokumentation des Kurses »Grundlagen Visual Interfaces« im Wintersemester 13/14.

1 – Informationsgrafik

Eine Loopstation ist ein Gerät welches per Knopfdruck Audiosignale aufnimmt und dann als Endlosschleife wiedergibt. Ist die erste Schleife definiert, kann der Musiker nun unendlich viele weitere Schleifen darüber aufnehmen. Man kann sich das Lied als einzelne Ebenen vorstellen. Durch diese Technik ist es möglich, auch alleine mehrere Instrumente einzuspielen um mit sich selbst zu musizieren. Im Fall dieser Grafik handelt es sich um ein Lied, welches mithilfe einer Loopstation, einer Gitarre und einem Mikrofon aufgenommen wurde. Die Grafik deutet an, wann ein neuer Loop gestartet wird, wann einzelne Teile an- und abgeschalten werden oder wann die Effekte des Geräts verwendet wurden um die Tonspur zu verändern. So wird ein komplexes Lied in visuelle Ebenen aufgeteilt um dem Betrachter Einblicke in die Welt der Loopstation Künstler zu geben.

Suske_Infografik_Visual Interface.jpgSuske_Infografik_Visual Interface.jpg

Logo.jpgLogo.jpg

Time-goes-too-fast-–-Infografik2.jpgTime-goes-too-fast-–-Infografik2.jpg

Time-goes-.jpgTime-goes-.jpg

2 – Entwicklung einer formal eigenständigen Displayschrift

Die Schrift »Organa« ist ein verspielter Rasterfont und lässt sich der Gruppe der Unicase Schriften zuordnen. Der zugrundeliegende Raster pro Zeichen besteht aus 5x5 Einheiten welche aus zwei unterschiedlichen Elementen bestehen. Der starke Eigencharackter und die organischen Formen der Schrift vermindern zwar die Lesbarkeit, erhöhen jedoch den Wiedererkennungswert. Somit ist die Schrift nicht für Massentext gedacht, sondern eher für Auszeichnungen, Headlines, Logos, etc. Vor allem in großen Punktgrößen besticht »Organa« durch ihre Eigenheit.

Organa Overview.jpgOrgana Overview.jpg

Organa Overview2.jpgOrgana Overview2.jpg

E.jpgE.jpg

Elias Suske_Pixelfont_Visual Interface.jpgElias Suske_Pixelfont_Visual Interface.jpg

3 – Entwicklung einer Zeichenfamilie

Die ursprüngliche Idee dieser Icons war es die Emotionen: zornig, liebend, ausgeglichen, zielstrebig und aufbrausend darzustellen. Bei der Entwicklung stand vor Allem das Spiel mit Licht und Schatten, Formen, Dreidimensionalität und Rhythmus im Vordergrund. Die Visualisierung der oben genannten Begriffe stellte sich aufgrund ihrer Abstraktheit schwieriger als erwartet heraus. Schnell wurde klar, dass diese Icons ohne weitere Erklärungen nicht verstanden werden können. Selbst bei Nennung des Themas konnten Betrachter die Icons kaum ihrer eigentlichen Bedeutung zuordnen. Die Lösung des Problems bestand darin den Kontext zu ändern: Statt Emotionen Computerspiele. Denkbar wären Bezeichnungen von Fähigkeiten, Attacken oder Ähnlichem. Hier muss der Spieler die Icons nicht interpretieren sondern sie dienen viel mehr als Hilfestellung. Einmal gelernt und der Spieler kann sich anhand der charakteristischen Icons orientieren.

Icons-03.pngIcons-03.png

Scribbles.pngScribbles.png

Skizzen_v.pngSkizzen_v.png

Skizzen_Zeichenfläche 5.pngSkizzen_Zeichenfläche 5.png

4 – Interaktivität zwischen User und System

Smartphones und Tablets sind nicht mehr aus unserer Welt wegzudenken. Doch oft ist die Gestaltung eines kleinen Displays eine große Herausforderung. Diese Interaktiven Schaltflächen sind ein Konzept, welches vor allem auf kleinen Bildschirmen mit wenig Platz Anwendung finden könntev. Die Idee ist es unterschiedliche Funktionen in den Button mit einzubauen. So muss der Designer zum Beispiel nicht jedes Soziale Netzwerk mit Icons darstellen, sondern kann einen zentralen „Share“ Button erstellen, welcher alle Netzwerke enthält. Auch kleine Programme wie eine Uhr oder ein Taschenrechner lassen sich mit diesem Konzept realisieren. Mehr Funktion mit weniger Platz.

Charts2.jpgCharts2.jpg

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Entstehungszeitraum

Wintersemester 2013 / 2014