Verdana

Courier

Georgia

ArialTimes New Roman

w

k

MR

on-screen-design

grundlagen der webgestaltung

07.03.2002

rainer weidenhiller

on-screen-design

• schrift• farbgebung• layout

schrift

• welche schriftarten sind webfähig?

– groteskschriften (serifenlose linearantiqua)

• arial• verdana

– antiquaschriften• times• georgia• courier

schrift

• diese schriftarten sind auf allen computern installiert

• nicht installierte schriften werden vom browser ersetzt und zerstören u. u. das layout

• diese schriftarten sind auch bei einer auflösung von 72 dpi noch detailgenau

schrift

embedded fonts

• bieten die möglichkeit schriftarten in html einzubinden und somit mit dem html-code zu übermitteln

• dazu sind spezielle programme erforderlich:

• true doc (bitstream)

• open type (adobe)

• weft (microsoft)

schrift

embedded fontsvorteil:

auch nicht installierte schriften können beim user angezeigt werden

schriften

nachteile:

- nicht alle schriften eignen sich technisch zum einbetten

- viele schriftarten werden bei einer 72-dpi-darstellung schwer lesbar

- unter umständen klappen beim user popupfenster auf

- embeddingprogramme sind kommerziell,ausnahme weft

embedded fonts

schriften

schriften als grafik

schriften können auch als grafiken (gif oder jpg) abgespeichert werden

notwendig bei logos und firmenbezeichnungen

achtung:

diese „schriften“ sind weder editierbar, noch können sie von schuchmaschienen ausgelesen werden!

schriften

schrift und layout

grundregel

2 schriftarten

2 auszeichnungen

diese präsentation lief bisher mit 1 schriftart und einer auszeichnung

satzbreite

35 - 60 zeichen

farbgebung

ebenso wie bei den schriften heißt es hier „weniger ist mehr“

die farbgebung einer webseite ist immer das wechselspiel von schrift, farbe und bildern

d.h. das design lebt vom zusammenspiel dieser elemente und nicht von den elementen

farbgebung

die farbgebung muss zum inhalt passen

bilder sollten auf neutralen untergrund gesetzt werden

schriftfarbe und hintergrund müssen harmonieren

farbgebung

kontraste

farbe- an-

sich-

kontrast

farbgebung

kontraste

hell-

dunkel-

kontrast

farbgebung

kontraste

komplementärkontrast

farbgebung

kontraste

simultankontrast

simultankontrast

farbgebung

farbraum• alle auf dem computer dargestellten farben

werden nach der additiven farbmischung gemischt

- die drei grundfarben sind rot grün und blau

• drucker erzeugen farbe durch subtraktive farmischung

- hierbei sind die grundfarben cyan (blau), magenta (rot) und gelb

• es ist fast unmöglich bildschirmfarben 1:1 als print wiederzugeben

layout

tipps:

•breite der webseite max. 700 Pixel

•vorsicht mit hintergrundbildern, sie werden u.u. gekachelt

•hintergrundbilder dezent halten– wasserzeichen– schwarz-weiß

layout

tipps:

•bilder als gif- 265 farben, transparenz möglich

•oder als jpeg- 16,7 millionen farben, keine

transparenz

•mit animationen sparsam umgehen

•ladezeiten testen

layout

tipps:

•style sheets verwenden•mit tabellen arbeiten•beispiele

layout

und so bitte nicht!

•wie war das mit den tabellen?•ob das die richtige wahl ist?•alles ist möglich!•weitere goodies (badies?)