DokumentationZHdK IAD1. SemesterHS 09Gestalterische Grundlagen IBildschirmtypografie + IconsRiccardo LardiJü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

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

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

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

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

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

Font: VerdanaFont variant: RegularFont sizes: 40, 30, 24, 18, 12Leading: 50.4 - 14

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

Font: VerdanaFont variant: RegularFont sizes: 40, 30, 24, 18, 12Leading: 50.4 - 14

Umsetzung

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

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

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

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

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

TYPOGRAPHIE

012345678901234567890123456789

0123456789

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

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

TYPOGRAPHIE

012345678901234567890123456789

0123456789

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

Umsetzung

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

Font: HelveticaFont variant: RegularFont sizes: 40, 30, 24, 18, 12Leading: 48 - 14

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

Font: HelveticaFont variant: RegularFont sizes: 42, 30, 24, 18, 12Leading: 48 - 14

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

Font: HelveticaFont variant: BoldFont sizes: 40, 30, 24, 18, 12Leading: 48 - 14

TYPOGRAPHIE

0123456789

TYPOGRAPHIETYPOGRAPHIETYPOGRAPHIETYPOGRAPHIE

0123456789012345678901234567890123456789

Font: HelveticaFont variant: BoldFont sizes: 40, 30, 24, 18, 12Leading: 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

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.

AUFGABE 2.3

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

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.

IPHONE 1

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

Parking

PPSettings

Umsetzung