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 SS 13

Grundlagen Visual Interface Design SS 13

Analyse ZEIT-Grafik "Wem gehört die Welt?"

Aufgabe: Analysiere eine Informationsvisualisierung aus der ZEIT.

Analyse - Wem gehört die Welt - Max Tillich.pdf PDF Analyse - Wem gehört die Welt - Max Tillich.pdf
s37-infografik-wirtschaft.pdf PDF s37-infografik-wirtschaft.pdf

Pixelschrift-Entwicklung

Aufgabe: Entwicklung einer monospaced Pixelschrift zum Einsatz auf einfarbigen Displays mit geringer Auflösung, die sowohl gut lesbar als auch formal eigenständig ist.

Mein Ziel war es ein verhältnismäßig freundliches Schriftbild zu schaffen, ohne dass es zu rund und damit verspielt wirken würde. Abgesehen davon habe ich versucht Probleme wie schwierig von einander zu unterscheidende „I“ und „l“ Glyphen durch klare Merkmale unterscheidbar zu machen. Die gewählte x-height trägt dazu bei, dass Großbuchstaben mehr herausstechen, was es einfacher macht im Textfluss spaces zu erkennen. Das ist bei monospaced Pixelschriften häufig ein Problem. Die Schrift wurde in Photoshop handgezeichnet.

Max - Pixelschrift 01.31.50.pngMax - Pixelschrift 01.31.50.png

2.png2.png
1.png1.png
3.png3.png

S/W-Displays

Screen Shot 2013-06-23 at 00.27.53.pngScreen Shot 2013-06-23 at 00.27.53.png

Aufgabe: Informationsarchitektur und Screen-Aufteilung für zwei Geräte einer Tischtelefon-Familie mit 2- und 6-zeiligem Schwarz-Weiss-Display. Das Unterbringen der Bedienfunktionen und die Operationalität sind dabei im gleichen Maße zu beachten, wie gestalterische Aspekte und Lesbarkeit.

Die Erfahrung bei der Benutzung des Telefons sollte personalisiert werden, ohne dabei unprofessionell zu werden. Information ist nur dann da, wenn man sie braucht. Die Uhrzeit z.B. schaut man eher auf dem Computer nach. Gewonnener Platz kann so für Kommunikation zwischen Telefon und Benutzer genutzt werden. Icons helfen dem Auge beim Filtern der Inhalte. Die leicht abgerundete Pixelschrift soll wie oben beschrieben Lesbarkeit und Benutzung angenehmer machen.

15.png15.png
14.png14.png
13.png13.png
12.png12.png

5.png5.png
6.png6.png
7.png7.png
8.png8.png

Icon-Entwicklung

Aufgabe: Konzeption einer semantischen und syntaktischen Icon-Familie zu einem frei gewählten Thema.

Für ein Physical Interfaces Projekt brauchte ich icons, die für teils negative Gefühle stehen aber trotzdem freundlich und ansprechend gestaltet sind, damit sie auf eine Taste gedruckt zur interaktion einladen würden. Darüber hinaus mussten sie schnell erkänntlich und somit als kontraststarkes Piktogram gemacht werden.

icon-1.pngicon-1.png
icon-2.pngicon-2.png
icon-3.pngicon-3.png
icon-4.pngicon-4.png
icon-5.pngicon-5.png
icon-6.pngicon-6.png
icon-7.pngicon-7.png
icon-8.pngicon-8.png
icon-9.pngicon-9.png
icon-10.pngicon-10.png
IMG_6997.jpgIMG_6997.jpg
IMG_7097.jpgIMG_7097.jpg

1.png1.png
2.png2.png
3.JPG3.JPG

Schaltflächen aka Buttons

Aufgabe: Gestaltung der visuellen Erschei- nung und der User Experience von interaktiven Schaltflächen. Wie können die verschiedenen Phasen der Interaktion so gestaltet werden, dass das Interesse der User geweckt wird, sie zur Nutzung animiert und intuitiv geleitet werden?

Ein Teil der Entwürfe sind buttons, die man erst entsichern oder freischalten muss durch vereinfachte Mechanismen aus physikalischen user interfaces. Andere und größtenteils mit HTML, JS und CSS implementierte buttons nutzen sich ab, verändern ihre Form oder springen mehrmals weg bevor sie betätigt werden können.

Untitled-1.pngUntitled-1.png

Screen Shot 2013-06-23 at 00.14.46.pngScreen Shot 2013-06-23 at 00.14.46.png
IMG_26981.jpgIMG_26981.jpg
buttons-design.pngbuttons-design.png

Fazit

Der Kurs gab mir Anlass mich mit Techniken und Arbeitsweisen zu befassen, die nicht alltäglich oder so speziell sind, dass es selten Gelegenheiten zur Anwendung gibt. Besonders die Entwicklung einer Pixelschrift für das OpenStage-Telefon Display war herausfordernd und „unterhaltsam“. Die Button-Aufgabe gab Anlas zum experimentieren und sich neue Bedienkonzepte auszudenken.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Constanze Langer

Entstehungszeitraum

Sommersemester 2013

zusätzliches Material

Links