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 WS 13/14

Grundlagen Visual Interface Design WS 13/14

Eine Zusammenfassung meiner Ergebnisse aus dem Grundlagenkurs „Visual Interface Design“, mit Prof. Constanze Langer.

A Day Of Your Life - Informationsgrafik

try6.jpgtry6.jpg

Ziel dieser Aufgabe war es, dem Betrachter einen bestimmen Tagesablauf in Form einer Infografik näher zu bringen. Ich entschied mich relativ schnell dazu die fast tägliche Route die ich von Berlin nach Potsdam auf mich nehme zu visualisieren. Denn vielen anderen ergeht es bestimmt ähnlich, der Weg von Berlin nach Potsdam nimmt nach dem Semesterbeginn einen großen Platz im Alltag ein. Ich habe die ca. 70 Minütige Fahrt etwas genauer unter die Lupe genommen und versucht eine interessante und ansehnliche Darstellungsform der Route zu kreieren. Der Faktor Zeit spiegelt sich dabei in der vertikalen Ebene wider. Ein Quadrat im Raster entspricht etwa 3 Minuten. Die Himmelsrichtungen sollen zur zusätzlichen Übersetzung der Grafik dienen.

033_screenshot_google_info.jpg033_screenshot_google_info.jpg
02_pfad_route.jpg02_pfad_route.jpg
01_screenshot.jpg01_screenshot.jpg

Entwicklung einer formal eigenständigen Displayschrift

alphabet.jpgalphabet.jpg

Die Aufgabe bestand darin eine eigene, klare Pixelfont zu definieren. Zu Anfangs experimentierte ich mit länglichen Flächen, bei denen ich auch im weiteren Verlauf, bis hin zur Fertigstellung geblieben bin. Mehrere Anläufe waren meist nötig um auf eine sinnvolle Konstellation der Pixel zu stoßen. Gerade Sonderzeichen, wie beispielsweise das „@“ stellten sich als sehr knifflig dar, denn hier musste ich das Grundraster - welches die maximale Höhe & Breite von 9px x 5px beträgt - erweitern um eine saubere Kennzeichnung zu erzielen. Nach der Fertigstellung experimentierte ich noch etwas herum und stieß auf die Outline-Darstellung der Displayschrift, welche ich auch ganz interessant finde.

04_erste_test.jpg04_erste_test.jpg
03_pixel_r_.jpg03_pixel_r_.jpg
02_pixel_filled.jpg02_pixel_filled.jpg
01_pixel_ outline.jpg01_pixel_ outline.jpg

Entwicklung einer Zeichenfamilie

icons.jpgicons.jpg

Hier durften wir 5 Piktogramme nach Wahl erstellen. Ziel der Aufgabe war es eine eigene Formsprache zu finden. Ich entschied mich für fünf Gegenstände, die zum Thema „Musik“ passen. Ich versuchte diesmal etwas freier an die Aufgabe heranzugehen und illustrierte die Objekte ohne vorgegebenes Raster. Lediglich die Grundform des Plattenspielers galt als Ausgangspunkt für die restlichen Piktogramme.

Hier habe ich ein interaktives Frage und Antwortspiel animiert, indem mehrere Feedbacks zum Nutzer klar werden sollen. Im Beispiel wird gezeigt, wie sich das Interface beim Beantworten einer richtigen Frage zum User verhält. Der „GO-Button“ aktiviert sich nur, wenn eine Antwort angekreuzt wurde. Beim Bestätigen erfährt er dann, ob die Antwort korrekt oder falsch war. Hier im Beispiel ist sie richtig. Der Spieler wird gelobt, erfährt seine gewonnenen Punkte & gelangt zur nächsten Frage. Mir war es wichtig einen weichen Ablauf der Animationen darzustellen. Ich denke, dass dadurch sich ständig ändernde Werte im Interface begreifbarer werden. Dazu entsteht ein angenehmes Nutzererlebnis.

Ein Projekt von

Fachgruppe

Sonstiges

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Constanze Langer

Entstehungszeitraum

Wintersemester 2013 / 2014

zusätzliches Material