Dokumentation

ZHdK IAD
1. Semester
HS 09
Gestalterische Grundlagen I
Bildschirmtypografie + Icons
Riccardo Lardi
Jürgen Späth
 ZHdK | IAD
Bildschirmtypografie + Icons

AUFGABE 1 Aufgabe ist es Schriften zu recherchieren, die auf

dem iPhone/iPod allen Anforderungen gerecht
werden und immer noch gut lesbar sind. Zeigen
Sie diese Untersuchung auf unter Benennung
der einzelnen Phasen.

Anforderungen
– sehr kleine Schriftgrösse
– unterschiedliche Schriftschnitte
– schwarzer/weisser Hintergrund

Anzahl Entwürfe mind. 5

Prozess
Ich habe folgende Schriften gewählt: DINOT,
Helvetica, Tahoma, Univers und Verdana. Die
standard iPhone Schrift ist Helvetica; es ist mei-
ner Meinung nach auch eine gute Wahl für ein
Gerät wie das iPhone. Die Schriftart ist weder zu
eng- noch zu weitbündig und lässt sich in kleinen
Grössen noch relativ gut lesen.
Bei allen gewählten Schriften empfand ich es auf
dem iPhone für das Auge angenehmer, weisse
Schrift auf schwarzen Hintergrund zu haben.
Auch die Lesbarkeit schätzte ich so als besser ein.
Vom Rest stark hervorgehoben hat sich DINOT
Bold. Die Schrift ist in diesem Schriftschnitt
extrem breit und sticht durch die Massivität
deutlich hervor.
 Umsetzung

TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE

0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789

Font: DINOT Font: DINOT

Font variant: Bold Font variant: Regular
Font sizes: 42, 30, 24, 18, 12 Font sizes: 42, 30, 24, 18, 12
Leading: 50.4 - 14 Leading: 50.4 - 14

TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE

0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789

Font: Verdana Font: Verdana

Font variant: Regular Font variant: Regular
Font sizes: 40, 30, 24, 18, 12 Font sizes: 40, 30, 24, 18, 12
Leading: 50.4 - 14 Leading: 50.4 - 14
Umsetzung

TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE

0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789

Font: Tahoma Font: Tahoma

Font variant: Regular Font variant: Regular
Font sizes: 42, 30, 24, 18, 12 Font sizes: 42, 30, 24, 18, 12
Leading: 50.4 - 14 Leading: 50.4 - 14

TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE

0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789

Font: Univers Font: Univers

Font variant: CE 45 Light Font variant: CE 45 Light
Font sizes: 42, 30, 24, 18, 12 Font sizes: 42, 30, 24, 18, 12
Leading: 50.4 - 14 Leading: 50.4 - 14
 Umsetzung

TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE

0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789

Font: Helvetica Font: Helvetica

Font variant: Regular Font variant: Regular
Font sizes: 40, 30, 24, 18, 12 Font sizes: 42, 30, 24, 18, 12
Leading: 48 - 14 Leading: 48 - 14

TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE
TYPOGRAPHIE TYPOGRAPHIE

0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789
0123456789 0123456789

Font: Helvetica Font: Helvetica

Font variant: Bold Font variant: Bold
Font sizes: 40, 30, 24, 18, 12 Font sizes: 40, 30, 24, 18, 12
Leading: 48 - 14 Leading: 48 - 14
 ZHdK | IAD
Bildschirmtypografie + Icons

AUFGABE 2.1 HAUPTAUFGABE

Analysieren Sie die folgenden Schriften anhand
der unterschiedlichen Aufgaben. Verwenden
Sie für die Analyse das Wort „Typografie“ und
die Ziffern „1 2 3 4 5 6 7 8 9 0“. Visualisieren und
beschreiben Sie Ihre Erkenntnisse.

Schriften
– Arial
– DINOT

Aufgabe 1
Analysieren Sie die Schriften auf Schriftgrösse
und Schriftschnitt.

Schriftgrösse 4 - 11 Punkt

Schriftschnitte
Light, Regular, Normal, Medium, Fett, Bold, Black

Analyse
Die Unterschiede zwischen den Arial Schrift-
schnitten sind erheblicher als diese zwischen
denen der DINOT. Die verschiedenen Schrift-
schnitte variieren stärker, was sich visuell in der
jeweiligen Laufweite wahrnehmen lässt.
Umsetzung
Umsetzung
Umsetzung
 ZHdK | IAD
Bildschirmtypografie + Icons

AUFGABE 2.2 Aufgabe

Vergleichen Sie zwei Schriftschnitte auf ihre
Laufweite.

Schriften
- Arial, 36px, Regular / Bold
- DINOT, 36px Regular / Black

Analyse
Die Laufweite ist bei DINOT ist weiter als bei
Arial. Dies äussert sich beim Schriftschnitt Black
am stärksten. Die Laufweite dieser Schrift ist
wahrscheinlich massgeblich am plakativen Effekt
dieses Schriftschnittes beteiligt.
Umsetzung
 ZHdK | IAD
Bildschirmtypografie + Icons

AUFGABE 2.3 Aufgabe

Vergleichen Sie die Punzen der Schriften.

Analyse
Die Punzen von Arial sind deutlich breiter und
länger angelegt als bei DINOT. Ausserden lässt
sich eine geometrischere bzw. rundere Form der
Punzen ausmachen. Bei DINOT sind die Pun-
zenformen eher oval und wie gesagt, weniger
weitläufig, enger. Am besten lässt sich dies bei
den Buchstaben P, O und G beobachten.
Umsetzung
 ZHdK | IAD
Bildschirmtypografie + Icons

AUFGABE 2.4 Aufgabe

Stellen Sie Aufgabe 02.1 in positiv und negativ
mit folgender Farbe dar.

Farbe:
RGB 0/160/225

Analyse
Allgemein empfinde ich die Schriften wieder als
besser lesbar auf dem dunklen, bzw. blauen Hin-
tergrund. Das vorgegebene Blau ist für meinen
Geschmack auf weissem Hintergrund zu hell, als
dass es sich in genügendem Masse für das Auge
deutlich abheben könnte. Die Farbkombination
im Allgemeinen finde ich sehr angenehm, ruhig
und bedacht.
Umsetzung
 ZHdK | IAD
Bildschirmtypografie + Icons

IPHONE 1 Aufgabe
Für das sich zurzeit im Pilotstadium befindende
Car2Go car sharing Projekt von der Daimler
AG in Ulm/DE und Austin/USA soll das Design
einer iPhone Applikation entworfen werden, mit
welcher man möglichst einfach eine Spontanbu-
chung abwickeln kann. Spontanbuchung bedeu-
tet, das Auto ab sofort für 15min zu buchen und
somit für sich selbst zu reservieren. Das Car2Go
corporate design steht zur Verfügung.

Analyse
Angefangen mit dem Entwerfen des Strukto-
gramms der Applikation begann sich die Grundi-
dee rasch zu verfestigen. Mit möglichst wenigen
Schritten soll eine Spontanbuchung arrangiert
werden können - zudem soll der Benutzer das
App nur bevor er in das Auto steigt benötigen -
es soll also bewusst auf zuviele Features ver-
zichtet werden. Das Tool soll ein in sich geschlos-
senes, kompaktes System bilden, welches als
Werkzeug fungiert.
Das Design der Oberflächenelemente wurde auf
nur wenige Teile reduziert, um möglichst nicht zu
stark vom vorgegebenen iPhone feeling abzu-
weichen, welches man sich als User unweigerlich
gewohnt ist. Eine zu starke Individualiserung der
Steuerelemente würde zu unnötiger Ablenkung
und Verwirrung führen.
Umsetzung
Umsetzung
Umsetzung
 ZHdK | IAD
Bildschirmtypografie + Icons

IPHONE 2 Aufgabe
Im Bezug zum Car2Go iPhone App aus der letz-
ten Aufgabe soll eine Iconfamilie erstellt werden,
welche die benötigten Funktionalitäten abdeckt.

Analyse
Ich habe zwei Lösungen entworfen: für die erste
habe ich bewusst nicht darauf gesetzt, diese
eventuell in mein bestehendes App einzubauen.
Ich habe mich an den Gelbtönen des corporate
design orientiert und Icons entworfen, welche
denm Funktionsumfang des Programms entge-
genkommt.
Die zweite Familie soll in das App integrierbar
sein, d.h. ästhetisch in das bestehende Design
passen. Dazu bediente ich mich an den beste-
henden Icons des Programms, welche ich aus
standard iPhone Icons extrahiert hatte, und
entwarf die Gruppe weiter bzw. zog den Faden
fort und entwickelte weitere Icons in dieser Art.
Dies stellte sich, was ich natürlich hätte voraus-
sehen sollen, als schwieriger als erwartet heraus.
Jedoch konnte ich mich schlussendlich mit dem
Ergebnis zufriedengeben.
Umsetzung
Umsetzung

Account

?Help Here

Locations Map

P
Settings Parking
Umsetzung