Die Möglichkeiten und Rahmenbedingungen des Screendesigns werden vorgestellt, untersucht und in Übungen angewendet. Insbesondere steht die Strukturierung und Darstellung von Inhalten auf unterschiedlichen Displays, vom SW-2-Zeilendisplay bis zum Retina-Display im Mittelpunkt der Lehre.

Aufgabe 01

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

Umsetzung

Das Ziel der Pixelschrift lag darin, eine maximale Lesbarkeit und Schärfe auf dem Display zu erreichen. Gleichzeitig sollte sie natürlich und nicht zu technisch aussehen. Jeder Buchstabe muss dabei mit einer Fläche von nur 5 x 12 Pixeln auskommen. Serifen wurden möglichst vermieden, um eine moderne und neutrale Schrift zu entwickeln.

Aufgabe 02

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.

Umsetzung

Hierbei stand eine möglichst einfache Bedienung im Vordergrund. Das Interface ist minimal gestaltet und auf den Inhalt reduziert, sodass das Gerät auch für eine weniger technikaffine Zielgruppe einfach benutzbar ist und dennoch einen professionellen Eindruck macht.

Aufgabe 03

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

Umsetzung

Die Icons wurden im Kontext einer E-Book Navigation gestaltet. Wichtig war dabei ein einheitlicher Stil und natürlich einfaches Verständnis der Metaphern. Jedes Bild wurde als Vektorgrafik erstellt und zusätzlich für die Darstellung in 32 x 32 Pixeln optimiert, sodass eine vielfältige Verwendung möglich wird.

Aufgabe 04

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?

Umsetzung

Am Beispiel von drei Button-Designs wurden die verschiedenen Interaktionsphasen zuerst als Vektorgrafik und später ohne den Einsatz von Bildern mit Hilfe von HTML5 und CSS3 in Form einer Demo-Website umgesetzt.