Screendesign

Alexandra Herfurtner

v4-vorsp.qxd 17.02.03 21:58 Seite 3

41

Gestaltungs- grundlagen

In diesem Kapitel beschäftigen wir uns mit allen Gestaltungsgrundlagen,die wir für ein Screendesign brauchen. Über Farb- und Formenlehre bishin zur Komposition eines Screens und zur Typografie beinhaltet diesesKapitel alle Themen, die für eine gute Gestaltung wichtig sind.

3.1 FarbenlehreDas Ziel von Farbgestaltung wird es im Allgemeinen sein,

die Farbnuancen individuell und funktional richtig auszuwählen und dabei ausgewogene Harmonien zu schaffen.

HARALD KÜPPERS: Das Grundgesetz der Farbenlehre

3.1.1 Farbdefinition und Farbraum Durch die Jahrhunderte haben sich viele Künstler, Alchimisten, Philoso-phen und Wissenschaftler mit der Frage der Farbe und der Farbdefinitionauseinander gesetzt. Goethes »Sinnlich-sittliche Dimension der Farbe« istbekannt, Farblehren von Johannes Itten oder Harald Küppers werden vie-lerorts noch in den Schulen gelehrt. Für ein Screendesign, so wie wir es er-stellen wollen, sind diese Farblehren allerdings unzulänglich. Um nun ge-nauer festzustellen, wie Farben definiert werden und wie wir mit Farbenam Bildschirm arbeiten, muss man bei der Farbwahrnehmung im Auge be-ginnen, so wie es Harald Küppers mit seiner Farblehre in den siebzigerJahren tat.

KAPITEL

33

v4-03.qxd 17.02.03 22:00 Seite 41

Ausgehend von den Zapfen in unserem Auge lässt sich die Gesamtheit al-ler Farben recht einfach schematisieren. Aus den Primärfarben – entspre-chend der Empfänglichkeit der Zapfen der Netzhaut – ergeben sich beigleichzeitiger Reizung mehrerer Zapfentypen die Sekundärfarben. Dabeischeinen die Primärfarben dem RGB-System des Computers zu entspre-chen, die Sekundärfarben scheinbar denen des Vierfarb-Druckes.

Primärfarben

Sekundärfarben

Ordnet man nun die Primär- und Sekundärfarben – den so genanntenbunten Farben – zusammen mit den Helligkeitsstufen zwischen Weiß undSchwarz – den so genannten unbunten Farben – zu einer Gesamtheit zu-einander, dann ergibt sich ein dreidimensionaler Farbraum. Man kannsich diesen Farbraum als ein mehr oder weniger Football-förmiges oderauch würfelförmiges Gebilde vorstellen. In Harald Küppers Grundgesetzder Farbenlehre beispielsweise ergibt die Gesamtheit aller Farben einRhomboeder. Bewegt man sich innerhalb dieser Farbräume, kann manunterscheiden zwischen Vollfarben, hellklaren und dunkelklaren Farbensowie den trüben Farben.

42

Gestaltungsgrundlagen

Grün Orangerot Violettblau

Cyanblau Magentarot Gelb

v4-03.qxd 17.02.03 22:00 Seite 42

Vollfarben

Vollfarben sind reine Farben, ohne Anteile von Weiß oder Schwarz. Wir fin-den sie nur in der Mitte am äußersten Rand des Farbraumes. Es handelt sichum die Primär- und Sekundärfarben mit allen Mischungsverhältnissen.

Hellklare Farben

Mischt man die Vollfarben mit einem Anteil an Weiß, erhält man hellklareFarben. Wir bewegen uns quasi an der äußeren Hülle des Farbraumesdem reinen Weiß entgegen.

Dunkelklare Farben

Mischt man hingegen die Vollfarben mit einem Anteil an Schwarz, werdendie Farbtöne dunkler und wir erhalten die dunkelklaren Farben.

Trübe Farben

Das Innere unseres Farbraumes beinhaltet Farben mit Anteilen anSchwarz und Weiß, denn wenn wir uns dem Punkt nähern, an dem dielineare Menge der unbunten Farben den Kreis der bunten Farben »durch-sticht«, befindet sich dort das neutrale Grau. In der Gesamtheit allerFarben nehmen die trüben Farben den größten Anteil ein, auch wenn wirsie zunächst nicht als trüb empfinden.

43

3.1 Farbenlehre

v4-03.qxd 17.02.03 22:00 Seite 43

Alle diese Farben lassen sich durch ein einfaches Schema im dreidimen-sionalen Farbraum definieren. Viele Grafik- und Bildbearbeitungspro-gramme besitzen Paletten mit Schiebereglern, um Farben anzumischen.Einige bieten dazu ein HSB-Verfahren an. H steht für Hue (Englisch: Farb-ton), S für Saturation, also Sättigung, und B für Brightness, die Helligkeit.Der Farbton (H) ändert sich durch eine radiale Bewegung um die lineareSchwarz/Weiß-Achse. Wir drehen quasi am Farbrad. Die Sättigung (S) än-dern wir, indem wir uns in einer diametralen Bewegung vom Rand desFarbraumes der linearen Schwarz/Weiß-Achse nähern. Im Zentrum desFarbraumes befindet sich ein neutrales Grau, also eine absolut ungesät-tigte Farbe. Am stärksten gesättigt sind demnach die Vollfarben. DieHelligkeit (B) ändert sich durch eine vertikale Bewegung innerhalb desFarbraumes zwischen Weiß und Schwarz. Bewege ich mich an der äußer-sten Kante des Farbraumes – quasi an seiner Hülle –, so findet man dortdie hell- und dunkelklaren Farben.

Abbildung 3.1: Die Einstell-

möglichkeiten eines HSB-Reglerswerden durch die

verschiedenenBewegungsrich-tungen im Farb-

raum verdeutlicht.

44

Gestaltungsgrundlagen

Y

M

C

B

G

R

Wei§

Schwarz

Weiß

Schwarz

v4-03.qxd 17.02.03 22:00 Seite 44

Die genaue Definition aller Farben soll uns helfen, die richtigen Farben fürunser Screendesign auszuwählen und anzumischen. Viele der klassischenFarblehren arbeiten nach diesem System, richten sich aber größtenteils andie Farbverwendung in der Kunst, bzw. im Druck, arbeiten also mit Farb-pigmenten. Wenn Sie bisher mit den HSB-Reglern in Ihrer Grafiksoftwarenicht viel anfangen konnten, sollte es Ihnen nun leichter fallen. Sie bewe-gen sich nur innerhalb eines dreidimensionalen Farbraums. Allerdings sagtdie HSB-Mischung relativ wenig über den Farbmodus aus, mit dem dasBild ausgegeben wird, denn beim Screendesign arbeiten wir mit anderenFarben als im Druck. Der Farbmodus eines Bildes bestimmt, ob es in RGB-oder in CMYK-Farben angelegt ist. Für ein Screendesign arbeitet man im-mer im RGB-Modus.

Abbildung 3.2:HSB-Mischpalettenaus CorelDraw,Photoshop undIllustrator

45

3.1 Farbenlehre

v4-03.qxd 17.02.03 22:00 Seite 45

Additive Farbmischung

Die additive Farbmischung arbeitet mit Lichtfarben. Überlagern sich mehre-re Lichtfarben, findet eine Addition der Lichtreize statt. Mit der additivenMischung kann man auch die Sehvorgänge im Auge beschreiben, auch hierkommt es zu einer Addition der Lichtreize, wenn die für die verschiedenenLicht-Wellenlängen empfindlichen Zapfen gleichzeitig gereizt werden.

Bei der additiven Farbmischung geht man von den drei Grundfarben Rot,Grün und Blau aus. Legt man ein blaues Licht, ein rotes und ein grünesLicht zusammen, ergibt sich in der Summe aller Lichtfarben weißes Licht.Dort wo kein Licht ist, befindet sich Schwarz. Die additive Farbmischungentspricht ebenfalls dem Farbsystem, mit dem unsere Monitore arbeiten:dem RGB-System. Auch am Monitor werden alle Farben aus rotem (R),grünem (G) und blauem (B) Licht erzeugt. (Bei älteren Monitoren kannman das sogar noch am Kabel erkennen, wenn drei farbige Buchsen anden Monitor angeschlossen werden.)

Für unser Screendesign ist wichtig: Hier gilt die additive Farbmischung.Unser Monitor arbeitet mit Licht, ebenso wie unser Farbempfindendurch reine Lichtreize zustande kommt. In Programmen wie zumBeispiel Photoshop wird dies auch sehr schön in der Farbmischer-Palette verdeutlicht: Hier gibt es Schieberegler im RGB-System, undauch der Farbmodus wird auf RGB eingestellt.

46

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:00 Seite 46

Subtraktive Farbmischung

Die subtraktive Farbmischung ist eigentlich ein Mischsystem mit Pigment-farben, arbeitet also mit Körperfarben. Dabei muss man unterscheiden,dass hier nicht mit dem »Malkasten« gearbeitet wird – so wie wir viel-leicht alle einmal anhand Goethes Farbenlehre Rot, Gelb und Blau alsGrundfarben kennen gelernt haben –, sondern sich das System der sub-traktiven Farbmischung eher an den Farben orientiert, wie sie im Offset-Druck eingesetzt werden. Hier werden die Farben Cyanblau, Magenta undGelb gemischt und ergeben in der Gesamtheit mehr oder wenigerSchwarz. Schauen wir uns die subtraktive Mischung einmal genauer inHinblick auf die Lichtwellen und -reize auf Stäbchen und Zapfen an, zeigtsich, dass nach dem Prinzip der Körperfarben ein Cyanblau beispielsweiseaus Lichtreizen von Violettblau und Grün besteht und alle Lichtanteile vonOrangerot absorbiert. Wenn nun aber Magenta aus den Lichtwellen fürorangerotes und violettblaues Licht besteht und alles Grün absorbiert,wird deutlich, dass die Mischung von Magenta, Cyanblau und Gelb alleLichtwellen absorbiert und somit der Farbeindruck von etwas dunklem,fast Schwarz entsteht. Man darf aber nicht übersehen, dass bei der sub-traktiven Mischung eben kein richtiges Schwarz entsteht, so wie bei deradditiven Mischung ohne jegliche Farbe (Licht). Dies ist auch der Grund,weshalb im Offset- und anderen Druckverfahren ein Schwarz (CMYK – vonBlack oder Kontrast) als vierte Druckfarbe verwendet werden muss, umentsprechende Tiefen klar darzustellen.

47

3.1 Farbenlehre

v4-03.qxd 17.02.03 22:00 Seite 47

Egal, mit welchen Mischverfahren wir uns die Farben für unser Screen-design am Monitor anmischen, das Gerät an sich arbeitet immer mit RGB-Farben. Also auch, wenn Sie bisher für den Druck gearbeitet haben undsich mit Cyan, Magenta, Gelb und Schwarz am besten auskennen. DerKnackpunkt ist leider immer noch die begrenzte Möglichkeit der Monitore,alle Farben darzustellen. Auch wenn ein Monitor mit RGB-Lichtfarben ar-beitet, so wie wir im Auge durch entsprechende Reizung der Stäbchen undZapfen auch nur rotes, blaues und grünes Licht wahrnehmen, so kann erdoch in keinster Weise all die Farben nachahmen und darstellen, die wirimstande sind zu sehen und wahrzunehmen. Der Farbumfang einesMonitores ist begrenzt. Im CIE-Lab-Farbraum werden die verschiedenenFarbumfänge schematisch dargestellt (Abbildung 3.4). Auf der Basis dessichtbaren Farbspektrums – Infrarot und Ultraviolett sind hier bewusstnicht berücksichtigt – ist der RGB-Farbraum sehr viel kleiner. Der Farb-umfang von CMYK-(Druck-)Farben ist noch viel kleiner und liegt nicht ab-solut deckungsgleich mit dem RGB-Farbraum. Daraus resultiert dieTatsache, dass es Farben gibt, die wir am Monitor sehen, aber so nichtdrucken können – und umgekehrt gibt es Farben, die man drucken, abernicht auf dem Monitor darstellen kann.

Vielleicht haben Sie diesen Effekt selbst schon einmal bemerkt: Es gibtFarben, die auf dem Monitor ganz anders aussehen als im Druck! Da einMonitor mit Licht arbeitet und eine Leuchtkraft besitzt, wirken selbst trübeund dunkle Farben am Bildschirm leuchtend und hell, während gedruckteFarben immer etwas trüber wirken, da die Oberfläche stumpf ist (nur durchLackierung können die Farben dann etwas strahlender werden). Der Unter-

Abbildung 3.3:RGB-Mischpaletten

aus Flash,Illustrator,

Photoshop

48

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:00 Seite 48

schied zwischen dem, was wir sehen können, und dem, was uns einMonitor zeigen kann, lässt sich auch gut bei Urlaubsfotos nachvollziehen.Manchmal hat man einfach den Eindruck, dass der Himmel in Wirklichkeitdoch viel schöner und blauer war als auf dem Foto ...

3.1.2 Farbkomposition und Kontraste

Ein gelungenes Screendesign lebt auch von der richtigen Auswahl derFarben. Je nachdem, welche Farben man auswählt und wie man diese zu-einander stellt, ergeben sich unterschiedliche Wirkungen. Durch dieKombination von zwei und mehr Farben werden bestimmte Farbwirkungenerzeugt. Die Farbgestaltung teilt sich in monochrome und polychromeGestaltung.

Abbildung 3.4:Farbumfang(Gamut). Auf der CIE-Norm-farbtafel sind diedeutlich kleinerenFarbumfänge vonRGB (Monitor) undCMYK dargestellt.

49

3.1 Farbenlehre

520

530

540

550

560

570

580

590

600

610620

700-780

380-410460

470

480

490

500

510

RGB-Farbraum

CMYK-Farbraum

Für den Menschensichtbarer Farbraum

v4-03.qxd 17.02.03 22:00 Seite 49

Monochrom

(von mono, gr.: allein, ein; chromos, gr.: Farbe) Farbkomposition anhandeiner Farbe, mit Änderungen nur in ihrer Helligkeit oder Sättigung

Polychrom

(von polys, gr.: viel) Vielfarbigkeit, Farbkomposition mit mehreren Farben

Die Wirkung von mehreren Farben besteht aus Kontrasten. Jeder Kontrastverstärkt die Farbempfindung einzelner Farben oder verstärkt die Farb-empfindung der gesamten Farben. Kontraste sind für die Gestaltung wich-

Abbildung 3.5:Monochrome

Gestaltung, hiermit matten

Blaugrau-Tönen.(Beispiel von der CD-ROM

»Sigmund Freudund die Geheim-

nisse der Seele«)

Abbildung 3.6:Eine polychrome

Gestaltung ver-wendet mehrereFarben. (Beispielvon der CD-ROM»Sigmund Freudund die Geheim-

nisse der Seele«)

50

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:00 Seite 50

tig und resultieren aus der Art und Weise, wie Farbreize in unserem Augeempfangen und von uns wahrgenommen werden. Bei der Verwendung vonFarben in der Gestaltung sollte man sich immer der Kontraste bewusst seinund sie gezielt einsetzten können. Ein falscher Einsatz, zum Beispiel einKomplementärkontrast von roter Schrift auf grünem Grund, erzeugt einenegative Wirkung. Das Bild beginnt zu »flimmern« und bei einer Störung inder Farbwahrnehmung, der Rot-Grün-Blindheit z.B., kann man den Texteventuell gar nicht lesen.

Der richtige Einsatz von Farbkontrasten besteht darin, sie zur Verstärkungvon Wirkungen zu verwenden, ohne dass dabei der Inhalt verloren geht.Man kann Schwerpunkte setzen und das Augenmerk auf bestimmteBereiche, z.B. Schaltflächen lenken. In den meisten Fällen wird man daherauch eine polychrome Gestaltung in Betracht ziehen, also eine Arbeit mitmehreren unterschiedlichen Farben. Je mehr bunte Farben eingesetzt wer-den, desto wichtiger ist dann der Farbtonkontrast.

Arbeitet man also polychrom, möchte Kontraste einsetzen um bei-spielsweise Headlines oder Schaltflächen zu akzentuieren, sollte mansich folgende Leitsätze merken:

Prägnanter und auffälliger sind• warme Farben mehr als kalte Farben• reine mehr als getrübte• gesättigte mehr als ungesättigte• sehr helle oder sehr dunkle mehr als mittlere Helligkeiten.

Sehen Sie sich dazu auf der CD die Farbkontraste im Kapitel »Farbe«an. Dort finden Sie alle Kontraste illustriert.

Abbildung 3.7:Hier wurde einmalbewusst der stärk-ste Komplementär-kontrast gewählt,der Text beginnt zu»flimmern«. Hiergilt es abzumil-dern, indem manandere Farben ver-wendet!

51

3.1 Farbenlehre

v4-03.qxd 17.02.03 22:00 Seite 51

3.1.3 Farbwirkungen

Abgesehen von der Farbwahrnehmung des Einzelnen – jeder sieht Farbenetwas anders –, haben Farben bestimmte Erinnerungswerte und lösenGefühle und Assoziationen aus. Farben und Farbkompositionen könnenStimmungen hervorrufen. Man spricht dann von dem Begriff der »Anmu-tung« (der sich auch auf Formen bezieht). Verwendet man z. B. blaue Tönein verschiedenen Helligkeiten und kombiniert diese mit Weiß, erinnert diesviele an Winter oder Frische. Im Gegensatz dazu rufen Rottöne, eventuell in Kombination mit Braun-Rot-Tönen und trüben Grüntönen, eher dieAssoziation Herbst und Wärme hervor.

Die Assoziationen, die den Farben zugeordnet werden, sind abhängigvom Betrachter, seinen Erfahrungen und dem Umfeld der Farbe sowiedem Umfeld des Betrachters. Die assoziativen Farbwirkungen haben un-terschiedliche Ursprünge. Von einer psychologischen Farbwirkung sprichtman, wenn durch Farben automatische, unbewusste Reaktionen undGefühle freigesetzt werden. Diese sind entstanden aus Erfahrungen, dieteils naturbegründet sind, teils auf kulturellen, traditionellen und anderenErfahrungen basieren. So wird z.B. mit der Farbe Grün die Empfindungvon Unreife oder Natur verbunden. Die symbolische Wirkung von Grünentspricht aber auch dem Symbol der Hoffnung.

Rot

... wird mit Feuer, Liebe und Hass assoziiert. Rot gilt ebenso als weiblichewie auch als männliche Farbe, wird sie doch mit Herrschaft, Macht undReichtum gleichgesetzt. Ein überwiegend rotes Screendesign zieht höchs-te Aufmerksamkeit auf sich, setzt Signale und wirkt dynamisch und tem-peramentvoll.

Abbildung 3.8:Dynamik und

Temperament, beiwww.ogilvy.com

52

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:00 Seite 52

Blau

... gilt als entspannende und beruhigende Farbe. Mit Blau wird die Sehn-sucht nach Weite und Klarheit verbunden, es gibt ein Gefühl der Kälte undFerne. Blau gilt aber auch als sehr vertrauenserweckende Farbe, daherwird Blau sehr gerne in Firmenlogos verwendet, speziell bei Banken undVersicherungen – schließlich soll man sich persönlich und finanziell dortsicher fühlen!

Grün

... ist ebenso wie Blau eine überwiegend positiv besetzte Farbe. Allein ineinigen Nuancen kann sie ins negative – Gift! – umschlagen. Grün wird mit

Abbildung 3.9:Das vertrauener-weckende Blau –es gibt fast unend-lich viele Schattie-rungen. In diesemdunklen Ton hat eseinen sehr edlenTouch! www.allianz.de

Abbildung 3.10:Hier musste alleinschon passendzum Namen dieFarbe Grün ver-wendet werden:www.naturemee-tings.com

53

3.1 Farbenlehre

v4-03.qxd 17.02.03 22:00 Seite 53

Natur und Wachstum assoziiert, mit Neubeginn und Gesundheit, ist dieklassische Farbe der Hoffnung. Genauso wie Grün Leben, Jugend, Frischebeinhaltet, kann es aber auch für Unreife stehen und eine kalte Farb-temperaturwirkung haben.

Gelb

... steht als helle und erheiternde Farbe für Licht, Sonne und Sinnlichkeit.Es wirkt anregend und hat eine warme Farbtemperaturwirkung. In Chinawar Gelb als göttliche Farbe lange Zeit allein dem Kaiser vorbehalten. Gelbwird aber auch mit Neid, Geiz und Verrat in Verbindung gebracht. Nichtumsonst war der Judenstern im Dritten Reich gelb.

Violett

... verbindet als Mischung Blau und Rot, wirkt gleichzeitig anregend undberuhigend, gilt eher als passive Farbe. Violett hat etwas Geheimnisvolles,Weibliches an sich und ist eine genauso beliebte wie unbeliebte Farbe.

Abbildung 3.11:Sonnig, frisch und fröhlich: das Gelb von

www.epsilon-lab.com

Abbildung 3.12:Violett und Lila

sind eher seltenverwendete Far-ben. Hier bietetViolett als eher

weibliche Farbe ei-nen angenehmen

Kontrast zum»männlichen«

Thema – es gehtum Motoren und

Maschinen.www.agippetroli.it

54

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:00 Seite 54

Weiß

... ist für viele die reine Farbe schlechthin. Mit ihr verbindet man allesUnberührte, Göttliche und Erhabene. Eine »weiße Weste« hat nur jemand,der sich nichts hat zuschulden kommen lassen. Als leichte, reine und küh-le Farbe wird sie in der Werbung teils bis in die Extreme verwendet (einWeiß, das weißer ist als weiß, gibt es ja eigentlich gar nicht). In früherenZeiten und in anderen Kulturen war und ist aufgrund dieser Reinheit –vielleicht auch der gedanklichen Leere – Weiß die Farbe der Trauer. Heut-zutage verbindet man mit Weiß eher die Klarheit und Ordnung.

Schwarz

... war im christlichen Abendland schon immer eine Farbe, die vorrangigdie Geistlichkeit für sich nutzte, da für sie Schwarz Demut und Buße ver-

Abbildung 3.13:Ein reiner, weißerScreen, ganzzurückhaltend undklar –www.bundp.ch

Abbildung 3.14:Eleganz undWürde, ein wirklichedler Touch –www.kings-burypark.com

55

3.1 Farbenlehre

v4-03.qxd 17.02.03 22:00 Seite 55

deutlichte. Als unbunte Farbe, quasi als »Dunkelheit«, saugt Schwarz al-les in sich auf, gilt als abgrenzend und individuell. Die klassische Trauer-farbe besitzt aber ebenso einen edlen Touch, ist sophisticated und hältsich zurück, damit andere Farben umso stärker strahlen können.

Für ein gelungenes Screendesign ist also die richtige Farbwahl ebensoausschlaggebend wie beispielsweise für einen gedruckten Prospekt.Während bezüglich der Farbkontraste, Farbstimmungen und -wirkungenim Screendesign in den Grundzügen das Gleiche gilt, wie für den Print, istder Farbraum doch ein anderer. Nicht nur dass der CIE-Farbraum zeigt,dass es mehr RGB-Farben als CMYK- (also druckbare) Farben gibt. Wichtigist zu erkennen, dass die RGB-Farben immer leuchtender sind, sie habenallein schon aufgrund der Technik – des Lichtes vom Monitor – eine deut-lich höhere Strahlkraft als gedruckte Farben. Daher ist es sehr schwer bisfast unmöglich am Bildschirm trübe, gedeckte Farben oder Pastelltönedarzustellen. Trennen Sie sich also von der Vorstellung, dass das, was Sieam Bildschirm sehen, genauso auf dem Papier zu sehen sein wird, oderumgekehrt. Unser Auge lässt sich zu leicht täuschen. Wenn Sie bisherhauptsächlich für den Print am Monitor gearbeitet haben, kennen Sie dasProblem bestimmt. Aber auch im Screendesign – wenn man also amBildschirm für den Bildschirm gestaltet – ist nicht immer eine absoluteFarbsicherheit gegeben. Farben können von Computer zu Computer, vonMonitor zu Monitor sehr stark variieren. Vertrauen Sie einfach auf die rich-tigen Farbmischungen, Kontraste und Harmonien, dann wird die Stim-mung und Anmutung schon richtig empfunden werden, auch wenn malder eine oder andere Farbton leicht abweichen sollte.

56

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:00 Seite 56

3.2 FormenlehreEine gezeichnete Linie ist nur für unser Auge gerade. Unter dem

Mikroskop gibt es keine absolut gerade Linie und es ist nur eine Frage derVergrößerung, bis das Beobachtete zu leben beginnt.

LAURENT VERYCKEN: Formen der Wirklichkeit. www.mauthner-gesellschaft.de

Die Gestaltung einer Fläche wird bestimmt durch die Verwendung vonFormen und Farben und die Platzierung zueinander. Die Ordnung undZuordnung von Formen und Farben nennt man auch Komposition. DieWahrnehmung der Formen und Kompositionen ist gekoppelt mit derFarbwahrnehmung. So kann eine dreidimensionale Form – ein Körper –nur durch die Farbwahrnehmung von mindestens unbunten Farben, alsoHelligkeiten stattfinden, d.h. dass nur durch die unterschiedlichen Licht-werte eine Form bestimmt werden kann.

Jede Gestaltung arbeitet in irgendeiner Art und Weise mit Grundformen.Auch wenn wir nicht direkt mit Grundformen arbeiten, lassen sie sichdoch immer aus der Komposition herauslesen, denn selbst komplizierteFormen lassen sich aus den Grundformen ableiten. Grundformen habenaußerdem die Eigenschaft, gegenüber unregelmäßigen Formen in derWahrnehmung prägnanter zu sein. Wichtig ist, wie man die Formen zu-einander setzt, um einen bestimmten Eindruck und Wirkung zu erzielen.Eine 5mm breite Linie erscheint im Zusammenhang mit großen Recht-ecken und Kreisen wahrscheinlich eher als Linie, kombiniert man sie abermit haarfeinen Linien, mag sie schon als Fläche gelten.

Bedenken Sie für die Gestaltung eines Screens: Eine haarfeine Liniekann schnell unscharf und unsauber wirken, da Antialiasing (siehe da-zu S. 76) zu einer leichten Weichzeichnung führt. Probieren Sie unter-schiedliche Strichstärken bei verschiedenen Strichrichtungen undKrümmungen aus!

Erinnern wir uns an die Grundgesetze der Wahrnehmung: Je nachdem wieund welche Formen man zusammenbringt, wird eventuell die Wahrneh-mung der Einzelnen erschwert. In der Vielzahl der Formen werden einigeprägnanter sein, andere weniger ins Auge fallen. Ebenso wie bei Farbenkommt es auch bei Formen zu unterschiedlichen Kontrasten. Und wiebeim Simultankontrast der Farben haben auch unterschiedliche Formen,die zueinander platziert sind, einen Einfluss auf die Wahrnehmung derEinzelnen.

57

3.2 Formenlehre

v4-03.qxd 17.02.03 22:00 Seite 57

Im Kapitel »Form« auf der CD finden Sie Beispiele zu Formkontrasten,Anmutung und Stofflichkeit.

Zusätzlich zu den Formkontrasten spricht man in der Gestaltung auch vonAnmutung und Stofflichkeit. Auch hier geht es genau genommen um Kon-traste, die zwischen verschiedenartigen Formen entstehen. Hinzu kommtnun aber auch noch eine gewisse Sinnbedeutung, eine Assoziation, dieman mit dem Erscheinungsbild der verschiedenen Formen verbindet.Solche Anmutungen und Stofflichkeiten lassen sich schon relativ einfachmit einfarbigen Grafiken verdeutlichen. Nimmt man nun noch die Kompo-nente der Farbe hinzu, lassen sich die diversen Eindrücke und Kontrastenoch verstärken oder auch in das Gegenteil verkehren. So gilt zumBeispiel die Farbe Weiß als eine sehr leichte Farbe, während Schwarz alsschwer angesehen wird. Hat man nun einen Kontrast leicht/schwer, dannkönnte man hier die leichte Form schwarz färben und die schwere Formweiß, um eine Umkehrung oder Irreführung zu erreichen. Man sollte alsonicht nur bei der Auswahl der Formen, Anmutungen und Stofflichkeitenachtsam sein, sondern auch gezielt und überlegt die entsprechendenFarben auswählen.

Abbildung 3.15:Formkontraste: die

harte Form derCouch grenzt sichab von den weichfließenden Linien

und Flächen imHintergrund.(Beispiel von der CD-ROM

»Sigmund Freudund die Geheim-

nisse der Seele«)

58

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:00 Seite 58

Die Formenlehre ist für Screendesign besonders wichtig. Denn wir setzenFormen nicht für die diversen Inhalte ein, sondern zusätzlich auch für dieNavigationselemente. Die Formkontraste und die Wahrnehmung vonFormen müssen gut bedacht sein, wenn man unterscheiden können sollzwischen thematischen Inhalten und Navigation. Und was ist im Einzelnenwichtiger? Eine Navigation, die untergeht, weil die Formkontraste nichtstimmen, führt dazu, dass der Benutzer sich nicht zurechtfindet, er weißvielleicht nicht, worauf er klicken soll, um zu seinem Ziel zu kommen. Sinddie Formkontraste innerhalb der Navigationselemente falsch gesetzt,kann es sein, dass Schaltflächen zweiter Kategorie – wie z.B.»Impressum« – stärker ins Auge fallen, als Schaltflächen erster Kategorie,wie z.B. »Zurück zur Produktübersicht« oder »Hauptmenü«.

Die Form- und Farbkontraste und Stimmungen legen nicht nur dieAnmutung und Aussage fest, sondern bestimmen auch, was zuerstund in welcher Wichtigkeit wahrgenommen werden kann. BeimScreendesign geht es nicht allein um die Information, sondern in ersterLinie um die schnelle und gezielte Erlangung derselben.

59

3.2 Formenlehre

v4-03.qxd 17.02.03 22:00 Seite 59

3.3 Kompositionslehre3.3.1 Format

Die Gestaltung einer Fläche wird bestimmt durch die Anordnung vonFormen, Flächen oder Körpern. Die unterschiedlichen Bildteile haben einegegenseitige Beziehung und Spannung. Je ausgewogener das Verhältniszwischen den Bildteilen und der dadurch erzeugten Spannung ist, destoharmonischer wirkt die Komposition. Eine absolute Ausgewogenheit al-lerdings kann schon wieder allzu harmonisch, nämlich langweilig sein.Gerade im Screendesign ist es wichtig, Spannung zu erzeugen! Schließ-lich muss der Blick des Benutzers gelenkt werden, damit er möglichstschnell zu seinem Ziel kommt. Und das im Idealfall auf einem Weg, dender Benutzer als kurz und schnell empfindet, den wir als Gestalter ihmaber vorgeben.

Zunächst steht einem wie ein leeres Blatt Papier die zu gestaltende Flächezur Verfügung. Ist man bisher im Print von verschiedenen Papierformatenausgegangen, sieht die Sache nun für ein Screendesign ganz anders aus.Grundsätzlich steht uns nun kein DIN-A4- oder ähnliches Format mehr zurVerfügung. Arbeitet man an einer Website, ist die Frage des Formates einsehr schwieriges Thema, denn es gibt kaum ein »festes« Format. Aus-gehend von verschiedenen Bildschirmgrößen und Auflösungen, steht manimmer vor der Frage, wie groß sich ein Benutzer das Browserfenster auf-zieht. Haben wir nun ein Querformat oder doch ein Hochformat, so wie wires aus dem Print kennen? Die Antwort ist ein klares Jein. Zugegeben, derBildschirm an sich ist ein Querformat. Das Browserfenster allerdings mussnicht unbedingt im Querformat vorliegen. Hat man einen entsprechendgroßen Monitor und eine sehr hohe Auflösung, kann man ohne weiteresdas Browserfenster im Hochformat öffnen. Das gibt außerdem die Mög-lichkeit, zwei Browserfenster nebeneinander liegen zu haben und in zweiFenstern gleichzeitig zu surfen. Selbst wenn man nun vom Durchschnitts-surfer ausgeht, der durch einen einfachen bequemen Klick das Fenster aufvolle Bildschirmgröße zieht, haben wir zwar auf den ersten Blick einQuerformat, aber durch den Scrollbalken immer noch die Möglichkeit, eine Webseite im Hochformat zu gestalten.

Die Frage des Formates ist für die Erstellung eines Webscreens so zubeantworten: Auf den ersten Blick gestalten wir im Querformat. Mit derOption, dass aus der Seite auch ein Hochformat werden kann.

60

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:00 Seite 60

Arbeitet man für eine CD-ROM oder beispielsweise an einem Flashfilm, derim Browser in einer festen Größe gezeigt werden soll, spielt auch die um-gebende Fläche ein große Rolle. Bei CD-ROMs wird man oft mit einer fest-en Größe arbeiten, die dann auf einem Monitor mit höherer Auflösung da-zu führt, dass man eine – meist schwarze – Fläche um seine Präsentationherum sieht, die so genannte Bühnenhintergrundfarbe. Es entsteht eineBeziehung zwischen dem Format der Anwendung und der Umgebung, ge-nauso wie es eine Beziehung zwischen dem Format und den darauf plat-zierten Formen und Elementen gibt (Abbildung 3.17).

Abbildung 3.16:UnterschiedlicheBildschirmgrößen.Gut zu erkennenim Vergleich ist derumgebende Raumum das geöffneteProgrammfenster.

61

3.3 Kompositionslehre

610 x 480 Pixel

800 x 600 Pixel

1280 x 1024 Pixel

1024 x 768 Pixel

v4-03.qxd 17.02.03 22:00 Seite 61

Die Problematik liegt in der Figur-Grund-Beziehung. Eine sehr große»Figur« – das kann in diesem Beispiel die Anwendung selbst sein –, diedie Grundfläche fast komplett abdeckt, ist auffallend, aber der umgeben-de Rand wirkt schwach. Ist aber die Figur deutlich kleiner als die Grund-fläche, so hat die Figur keine Wirkungskraft. Eine Ausgewogenheit er-reicht man durch eine proportionale Form, die in etwa der Grundflächeentspricht und in gleichem Maße wirkt wie die Umgebung. Diese Figur-Grund-Beziehung, die sich im Screendesign als Beziehung zwischen derAnwendung und dem Desktop im Hintergrund oder einer Bühnenhinter-grundfarbe, die diesen abdeckt, darstellt, gestaltet sich aufgrund derTechnik, d.h. der Monitorauflösung, immer wieder neu.

Im Print kennen wir die Problematik. Auch hier muss das Format geglie-dert werden. Wie setzt man Text und Bild zusammen? In welcher Mengewerden Text und Bilder platziert? Allgemein gilt ja im Print oft »weniger istmehr«, um zu einer proportionalen Gliederung zu kommen. Lassen Siesich auch für ein Screendesign nicht irreführen, sondern vertrauen Sie aufdie bekannten Grundsätze.

Die Art und Weise, wie man nun Formen, Texte, Bildteile auf der Grund-fläche verteilt, nennt man Komposition. Genau genommen ist die Grund-fläche an sich auch schon Teil der Komposition, sind doch ihre Größe undihr Format ausschlaggebend für die Gesamtgestaltung und den Eindruck.Während man bei der Gestaltung einer Webseite mit einem variablenFormat arbeitet, ist das Format bei einer CD-ROM fest vorgegeben undkann sich auch während der Anwendung nicht verändern. Bei einer CD-ROM haben wir nun mehr gestalterische Möglichkeiten. Die Grundgesetzeder Komposition zeigen, wie wir mit der Fläche – für CD-ROM-Anwendun-gen zum Beispiel immer ein Querformat – umgehen können.

Abbildung 3.17:Gliederung der

Grundfläche,Verhältnis von

Form und Grund.

62

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:00 Seite 62

• Formatgebunden

Bei einer formatgebundenenKomposition bewegen sich dieElemente immer innerhalb undentlang des Grundformates.Die Form der Grundfläche wirdwieder aufgegriffen.

• Formatbezogen

Die Bildteile sind innerhalb derGrundfläche platziert und bil-den einen oder auch mehrereSchwerpunkte. Die Form derGrundfläche kann, muss abernicht wieder aufgegriffen wer-den. Diese Art der Gliederungder Grundfläche ist die ammeisten verbreitete, wenn esum Screendesign geht.

Abbildung 3.18:Das Hauptmenüdieser Site ist eingutes Beispiel füreine formatgebun-dene Komposition.www.morat-kg.com

63

3.3 Kompositionslehre

v4-03.qxd 17.02.03 22:00 Seite 63

• Formatungebunden

Es handelt sich um keine ge-schlossene Form mehr. DieBildteile ragen aus der Grund-fläche heraus und sind an-geschnitten. Dadurch wirktdie Komposition wie ein Aus-schnitt. Schwerpunkte liegeninnerhalb der Grundfläche,können aber auch optisch ausder Grundfläche hinausragen.

Diese Formatgliederung bietet sich vor allem für CD-ROMs an. Da manbei einer CD-ROM meistens eine umgebende Bühnenhintergrundfarbehat, kann man mit dieser Art der Gliederung die Umgebung miteinbe-ziehen in die Gestaltung.

Ein gutes Beispiel für eine formatungebundene Gestaltung mit abfal-lenden Objekten sehen Sie im Kapitel 5 auf Seite 164.

Abbildung 3.19:Dieser Screenshotzeigt eine format-

bezogene Kompo-sition. Die Schwer-

punkte liegen innerhalb der

Grundfläche. DieForm der Grund-fläche wird zwar

nicht mehr aufge-griffen, durch dieUmrandung wirkt

aber alles sehrgeschlossen. (Beispiel von der CD-ROM

»Der Louvre«)

64

Gestaltungsgrundlagen

v4-03.qxd 18.02.03 14:24 Seite 64

Ist die Formatfrage geklärt, d.h. Sie haben sich für ein Querformat in ei-ner bestimmten Größe entschieden, und haben zum Beispiel eine for-matungebundene Gliederung gewählt, sollte man dies unbedingtdurch die gesamte Arbeit durchziehen! Nur so erhalten Sie ein in sichstimmiges Gesamtbild. Auch wenn man nur einen Screen nach dem an-deren sieht, ist doch eine gleichartige Gestaltung mit durchgängig glei-chen Elementen sehr wichtig um einen positiven Gesamteindruck zuerzeugen, dem Benutzer einen bestimmten Wiedererkennungswert zugeben und um ein hochwertiges Look-and-Feel zu erreichen.

3.3.2 Schwerpunktbildung

Die richtige Verteilung von Elementen und Akzentpunkten, auf die derBlick des Betrachters gelenkt wird, ergibt eine Spannung in der Kompo-sition und ermöglicht eine gezielte Blickführung. Schwerpunkte sind diewichtigen Bestandteile einer Gestaltung, wenn es darum geht, einerseitsHarmonie und andererseits Spannung zu schaffen. Mithilfe modernerMethoden wie z.B. dem Eyetracking wurde festgestellt, wie ein Benutzereinen Screen betrachtet und benutzt. Der Blick wandert von Akzent zuAkzent, es werden Abstände wahrgenommen, und unbewusst zieht manLinien um das Wahrgenommene zu verbinden.

Auf der CD finden Sie im Kapitel »Komposition« weitere Informationenzum Thema Schwerpunktbildung.

Kompositionslinien verdeutlichen, wie Schwerpunkte und Blickfänge aufeinem Screen verteilt sind. Zu Anfang ist es hilfreich, bei einem Entwurfdiese Linien einmal einzuzeichnen. Meist lässt sich daraus auch gut dieLeserichtung eines Screens erkennen. Abhängig von der Motivwahl, denverschiedenen Gestaltungselementen und vor allem den Schwerpunktenergibt sich meist eine bestimmte Richtung. Normalerweise werden

Abbildung 3.20:Die Kompositions-linien verdeutli-chen, wie dieSchwerpunkte zu-einander stehen.

65

3.3 Kompositionslehre

v4-03.qxd 17.02.03 22:01 Seite 65

Screens von links nach rechts »gelesen«, d.h. das Auge wandert, erfasstdie Schwerpunkte und erkennt Linien im Bild oder zieht Linien nach denGestaltgesetzen der Wahrnehmung. Eine Komposition, die diese Lese-richtung unterstützt, kann diesen Vorgang der Leserichtung und Wahr-nehmung beschleunigen. Gestaltet man die Leserichtung bewusst anders, kann man den Wahrnehmungsvorgang bremsen und den Blickquasi fangen.

Abbildung 3.21 zeigt ein bewusst sehr einfach gestaltetes Beispiel zumThema Leserichtung. Das Motiv des Hintergrundbildes hat ein eindeutigeRichtung von links nach rechts. Der Blick wird freigegeben, die Anmutungist offen und betont die Weite des Meeres. Die Leserichtung wird unter-stützt und lenkt den Blick auf die rechts platzierten Navigationselemente.Diese allerdings sind rechts unten an einer eher schlechten Position, dennobwohl das Motiv den Blick dorthin lenkt, werden sie nicht in erster Linieals Navigationselemente wahrgenommen.

In Abbildung 3.22 ist die Komposition durch den Bogen der Bucht diago-nal geteilt und besitzt deutliche Schwerpunkte im oberen Bildbereich. Deruntere Bildbereich ist leer, die offene Fläche des Meeres kommt gut in denVordergrund. Die Navigation ist links oben an einer repräsentativenStelle, wirkt aber durch die Größe der Schaltflächen leicht eingezwängtund besitzt zum Hintergrund wenig Kontrast.

Abbildung 3.21:Bildkomposition

mit nach rechts of-fener Blickrichtung

66

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:01 Seite 66

Die Leserichtung des Hintergrundbildes in Abbildung 3.23 geht nach wievor von links nach rechts, doch wird der Blick durch den Bogen der Bucht»aufgefangen«, quasi gebremst. Während im ersten Beispiel die Anmu-tung noch an Weite erinnerte, stehen hier anstelle des Meeres mehr dieHotels im Vordergrund der Wahrnehmung. Damit die Komposition nichtnach rechts abkippt oder im oberen Bereich zu schwer wird, wie in Abbil-dung 3.22, sind die Navigationselemente links platziert. Sie sind in dieserPosition am besten wahrzunehmen, da die Linksbündigkeit die Lese-richtung unterstützt und außerdem genügend Kontrast zwischen Schrift-farbe und Hintergrund besteht.

Abbildung 3.22:Die Spiegelungdes Hintergrund-bildes ergibt eineneue Leserichtung.

Abbildung 3.23:Die gleiche Kom-position, aller-dings hier mit an-derer Leserichtung

67

3.3 Kompositionslehre

v4-03.qxd 17.02.03 22:01 Seite 67

3.3.3 Layout

Mit dem Grundwissen über Formate und Komposition ergibt sich oft dieFrage, wie man nun die Fläche gestaltet. Oft bietet es sich an, in einemLayoutraster zu arbeiten, so wie Sie es vielleicht schon aus dem Printbe-reich kennen. Der bekannte »Goldene Schnitt« (Seitenverhältnis 1:1,618)lässt sich ohne weiteres auch auf ein Querformat, wie wir es für einScreendesign vorliegen haben, anwenden. Als Hilfskonstruktion kann mandas Bildschirmformat ähnlich wie bei einer Doppelseite noch einmal an-fügen (vgl. Abbildung 3.25).

Auch das Fibonacci-Raster bietet sich als Grundlage für ein Gestaltungs-raster am Screen an. Der 1175 in Pisa geborene Mathematiker Fibonaccistellte eine Zahlenfolge auf, die Proportionen darstellt und sich in der

Abbildung 3.24:Goldener Schnitt.

So kennen Sie ihnaus dem Print,

angewendet aufeine DIN-A4-

Doppelseite ...

Abbildung 3.25:Auch auf das

Querformat einesBildschirmes lässt

sich der GoldeneSchnitt anwenden.

68

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:01 Seite 68

Natur immer wiederfinden lässt.Jede Zahl ist die Summe der bei- den vorangegangenen Zahlen, d.h.1+1=2, 1+2=3, 2+3=5 usw. Darausergibt sich ein Zahlen- und Größen-verhältnis, das als sehr harmonisch,weil proportional, empfunden wird.

Man kann nun die Fibonacci-Zahlenanwenden, um ein Raster zu definie-ren, das die Grundfläche aufteiltund als Layouthilfe dient. Dazunimmt man jeweils zwei aufeinander folgende Zahlen der Fibonacci-Reiheund teilt die Grundfläche gleichmäßig auf. Im linken Beispiel in Abbildung3.27 ist die Grundfläche des Screens in 8 vertikale und 5 horizontaleReihen aufgeteilt, im mittleren Beispiel sind es 13 vertikale und 8 horizon-tale Reihen und im rechten Beispiel 8 vertikale und 13 horizontale Reihen.

Die Arbeit mit einem Raster vereinfacht die Gestaltung mehrerer Screensund bietet die Möglichkeit, relativ einfach ein stimmiges Gesamtbild zuerhalten. Dies ist besonders wichtig, wenn man ein größeres Projekt – bei-spielsweise eine CD-ROM – erstellen muss. Denn ein durchgängigesDesign, ein klares Layout und die Möglichkeit zum Wiedererkennen undWiederfinden erleichtert dem Benutzer den direkten und kognitivenZugang zu der oft stark verzweigten Struktur.

Abbildung 3.26:Aus der Reihe derFibonacci-Zahlenlässt sich ein Gittererstellen (hier alsBeispiel nur vonden Zahlen 1 bis 13).

Abbildung 3.27:Verwendet mandie Zahlen aus derFibonacci-Reihe,lässt sich eingleichmäßigesGitter als Layout-raster erarbeiten.

69

3.3 Kompositionslehre

1 2 3 5 8 13123

5

8

13

v4-03.qxd 17.02.03 22:01 Seite 69

3.4 TypografieGute Typographie bemerkt man so wenig wie gute Luft zum Atmen.

Schlechte merkt man erst, wenn es einem stinkt.

KURT WEIDEMANN: Wo der Buchstabe das Wort führt. Ansichten über Schrift und Typographie.

3.4.1 Schriftdefinition, SchriftartenIn der heutigen Zeit steht uns eine Vielzahl von Schriften zur Verfügung.Manche davon sind älter als man denkt, moderne Schriften kann manmanchmal auch daran erkennen, dass sie fast nicht mehr lesbar sind. NeueMedien haben schon immer neue Schriften hervorgebracht, so ist es alsonicht verwunderlich, dass im Zeitalter von Computer und Internet auchspezielle Schriften für die Verwendung am Bildschirm entwickelt werden.

Wie Schrift definiert wird, hat im Grunde jeder von uns schon erfahren:Das Linienraster, das in den ersten Schulheften verwendet wird, gilt für je-de Schriftart! Auf der Grundlinie läuft die Schrift, Kleinbuchstaben habeneine bestimmte Höhe, nach oben kommt dann die Oberlänge hinzu, eini-ge Zeichen besitzen auch eine Unterlänge. Die Höhe der Großbuchstabennennt man Versalhöhe, die der Kleinbuchstaben Mittellänge oder x-Höhe.Das Größenverhältnis zwischen Versalhöhe und Mittellänge ist imGegensatz zu den Linien im Schulheft nicht fest, sondern differenziert jenach Schriftart. Bei gleichem Schriftgrad – in Abbildung 3.28 sind es z.B.54 pt – kann sogar die Gesamtgröße, also die Versalhöhe mit oder ohneAkzentraum, je nach Schriftart variieren, ebenso wie die Differenz zwi-schen Versalhöhen und Mittellängen. Auch die Breite der Schriftzeichen

Abbildung 3.28:Das vertikale Maß

der Schrift

70

Gestaltungsgrundlagen

1

25

3

4

1

2

5

3

4

1

2

3

4

5

Mittellänge oder x-Höhe

Oberlänge

Unterlänge

Versalhöhe

Akzentraum

1

2

5

3

4

v4-03.qxd 17.02.03 22:01 Seite 70

ist variabel und die Zeichenabstände. Man spricht in diesem Fall vonLaufweite.

Schriften werden aufgeteilt in solche mit Serifen – Antiqua genannt – undin serifenlose Schriften. Serifen tragen zur besseren Lesbarkeit eines län-geren Textes bei. Die Serifenschrift Times beispielsweise ist eine typischeZeitungsschrift, wurde sie doch erstmals von der Zeitung »Times« ver-wendet und lange Jahre sogar ausschließlich. Die Serifen einer Schriftsind je nach Schriftfamilie mehr rund oder mehr eckig. Serifenlose Schrif-ten wurden erst relativ spät entwickelt. Sie werden auch »Grotesk« ge-nannt, vielleicht weil man sie damals einfach zu grotesk fand im Vergleichmit den bis dahin bekannten Schriften.

Ausgehend von dem globalen Unterschied Serifen oder keine Serifen, lässt sich ein regelrechter »Stammbaum« zur Definition von Schriften er-stellen. So wird eine Schrift anhand ihrer Schriftfamilie benannt und in-nerhalb dieser Familie aufgrund des Schriftschnittes genauer klassifiziert,des Weiteren ist der Schriftgrad, also die Schriftgröße, ausschlaggebend.Das einzelne Schriftzeichen ist für Normalverbraucher vielleicht wenigerrelevant, beschäftigt man sich intensiver mit Typographie, ist auch ein ein-zelnes Zeichen schon wichtig für die genaue Definition einer Schrift.

Abbildung 3.29:Serifen sind diekleinen Anhängselunten und oben anden Schriftzeichen(Renaissance-An-tiqua »Garamond«(links) und Klassi-zistische Antiquarechts, »Bodoni«).

Abbildung 3.30:Bei einer serifenlo-sen Schrift, einerGrotesk, fehlen dieSerifen an denoberen und unte-ren Enden derZeichen (hier:Arial).

71

3.4 Typografie

v4-03.qxd 17.02.03 22:01 Seite 71

3.4.2 Schriftstile, AnmutungEs gilt nicht nur, Schrift nach ihrer Definition und zwecks der Lesbarkeitzwischen einer Serifen- oder einer serifenlosen Schrift zu unterscheiden.Durch den Schriftschnitt, die ganz individuelle Form der einzelnen Schrift-zeichen, hat jede Schrift neben dem Wortlaut, den sie darstellt, noch eineganz spezielle Bedeutung und Anmutung. So wie die Hieroglyphen ausBildern bestehen, hat jede Schrift eine Aussage, die zu dem Wortlaut undWortsinn passen muss.

Beispiele zur Verwendung richtiger und passender Schriftarten findenSie auf der CD im Kapitel »Typografie«.

Abbildung 3.31:Übersicht der

Schriftdefinitionen.Die Aufteilung in

Schriftarten (Scriptetc.) wird gefolgt

von den Schrift-familien, wie z.B.

Bodoni. Innerhalbeiner Schriftfamiliewerden die Schrif-

ten anhand desSchriftschnittesund der Schrift-

größe unterschie-den. Detailliertere

Unterschiede erge-ben sich dann bei

den einzelnenSchriftzeichen.

72

Gestaltungsgrundlagen

Schriftart

Schriftfamilie

Schriftschnitt

SchriftstärkeSchriftbreiteSchriftlage

Schriftgröße

Schriftzeichen

v4-03.qxd 17.02.03 22:01 Seite 72

Schriften haben sich über die Jahre und Jahrhunderte nicht nur technischweiterentwickelt, sie wurden meist auch parallel zur kulturellen Entwick-lung, aktuellen Mode und Architektur geschnitten. So spiegelt das Aus-sehen einer klassizistischen Antiqua, wie z.B. der Bodoni, die klare Strengedes Klassizismus wider. Entsprechend sollte man versuchen, der Aussageeines Schriftbildes gerecht zu werden, also eine Schriftart passend zu dertextlichen Aussage wählen.

Wir haben beim Screendesign leider nicht immer die gleichen Freiheitenund Möglichkeiten zur Schriftauswahl wie im Printbereich. Während Siebei einem Druckauftrag dem Belichter Ihre verwendeten Schriften mitga-ben, haben Sie diese Möglichkeit im Internet nicht. Erstellt man zumBeispiel eine Website, so ist man in der Wahl der Schriften eingeschränkt.Eine durchschnittliche HTML-Seite wird in dem meisten Fällen mit Stan-dardschriften dargestellt. Genau genommen ist eine HTML-Seite in ihrerDarstellung immer abhängig von dem jeweiligen Browser des Benutzers,d.h. von den auf dem Rechner installierten Schriften. Daher beschränktman sich in der Schriftwahl auf solche Schriften, die auf jedem Rechner in-stalliert sind, und gibt möglichst eine Auswahl von zwei oder drei Schrif-ten an. Wenn Sie eine andere Schrift verwenden wollen, müssen Sie diesein ein Bild umwandeln, d.h. eine GIF- oder JPEG-Datei verwenden. Dannallerdings sollten Sie an das Antialiasing denken!

Bei der Erstellung einer Flash-Website oder einer CD-ROM haben wir wie-der fast alle Freiheiten der Schriftauswahl. Flash zum Beispiel bindet dieSchriftart automatisch bei der Erstellung eines Flashfilmes (.swf) oderProjektors mit ein. Bei Director haben Sie die Möglichkeit, wahlweiseTexte in Bitmaps, also Pixelbilder umzuwandeln oder auch die Schriftarteinzubinden – was allerdings die Datenmenge erhöht. Grundsätzlich hatman aber bei beiden Programmen auch die Möglichkeit aus Daten-Spargründen auf jeweils installierte Standardschriften zurückzugreifen.

Abbildung 3.32:Bei der Auswahlder Schriftart soll-te man auch dieAnmutung und dieAussagekraft desSchriftbildes imZusammenhangmit der Aussagebeachten.

73

3.4 Typografie

Standardschriften

Mac

HelveticaArialVerdanaTimesGeorgiaCourier

PC

ArialTahomaVerdanaTimes New RomanGeorgiaCourier New

v4-03.qxd 17.02.03 22:01 Seite 73

3.4.3 Besonderheiten Bildschirmschriften

Für den Einsatz am Bildschirm gelten, was Schrift angeht, besondereRegeln. Auch wenn eine Schrift mit Serifen, wie z.B. die Times, zur besse-ren Lesbarkeit eines langen Textes entwickelt wurde und optimal ist, sohat der Bildschirm doch seine Grenzen. Während eine Schrift im Druck ei-ner Vektorgrafik entspricht – also ohne Qualitätsverlust skalierbar ist undimmer saubere Kanten besitzt –, muss sich Schrift am Bildschirm demPixelraster anpassen. Je nach Schriftgröße kann es sein, dass die Pixeldes Bildschirmes nicht ausreichen, um sehr feine Gebilde wie Serifen rich-tig darzustellen. In Abbildung 3.33 kann man in der Vergrößerung erken-nen, wie sich die Schriftzeichen dem Pixelraster anpassen. Bei der kleins-ten Schriftgröße von 9 pt sind die Formen der Schriftzeichen derart auf-gelöst, dass sie sich fast nur noch erahnen lassen.

Siehe dazu auch den Exkurs »Antialiasing« auf Seite 76.

Typografie am Bildschirm erfordert demnach wieder neue Schriften, ebensolche, die sich dem neuen Medium angepasst haben. Bei speziellenBildschirmschriften wie z.B. der Verdana ist die Differenz zwischen Versal-und x-Höhe gering, d.h. die Kleinbuchstaben sind größer als bei anderenSchriften. Außerdem wurden die Punzen großzügiger gestaltet und siebesitzen eine größere Laufweite, was zu mehr Offenheit im Schriftbild unddamit zu einer besseren Lesbarkeit führt. Bildschirmoptimierte Schriftenpassen sich besser dem Pixelraster an als manche Druck-Schrift.

Abbildung 3.33:Verschiedene

Schriftgrößen inder Pixel-

darstellung

Abbildung 3.34:Die Schriftart

Verdana wurde fürdie Darstellung am Bildschirm

optimiert.

74

Gestaltungsgrundlagen

VersalhöheVersalhöhe

x-Höhe

PunzePunze

v4-03.qxd 17.02.03 22:01 Seite 74

Ein weiteres Erscheinungsbild der neuen Medien sind die neuen Pixel-schriften. Sie verzichten völlig auf Antialiasing und die gerundeten Schrift-zeichen werden mit deutlich sichtbaren Pixeltreppen dargestellt. DerVorteil dieser Pixelschriften liegt in ihrer guten Lesbarkeit. Dadurch dasssie genau in das Pixelraster passen und komplett auf Antialiasing ver-zichten, besitzen sie auch bei sehr kleinen Schriftgraden ein sauberesSchriftbild. Sie sind nur etwas gewöhnungsbedürftig.

Abbildung 3.35:Hier ein Vergleichzwischen einerSerifen-Schrift(Bodoni) und derBildschirmschriftVerdana, jeweils in9 pt, 10 pt, 12 ptund 14 pt. Im obe-ren Beispiel »ver-sumpfen« dieZeichen und sinderst ab einerSchriftgröße von14 pt wirklich gutlesbar, während imunteren Beispielder Text auch inder kleinen Schrift-größe gut lesbarist.

Abbildung 3.36:Pixelschriften, hiervon oben:Silkscreen 9pt,Supernova 9pt,ROTORanti 8pt undROTORkeff 7pt.(zum Downloadbei:www.kottke.org,www.superloo-per.de, www.rotor-fabrik.com)

75

3.4 Typografie

v4-03.qxd 17.02.03 22:01 Seite 75

Exkurs: Antialiasing

Die obere Vektorgrafik wird mit Antialising dar-gestellt, die untere ohne. In der Vergrößerungsieht man, wie sich ohne Antialising deutlichePixeltreppen zeigen. Das Antialiasing erzeugteinen leichten weichen Übergang zwischenFarben.

Antialiasing wird auch bei Auswahlwerkzeugenaktiv, wenn die Option »Glätten« eingeschaltetist.

76

Gestaltungsgrundlagen

Um eine Schrift oder Grafik am Bild-schirm »schöner« aussehen zu lassen,wird eine Kantenglättung verwendet, dasso genannte Antialiasing. Damit werdendie harten Pixeltreppen an Schriftzeichenund Kanten leicht weichgezeichnet. Dastäuscht unser Auge und wir meinen, dassz.B. Schrift wirklich rund ist. Leider führtdiese Glättung auch dazu, dass ein Textziemlich unleserlich werden kann.

Ein Browser zeigt normalen Text ohneAntialiasing an. Erst wenn man in einemBildbearbeitungsprogramm einen Texterstellt, zum Beispiel als Headline oderals eine beschriftete Schaltfläche,kommt diese Kantenglättung ins Spiel.Die meisten Programmen haben stan-dardmäßig die Glättung eingeschaltet.In der Vergrößerung sieht man dannsehr gut die weichgezeichneten Kanten.Das ist vielleicht auf den ersten Blick inOrdnung, wählt man allerdings eine klei-

v4-03.qxd 17.02.03 22:01 Seite 76

In Photoshop gibt es vier Stufen des Antialia-sings von Text. Gut zu erkennen ist hier, wie imGegensatz zur ersten Zeile des nicht geglätte-ten Textes das Schriftbild der geglätteten Zeilenbei dieser kleinen Schriftgröße von 12pt ver-schwommen wirkt.

77

3.4 Typografie

Bei transparenten GIFs sollte man beachten,wie die durch Antialiasing entstandenen wei-chen Kanten (links) mit einer passenden Hinter-grundfarbe hinterlegt werden (rechts).

ne Schriftgröße, wird die Schrift unleser-lich. Und spätestens wenn man die Schriftfreistellen will, beispielweise als transpa-rentes GIF, zeigt sich, dass die geglättetenKanten keinen weichen Übergang vontransparent zu deckend bilden, sondernder Text hart ausgeschnitten vor demHintergrund steht. Abhilfe bei transparen-ten GIFs schafft nur der Verzicht auf Anti-aliasing oder eine Hintergrundfarbe pas-send zur Hintergrundfarbe der Seite.

Wie genau man ein transparentes GIFauch mit Antialiasing erstellt, könnenSie im Kapitel »Technische Grundlagen«zum Thema GIF ab Seite 108 nachlesen.

v4-03.qxd 17.02.03 22:01 Seite 77

Schriftarten mit leicht unterschiedlichen Namen auf den verschiedenenPlattformen können auch eine unterschiedliche Laufweite und Größe ha-ben. So ist z.B. die »Times« Standardschrift am Mac, am PC heißt sie al-lerdings »Times New Roman« und hat ein leicht differentes Schriftbild.Eine mit z.B. <font size=”3”> definierte Schriftgröße variiert zwischenden unterschiedlichen Browser kaum, allerdings erheblich zwischen denverschiedenen Plattformen! So ist Schrift am PC immer etwas größer alsam Mac. Die nachfolgenden Tabellen geben einen Überblick über dieSchriftgrößen auf den Plattformen Mac und PC. Entsprechend desGrößenwertes, der mit <font size =” ”> im HTML-Quelltext vorgegebenist, werden hier zum Vergleich die Punktgrößen aufgeführt, so wie mansie aus der Textverarbeitung kennt. So entspricht z.B. ein Text derSchriftart Times, der mit <font size =”1”> definiert wurde, auf dem Maceinem Text mit dem Schriftgrad von 8 pt, während der gleiche Text aufdem PC in der dargestellten Größe einem Schriftgrad von 10 pt gleicht!

78

Gestaltungsgrundlagen

Macintosh

<font size= “ “>

Arial

Helvetica

Times

Times New Roman

Verdana

1

10

9

8

9

10

2

10

10

10

10

10

3

12

12

12

12

12

4

14

13

14

14

14

5

18

18

17

18

18

6

24

24

23

24

24

7

36

35

35

36

36

Windows

<font size= “ “>

Arial

Helvetica

Times

Times New Roman

Verdana

1

10

10

10

10

9,5

2

13

13

13

12

13

3

16

16

16

14

16

4

18

18

18

17

18

5

24

23,5

24

23

24

6

32

31,5

31

31

31,5

7

48

48

48

48

48

v4-03.qxd 17.02.03 22:01 Seite 78

3.4.4 Zeilenlängen, Absätze und sonstige Hervorhebungen

In dem Moment, wenn man längeren Text am Bildschirm anbieten will – seies auf einer CD-ROM oder einer Webseite –, muss man den Text gliedern.Aber anders als bei einer Seite einer Tageszeitung, die viel Text beinhaltet,sollte eine Webseite eher weniger Text beinhalten, denn man kann davonausgehen, dass am Bildschirm ungern gelesen wird. Die meisten Userdrucken längeren Text aus, um ihn dann auf dem Papier zu lesen. Daher istes sehr wichtig, den Text für den Bildschirm speziell aufzubereiten, ihn zustrukturieren und zu unterteilen. Man muss Text quasi in kleinen Häpp-chen anbieten. Hier wollen wir nun die wichtigen Unterschiede angehen,was im Screendesign anders ist als im Print.

Da ist zum einen die Zeilenlänge eines Textes. Grundsätzlich sollten jaZeilen weder zu lang noch zu kurz sein. Am Bildschirm gilt, die Zeilenlängeeher etwas kürzer als zu lang anzulegen. Gut proportioniert wirkt eineLänge von ca. 40 bis 60 Zeichen. Das Browserfenster einer Webseite magzwar auf den ersten Blick mehr Platz bieten, aber mit einer kürzerenZeilenlänge macht man den Text leichter lesbar.

Abbildung 3.37:Bei einem Text, derdie gesamte Breitedes Browserfens-ters in Anspruchnimmt, ist dieZeilenlänge oft zulang, das Auge fin-det den Zeilen-anfang an linkenBildrand nicht soleicht wieder. EinTabellenlayoutmacht den Text amBildschirm leichterlesbar.

79

3.4 Typografie

v4-03.qxd 17.02.03 22:01 Seite 79

Bei langen Texten bietet es sich an, den Text in mehrere Absätze zu unter-teilen. Das macht man zwar auch im Print, vergleichsweise bei einem län-geren Zeitschriftenartikel, aber die Absatzgrößen können für das Lesenam Screen noch kleiner sein. Das erleichtert das Lesen am Bildschirm.Längerer Text wird wahrscheinlich eher ausgedruckt und weniger amScreen gelesen – während man diese Möglichkeit des Ausdruckens imWeb hat, bieten es doch die allerwenigsten CD-ROMs. Innerhalb derAbsätze können einzelne Worte und Passagen auch hervorgehoben wer-den. Auf einer Webseite bieten Auszeichnungen wie fett oder kursiv, dieman auch mitten in einem Text definieren kann, die einfachste Möglich-keit, wichtige Stichworte deutlich zu machen. Während man bei einem ge-druckten Text zur Hervorhebung innerhalb eines Fließtextes nur zur kursi-ven Schrift greift, kann es am Bildschirm schon etwas kräftiger ausfallen.Sie können einzelne Worte im Text ohne weiteres fett setzen. AndereArten der Hervorhebung sind Hyperlinks, die standardmäßig in einer an-deren Farbe und unterstrichen dargestellt werden.

Zeilenabstände lassen sich in Satzprogrammen sehr genau einstellen. InHTML hat man diese Möglichkeit nicht, der Zeilenabstand ist quasi Sachedes Browsers und wird immer mit einem Standardwert dargestellt, pas-send zur jeweils gewählten Schriftgröße. Auch so etwas wie Grundlinien-versatz gibt es nicht. Selbst mit CSS (Cascading Style Sheets), mit dessenHilfe sich feinere Einstellungen vornehmen lassen als mit klassischenHTML-Befehlen, kann man nicht so genau arbeiten, wie Sie es vielleicht

Abbildung 3.38:Beispiel für

Textgliederungund -auszeichnung

im Browser

80

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:01 Seite 80

aus dem Print gewohnt sind. Leider sind auch CSS-Stile nicht in jedemBrowser darstellbar.

Andere Möglichkeiten haben wir bei der Erstellung von Text für eine CD-ROM: Wird der Text zum Beispiel als Bitmap-Darsteller in einem Bild-bearbeitungsprogramm wie Photoshop erzeugt, kann man hier wieder ge-nauer mit unterschiedlichen Zeilenabständen arbeiten. Aber es geltenauch dann die gleichen Regeln wie im Print: Der Zeilenabstand muss zurSchriftgröße passen! Ein zu großer Zeilenabstand erschwert dem Auge dasWiederfinden der jeweils nächsten Zeile. Zu eng gesetzter Zeilenabstandist zwar modern, macht das Lesen aber auch nicht leichter.

Nur auf eines sollten Sie grundsätzlich verzichten: AUF TEXT IN GROSS-BUCHSTABEN. Wirkt diese Zeile nicht auch sehr aufdringlich auf Sie? Siehaben Recht, Text in Großbuchstaben ist schwer zu lesen und sollte daherunbedingt vermieden werden.

Abbildung 3.39:Hier wurde ein eigentlich zu engerZeilenabstand alsgrafisches Elementverwendet – esgeht nicht mehrum die Lesbarkeitdes Textes, son-dern nur noch umden Effekt (www.epms.sibs.pt)

Abbildung 3.40:Längerer Text aufeiner Webseitesollte immer inkleine Absätze un-terteilt werden,einzelne Passagenkann man auchfett oder kursivsetzen (www.aikido.at).

81

3.4 Typografie

v4-03.qxd 17.02.03 22:01 Seite 81

Abbildung 3.41:Text in einer CD-

ROM muss eben-falls stark unter-

teilt werden, meistmüssen extra

Scrollbalken ange-legt werden.(Beispiel aus der CD-ROM

»Illusionen«)

Abbildung 3.42: Dieser Text ist auf-

grund zu kleinerSchriftgröße, zu

engen Zeilen-abstands und derausschließlichenVerwendung von

Versalien nurschwer lesbar.(www.xpired- designs.com)

82

Gestaltungsgrundlagen

v4-03.qxd 17.02.03 22:01 Seite 82