Leseprobe - Webdesign Journal

Know-how für Kreative.
Leseprobe
Jedes Webdesign verfolgt ein Ziel. Daher sollte der WebdesignGestaltungsprozess sinnvoll analysiert, geplant und realisiert
werden. Außerdem sind Kenntnisse über Formen, Farben und
deren visuelle Wirkung unverzichtbar. In dieser Leseprobe finden
Sie das nötige Know-how über die menschliche Wahrnehmung.
Kapitel 6: »Gestaltungsgrundlagen«
Inhalt
Index
Der Autor
Leseprobe weiterempfehlen
Martin Hahn
Webdesign – Das Handbuch zur Webgestaltung
783 Seiten, gebunden, in Farbe, mit DVD, Dezember 2014
49,90 Euro, ISBN 978-3-8362-2692-9
www.galileo-press.de/3509
Kapitel 6
Gestaltungsgrundlagen
Kapitel 6
Gestaltungsgrundlagen
Jedes Webdesign verfolgt ein Ziel. Daher sollte der Webdesign-Gestaltungsprozess sinnvoll analysiert, geplant und realisiert werden. Dazu
sind Kenntnisse über Formen, Farben und deren visuelle Wirkung unverzichtbar. Um ein effektives Webdesign zu gestalten, muss der Webdesigner in der Lage sein, die Ziele, die gewünschten Botschaften klar zu
kommunizieren, ansonsten verliert er die Aufmerksamkeit des Betrachters. Die Basis dafür sind die in diesem Kapitel folgenden Kenntnisse
über die menschliche Wahrnehmung und die Gestaltungsgrundlagen.
Machen Sie sich bereit für einen kleinen, einfachen Wahrnehmungstest, der die Grundlagen der Gestaltung und unsere Wahrnehmung gut aufzeigt: Was sehen Sie auf Abbildung 6.1? Einfach
nur zwei Kreise? Vermutlich eher einen großen roten Kreis und
einen kleinen grünen Kreis. Erst die Eigenschaften erlauben es,
zwischen Objekten zu unterscheiden und ihnen damit besondere
Bedeutungen zu geben.
»Alle Menschen sind Gestalter.
Fast alles, was wir tun, ist Design,
ist Gestaltung, denn das ist die
Grundlage jeder menschlichen
Tätigkeit.«
Victor Papanek in seinem 1970
erschienenen Buch »Design for the
Real World«
G Abbildung 6.1
Farbliche Unterschiede wie hier erlauben uns, zwischen Objekten
unterscheiden zu können.
Je höher die Anzahl der Objekte ist, desto stärker ist die Komplexität, die Sie erzeugen. Dies veranschaulicht Abbildung 6.2 sehr
gut. Wir reagieren mit dem Bedürfnis darauf, die Objekte noch
stärker zu klassifizieren und zu unterteilen: So erkennen wir Beziehungen, stellen Unterschiede in Farbe, Form, Größe und Lage
fest. Einige Objekte erscheinen dominanter, andere näher.
»Die Umwelt, so wie wir sie wahrnehmen, ist unsere Erfindung.«
Heinz von Foerster (österreichischer
Physiker, 1911–2002)
207
Kapitel 6 Gestaltungsgrundlagen
6.1
Webdesign und die menschliche Wahrnehmung
G Abbildung
6.2
Eine große Anzahl an Objekten erweckt in uns das Bedürfnis, diese noch
stärker zu klassifizieren.
6.1 Webdesign und die menschliche
Wahrnehmung
Um zu verstehen, wie wir Menschen unsere Umwelt wahrnehmen, hilft ein Blick in unseren Kopf: Das menschliche Gehirn
ist ja durchaus sehr komplex, grob lässt es sich aber aufteilen in
eine linke und rechte Hälfte. Der linken Seite werden Funktionen
wie logisches, analytisches Denken und Sprache zugeordnet, der
rechten Seite Kreativität, Emotionalität und räumliches Vorstellungsvermögen. Die rechte Seite bearbeitet alle Sinneseindrücke,
sie denkt in Bildern. Bilder werden also da aufgenommen, wo
auch unsere Emotionen sitzen, während Texte meist sachlich verarbeitet werden, also vor allem in der linken Hälfte.
Der Mensch produziert in jeder Situation einen Vergleich zwischen dem inneren Gedächtnisbild und dem äußeren Wahrnehmungsbild – »Ich nehme wahr, ich habe ein Bild«. Dieser Bildvergleich ist ein Prozess, der nicht bewusst abstellbar ist.
6.1.1
Kommunikation über Bilder
Wir sind vor allem emotionale
Wesen. Daher kommt der Kommunikation über und mit Bildern eine besondere Bedeutung
im Marketing und auch im
Webdesign zu. Mehr zur Wirkung von Bildern und deren gezielten Einsatz finden Sie in Kapitel 11, »Bilder und Grafiken«.
208
Sehen statt Lesen
Das Informationsverhalten der Menschen hat sich in den letzten Jahren/Jahrzehnten geändert: Die Konsumenten bevorzugen
solche Informationen, die sich auf den ersten Blick aus der Informationsflut abheben und besonders schnell aufgenommen und
gedanklich verarbeitet werden können. Das sind in erster Linie
Bildinformationen. Und der Kreislauf wird durch die bevorzugte
Bildkommunikation in den Medien weiter angetrieben: Wir sehen
mehr, als dass wir lesen. In der Werbung wird nur noch selten
sprachlich argumentiert, vielmehr werden die Produkte bildlich
und unterhaltsam in Szene gesetzt.
Die Sprache übernimmt in zunehmendem Maße nur noch Hilfsfunktionen. Diese Vorherrschaft der Bildkommunikation wirkt
sich auch auf die sprachliche Informationsvermittlung aus. Diese
ist entsprechend den Strickmustern der Bildkommunikation in
kleinen und handlichen Brocken darzubieten, aufreizend und unterhaltsam verpackt, schnell und leicht verständlich. Grundsätzlich werden medienübergreifend Bilder bevorzugt, sowohl von
wenig als auch von stark involvierten Konsumenten.
Die führt auch zur Veränderungen in der Webgestaltung. Inhalte, und größtenteils sind dies Texte, sollten und werden auch
immer häufiger als kleine Informationshäppchen serviert. Lange
Fließtexte schrecken die Betrachter eher ab. Gut strukturierte
Texte mit Zwischenüberschriften, Aufzählungen, Tabellen und
zwischendrin mal einem Bild oder Zitat als Eyecatcher kommen
unserem Informationsverhalten in Zeiten eingeschränkter Aufnahmekapazitäten viel eher entgegen.
Unser Wahrnehmungsprozess durchläuft drei Stufen:
1. empfinden/empfangen
2. orientieren/organisieren
3. identifizieren/einordnen/interpretieren
Wenn Sie zum Beispiel diesen Text hier lesen, nehmen Sie die
Buchstaben mit Ihren Augen wahr (oder besser gesagt Sie nehmen Wortbilder wahr). Die Informationen werden über Nerven
an das Gehirn weitergeleitet, wo die Buchstaben und Wortbilder
zusammengesetzt werden zu einem größeren Zusammenhang.
G Abbildung 6.3
Das prägnante Bild weckt sofort
unsere Aufmerksamkeit und der
Text ergänzt die Bildaussage
(wwf.de/bonobos-retten).
G Abbildung 6.4
So sieht eine übersichtliche
Gestaltung aus, die das Auge
lenkt und immer wieder optische
Anhaltspunkte liefert, olympia-express.ch.
209
Kapitel 6
Gestaltungsgrundlagen
Visueller Reiz
Kontraste bewirken
eine Wahrnehmung
erfassen
Fakten Objekt:
Farbe, Form,
Größe, Lage
6.1
deuten
Inhalt, Bedeutung
werten
Wirkung auf Gefühle
und Vernunft, Reaktion
Analyse
G Abbildung 6.5
Der Prozess der optischen
Wahrnehmung
Aufgrund vorheriger Erfahrungen (dies ist vermutlich nicht der
erste Text, den Sie anschauen) ergeben die Einzelinformationen
einen sinnhaften Zusammenhang. Daher ist Wahrnehmung auch
entscheidend kulturell geprägt. Andere Kulturen könnten mit den
Buchstaben oder mit deren Reihenfolge nicht so viel anfangen.
Um ein schnelles Zurechtfinden zu ermöglichen, ist es also hilfreich, wenn Objekte wiedererkannt werden.
Webdesign und die menschliche Wahrnehmung
Auf die Gestaltung von Buttons werde ich noch später ausführlich
in Abschnitt 12.6.3, »Buttons«, zu sprechen kommen.
6.1.2
Zwei Personen, zwei Meinungen
Die Wahrnehmung unterscheidet sich von Mensch zu Mensch.
Zwei Personen, die dieselbe Motivation haben und sich in derselben Situation befinden, können sich ganz unterschiedlich verhalten, weil sie die Situation ganz unterschiedlich wahrnehmen.
So kann eine Webseite von zwei Personen völlig unterschiedlich
beurteilt werden. Während die eine die Übersichtlichkeit und
Schlichtheit der Webseite mag, empfindet die andere Person
diese als zu dürftig und sparsam und hätte gerne ein größeres
Angebot. Reize und Informationen empfängt, organisiert und interpretiert eben jeder anders.
So mag ein Kunde einen schnell und laut sprechenden Verkäufer als aufdringlich und unsympathisch wahrnehmen. Ein anderer
Kunde dagegen mag den gleichen Verkäufer als besonders sachkundig und hilfsbereit empfinden. Mehr zur Analyse der Vorlieben und Bedürfnisse der Kunden steht in Abschnitt 3.7, »Zielgruppenanalyse«.
G Abbildung 6.6
Die Buttons sind bei readymag.com unverkennbar.
Der Button in Abbildung 6.6 löst einen visuellen Reiz aus. Aufgrund seiner Größe und Farbe erkennen wir ihn vor den meisten anderen Gestaltungselementen. Wir nehmen seine Farbe,
Größe, Form und Positionierung wahr und erkennen, dass er etwas Wichtiges mitteilen will. Wir deuten seine Gestaltung und
auch seinen Inhalt, also die Wortwahl des Buttontextes. Wir gehen davon aus, dass der Webdesigner und Webseitenbetreiber
mit diesem Button auch etwas Wichtiges mitteilen wollte (sonst
wäre er vermutlich nicht so prägnant gestaltet). Je nachdem, wie
sehr uns der Button überzeugt hat, klicken wir diesen eventuell
an. Wir bewerten also ganz individuell für uns, ob er uns so sehr
beeinflusst, dass er uns zu einer Reaktion verführt.
210
G Abbildung 6.7
Einfach und schlicht: hardgraft.com. Für den einen
übersichtlich, für den anderen viel zu wenig!
6.1.3
G Abbildung 6.8
Blumen, Blumen, und nochmals Blumen. Für den
einen ist floraprima.de unübersichtlich, für den anderen bietet es genau die richtige Auswahl.
Selektive Wahrnehmung
Eine der größten Herausforderungen der Kommunikationspolitik von Unternehmen ist die Vielfalt an Werbebotschaften, mit
denen die Menschen tagtäglich auch im Web konfrontiert sind.
Schätzungen sprechen von bis zu 2.000 Werbebotschaften, der
eine Durchschnittsperson täglich in Deutschland ausgesetzt ist.
Informationsüberflutung (Information Overload) heißt das dann.
211
Kapitel 6
Gestaltungsgrundlagen
Aus dieser Masse an Reizen sucht sich der Mensch, die für ihn
subjektiv relevanten Informationen heraus, abhängig von seinen
Erfahrungen, Bewertungen und Einstellungen. Dieses Phänomen
nennt man selektive Wahrnehmung. Die meisten Informationen
werden ausgeblendet, weil wir auch gar nicht in der Lage sind,
diese aufzunehmen. Für Werbetreibende ist es daher schwierig,
die Beachtung der Konsumenten zu erlangen. Die meisten Werbebotschaften gehen bei den Konsumenten meist ganz verloren.
Außer eine sticht aus der Vielzahl durch bestimmte Merkmale
hervor.
Dies gilt natürlich auch für Webseitenbetreiber. Der Anwender sucht bestimmte Informationen, und dabei geht er nicht jede
Information (Text, Bild, Grafiken etc.) der Webseite im Detail
durch, sondern sucht an bestimmten Stellen, an denen er die
gewünschten Informationen vermutet.
G Abbildung 6.9
Da ist der »Information Overload«
nicht mehr weit: bild.de.
6.1
Webdesign und die menschliche Wahrnehmung
nannte Design-Konventionen, die sich bei den Anwendern durch
die Erfahrungen von vielen Webseiten-Besuchen eingeprägt haben. Je eher diese Konventionen eingehalten werden, desto eher
wird sich der Anwender auf der Seite zurechtfinden und schnell
orientieren können. Die selektive Wahrnehmung ist im Grunde
eine Stärke unseres Gehirns, Wichtiges von Unwichtigem zu unterscheiden. Wir schauen nach bekannten Mustern und ordnen
neue Informationen diesen zu. Ohne diesen Schutzmechanismus
könnten wir die Informationsfülle gar nicht verarbeiten und würden verrückt werden. Gutes Webdesign heißt also, diese Muster
zu erkennen und einzusetzen, um die Bedienung zu erleichtern.
Wahrnehmung bedeutet immer die Auswahl, Organisation
und Interpretation von Informationen, um sich ein sinnvolles Bild
von der Situation (zum Beispiel einer Webseite) zu machen. Wir
sind jedoch nicht in der Lage, eine unendliche Menge an Informationen aufzunehmen. Unsere Aufmerksamkeit richtet sich
auf die für unser Ziel wichtigsten Aspekte. Das hat auch Konsequenzen für gutes Webdesign. Die selektive Wahrnehmung, die
Fülle an Informationen in unserer Umwelt samt dem Überfluss
an Werbe- und Kommunikationsmaßnahmen erschweren es, die
Konsumenten zu erreichen. Speziell im Webdesign erschweren
sie es, den Anwender zu den (für ihn) richtigen Informationen
zu leiten und die vom Unternehmen gewünschten Botschaften
zu verbreiten.
Banner-Blindheit
Die selektive Wahrnehmung ist
auch ein Grund, warum sich die
sogenannte Banner-Blindheit
entwickelt hat. Der Besucher
weiß aus Erfahrung, dass große
bunte Bilder in der rechten Seitenleiste »nur« Werbung sind
und damit für ihn irrelevant.
Zum Weiterlesen
Die Trends im Webdesign wie minimalistische Designs oder das
Flat-Design beruhen auch mit auf
den Erkenntnissen zur menschlichen Wahrnehmung. Dazu mehr
in Kapitel 13, »Webdesignstile und
-trends«.
Abbildung 6.10 E
So wie bei wein-depot.de sehen
die meisten Shops aus: Logo links,
Warenkorb rechts, Hauptnavigation über die ganze Breite, dazu
einige Häkchen mit den wichtigen
Eigenschaften, großes Teaserbild
(oder besser Slider) und eine Vorschau ausgewählter Produkte.
Mit einer Webseite verhält es sich für den Anwender am liebsten
wie mit den eigenen vier Wänden: Man weiß, wo das Geschirr
steht, wo die Pullover im Schrank liegen und wo das neue Duschgel zu finden ist. Will sich der Besucher auf einer Webseite
erst einmal orientieren, schaut er sich vermutlich zuerst das Logo,
die Hauptnavigation, die erste Headline und das erste Teaserbild
an. Sucht er dagegen gleich einen Kontakt-Link oder ein Suchfeld, dann vermutet er diese schon an bestimmten Orten (mehr
dazu in Kapitel 8, »Layout und Raster«). Dies sind wieder soge212
G Abbildung 6.11
Trend zum Minimalismus: Weniger ist mehr.
Störende, ablenkende Details werden weggelassen wie bei wootten.ca.
G Abbildung 6.12
Minimalismus kann auch verspielt und bunt sein wie bei
jessmarksphotography.com.au. Unwichtige Informationen
werden weggelassen und der Aufmerksamkeitsfokus auf
die wichtigsten Aspekte gelenkt.
213
Kapitel 6 Gestaltungsgrundlagen
6.2
Während die Konsumenten besorgt sind, durch zu viele Werbebotschaften (unbewusst) beeinflusst zu werden, haben die
Marketing-Experten (wie auch Webdesigner und Webseitenbetreiber) Bedenken, dass Ihre Botschaften überhaupt nicht beim
Konsumenten ankommen.
6.2 Die äußere Form
Um die Aufmerksamkeit des Webseitenbesuchers zu bekommen
und dessen Wahrnehmung in die gewünschte Richtung zu leiten, gibt es einige Wahrnehmungsabläufe zu beachten. Denn
die menschliche Wahrnehmung folgt bestimmten Regeln. Gutes
Webdesign kennt und nutzt diese Erkenntnisse über die visuelle
Gestaltung und leitet die Wahrnehmung des Betrachters so, dass
die gewünschte Botschaft vermittelt werden kann.
6.2.1
Tabelle 6.1
Überblick über unterschiedliche
Bildschirmbreiten, Daten aus
screensiz.es
F
Gerät
Breite des Bildschirms
in Pixeln
iPhone 5
320
Galaxy Nexus
360
iPad 4
768
Microsoft Surface
1.366
MacBook Pro 15 Zoll (Retina)
1.440
Dell UltraSharp U3011 30" Monitor
2.560
Alle diese Geräte und noch viele mehr wollen mit der Webgestaltung abgedeckt werden. Dies lässt sich heutzutage nur noch mit
einem Design realisieren, das sich der Breite anpasst.
Das Format
Das Format ist die Ausgangsbasis jeder Gestaltung, die sprichwörtliche Grundlage. In der Malerei definiert die Leinwand das
Format. In der Printgestaltung werden meistens die Formate der
DIN-A-Reihe eingesetzt. Und im Internet bestimmen die Bildschirmgrößen das Gestaltungsformat.
Das Format, die Bildschirmgröße, schränkt im Webdesign
einerseits ein, weil es festlegt ist und den Rahmen vorgibt. In
Pixeln wird ein Maß definiert, an dem sich Webdesigner orientieren müssen. Und gleichzeitig erleichtert es die Arbeit, da es eine
der grundlegenden Definitionen schon vorgibt.
Im Vergleich zu Malern und oft auch Printdesignern sind die
Bedingungen im Webdesign etwas anders. Der Anwender gibt im
Grunde das Format vor und nicht der Designer oder der Kunde
(der Webseitenbetreiber). Der Bildschirm des Anwenders definiert die Gestaltungsgröße oder besser gesagt die Bildschirmgrößen. Und diese Bildschirmgrößen weichen stark voneinander ab,
von kleinen Smartphone-Displays bis hin zu extragroßen Bildschirmen.
Ein responsives Webdesign sorgt dafür, dass sich die Gestaltung der Größe (besser der Breite) des Bildschirms anpasst (siehe
dazu auch Kapitel 4, »Responsive Webdesign«). Tabelle 6.1, die
Sie auf Seite 215 sehen, zeigt nur einen kleinen exemplarischen
Ausschnitt aus der Masse an Geräten mit unterschiedlichen Bildschirmgrößen.
214
Die äußere Form
G Abbildung 6.13
So flexibel muss eine Webseite heute sein und sich verschiedensten Formaten anpassen können, mediaqueri.es.
Und ein weiteres Merkmal des Webseitenformats im Vergleich zu
anderen Designformaten: Der sichtbare Bereich lässt sich durch
Scrollen verändern. Ein Gemälde, eine Imagebroschüre sind statisch. Die Inhalte lassen sich nicht vom Betrachter flexibel verändern. Aber es gibt kaum eine Webseite, bei der die Inhalte nicht
flexibel sind, sei es durch Scrollen, sonstige Effekte oder auch
Animationen.
So können wir beim Webdesign von zwei Formaten sprechen:
1. dem sichtbaren Bereich, also der Bildschirmauflösung des Betrachters,
2. der tatsächlichen Größe der Webseite
215
Kapitel 6
Gestaltungsgrundlagen
6.2
F Abbildung 6.16
Auf ein Rechteck folgen jede
Menge quadratische Teaser bei
modafamilia.com.
Für Webdesigner ist die Auseinandersetzung mit dem sichtbaren
Bereich daher essenziell, während sich die tatsächliche Größe fast
immer nach dem Umfang der Inhalte richtet. Die ganz wichtigen Inhalte sollten daher sofort im sichtbaren Bereich liegen und
nicht erst durch Scrollen erreichbar sein. »Above the Fold« (zu
Deutsch: »Über dem Falz«) nennt man das, mehr dazu in Abschnitt 8.5.4, »Above the Fold«. Ob im Web oder im Print, das
(sichtbare) Format gibt vor, welcher Raum dem Designer für die
Gestaltung zur Verfügung steht.
6.2.2
G Abbildung 6.14
Sichtbares Format und tatsächliches Webseitenformat bei pfeffersackundsoehne.de
G Abbildung 6.15
Bei der Deutschen Bank hat man
sich für ein Quadrat als Grundform entschieden. Es vermittelt
Stabilität und Wertigkeit.
216
Die äußere Form
Formen
Das wesentlichste Element einer Gestalt ist die Form. Man kann
zwischen einfachen Grundformen und komplizierten Formen unterscheiden. Die klassischen Grundformen sind Kreis, Quadrat
und Dreieck.
Meistens erscheinen die Formen zweidimensional als Fläche.
So können Sie dafür sorgen, dass verschiedene Elemente zu einer
Einheit zusammengefasst werden, wie auch später noch beim
Gesetz der Geschlossenheit zu sehen sein wird (Abschnitt 6.3.2,
»Das Gesetz der Geschlossenheit«). Auch wenn im Webdesign
der Klassiker das Rechteck ist, lohnt sich das Experimentieren mit
anderen Formen. Oft mag es reichen, einen Kreis oder ein Dreieck als Spannungs- oder Aufmerksamkeitselement in das Design
einzubauen.
Das Rechteck und Quadrat | Am häufigsten trifft man im Webdesign auf eine rechteckige Form. Das liegt schon in der technischen Natur der Sache. Bildschirme sind eckig, HTML-Container
ebenfalls, und die meisten Werkzeuge in den Grafikprogrammen
erzeugen Rechtecke. Rechtecke wirken stabil und sicher, aber
auch schwer, breit und träge. Aufgestellte Rechtecke erscheinen
dagegen aktiver und leichter, weniger stabil.
Das Quadrat ist eine besondere Art des Rechtecks, da alle Seiten gleich lang sind. Es wirkt stabil, statisch und ruhig, ausgeglichen. Die Grundformen sind auch in der Logogestaltung sehr
beliebt. Das Quadrat zum Beispiel wird gern als Zeichen für Stabilität und Wertigkeit eingesetzt (siehe Abbildung 6.15).
Eine Rechteckform lässt sich häufig am einfachsten umsetzen
und eignet sich auch für alle Inhalte. Kommen mehrere Rechteckformen im Design vor, gibt es dem Design eine Struktur, wie man
auch gut auf modafamilia.com sehen kann. Durch die Verwendung von rechteckigen Formen wirkt die Seite sehr aufgeräumt.
Eine Rechteckform ist dafür aber auch nicht besonders originell oder spannend.
Der Kreis | Kreise wirken harmonisch und vollkommen, ebenso
wie aktiv und dynamisch. Der Kreis ist eine schöne Form, um
einer Gestaltung Spannung hinzuzufügen.
F Abbildung 6.17
Kreise lockern die Gestaltung
auf, wie bei early-stage-management.de.
217
Kapitel 6
Gestaltungsgrundlagen
Im Vergleich zu Rechtecken wirken runde Formen weicher
(manchmal sogar emotionaler). Kreisformen können dazu eingesetzt werden, eine recht strenge Gestaltung »weich« aufzubrechen. Textinhalte sind häufig nur schwer in kreisrunde Formen zu
pressen, aber für Bildausschnitte eignen sie sich gut und können
damit auch einen schönen Kontrast zum natürlichen Raster einer
Webseite bilden, das zwangsläufig aus horizontalen und vertikalen Linien aufgebaut ist.
Um nicht gleich komplett von Rechtecken auf Kreise umzusteigen, bietet sich auch die Möglichkeit an, mit abgerundeten
Ecken das Design etwas »weicher« zu machen. Mit der CSS-Eigenschaft border-radius lassen sich bei beliebigen Objekten die
Ecken abrunden.
6.2
klassische Struktur auf und können somit gezielt Aufmerksamkeit
erzeugen.
Die Linie | Die Linie ist eine besondere Form, da sie nur eindimensional ist. Je nach Richtung vermitteln Linien Stabilität und Dynamik. Abstände und (Weiß)räume sind die besten
Gliederungselemente.
Steht allerdings nicht so viel Platz zur Verfügung sind Linien ein
nützliches Trennelement. Gerade Linien, ob vertikal oder horizontal, bringen Ruhe, Struktur und Stabilität in das Design. Elemente lassen sich mit ihnen gut ordnen und in Gruppen gliedern.
Die äußere Form
Abstände oder Trennlinien
Wenn das Design die Möglichkeit hergibt, dann würde ich die
optische Trennung durch ausreichende Abstände der Trennung
durch Linien vorziehen.
Es gibt aber Designs, die inhaltlich sehr »voll« sind und wo
Platz rar gesät ist. Hier kann
schon eine einfache Trennlinie
für klare Verhältnisse sorgen.
Das Dreieck | Dreiecke wirken dynamisch und aggressiv. Zeigt die
Spitze nach oben, wirkt es noch aufstrebend und stabil. Mit aufgestellter Spitze wirkt es sehr instabil.
F Abbildung 6.19
Linien trennen die einzelnen Projekte voneinander ab, thetouchagency.co.uk.
Abbildung 6.18 G E
Dreiecke sind in Screendesigns
eher selten anzutreffen. Bei
rallyinteractive.com (links) werden
die Referenzbilder in Dreiecken
präsentiert. Bei case-3d.com
(rechts) werden damit coole
Parallaxe-Effekte erzeugt.
218
Vertikale Linien verhalten sich ähnlich wie die Dreiecksform. Sie
erzeugen Spannung und brechen das klassische Raster auf. Entsprechend unserer Leserichtung nehmen wir Linien als auf- (von
links unten nach rechts oben) oder absteigend (von links oben
nach rechts unten) wahr. Und wie im Beispiel in Abbildung 6.20
sorgt die aufsteigende Linie dafür, dass das linke Bild dynamischer
wird, weil der rechte obere Bereich »übersteht«.
Mit Dreieckformen wird Spannung im Design erzeugt, weil die
Linien nicht mehr entsprechend der »normalen« Sehgewohnheit
horizontal und vertikal verlaufen. Eine solche Form durchbricht
also das klassische Raster und erzeugt somit Aufmerksamkeit,
wie bei Abbildung 6.18 zu sehen. Auf der Webseite case-3d.com
wechseln sich rechteckige und Dreiecksformen ab. Die geraden
Linien bringen Struktur und Stabilität in das Design, die vertikalen
Linien brechen dieses gezielt an einzelnen Stellen auf. Abwechslung im Rhythmus könnte man es nennen. Dreiecke sorgen für
Unruhe, daher eignen sie sich eher für innovativere Anwendungsbereiche und weniger für das klassische Design. Sie brechen die
F Abbildung 6.20
Bei lacca.com.br/lacca sorgt die
vertikale Linie für Schwung.
219
Kapitel 6
Gestaltungsgrundlagen
6.2
F Abbildung 6.23
Mit einem Dreieck fängt alles an,
zumindest bei chilicongraphic.com.
Es folgt eine ganze Reihe an
unterschiedlichsten Formen.
Linien lassen sich auch als Rahmen einsetzen. Dann begrenzen
sie einen Bereich und trennen unterschiedliche Elemente. Gerade
da, wo die Trennung nicht durch entsprechend viel Leerraum erfolgen kann, sind Rahmen ein nützliches Mittel. Zusätzliche Rahmen können Elemente auch besonders hervorheben.
G Abbildung 6.21
Dünne Rahmenlinien und Farbflächen begrenzen inhaltliche Einheiten
bei food.de.
Abbildung 6.22
good.is setzt unterschiedlich dicke
Linien ein.
G
Formenvielfalt
Form ist nicht gleich Form:
Es gibt lineare, flächige, räumliche (körperhafte), konstruierte,
geometrische, naturbezogene
und freie Formen.
220
Auch die Dicke, Farbe und Art der Linie ist relevant für ihre Wirkung. Dickere Linien trennen Bereiche stärker voneinander ab.
Dies wird in Abbildung 6.22 gut deutlich. Bei good.is sind »kleinere« Bereich durch dünne Linien getrennt, aber der Header mit
Logo und Hauptnavigation ist vom Inhaltsbereich mit einer sehr
dicken Linie abgetrennt. Dies verdeutlicht den inhaltlichen Unterschied der beiden Bereiche.
Meistens werden durchgezogene Linien eingesetzt, die sehr
klar wirken, aber es gibt auch die Möglichkeit, zum Beispiel
gepunktete oder gestrichelte Linien zu nehmen. Diese wirken
dann sprichwörtlich etwas offener und die Trennung nicht so
krass.
Und mit der Farbe der Linie lässt sich deren Dominanz steuern.
Schwarze Trennlinien wirken immer sehr markant und trennen
Bereiche sehr stark voneinander ab. Mit kräftigen Farben lässt
sich viel Aufmerksamkeit auf die Linie erzeugen. Ist der Kontrast
zwischen Linien- und Hintergrundfarbe nicht so stark, wirkt die
Trennung auch nicht so markant. Dies lässt sich, wie auch die
nicht durchgezogenen Linien gut einsetzen, wenn man Bereiche
nur »leicht« optisch trennen will.
Die äußere Form
Organische Formen wirken natürlicher, menschlicher und emotionaler als beispielsweise rechteckige Formen. Soll das Design also
eine natürliche, emotionale Wirkung bekommen, sind organische
Formen eine spannende Alternative. Im Vergleich zu Rechteckoder auch Kreisformen können sie allerdings nicht per CSS erzeugt werden, sondern müssen als Bilddateien eingefügt werden.
Mehreckige Formen sind nicht nur komplexer zu erzeugen, sie
wirken auch so. Von einfach, klar und strukturiert kann hier keine
Rede mehr sein. Auffällig, gezielt komplex und manchmal sogar
durcheinander wirken sie. Bei Designs, die also anders sein wollen, bewusst die klassischen Gestaltung aufbrechen wollen, sind
sie gut eingesetzt.
Räumliche Formen | Webseiten sind technisch bedingt zweidimensional. Aber seit jeher wird durch grafische Ausgestaltung
versucht, eine Räumlichkeit zu erzeugen. Neben seitlichen Flächen an einer Form werden häufig Schatteneffekte und Verläufe
eingesetzt.
G Abbildung 6.24
Unterschiedliche Schrägen bei
gainconference.aiga.org
F Abbildung 6.25
tobiaspersson.nu zeigt eine
enorme räumliche Wirkung
alleine durch Schatten und
Verläufe.
Freie Formen | Organische oder mehreckige Formen kommen im
Webdesign seltener vor, können aber starke Akzente setzen.
221
Kapitel 6 Gestaltungsgrundlagen
6.2
Die äußere Form
Das Gefühl der Räumlichkeit vermittelt eine Haptik, die digitalen Benutzeroberflächen natürlich fehlt. Mit der gefühlten Haptik
geht ein besonderes Gefühl der Benutzung und Nutzungserfahrung einher. Es gibt sogar einen Webdesignstil, der sich komplett
der Erzeugung eines räumlichen, haptischen Erlebnisses hingibt,
Skeuomorphismus nennt sich das und wird in Abschnitt 13.1.2,
»Skeuomorphismus«, beschrieben.
6.2.3 Die gute Gestalt
G Abbildung
6.26
Was erkennen Sie? Einen überlappenden Kreis und ein Dreieck
oder eine abstrakte Form? Vermutlich Ersteres – die gute
Gestalt.
Zum Weiterlesen
Mehr zur Layoutgestaltung erfahren Sie in Kapitel 8, »Layout und
Raster«.
Unsere menschliche Wahrnehmung versucht in optischen Reizen
möglichst einfache Formen (wieder) zu erkennen. Dies wird das
Gesetz der guten Gestalt oder Gesetz der Prägnanz genannt.
Gute Gestalt meint hier, eine möglichst einfache, regelmäßige, symmetrische, geschlossene Figur. Dazu gehören Quadrate, Kreise, Dreiecke. Gutes Design nimmt Rücksicht auf unser
Bedürfnis nach Einfachheit, Symmetrie und Kontinuität. Daher
sollte gutes Webdesign über einfache Strukturen und ein symmetrisches Layout verfügen. Dieser Stil ermöglicht die Konzentration auf die wesentlichen Inhalte.
G Abbildung 6.28
Die Apple-Webseite, zerlegt in graue Flächen, um die geometrischen
Bestandteile zu verdeutlichen. Eine einfache, klare, übersichtliche Struktur ist das Ergebnis, apple.com/de.
Abbildung 6.27 E
Logos weltbekannter Marken, die
alle auf einfache prägnante Formen und Reduktion setzen
6.2.4
Sinneinheiten
Unser Suchen nach klaren, eindeutigen Formen hängt damit
zusammen, dass wir in allem
einen Sinn suchen. Für uns gibt
es nicht nur irgendwelche sinnlosen Striche, Flächen und
Punkte – alles wird zu Objekten,
zu (Sinn)Einheiten. In unserer
Umwelt nehmen wir meistens
nur Teile eines Objekts wahr,
den Rest müssen wir uns denken. Häuser, Autos, Menschen,
Straßen – wir sehen nur einen
Teil, wissen, dass da noch mehr
ist und dieser Teil zu einem
Ganzen gehört.
222
Prägnante Formen können aber auch Gesichter und einfache
Gegenstände sein, also Formen, die allgemein geläufig sind und
erkannt werden können. Einige Autoren sagen, dass das Gesetz
der guten Gestalt das einzige Gestaltungsgesetz ist, während die
anderen alle lediglich auf Teilaspekte dieses Gesetzes eingehen.
Das Prinzip der guten Gestalt ist im Grunde die Zusammenwirkung aller Gestaltgesetze, es hilft uns, Sinn in dem zu erkennen,
was wir sehen und wahrnehmen.
Das Gesetz der Prägnanz spielt auch in der Layoutgestaltung
und damit auch im Webdesign eine Rolle. Ein Layout sollte
schlicht, einfach und prägnant sein und somit einprägsam. Um
die Prägnanz eines Layouts zu visualisieren, kann man dieses in
seine geometrischen Bestandteile zerlegen:
Texturen
Jedes Objekt, jede Form hat eine Oberfläche. Klassischerweise
ist diese im Screendesign einfarbig. Um Elementen mehr Räumlichkeit zu geben, kann man diesen eine Schraffur verleihen. Die
Oberflächenbeschaffenheit wird häufig auch Textur genannt.
Meistens ist diese ein unregelmäßiges Muster, das Assoziationen
mit bekannten Oberflächen erzeugt. Texturen sind ein Mittel, um
Räumlichkeit zu erzeugen und das Design insgesamt oder einzelne Objekte haptischer zu machen.
G Abbildung 6.29
Die Telekom-Webseite und ihre
Bestandteile. Den Ansatz von
Chaos könnte man es nennen.
Ohne Farben und Bilder wirkt die
Seite wie eine undefinierte
Ansammlung an Elementen.
F Abbildung 6.30
Interessante Wirkung durch sehr
viel Textur bei bigdaddyweave.com
223
Kapitel 6
Gestaltungsgrundlagen
Texturen-Sammlung
Freie Texturen für das nächste
Webdesign-Projekt:
subtlepatterns.com
6.3
Mit Texturen lassen sich auch individuelle Screendesignstile –
gerne z. B. als Retro- oder Vintage-Webseite (mehr dazu in Kapitel 13) – wunderbar umsetzen. Sie sind ein tolles Gestaltungsmittel, um Designs einen besonderen Look zu geben.
6.2.5
Proportionen
Proportionen sind ein wesentlicher Teil der Gestaltung. Proportionen bestimmen die Verhältnisse zwischen unterschiedlichen
Elementen durch Größen. Durch die Festlegung der Proportionen
werden Gewichtungen festgelegt, Schwerpunkte gesetzt und die
Aufmerksamkeit gelenkt.
Anordnung und Gewichtung
wird, macht erst die gelungene Komposition der einzelnen grafischen Elemente ein gelungenes (Web-)Design aus.
Und ähnlich wie in der Musik gibt es auch in der Gestaltung
gute und weniger gute Kompositionen und Komponisten. Ein
guter Komponist kennt die gestalterischen Grundregeln, um
schöne oder gar einzigartige Kompositionen zu kreieren. Dabei
kommt es hauptsächlich auf die Formen, ansprechende Proportionen, Abstand und Lage der Elemente zueinander an. Wer die
Gestaltungsregeln kennt und verinnerlicht hat, kann diese auf
alle gestalterischen und bildnerischen Prozesse übertragen und
anwenden. Denn ob Malerei, Fotografie, Architektur, Produkt-,
Grafik- oder Webdesign – die menschliche Wahrnehmung und
die grundlegenden Gestaltungsregeln sind die gleichen.
6.3.1
Das Gesetz der Nähe
Elemente, die nahe beieinanderliegen, werden von unserer Wahrnehmung als zusammengehörig interpretiert. Entfernt liegende
Elemente werden hingegen als unabhängig voneinander wahrgenommen. Diese Besonderheit unserer Wahrnehmung wird als das
Gesetz der Nähe beschrieben.
G Abbildung 6.31
Links das Original, ein Landing-Page-Template. Rechts mit
veränderten Elementgrößen und
damit veränderter Bedeutung der
einzelnen Elemente (demos.rafalborowski.com/ebookie/index.html)
Ganz allgemein kann man sagen, je größer ein Element ist, desto
wichtiger ist es. Oder andersherum formuliert: Je gewichtiger ein
Element inhaltlich ist, desto größer sollte es auch gestaltet werden. Die Größe eines Elements sollte sich nach seiner relativen
Bedeutung und nach den umgebenden Elementen richten. Dazu
gibt es keine festen Richtlinien, sondern das hängt jeweils vom
Gesamtlayout ab. Überschriften können einmal mit 20 Pixeln
Schriftgröße die gleiche Bedeutung haben wie in einem anderen
Screendesign mit 50 Pixeln.
6.3
Anordnung und Gewichtung
So wichtig es ist, sich der Gestaltung der einzelnen Objekte zu
widmen und sich über deren Form Gedanken zu machen, so
spannend ist die Frage, wie aus vielen Einzelelementen ein großes Ganzes wird. Die Anordnung der Einzelelemente könnte man
auch als komponieren bezeichnen. Ähnlich wie in der Musik aus
vielen Einzelnoten erst durch stimmige Anordnung ein gutes Lied
224
G Abbildung 6.32
Hier erkennen wir vier Spalten von Kreisen. Aufgrund der Nähe der
Elemente in der Vertikalen sehen wir keine Zeilen, sondern Spalten.
Der Raum zwischen den Elementen – oft auch als Weißraum beschrieben – spielt hierbei eine bedeutende Rolle. Dieser ist keine
Platzverschwendung, sondern fördert die Ordnung und Orientierung. Elemente, die inhaltlich zusammengehören, sollten auch
nahe beieinander platziert werden. Auf Webseiten werden so
zum einen oft die großen Bereiche wie Navigations-, Inhalts- und
Fußbereich optisch getrennt. Oder andersherum: Die Elemente,
die zusammengehören, liegen im besten Fall nahe beieinander.
G Abbildung 6.33
Navigations-, Teaser-, Inhaltsund Fußbereich sind durch Farbflächen bei profoundgrid.com klar
voneinander getrennt.
225
Kapitel 6
Gestaltungsgrundlagen
Auch in der feineren Ausarbeitung eines Screendesigns zeigt sich,
dass eine Missachtung des Gesetzes ungünstige Auswirkungen
auf die Verständlichkeit hat. Das folgende Beispiel der GoogleSuchergebnisse demonstriert sehr anschaulich, wie wichtig auch
nur ein bisschen Weißraum zwischen Elementen sein kann, um
zusammenhängende Informationen gebündelt zu erfassen und
um sich orientieren zu können:
6.3
ein Anspruch den Kunden gerne haben, da sie viel mitteilen wollen, der Platz dafür aber oft begrenzt ist. Mit dem Gesetz der
Nähe gibt es gute gestalterische Argumente dagegen.
Nähe ist eine der stärksten Methoden, um Zusammengehörigkeit von Elementen zu visualisieren, oft sogar stärker als visuelle
Mittel, wie zum Beispiel optische Ähnlichkeit. Was zusammengehört, sollte auch zusammen angeordnet werden.
6.3.2
Anordnung und Gewichtung
»Es steht zusammen, was zusammengehört.«
(Frei nach Willy Brandt)
Das Gesetz der Geschlossenheit
Der Mensch neigt dazu, in geometrischen Mustern diejenigen
Strukturen als Figur wahrzunehmen, die geschlossen wirken.
Diese Neigung ist so stark ausgeprägt, dass er bei Bedarf optische
Lücken in Konturen ergänzt, um das Muster zu vervollständigen.
Ein Kreis der mehrmals unterbrochen wird, wird trotzdem zuerst
als Kreis und nicht als einzelne Linien erkannt.
F Abbildung 6.36
Das »Muster«, dass wir zuerst
Kreise sehen und dann erst die
einzelnen Elemente, ist bei uns
stark ausgeprägt.
Abbildung 6.34 G
Links das Original-Google-Suchergebnis und rechts die Wirkung
ohne Weißraum zwischen den
einzelnen Treffern. Wenige weiße
Pixel können so eine große (Übersichts-)Wirkung haben.
Leere, also der Weißraum, ist in der Gestaltung demnach alles andere als einfach »ungenutzte« Gestaltungsfläche. Er ist vielmehr
ein wichtiges Gestaltungsmittel, das hilft, Informationen sinnvoll
zu ordnen und verständlich zu machen. Auf die Besonderheiten
des Weißraums, und wie man diesen am besten in der Webgestaltung einsetzt, werde ich noch später in Abschnitt 8.5.3,
»Weißraum«, eingehen.
Abbildung 6.35 E
Platzverschwendung? Nein, einfach mal Weiß wirken lassen!
jacinabox.com.au
Das Gesetz der Nähe zeigt auch, dass es wenig sinnvoll ist, möglichst viele Inhalte auf möglichst kleinem Raum unterzubringen,
226
Informationen werden automatisch und unbewusst von uns auf
diese Weise wahrgenommen und ergänzt. Aufgrund dessen ziehen wir auch eher einfache Sachverhalte den komplexen vor und
versuchen zufällige Dinge in ein Muster zu zwingen.
Das Gesetz der Geschlossenheit kommt vor allem dann vor,
wenn Elemente einfach erkennbaren Mustern ähneln, dies sind
vor allem geometrische Formen, und wenn sie nahe beieinanderliegen. Dabei ist das Gesetz der Geschlossenheit ein wichtiges
Instrument, mit dem die Orientierung erleichtert, Zusammenhänge deutlich gemacht und Informationen geordnet werden
können. Daher spielt es auch im Webdesign eine entscheidende
Rolle.
Das Gesetz der Geschlossenheit im Webdesign | Das Gesetz
der Geschlossenheit trifft auch auf Elemente zu, die von einem
Rahmen oder einer Fläche umschlossen werden. Diese werden
so als Einheit wahrgenommen. Jeder Kasten, jeder Button wird
durch das Gesetz der Geschlossenheit als Einheit erkannt. Auch
in den Seitenleisten vieler Webseiten kommt dieses Prinzip zum
Einsatz, dass sich auch durch farbige Flächen umsetzen lässt. Mit
dem Gesetz der Geschlossenheit lassen sich Informationen ord-
G Abbildung 6.37
Klar zu erkennen: Dies ist ein
Button!
227
Kapitel 6
Gestaltungsgrundlagen
6.3
Anordnung und Gewichtung
F Abbildung 6.39
Das Gesetz der Geschlossenheit
missachtet: Zusammengehörige
Bereiche sind in der von mir veränderten Version viel schwerer zu
erkennen.
nen und Zusammenhänge deutlich machen, die somit die Orientierung erleichtern. Elemente, die inhaltlich zusammengehören,
sollten auch optisch als zusammengehörig zu erkennen sein. Dies
geht durch Nähe. Dies geht aber auch durch eine gleichartige Gestaltung. Oder auch durch eine Art »Umrandung« der Elemente
durch Linien oder einen Kasten. Abbildung 6.38 von der Startseite lufthansa.com, zeigt den Einsatz des Gesetzes der Geschlossenheit gut auf.
Das Zusammenspiel zwischen dem Gesetz der Nähe und dem
Gesetz der Geschlossenheit ist ein ideales Stilmittel, um Ordnung
zu schaffen und dem Benutzer ganz zwanglos die Struktur oder
die Logik der Informationen anzuzeigen. Was einander fern ist,
wird getrennt wahrgenommen und somit als nicht zusammengehörig empfunden. Linien und Farbflächen verstärken dabei die
Zusammengehörigkeit, sie vermitteln Geschlossenheit.
G Abbildung 6.38
Die Startseite der Lufthansa und das Gesetz der Geschlossenheit,
lufthansa.com
Links sehen Sie den Original-Screenshot, und rechts sind die Elemente rot umrandet, die optisch zu einer Einheit zusammengefasst sind, mal größere Bereiche, mal nur ganz kleine. Mal wird
mit Abstand bzw. Nähe gearbeitet, mal mit farbigen Kästen oder
Bildern, mal mit dezenten Umrandungen. Trotz der Vielfalt an Informationen und der Dichte an Elementen im Design, sind die
zusammengehörigen Bereiche klar erkennbar. Würde man diese
visuellen Informationen weglassen, das Gesetz der Geschlossenheit also nicht beachten, wäre die Struktur der Seite nicht mehr
so klar, Inhaltsbereiche nicht mehr so gut getrennt und insgesamt
die Informationen nicht mehr so leicht aufnehmbar. Abbildung
6.39 führt dies einmal exemplarisch vor.
228
Logodesign | Auch im Logodesign macht man sich das Gesetz
der Geschlossenheit gerne zunutze. Die Anzahl der Elemente
kann bei Logos dadurch soweit reduziert werden, dass die wichtigen Informationen noch organisiert und kommuniziert werden
können. Die Reduktion der Elemente macht ein Logo nicht nur
einfacher, sondern auch interessanter. Der Betrachter nimmt so
unbewusst an der Vervollständigung des Logos teil.
Das Gesetz der Geschlossenheit kann Designs weniger komplex und interessanter machen. Besteht das Design aus einfachen
Mustern, können einzelne Elemente, die vom Betrachter ergänzt
werden können, entfernt werden.
6.3.3
Symmetrie und Asymmetrie
Symmetrische Objekte empfinden wir als schön und harmonisch.
Das liegt vor allem an den vielen symmetrischen Erscheinungen,
die uns in der Natur begegnen bei Pflanzen, Tieren und auch beim
Menschen (zwei Augen, zwei Ohren, zwei Arme, zwei Beine). Daher sind uns symmetrische Formen sehr geläufig, und sie werden
meistens als ästhetisch empfunden. So werden symmetrische Gesichter als attraktiver empfunden als asymmetrische.
G Abbildung 6.40
Symmetrische Logos wirken
harmonisch und ästhetisch
ansprechend.
229
Kapitel 6
Gestaltungsgrundlagen
Abbildung 6.41
builtbybuffalo.com setzt auf ein symmetrisches Design.
G
230
Anordnung und Gewichtung
diese an einer gedachten vertikalen Mittelachse spiegeln könnte.
Asymmetrie entsteht da schon eher automatisch. Viele Designs
werden aber gerade dadurch interessant und abwechslungsreich,
dass sich symmetrische und asymmetrische Bereiche abwechseln.
Serienbilder und Comics
Auch in Comics wird das Gesetz
der Geschlossenheit angewandt.
Der Leser sieht nur einzelne
Szenen und muss ergänzen, was
dazwischen passiert ist. Die
Handlung ist das Zusammenspiel aus Informationen vom Erzähler und den Informationen,
die vom Leser kommen. Bei Serienbildern ergänzt der Betrachter die Informationen dazwischen und nimmt so Bewegung
wahr.
G Abbildung 6.42
Asymmetrische Logos wirken spannungsvoller und
interessanter.
6.3
Symmetrische Formen sind meistens auch einfacher aufgebaut als
asymmetrische Formen und prägen sich somit leichter ein. Sie
vermitteln Harmonie und Stabilität, sorgen für Ordnung und Balance – auch auf Webseiten.
Sind die einzelnen Objekte entlang einer vertikalen – gedachten – Linie ausgerichtet, empfindet der Betrachter die Webseite
harmonisch, und das Erscheinungsbild wirkt sauber und dadurch
meistens professioneller. Eine symmetrische Anordnung unterstützt auch die klare Gliederung von Inhalten.
Symmetrie kann aber auch langweilig wirken, während asymmetrische Anordnungen Dynamik und Spannung erzeugen können. Gezielt eingesetzt, erzeugt es Interesse, zu viel Asymmetrie
erzeugt Unordnung.
Ein vollständiges symmetrisches Design zu gestalten, dürfte bei
den meisten Themen und Inhalten schwierig werden. Schließlich
müssten die Inhalte dann auch immer genau so passen, dass man
G Abbildung 6.43
Zwei Beispiele für den abwechslungsreichen Wechsel zwischen Symmetrie und Asymmetrie im Screendesign (links, esmewinter.co.uk und
rechts, yoyu.de)
Die Screenshots in Abbildung 6.43 zeigen dieses Wechselspiel. So
entsteht auch ein Rhythmus über die gesamte Seite hinweg (siehe
dazu auch Abschnitt 6.3.6, »Der Rhythmus«). Die Seite bleibt so
lebendig und interessant, während eben zu viel Symmetrie langweilig und zu viel Asymmetrie unstrukturiert wirken kann.
6.3.4
Goldener Schnitt
Zentrale Positionierungen, wie bei der Symmetrie, wirken oft
auch statisch und langweilig. Um einen spannenderen Bild- oder
Layoutaufbau zu finden, gibt es zum Beispiel eine der bekanntesten gestalterischen Regeln: den Goldenen Schnitt. Er beschreibt
die harmonische Aufteilung einer Fläche. Er findet sich in der Natur, so zum Beispiel beim menschlichen Körper, wie auch in der
Architektur, Kunst, Fotografie und im Grafikdesign.
Das Teilungsverhältnis beim
Goldenen Schnitt
Beim Goldenen Schnitt entspricht das Verhältnis der kürzen zur längeren Strecke, der
längeren Strecke zur Gesamtstrecke. Das Verhältnis der
Strecken beträgt dabei 1 : 1,618.
a+b
a
b
ca. 61,8 %
ca. 38,2 %
a = a+b
b
a
231
Kapitel 6
Gestaltungsgrundlagen
6.3
Piet Mondrian und Leonardo da Vinci bauten den Goldenen
Schnitt in ihre Bilder ein. Die große Pyramide von Gizeh und die
Kathedrale von Chartres weisen den Goldenen Schnitt auf.
Eine Aufteilung nach dem Goldenen Schnitt sollte nicht zwangsläufig erstes Ziel sein, doch wenn er sich aufgrund der anderen
Gestaltungsaspekte ergibt bzw. gut umzusetzen ist, ist er sicher
zu empfehlen. Nicht nur in der Aufteilung von Bildmotiven und
-ausschnitten lässt sich der Goldene Schnitt anwenden. Auch im
Webdesign ließe sich diese Regel anwenden, zum Beispiel in der
Aufteilung des Inhaltsbereichs und einer Seitenleiste. Eine Aufteilung nach dem Goldenen Schnitt lässt sich aber nicht immer
einfach durchführen bzw. ergibt meistens unrunde Zahlen. Daher
wird in der Praxis gerne auf die Drittel-Regel zurückzugriffen.
Anordnung und Gewichtung
Vorliebe oder Gewohnheit?
Es ist unklar, ob der Goldene
Schnitt eine angeborene ästhetische Vorliebe oder lediglich
ein früh entstandenes Designverfahren ist, an das wir uns inzwischen so gewöhnt haben.
Unabhängig davon hat er einen
großen Einfluss auf die verschiedensten Designdisziplinen.
Schritt für Schritt:
Goldener Schnitt in Photoshop
Abbildung 6.44 E
Auch im Printdesign wird der
Goldene Schnitt gerne zur harmonischen Ausrichtung des Satzspiegels genutzt.
1 Freistellungswerkzeug
Wenn ein Bild in Adobe Photoshop zurechtgeschnitten werden
soll, zum Beispiel weil der Ausschnitt verändert werden soll, eignet sich am besten das Freistellungswerkzeug.
2 Freistellungsoptionen
Ist dieses ausgewählt, gibt es in der Menüleiste das Icon zur Auswahl mit dem schönen Namen Überlagerungsoptionen für
das Freistellungswerkzeug festlegen 1. Hier lassen sich unter
anderem die Drittel-Regel und Goldener Schnitt auswählen.
Die Aufteilung nach dem Goldenen Schnitt gilt als harmonisch
und ästhetisch ansprechend. Überall da, wo eine Strecke oder
ein Objekt in zwei Teile aufgeteilt werden muss, sollte man den
Goldenen Schnitt in Erwägung ziehen.
Teilungen in diesem Verhältnis sind eigentlich immer harmonisch, oft aber auch etwas langweilig. Anders ausgedrückt: Will
man Spannung erzeugen, ist die Teilung nach dem Goldenen
Schnitt eher unangebracht.
Foto: © Diogo Tavares – unsplash.com
a
G Abbildung 6.45
Aufteilung eines Bildes nach dem Goldenen Schnitt
erzeugt eine harmonische Wirkung.
232
G Abbildung 6.46
Mehr Spannung kommt allerdings in ein Bild, wenn
die wichtigen Elemente NICHT nach dem Goldenen
Schnitt platziert werden.
3 Bild freistellen
Mit gedrückter Maustaste lässt sich dann ein Bereich im Bild
auswählen, der freigestellt werden soll (also um den alles außen
herum abgeschnitten werden soll). Je nachdem, welche Überlagerungsoption Sie wählen, erscheinen eine Art Beschneidungshilfslinien, die Sie darin unterstützen, den richtigen Bildausschnitt
zu finden.
G Abbildung 6.47
Überlagerungsoptionen für das
Freistellungswerkzeug in
Photoshop
233
Kapitel 6
Gestaltungsgrundlagen
6.3
Abbildung 6.48 E
»Hilfslinien« beim Beschneidungswerkzeug unterstützen Sie beim
Freistellen, hier mit dem Raster
Goldener Schnitt.
Anordnung und Gewichtung
Foto: © David Marcu – unsplash.com
Auch im Webdesign lässt sich dieses Prinzip anwenden. Viele
Webseiten, Weblogs und Portale sind nach der Drittel-Regel aufgebaut. Der Hauptinhalt umfasst dann zwei Drittel und die Seitenleiste ein Drittel der Fläche.
Danach müssen Sie ihre Auswahl nur noch mit (Enter) bestätigen.
Diese Überlagerungsoptionen können einem die Arbeit enorm
erleichtern, einen harmonischen Ausschnitt zu finden bzw. markante Bildobjekte sinnvoll im Bildausschnitt zu positionieren.
6.3.5
Abbildung 6.49 E
Teilung eines Bildes nach der
Drittel-Regel
234
Foto: © Diogo Tavares – unsplash.com
Das Teilungsverhältnis bei
der Drittel-Regel
Die Drittel-Regel entspricht
nicht ganz dem Goldenen
Schnitt, kommt dessen Teilung
aber sehr nahe:
Das Verhältnis bei der Drittel-Regel ist 1 : 0,666, beim Goldenen Schnitt 1 : 0,618.
Durch die einfachere Anwendung wird die Drittel-Regel öfter eingesetzt.
Die Drittel-Regel
Eine Vereinfachung des Goldenen Schnitts ist die sogenannte
Drittel-Regel. Nach ihr wird eine Strecke in drei gleich große Abschnitte geteilt. Die sich daraus ergebende Aufteilung 2:1 wirkt
harmonisch und wirkt, ähnlich wie eine symmetrische Anordnung, stabil.
In der Anwendung wird das Format in ein (unsichtbares) Raster aus drei horizontalen und drei vertikalen Felder geteilt. An
den sich ergebenden Schnittpunkten können dann Designelemente platziert werden, die besondere Bedeutung haben sollen.
Die sich daraus ergebende Asymmetrie empfindet der Betrachter
als interessant und ästhetisch ansprechend.
G Abbildung 6.50
Klassische Aufteilung eines Blogs: zwei Drittel Inhaltsbereich, ein Drittel
Sidebar, wie bei webdesignledger.com
Der Goldene Schnitt und die Drittel-Regel sind hilfreiche Mittel,
um harmonische Aufteilungen zu finden. Durch die Drittel-Regel
lässt sich eine Aufteilung auch schnell finden. Aufgrund der einfacheren Umsetzung wird die Drittel-Regel häufig dem Goldenen
Schnitt vorgezogen.
6.3.6
Der Rhythmus
Die einzelnen Elemente eines Layouts stehen in Beziehung zueinander, wie auch schon in Abschnitt 6.3.3, »Symmetrie und
Asymmetrie«, gezeigt. Diese Beziehung der Elemente zueinander
nimmt der Betrachter als visuellen Rhythmus wahr. Der Rhythmus wird meistens durch den Blickverlauf vorgegeben oder bei
235
Kapitel 6
Gestaltungsgrundlagen
6.3
Anordnung und Gewichtung
Webseiten durch die Scrollbewegung nach unten. Er ergibt sich
aus der Anordnung der Elemente und deren visueller Gewichtung
durch Größe, Farbe, Form oder Position (dazu später in Abschnitt
6.3.8, »Visuelles Gewicht und Kontrast«, mehr).
G Abbildung 6.52
Ein Klassiker: Drei Teaser nebeneinander, dazu noch zentrierter Text
ergibt eine symmetrische Wirkung.
Würden alle Inhaltsbereiche eine solche symmetrische Wirkung
erzeugen, würde das Design deutlich langweiliger bzw. monotoner wirken. Abwechslung lockert hier das Design auf und bringt
Spannung rein. Im Fall der Webseite katarina-witt-stiftung.de gelingt dies über asymmetrische Bereiche.
G Abbildung 6.53
Unregelmäßiger Rhythmus bei
blackestate.co.nz
G Abbildung 6.51
Ein regelmäßiger Rhythmus, wo man mit muss bei twocreate.co.uk
Rhythmus-Brüche
Ein Rhythmus sorgt für Struktur,
Orientierung und Wiedererkennung. Ein Bruch sorgt wiederum
für die nötige Spannung im Design. Schön ist es, wenn im Layout symmetrische und asymmetrische Abschnitte vorkommen.
Dies bringt die nötige »Lockerheit« ins Design.
236
Der Rhythmus kann regelmäßig sein, ähnlich der Symmetrie. Die
Elemente sind von ähnlichem oder gleichen optischen Gewicht
oder wiederholen sich, so dass das Gesamtlayout eher ruhig und
statisch wirkt. So ein Rhythmus lässt sich gut auf Abbildung 6.51
erkennen, auf der die Webseite twocreate.co.uk zu sehen ist.
Ein Rhythmus kann aber auch unregelmäßig sein, wie zum Beispiel bei blackestate.co.nz (siehe Abbildung 6.53). Hier sind die
Elemente stark unterschiedlich gewichtet, und ihre Verteilung ist
eher asymmetrisch. Das Design wirkt dadurch insgesamt dynamisch, lebendig und interessant. Ein zu gleichmäßiger Rhythmus
kann zu uninteressant wirken, gezielt eingesetzte Rhythmusstörungen (wie hier zu sehen) können dem entgegenwirken.
Oft lässt sich ein Rhythmus gerade auf Startseiten schon gut
fast von alleine durch die Inhalte erreichen. Zwei, drei- oder
auch vierspaltige Layouts, die die gleiche oder eine sehr ähnliche
Gestaltung haben (Bild, Headline, Fließtext), wirken nebeneinander schon automatisch harmonisch und symmetrisch. Ein schönes Beispiel dafür zeigt Abbildung 6.52.
G Abbildung 6.54
Ein asymmetrischer Abschnitt. Die Aufteilung entspricht ungefähr der
Drittel-Regel, katarina-witt-stiftung.de.
6.3.7
Die Leserichtung
In unserer westlichen Kultur führt die Leserichtung von links nach
rechts – eine Sehgewohnheit, die sich im Laufe unseres Lebens
durch die Praxis des Lesens tief in uns eingeprägt hat und die
die Wahrnehmung nachhaltig beeinflusst. Die Leserichtung lenkt
nicht nur den Blick beim Lesen, sondern beeinflusst auch die Aufmerksamkeit beim Betrachten von Layouts oder Bildern.
Aufgrund der Leserichtung bekommen diese eine ganz bestimmte Aussage. Würde man die Leserichtung umkehren,
könnte sich die Wirkung verändern.
Ganz pauschal bedeutet das für Webseiten, dass der Betrachter auch diese von links nach rechts betrachtet. Die Leserichtung
sorgt dafür, in welcher Reihenfolge wir Elemente wahrnehmen.
Dies können wir uns zunutze machen, indem wir die Elemente,
die zuerst wahrgenommen werden sollen, eher links anordnen.
237
Kapitel 6
Gestaltungsgrundlagen
Elemente, die inhaltlich zusammengehören werden daher auch
gerne horizontal nebeneinander angeordnet.
Abbildung 6.55 E
Klassische Anordnung von links
nach rechts bei superreal.de:
zuerst die Headline samt Subline,
dann ein Teaserbild
6.3
Anordnung und Gewichtung
Eine auffällige Gestaltung kann beispielsweise durch die Größe
oder Farbe passieren. Das Element wird also größer als vergleichbare Elemente dargestellt oder größer als die Elemente links von
ihm. Eine gern genommene Alternative ist die Gestaltung mit einer anderen Farbe. Im Beispiel der Abbildung 6.57 würde ein
andersfarbiger Button (zum Beispiel Orange oder Grün) auch jede
Menge Aufmerksamkeit auf sich ziehen.
6.3.8
Visuelles Gewicht und Kontrast
Die Wahrnehmung der einzelnen Elemente ist abhängig von deren Größe, Farbe, Helligkeit, Form, Positionierung und, wie oben
gesehen, von seinem Umfeld.
Die verschiedenen Gestaltungsmittel erlauben es dem Designer, den Elementen unterschiedliche Bedeutungen zu geben. Die
Gestaltung der einzelnen Elemente und ihre Anordnung zueinander sorgen dann für eine Gesamtkomposition.
Abbildung 6.56 E
Drei Teaser stehen nebeneinander
bei forever-soft.de. Die Leserichtung signalisiert: Sie gehören
zusammen.
Hierarchien | Abbildung 6.58 zeigt eine rudimentäre visuelle
Hierarchie. Die Informationen sind in beiden Texten exakt gleich.
Aber durch die visuelle Betonung einzelner Elemente verändert
sich die Wahrnehmung in Bezug auf das Lesen und Verarbeiten
der Informationen dramatisch.
H Abbildung 6.58
Einmal mit (links) und einmal
ohne (rechts) visuelle Hierarchie.
Der Unterschied ist offensichtlich,
lichtblick.de/geschaeftskunden/
bhkw.
Liegen Elemente im Layout mehr rechts, und sollen oder müssen
sie dort auch bleiben, aber trotzdem zuerst oder zumindest gut
wahrgenommen werden, müssen sie entsprechend markant gestaltet werden. Im folgenden Beispiel in Abbildung 6.57 liegt der
wichtige Call-to-Action-Button am rechten Layoutrand. Da dieser
ein sehr wichtiges Element ist (der Anwender soll ja möglichst
darauf klicken), wurde er entsprechend markant gestaltet.
Abbildung 6.57 E
Auffälliger Button am rechten
Rand bei mawendo.de
Die neu geschaffene Hierarchie gibt einzelnen Elementen mehr
Bedeutung als anderen und macht es einfacher, den Text zu scannen. Und das Layout wird gleichzeitig interessanter und weniger
langweilig. Wird nichts hervorgehoben oder gar zu viel betont,
entsteht Langeweile oder Desorientierung. Die Elemente sollten
238
239
Kapitel 6
Gestaltungsgrundlagen
HTML und Hierarchien
Gutes HTML gibt die (visuelle)
Hierarchie im Grunde vor. Mit
HTML sollten die Inhalte strukturiert werden. Die wichtigste
Überschrift wird als h1 ausgezeichnet, die zweitwichtigste als
h2 usw. Die visuelle Umsetzung
kann sich daran orientieren. Per
CSS wird die h1 dann stärker
betont als die h2 (zum Beispiel
durch größere Schrift). So sollte
schon vor der technischen Umsetzung und auch schon vor
dem Screendesign klar sein,
welche Bedeutung die einzelnen Elemente haben (siehe Kapitel 3, »Konzeption und Strategie«)!
ihrer inhaltlichen Bedeutung entsprechend auch visuell gestaltet
werden.
6.3
Helligkeit und Farbe | Ganz allgemein wirken dunkle Flächen gewichtiger als helle Elemente. Dieser Effekt kann sich auf einem
eher dunklen Hintergrund umkehren.
Werkzeuge | Um eine visuelle Hierarchie zu schaffen, stehen
dem Designer verschiedene Werkzeuge zur Verfügung. Ein Element kann betont werden durch eine andere Helligkeit, eine andere Farbe, Form, Struktur, Größe oder Ausrichtung. Auch Leerraum kann Bedeutung schaffen. Bei Texten gibt es verschiedene
Hervorhebungsmöglichkeiten (siehe Kapitel 10, »Typografie«),
wie Schriftart, Schriftschnitt und Schriftfarbe.
Größe | Je größer ein Objekt, desto wichtiger ist es für die Gesamtgestaltung. Je kleiner, desto unwichtiger. Die relative Größe
im Vergleich zu den anderen Elementen ist dabei entscheidend.
Mit Größenunterschieden zu arbeiten, ist ein effektives Mittel, um
den Blickverlauf des Betrachters zu steuern. Die Größe eines Elements sollte mit seiner inhaltlichen Bedeutung übereinstimmen.
G Abbildung 6.60
Ein roter Button fällt auf bei visionsserviceadventures.com.
Warme Farben (siehe Abschnitt 9.5.1, »Warme Farben«) wie Rot,
Orange oder Gelb wirken bedeutender als kalte Farben wie Blau
oder Türkis. Intensiv leuchtende Farben sind gewichtiger als zarte
oder blasse Farben.
G Abbildung 6.59
Knapp zusammengefasst: Je größer der Text, desto wichtiger ist er, hier
bei stiftung-stadtgedaechtnis.de.
Über die Unterseiten hinweg sollten gleiche Elemente die gleichen Größen behalten, um ein einheitliches Aussehen zu gewährleisten und den Anwender nicht zu verwirren. Extreme Größenunterschiede können einem Design Spannung geben. Zu geringe
Größenunterschiede können langweilig wirken.
240
Anordnung und Gewichtung
G Abbildung 6.61
Farblich gekennzeichnete Fehlermeldungen zeigen dem Anwender
schnell, wo er agieren muss, wie
bei healthtab.com/en/users.
G Abbildung 6.62
Das kräftige Rot tritt in den Vordergrund, das dunkle Grau folgt ihm
nach, das Hellblau des Hintergrunds tritt damit in eben diesen, bei zeichenundwunder.de.
Mit Farben lassen sich sowohl Hierarchien definieren als auch
Stimmungen erzeugen und Emotionen vermitteln. Und Farben
241
Kapitel 6
Gestaltungsgrundlagen
6.3
F Abbildung 6.64
Klassische Anordnung: oben links
das Logo, darunter die Hauptnavigation und rechts oben die
Metanavigation, moszeik.com
dienen dazu, einzelnen Elementen eine besondere Bedeutung zu
geben, sei es als Link oder sei es, ganze Kategorien farblich zu
markieren. Mehr zu Farben, ihrer Wirkung und ihrem gezielten
Einsatz steht in Kapitel 9, »Farbe im Webdesign«.
Zwischen Harmonie und
Spannung
Eine Gestaltung bewegt sich immer zwischen den beiden Polen
Harmonie und Spannung.
Kontraste sorgen dafür, die richtige Balance zwischen diesen
beiden Polen zu finden. Je nach
gewünschter Wirkung soll mal
das eine, mal das andere überwiegen.
Anordnung und Gewichtung
Lage und Ausrichtung | Die Lage und Ausrichtung der einzelnen
Elemente stellt Ordnung und Beziehung zwischen ihnen her. Dies
kann so eindeutig sein, wie die Trennung zwischen dem Inhaltsbereich und der Seitenleiste (Sidebar) einer Webseite, aber auch
wesentlich komplexer.
Die Elemente haben, je nach Lage, eine visuelle Gewichtung
und Wirkung. Objekte, die weiter oben stehen, wirken zum Beispiel leichter und spannungsvoller als weiter unten stehende
Objekte. Elemente, die weiter links stehen, wirken »leichter« und
dynamischer. Rechts stehende wirken eher ruhiger und stabiler.
Form | In einem Screendesign finden sich viele Formen wieder,
vor allem rechteckige. Runde Formen wirken dynamischer und
auch »leichter« als eckige Formen.
Texte, die besonders hervorgehoben werden sollen, kann man
auch gut in »Form bringen«, also zum Beispiel in ein Rechteck
oder einen Kreis setzen. Hat diese Form dann noch eine markante Hintergrundfarbe, bekommt die Form und damit auch der
Inhalt, also der Text, eine entsprechend hohe visuelle und damit
inhaltliche Bedeutung.
G Abbildung 6.63
Typische Anordnung: Der linke
Text wirkt dynamisch und unruhig, da er in der Luft »hängt« und
führt das Auge zum »stabilen«
Bild hin, audienceentertainment.
com.
242
Und dann gibt es noch »Orte« mit besonderer Bedeutung (siehe
dazu auch Abschnitt 8.1, »Anatomie einer Webseite«), zum Beispiel die rechte obere Ecke des Screendesigns. Hier steht meistens die Metanavigation mit den häufigen Punkten wie Kontakt,
Impressum, News, Login, Suche etc. Die Lage und Ausrichtung
der Webseiten-Elemente sollten also einerseits der Erwartungshaltung der Anwender entsprechen und im Idealfall auch gleichzeitig für die benötigte Harmonie und Spannung sorgen.
G Abbildung 6.65
Viele Kästen geben einer Seite Struktur. Besonders auffällig ist aber der
farbige Kasten »191 Kunden« bei fischerappelt.de.
Kontrast | Kontraste wecken Interesse und bringen Spannung
in eine Gestaltung. Je größer der Kontrast, beispielsweise in der
Farbe oder der Textgröße, desto spannungsreicher und aufmerksamkeitsstärker ist das Design. Interessantes Design ist meistens
sehr kontrastreich.
243
Kapitel 6
Gestaltungsgrundlagen
Kontraste entstehen durch starke Gegensätze, durch auffallende
Gestaltungsunterschiede. Zum Beispiel der Wechsel von einer
hellen zu einer sehr dunklen Farbe oder starke Änderungen in der
Schriftgröße. Kontraste wirken als Signale. Sie erzeugen Aufmerksamkeit und zeigen eine inhaltliche Bedeutung an. Die Webseite
commplot.nl arbeitet z. B. mit einer großen Füller an Kontrasten:
farbiger Text auf weißem Hintergrund, weißer Text auf farbigem
Hintergrund, inhaltliche Bereiche mit Farbflächen getrennt und
unterschiedliche Elementgrößen.
Abbildung 6.66 E
Vielfältige Kontraste bei
commplot.nl
6.4 Wahrnehmung und Gestaltung
Übung visuelle Hierarchie
EE
Schreiben Sie die wichtigsten Informationen (ca. 5 – 10) auf, nach
denen der Anwender auf Ihrer Website suchen wird.
EE
Geben Sie den Informationen Werte (1 – 10) nach ihrer Bedeutung
für den durchschnittlichen Besucher (1 = weniger wichtig, 10 = sehr
wichtig).
EE
Schauen Sie sich das Screendesign an: Weisen Sie den Elementen
Werte zu (1 – 10) nach der tatsächlichen Bedeutung im Design.
EE
Inwiefern decken sich die Erwartungen des Besuchers mit der tatsächlichen Bedeutung?
,,,,d
Auswertung:
Im Idealfall deckt sich die inhaltliche Gewichtung mit der visualisierten
Gewichtung, was aber selten eins zu eins der Fall sein wird.
Sind die Unterschiede aber in einzelnen Bereichen zu groß (ab ca.
2
⁄3 Punkten Differenz), dann sollten Sie überlegen, ob und wie Sie das
Design anpassen können.
Ist der inhaltliche Wert größer als der visuelle Wert, dann sollte das
Element gestalterisch weiter/besser hervorgehoben werden. Ist der inhaltliche Wert kleiner als der visuelle, dann können Sie es in der Gestaltung weiter zurücknehmen.
Nach einer eventuellen Überarbeitung könnte man die Übung erneut
durchführen, um zu überprüfen, ob sich inhaltliche und visuelle Bedeutung nun besser decken. Dies lohnt sich vor allem bei größeren optischen »Umbaumaßnahmen«. Sind es eher kleinere Anpassungen ist das
nicht zwingend notwendig.
6.4 Wahrnehmung und Gestaltung
Die Wahrnehmung visueller Reize erfolgt nach bestimmten Mustern im Gehirn. Diese werden häufig Wahrnehmungsgesetze oder
auch Gestaltgesetze genannt.
In vorherigen Abschnitt 6.3, »Anordnung und Gewichtung«,
wurden schon das Gesetz der Nähe und das Gesetz der Geschlossenheit. Es gibt noch einige Wahrnehmungsgesetze und Gestaltungsregeln mehr. Diese beruhen auf visuellen Erfahrungen, die
jeder Mensch macht. Ihrer Bedeutung und Wirkung sollte sich
jeder Screendesigner bewusst sein.
Ein ansprechendes Screendesign sollte eine Balance aus Kontrast
und Konsistenz haben. Das Design sollte also dynamisch genug
sein, um das Interesse des Lesers zu fesseln, und gleichzeitig konsistent genug, um der Seite eine starke Identität zu verleihen. So
kann der kontrastreiche Wechsel von einer hellen Hintergrundfarbe zu einer dunklen den Hauptinhalt einer Webseite von dem
Fußbereich trennen.
244
6.4.1
Gesetz der Ähnlichkeit
Elemente, die sich in Farbe, Form oder Größe ähneln, werden
von unserer Wahrnehmung als zusammengehörig aufgefasst. Die
Ähnlichkeit kann sich auch auf andere Faktoren wie Helligkeit,
Material/Textur, Position, Bewegungsrichtung oder Geschwindigkeit beziehen.
245
Kapitel 6
Gestaltungsgrundlagen
6.4
Wahrnehmung und Gestaltung
ähnliche Funktionalität haben. Worin diese Bedeutung im Detail
besteht, lässt sich aufgrund der Gestaltung nicht unbedingt gleich
erkennen.
Abbildung 6.67 E
Ähnliche aussehende Elemente
werden als zusammengehörig
betrachtet. Die Ähnlichkeit kann
sich auf Helligkeit, Farbe, Orientierung, Größe oder Form
beziehen.
Je mehr Gemeinsamkeiten zwei Elemente aufweisen, desto stärker ist die Wahrnehmung als Einheit.
Konsistenz | Im Webdesign spielt dieses Prinzip der Ähnlichkeit
eine große Rolle. Elemente, die die gleiche Bedeutung und/oder
Funktionalität haben, sollten auch gleich, oder zumindest ähnlich, aussehen.
G Abbildung 6.68
Die Konsistenz einer Benutzeroberfläche erleichtert dem Anwender das
Bedienen – auf Webseiten wie auf
Touchscreens: bjoernrichter-design.de/
home/db-fahrkartenautomat-interface.
G Abbildung 6.69
Bei hundeland.de sehen die Buttons immer gleich aus, weiße Schrift
auf grünem Hintergrund. Durch die Konsistenz gewöhnt sich der
Anwender daran.
Die Buttons wie in Abbildung 6.69 sind, trotz der relativ großen
Distanz zwischen ihnen, als ähnlich wahrnehmbar. Sie werden
vom Betrachter zu einer funktionellen Gruppe zusammengefasst.
Es ist schnell klar, dass diese Elemente etwas gemeinsam und eine
246
Wiedererkennung | Durch das Gesetz der Ähnlichkeit lässt sich im
Webdesign eine Konsistenz über alle Unterseiten hinweg erreichen. Konsistenz führt dann zu einem einheitlichen Stil. Und Stil
bezeichnet die Handhabung immer wiederkehrender Elemente.
Das Gesetz der Ähnlichkeit und die Konsistenz sind eine Frage
des Details. Erst die ausgearbeiteten Details sorgen für die Wiedererkennung. Deshalb sollte eine einzelne Webseite nicht nur in
sich geschlossen sein, sondern auch zum gesamten Webauftritt
mit all seinen Unterseiten passen.
a
Die Herausforderung besteht darin, die richtige Mischung aus
Konsistenz und Abwechslung zu finden. Die einzelnen Seiten eines Webauftritts sollen konsistent, aber nicht langweilig erscheinen. Langeweile tritt ein, sobald eine Seite vorhersehbar und
gleichförmig ist.
Elemente, die zusammengehören oder die gleiche Funktion
haben, sollten also ähnlich gestaltet sein. Den schwächsten
Effekt erzielt eine Wiedererkennung aufgrund der Form. Dann
kommt die Ähnlichkeit in Bezug auf die Größe und den stärksten
Effekt hat die Farbe. Am besten wirkt die Kombination mit Farbe
und Größe. Grundsätzlich gilt, je mehr Gemeinsamkeiten zwei
Objekte aufweisen, desto stärker ist die Gruppierungstendenz in
unserer Wahrnehmung.
b
G Abbildung 6.70
Startseite 1 und Unterseiten 2
können sich zwar klar unterscheiden, sollten aber insgesamt als
zusammengehörig erkennbar sein,
wie hier bei because-software.com.
247
Kapitel 6
Gestaltungsgrundlagen
6.4.2
G Abbildung 6.71
Ein paar wenige Linien, und schon
erkennen wir klar einen Buchstaben. Ein Analphabet würde die
obere Form vermutlich nicht so
leicht erkennen.
6.4 Wahrnehmung und Gestaltung
Gesetz der Erfahrung
Uns bekannte Formen, Zeichen und Strukturen erkennen wir wieder, selbst wenn diese Elemente nicht vollständig zu sehen sind.
Denn Elemente, denen wir oft begegnen, haben sich eingeprägt.
Unser Wahrnehmungsvermögen hält bei der Betrachtung von
Objekten ständig nach bereits bekannten Mustern, Zusammenhängen und Bildern Ausschau. Das Gehirn stützt sich also auf
bereits gemachte Erfahrungen.
Das Gesetz der Erfahrung lässt sich sehr gut beim Einsatz von
Icons beobachten.
G Abbildung 6.72
Viele der oberen Symbole sind uns schon so häufig begegnet, dass wir
ihre Bedeutung kennen, manche andere sind uns weniger geläufig.
Mit dem Gesetz der Erfahrung lassen sich Gewohnheiten der Anwender bestätigen. Neben dem Beispiel der Icons kann das im
Screendesign auch die Positionierung von bestimmten Elementen
sein. Das Logo ist meistens oben links platziert und die Hauptnavigation unterhalb des Logos oder oben rechts. Bekannte Elemente erleichtern es dem Anwender, sich schnell zurechtzufinden
und den einzelnen Elemente die richtige Bedeutung zuzuordnen.
Die Beachtung dieser Regel hilft dem Anwender, sich schneller
zu orientieren und sich auf die Inhalte zu konzentrieren. Allerdings kann aber auch gerade der Bruch dieser bekannten Sehund Surfgewohnheiten Spannung und Aufmerksamkeit bringen,
wie das Navigationsbeispiel aus Abbildung 6.73 zeigt.
Abbildung 6.73 E
Gerade der Bruch mit der klassischen Navigationserfahrung
macht marianne-brandt-wettbewerb.de so spannend.
Ein solch markanter »Erfahrungsbruch« sollte aber wohlüberlegt
sein. Es wirkt sicherlich innovativ und grenzt sich damit gut von
anderen Seiten ab. Es besteht aber auch die Gefahr, dass Anwender verwirrt und im Extremfall frustriert werden, da sie die Seite
nicht, oder zumindest nicht so einfach, bedienen können, wie
gewohnt und gewollt.
Wie im Fall der Navigation kann das große Konsequenzen
auf die Bedienbarkeit haben, während es im Fall eines Icons als
Symbol für einen Link zur »Startseite« überschaubar sein mag.
Hier hilft auch ein Blick auf die Zielgruppe und die eigenen Ziele
bzw. das eigene (gewünschte) Image. Erlauben es diese beiden,
innovative gestalterische Lösungen zu wählen, weil die Anwender sehr internetaffin sind, vielleicht sogar Spaß an solchen neuen
»Erfahrungen« haben und weil man sich selber auch gerne etwas
abheben will vom Rest? Oder ist es eher ein traditionelles Thema
mit einer ebensolchen Zielgruppe und vielleicht sogar noch
einem Onlineshop, bei dem jede Änderung an Gewohnheiten zu
Umsatzeinbußen führen kann?
6.4.3 Gesetz der Kontinuität
Elemente, die auf einer gedachten Linie angeordnet sind, werden
als zusammengehörig empfunden. Die gedachten Linien können
sowohl gerade als auch gekrümmt sein. Dies wird oft als Gesetz
der Kontinuität bzw. als Gesetz der guten Fortsetzung bezeichnet.
F Abbildung
6.74
Zwei durchgängige Linien? Oder
sechs einzelne, die sich treffen?
60
40
20
0
80
100
120
140
160
F Abbildung
6.75
Die Markierungen auf einem
Tacho werden als eine Einheit
wahrgenommen, da sie entlang
einer kreisförmigen Linie angeordnet sind.
Lücken oder Ungenauigkeiten werden ähnlich wie beim Gesetz
der Geschlossenheit unbewusst ergänzt. Die von uns wahrgenommenen Linien folgen dem einfachsten Weg und behalten ihre
Richtung bei.
248
249
Kapitel 6
Gestaltungsgrundlagen
6.4
Wahrnehmung und Gestaltung
Im Webdesign lassen sich mit dem Gesetz der Kontinuität Sinnzusammenhänge herstellen. Ein gutes Beispiel hierfür sind die in
einer Zeile angeordneten verlinkten Seitenzahlen am Ende einer
Suchmaschinen-Ergebnisseite.
G Abbildung 6.76
Die Seitenzahlen bei webdesignerdepot.com zeigen das Gesetz der Kontinuität. Die »fehlenden« Seitenzahlen vervollständigt der Anwender
selbstständig.
6.4.4
Figur-Umfeld-Beziehung
Ein grafisches Objekt befindet sich immer in einem Umfeld und
wird nie isoliert betrachtet. Das Objekt setzt sich dabei durch die
Merkmale Kontrast, Farbe, Kontur, Textur und Bewegung vom
Hintergrund ab.
Abbildung 6.77
Die beiden mittleren Quadrate
sind gleich groß. Das Linke wirkt
aber größer, weil die umgebenden
Quadrate deutlich kleiner sind.
E
G Abbildung 6.78
Der Klassiker – die rubinsche
Vase. Entweder man nimmt eine
weiße Vase auf schwarzem Grund
oder zwei schwarze sich ansehende Gesichter auf weißem Hintergrund wahr.
250
G Abbildung 6.79
Spannendes Spiel zwischen Figuren- und Hintergrundelementen
bei proclaim.se
Die wichtigsten Merkmale einer stabilen Figur-Umfeld-Beziehung
sind:
E Die Figur hat eine eindeutige Form, der Hintergrund ist formlos.
E Der Grund setzt sich hinter der Figur fort.
E Die Figur erscheint näher und hat eine genaue Position, während der Hintergrund weiter weg und postionslos erscheint.
G Abbildung 6.80
putzengel.at überzeugt mit einem
sehr individuellen Gesamtlayout.
Bei unklaren Figur-Grund-Konstellationen ist die Beziehung nicht
eindeutig geklärt und die Interpretation kann zweideutig ausfallen wie bei der rubinschen Vase. Die Website putzengel.at (Abbildung 6.80) zeigt ein sehr individuelles Layout. Daraus, dass Figur
und Hintergrund hier nicht immer ganz eindeutig geklärt sind,
bezieht das Gesamtlayout seinen Reiz.
Abbildung 6.77 zeigt, wie sehr die Wahrnehmung eines Elements
vom Umfeld abhängig ist. Die Figur-Umfeld-Beziehung ist elementar. Denn durch die Unterscheidung vom Hintergrund nehmen
wir eine Figur überhaupt erst als eigenständiges Objekt wahr. Die
Figur (mit wichtigen Informationen) setzt sich vom Hintergrund
ab. Die Figur ist dabei von einem geschlossenen Umriss umgeben
und unterscheidet sich meistens durch Farbe oder Helligkeit.
Der Mensch nimmt visuelle Reize entweder als Figurelemente
oder als (Hinter)Grundelemente wahr. Sind in einer Komposition
Figur und Grund klar zu erkennen, ist die Beziehung stabil. Figurelemente bilden Blickpunkte, sie stehen sprichwörtlich im Vordergrund, erhalten mehr Aufmerksamkeit und prägen sich besser
ein. Grundelemente dagegen bilden einen undifferenziert wahrgenommenen Hintergrund.
Spannungsvolle Flächenaufteilung | Jedes grafische Element
verhält sich in bestimmter Weise zur Grundfläche, auf der es sich
befindet. Ein Kreis lässt einen anderen Hintergrund übrig als ein
Quadrat. Ein Designer muss sich immer bewusst sein, dass die
Form des Hintergrunds gleichberechtigt am Layout beteiligt ist.
F Abbildung 6.81
Hintergrund und die Figurenelemente im reizvollen Wechsel bei
hakuna.com.ar
251
Kapitel 6 Gestaltungsgrundlagen
6.5
Gute Webgestaltung
Der Hintergrund bildet selbst eine Form. Wenn die Figur verändert wird, wird auch der Hintergrund verändert. Ziel sollte deshalb sein, die Figur und die Hintergrundfläche möglichst spannungsreich aufzuteilen.
Designs, grafische Kompositionen sollten eine stabile FigurUmfeld-­Beziehung haben, um beim Betrachter Irritationen zu
vermeiden. Schlüsselelemente sollten daher zu Figuren in einer
Komposition werden.
6.4.5 Schwerkraft
Die Schwerkraft zieht alles nach unten, eines der Naturgesetze,
das wir von klein auf praktisch erlernt haben. Dies hat auch Auswirkungen auf das Design. Denn alles, was weiter oben platziert
ist, wirkt dynamischer.
Abbildung 6.82 veranschaulicht das Phänomen der Schwerkraft gut: Das Quadrat im ersten Kasten bewegt sich nach unten,
bzw. in unserer Vorstellung, geprägt von der Schwerkraft, bewegt
es sich nach unten. Es ist labiler als ein Element, das weiter unten
platziert ist, wie es zum Beispiel bei der mittleren Grafik der Fall
ist. Hier kann sich das Quadrat nicht mehr so weit bewegen,
denn es ist schon fast unten angekommen. Anders verhält es sich
bei einem Objekt, das auf einer unteren Linie aufliegt (Kasten
drei). Ein solches Objekt erscheint uns stabil, unbewegt, ruhig.
G Abbildung
6.82
Dynamisch oder unbewegt und ruhig – die Platzierung eines Elements
hat Einfluss auf die Wirkung eines Designs.
Bei der Platzierung von Website-Elementen sollten man sich immer die Schwerkraft vor Augen halten. Dynamik und Ruhe liegen
manchmal gar nicht weit auseinander.
6.4.6 Gesetz der Gleichzeitigkeit
Elemente, die sich gleichzeitig verändern oder bewegen, werden
als zusammengehörig wahrgenommen. Dieses Prinzip spielt bei
Animationen eine große Rolle.
252
G Abbildung 6.83
Alle Elemente, die zu den einzelnen Slides gehören, werden bei
webcontact.de gleichzeitig aus- und eingeblendet und so als zusammengehörig wahrgenommen.
6.5
Gute Webgestaltung
Die vorgestellten Gestaltgesetze und -prinzipien sind die wichtigsten, es gibt aber noch einige mehr. Oft sind die Gesetze und ihre
Bedeutung offensichtlich und manchmal gar trivial. Elemente, die
in einem Kasten stehen, als zusammengehörig wahrzunehmen,
klingt nicht gerade nach einer großen Erkenntnis. Und trotzdem,
oder vielleicht auch gerade wegen ihrer Einfachheit, werden diese
Gesetze oft – auch auf Webseiten – vernachlässigt. Keine klare
Layoutstruktur, unpassende Abstände, schlecht platzierte Trennlinien, gleiche Elemente mit unterschiedlichen Farben sind dann
das Ergebnis.
Allerdings sollte man die Gestaltgesetze nicht einzeln für sich
betrachten, denn – wie bei einigen Beispielen oben gesehen –
wirken sie gleichzeitig und zusammen. Und somit nimmt auch
die Trivialität schnell ab.
Screendesign ist also ein bisschen wie ein visuelles Puzzlespiel.
Aus vielen Einzelteilen muss ein Gesamtbild zusammengesetzt
werden. Kein einziges Puzzleteil sollte dabei von den anderen
isoliert sein, damit alles miteinander harmoniert.
Für die Praxis der Gestaltung und Bewertung von Webseiten
sind die Gesetze wie ein kleines Einmaleins. Und dieses sollte ein
Webdesigner beherrschen.
Der Wahrnehmungseindruck ist
mehr als die Summe der einzelnen
Gestaltgesetze.
253
Kapitel 6
Gestaltungsgrundlagen
Das Zusammenspiel der
Prinzipien
Kennt man die Gestaltungregeln, kann man einige Gestaltungsfehler umgehen bzw.
kommt man schneller zu ansehnlichen und wirkungsvollen
Ergebnissen. Die Prinzipien sind
aber nie isoliert zu betrachten,
und erst das sinnvolle Zusammenspiel der einzelnen Regeln
ergibt eine gute Gestaltung.
Einfachheit vs. Komplexität | Als eine Erkenntnis der Wahrnehmungs- und Gestaltungsregeln lässt sich zusammenfassen, dass
gutes, wahrnehmungsfreundliches Design visuell einfach und eindeutig sein sollte.
Die Einfachheit hat aber ihre Grenzen. Die Reduzierung der
visuellen Komplexität, um das Design optisch angenehmer zu
gestalten, führt oft auch zu einer höheren strukturellen Komplexität. Inhalte, die einer optischen Reduktion zum Opfer fallen,
können zum Beispiel zu einer komplexeren Navigationsstruktur
führen. Für den Nutzer würde es somit schwieriger werden, die
Seite zu verstehen und zu navigieren. Der Effekt würde also verkehrt.
Und Uneindeutiges fordert das Denken heraus, komplexe
Dinge ziehen die Aufmerksamkeit an. So können manchmal auch
visuell komplexere Layouts sinnvoll sein.
6.5.1
»Das Ganze ist mehr als die
Summe seiner Teile.«
Aristoteles
(384 v. Chr. – 322 v. Chr).
254
6.5
Gute Webgestaltung
eine Verbindung und eine bestimmte Beziehung zueinander und
vereinen sich so in unserer Wahrnehmung zu einem Haus.
Recht ähnlich ist es bei einer Webseite: Wir betrachten nicht
ein Logo, eine Navigationsleiste, einige Textblöcke und ein paar
Buttons, sondern eine Webseite, eine Webseite als Ganzes.
Einheit
Einheitlichkeit im Design bedeutet, ein gestalterisches Konzept
konsequent anzuwenden. Dadurch werden indifferente und beliebige grafische Elemente vermieden. Und die einzelnen Elemente
werden so gestaltet, dass sie einen Bezug zueinander haben und
als Einheit wirken und nicht nur als einzelne, getrennte grafische
Elemente. Dies kann zum Beispiel über das Ausrichten anhand
eines Gestaltungsrasters (siehe Kapitel 8, »Layout und Raster«)
geschehen oder durch die Wiederholung bestimmter Elemente
innerhalb einer Seite oder über mehrere Seiten hinweg. Diese
dienen dann als visuelle Anker und sorgen für Wiederkennung.
Anders ausgedrückt: Fehlt die Einheit im Webdesign, wirken das
Design und damit die ganze Seite verwirrend, zusammenhangslos
und inkonsistent – sie fallen sprichwörtlich optisch auseinander.
Einheitlichkeit im Webdesign ist auch ein wichtiges Mittel,
um ein Corporate Design umzusetzen und damit die Unternehmens- bzw. Markenidentität zu stärken. Wiederkehrende optische Elemente sorgen für Vertrauen beim Betrachter. Er muss
nicht jedes Mal, wenn er ein Element sieht, dieses neu verarbeiten und bewerten. Dadurch verbessert sich die User Experience,
da er sich auf neue Elemente konzentrieren kann, über schon
»gelernte« Elemente, wie beispielweise die Navigation, schneller »hinwegfliegen« kann und die Bedeutung der einzelnen Elemente schon kennt.
Die Metapher des Hauses ist auch hier passend. Ein Haus
besteht aus einem Haufen Ziegelsteine (oder Betonplatten), Fenstern, Türen, Dachziegeln usw. Wir leben aber in einem Haus und
nicht in einem Haufen Ziegelsteine. Die einzelnen Teile haben
G Abbildung 6.84
Aus vielen kleinen Einzelteilen wird ein großes Ganzes, wie hier bei
squareup.com.
6.5.2
Angemessenheit
Ziehen wir wieder einen Vergleich zur Musik: Da gibt es keine
richtigen oder falschen Noten, sondern nur angemessene oder
unangemessene. Ähnlich in der Gestaltung: Es gibt kein Richtig oder Falsch bei grafischen Elementen, aber jedes sollte eine
bestimmte Funktion haben. Ein Design möchte eine Botschaft
vermitteln. Die Aufgabe des Webdesigners ist es, sicherzustellen,
dass die Botschaft für die gewünschte Zielgruppe geeignet ist.
Deswegen sieht eine Webseite eines Zahnarztes anders aus als
die Website eines Heilpraktikers.
Jedes Gestaltungselement sollte danach beurteilt werden,
inwiefern es zum besseren Verständnis der gewünschten Botschaft beiträgt. So kann es auch vorkommen, dass man nach
ausführlicher Gestaltungszeit feststellt, dass das Design zwar
ansprechend aussieht, aber nicht zu dem Projekt und der Zielgruppe passt. Die Möglichkeit, einen bunten Farbverlauf schnell
und simpel umzusetzen, heißt nicht, diesen auf jeden Fall auch
einzusetzen. Gutes Design bedeutet oft Einfachheit und Klarheit. Apple hat dies mit seinen Produkten jahrelang vorgemacht.
Die richtige Fragestellung
entwickeln
Fragen Sie sich nicht, was Sie
tun könnten – die Antwort wäre
von Projekt zu Projekt dieselbe.
Fragen Sie sich stattdessen, was
Sie tun sollten! Welche Elemente sollten Sie einsetzen, um
die gewünschte Botschaft zu
vermitteln?
255
Gestaltungsgrundlagen
6.5
Nur weil die gestalterischen und technischen Möglichkeiten und
Funktionen zur Verfügung stehen, heißt dies nicht, diese auch
zwingend einzusetzen.
6.5.3
Auf das Wesentliche reduziert
»Weniger ist mehr« – die Reduzierung auf das Wesentliche
führt oft eher zum Erfolg, als
die Überfrachtung mit unbedeutenden grafischen Elementen.
Die einfachsten Lösungen sind
oft die besten.
Abbildung 6.85 E
Einfach, schlicht und übersichtlich, die Seite von chilli.be/en
Einfachheit
Durch die Bildbearbeitungsprogramme und die technischen
Möglichkeiten mit CSS(3) besitzt jeder Webdesigner schnell eine
unglaubliche Anzahl an Gestaltungsmöglichkeiten, Möglichkeiten, die keine jahrelange Erfahrung oder eine teure technische
Ausstattung voraussetzen. Zurückhaltung ist daher wahrscheinlich
mit das schwierigste Prinzip, das sich konsequent durchsetzen
lässt. Die Fülle der Möglichkeiten lässt schnell vergessen, wie
wichtig Unkompliziertheit für das Webdesign ist. Eine einfache
Bedienung, bei der die grafischen Elemente »unsichtbar« bleiben,
bevorzugt der Anwender im Allgemeinen.
Reduktion bedeutet, sich auf wenige, sorgfältig ausgewählte
Schriftarten und Farben zu beschränken. Reduktion bedeutet,
grafische Elemente gezielt auszuwählen und einzusetzen.
Wenn jedes Element auf der Seite förmlich nach Aufmerksamkeit des Betrachters schreit, hat das den Effekt, dass nichts
wirklich betont wird. Überspannte Akzente können einer Seite
jegliche Wirkung nehmen. Jedes Element sollte in einem Design
seine Bedeutung haben. Das, was Sie in Ihrem Design entfernen
können, ist genauso wichtig, wie das, was Sie hinzufügen können. Dadurch entsteht weniger Unordnung im Design und die
wirklich wichtigen Elemente kommen besser zur Geltung. Nur
weil noch Platz zur Verfügung steht für mehr Elemente, bedeutet
dies nicht zwangsläufig, diesen Raum auch zu füllen.
Die menschliche Wahrnehmung versucht, visuelle Eindrücke
zu vereinfachen. Das Gesetz der Einfachheit folgt diesem Mechanismus, der gut funktioniert, wenn die grafische Botschaft einfach gehalten wird. Optisch überladene Webdesigns wirken kontraproduktiv.
Keep it simple, stupid | Das KISS-Prinzip (Keep it simple, stupid, zu Deutsch sinngemäß »Mach's so einfach wie möglich«) beschreibt dieses Prinzip der Einfachheit, das für das Layout von
Webseiten gilt. Ein Webdesign sollte dem Leser rasche Orientierung ermöglichen, die Blickbewegung steuern, Wichtiges klar zu
erkennen geben und Einheiten/Gruppierungen erkennen lassen.
Dies gilt sowohl für den sichtbaren Ausschnitt der Webseite als
auch für die gesamte Seitenlänge und weitere Unterseiten.
Ob einzelne grafische Elemente oder das ganze Design eher
der Flat-Design-Entwicklung oder dem Skeuormorphismus folgen, ist zwar nicht nebensächlich, aber sagt noch nichts über die
Einfachheit des Designs aus. Ein klares Raster, konsistente Nutzung der grafischen Elemente, eindeutige visuelle Hierarchie, Einheiten und Übersichtlichkeit machen ein Webdesign harmonisch
und einfach, einfach zu bedienen. Und das sollte mit die oberste
Maxime sein!
6.5.4
Die Liebe zum Detail
Gute Webgestaltung
Foto: © Braun
Kapitel 6
G Abbildung 6.86
Ein Design-Klassiker: Der
Braun-Tachenrechner besticht
durch Reduktion und einfache
Bedienung.
Weniger ist mehr
Abwandlungen und Parodien
von »Weniger ist mehr«:
1. »Mache die Dinge so einfach
wie möglich – aber nicht einfacher.«
2. »Weniger ist langweilig.«
3. »Perfektion ist nicht dann erreicht, wenn man nichts mehr
hinzufügen, sondern wenn
man nichts mehr weglassen
kann«
4. »Mehr ist nicht weniger.«
5. »Das Einfache ist nicht immer
das Beste. Aber das Beste ist
immer einfach.«
6. »Reduce to the max.«
7. »Weniger ist besser.«
»Der Teufel steckt im Detail.« Diese Redensart lässt sich auch auf
das Webdesign übertragen. Erfolgreiches Webdesign zeigt sich
in der Liebe zum Detail. Rechtschreibfehler, Anordnungsfehler
durch schlechten Quellcode, Links farblich nicht gekennzeichnet
– kleine unpassende Details können den ansonsten ansprechenden Gesamteindruck eines Designs nachhaltig zerstören.
256
257
Kapitel 6
Gestaltungsgrundlagen
Abbildung 6.87 H
Mit Liebe zum Detail: topp-kreativ.de zeigt viele kleine grafische
Ausarbeitungen.
Dazu passt das sogenannte Pareto-Prinzip, auch 80-20-Regel genannt, die besagt, dass 80 % der Ergebnisse durch 20 % des Einsatzes verursacht werden.
Übertragen auf das Webdesign bedeutet dies, dass in 20 %
der Zeit 80 % des Ergebnisses steht. Also in einem relativ kurzen
Zeitrahmen der Großteil des Webdesigns fertig ist. Aber gerade
diese letzten 20 % der Arbeit, die unter Umständen eben einen
recht großen Zeitrahmen beanspruchen, sind oft lästig und unangenehm. Aber gerade bei diesen (letzten) Details unterscheiden
sich häufig die guten von sehr guten Designs. Details, die dem
Betrachter nicht bewusst, die nicht offensichtlich sind, nimmt
er aber sehr wohl durch eine verbesserte User Experience wahr
(siehe Abschnitt 3.12, »User Experience«).
So wichtig der Blick auf das große Ganze ist (was ja mehr ist als
die Summe seiner Teile), so wichtig ist auch der Blick aufs Detail.
258
Inhalt
Inhalt
Inhalt
2.2
Vorwort .......................................................................... 19
1
Prinzipien des modernen Webdesigns
1.1
Aspekte modernen Webdesigns ...........................
1.1.1
Die Entwicklung des Webdesigns ...........
1.1.2
Gute Seiten, schlechte Seiten .................
1.1.3
Mehr als hübsch – das Design ................
1.1.4
Übersichtlich und lesbar ........................
1.1.5
Struktur, Inhalte und Verhalten ..............
1.2
Guter Quellcode – Webstandards ........................ 33
1.3
Webseiten für alle – Zugänglichkeit und
Barrierefreiheit .....................................................
1.3.1
Zugänglichkeit und Technik ....................
1.3.2
Zugänglichkeit und Inhalte .....................
1.3.3
Zugänglichkeit und Design .....................
1.4
1.5
4
Modernes Webdesign ist flexibel .........................
1.4.1
Flexibel und anpassungsfähige
Webseiten .............................................
1.4.2
Benutzerfreundlich und bedienbar .........
1.4.3
Moderne Workflows ..............................
23
23
26
28
29
30
2.3
42
42
1.6
Fazit: Webdesign ist Coden und Code ist Design
43
2
Projektmanagement
2.1
Das Projekt ..........................................................
2.1.1
Was macht ein Projekt zu einem Projekt?
2.1.2
Die Online-Branche ...............................
2.1.3
Das Projektdreieck .................................
2.1.4
Die Aufgaben des Projektmanagers ........
40
41
47
48
48
50
52
54
55
56
57
59
60
61
61
62
63
65
66
68
69
69
2.4
Erfolg oder Misserfolg ..........................................
2.4.1
Erfolgsfaktoren ......................................
2.4.2
Risikomanagement ................................
2.4.3
Gründe für ein erfolgloses Webprojekt ...
69
70
71
71
3
Konzeption und Strategie
3.1
Briefing und Recherche ........................................
3.1.1
Das Briefing ...........................................
3.1.2
Die Recherche .......................................
3.1.3
Briefing und Angebot .............................
3.1.4
Das Treffen mit dem Kunden .................
3.1.5
Das Grobkonzept ...................................
3.1.6
Ziele und Strategie .................................
3.2
Unternehmens- und Kundenanalyse .................... 78
3.2.1
Produkte und Dienstleistungen .............. 80
3.2.2
Die Vermarktung ................................... 80
37
Das Webdesign und sein Umfeld .........................
1.5.1
Die Märkte und der Wettbewerb ...........
1.5.2
Informationsüberflutung der
Konsumenten ........................................
1.5.3
Werteveränderung in der Gesellschaft ....
53
53
Projektkommunikation – wie sag ich es
dem Kunden? .......................................................
2.3.1
Erwartungshaltung an den Kunden ........
2.3.2
Erwartungshaltung des Kunden –
Wünsche und Vorstellungen ..................
2.3.3
Erstkontakt – Beratung vs. Verkauf .........
2.3.4
Präsentation ..........................................
2.3.5
Externe/freie Mitarbeiter .......................
2.3.6
Der Projektabschluss ..............................
35
35
36
36
37
39
39
Projektphasen ......................................................
2.2.1
Der Projektstart .....................................
2.2.2
Das Lastenheft – die Sicht des
Auftraggebers ........................................
2.2.3
Das Angebot ..........................................
2.2.4
Alternative Leistungen ...........................
2.2.5
Projekte kalkulieren ...............................
2.2.6
Das Pflichtenheft – der Plan
des Auftragnehmers ...............................
2.2.7
Der Zeitplan ..........................................
2.2.8
Umsetzung ............................................
2.2.9
Spätere Änderungswünsche ...................
2.2.10 Projektabschluss und Auswertung ..........
2.2.11 Rechnung stellen ...................................
64
64
73
74
76
76
77
77
78
5
Inhalt
Inhalt
3.2.3
3.2.4
3.3
3.4
3.5
3.6
3.7
3.8
3.9
6
Der Kundenkreis ....................................
Branche und Umfeld ..............................
80
81
Konkurrenten und Vorbilder ................................ 82
3.3.1
Vorbilder ............................................... 82
Eine Strategie fürs Webprojekt entwickeln ..........
3.4.1
Rahmenbedingungen für die
strategische Ausrichtung ........................
3.4.2
Mehr als Anfang und Ende .....................
3.4.3
Corporate Identity und Image ................
3.4.4
Positionierung ........................................
3.4.5
Alleinstellungsmerkmal ..........................
3.4.6
Die Rolle des Webauftritts im
Marketing-Mix .......................................
3.4.7
Fazit: Warum eine Strategie so
wichtig ist ..............................................
Zielgruppenanalyse ..............................................
3.7.1
Zielgruppenanalyse mit
Fingerspitzengefühl ................................
3.7.2
Sinus-Milieus .........................................
3.7.3
Verschiedene Zielgruppen ......................
3.7.4
Es menschelt – die Personas ...................
3.7.5
Nutzungsszenarien für Personas .............
3.11
Usability im Webdesign .......................................
3.11.1
Don’t make me think .............................
3.11.2 Effektivität, Effizienz und
Zufriedenheit .........................................
3.11.3 Usability in allen Bereichen ....................
3.11.4 Usabilty-Tests und -Tools ........................
3.11.5 Testaufgaben erstellen ...........................
3.11.6 Technische Analyse ................................
119
120
121
126
127
3.12
User Experience ...................................................
3.12.1 Die Website als Erlebnis .........................
3.12.2 Look & Feel, Joy of Use und die Usability
3.12.3 Emotionen wirken .................................
3.12.4 Glaubwürdigkeit und Vertrauen .............
129
129
129
131
132
3.13
Fazit ..................................................................... 133
4
Responsive Webdesign
4.1
Einleitung – und sie bewegen sich doch ..............
4.1.1
Neue Geräte und Bildschirmgrößen .......
4.1.2
Zurück in die Zukunft – von flexibel
zu statisch zu flexibel .............................
4.1.3
Ganzheitliche Flexibilität – es betrifft alle
83
84
84
85
86
87
88
94
95
95
96
98
4.2
99
101
102
104
106
Anforderungen Design ......................................... 107
3.8.1
Design vs. Content ................................ 107
3.8.2
Look & Feel ........................................... 108
Anforderungen an die Inhalte ..............................
3.9.1
Inhaltsarten: Texte, Bilder und Videos ....
3.9.2
Inhaltserstellung ....................................
3.9.3
Der Qualitätsanspruch ...........................
Anforderungen an Technik und Funktionalitäten 115
3.10.1 Content-Management-Systeme .............. 115
3.10.2 Funktionalitäten .................................... 117
83
Webdesign ist Kommunikation ............................ 89
3.5.1
Das Kommunikationsmodell .................. 89
3.5.2
Kommunikationsmodell für
das Webdesign ...................................... 90
Ziele der Webseite ...............................................
3.6.1
Ziele formulieren ...................................
3.6.2
Aus Zielvorgaben Maßnahmen ableiten ...
3.6.3
Den Anwender nicht aus den
Augen verlieren .....................................
3.10
110
112
112
114
Responsive Strategie – »Mobile first«
und »Content first« ..............................................
4.2.1
Adaptive Layout vs.
Responsive Layout .................................
4.2.2
Mobile oder Content – wer ist der Erste?
4.2.3
Graceful Degradation vs.
Progressive Enhancement ......................
118
118
135
136
138
138
140
140
142
143
4.3
Ein neuer Workflow ............................................. 144
4.3.1
Der traditionelle Workflow .................... 145
4.3.2
Der responsive Workflow ...................... 146
4.4
Bestandteile einer responsiven Webseite ............
4.4.1
Flexible Raster .......................................
4.4.2
Media Queries .......................................
4.4.3
Flexible Bilder, Typografie
und Weiteres .........................................
149
149
151
159
7
Inhalt
Inhalt
4.5
Gestaltungsgrundlagen
6.1
Webdesign und die menschliche Wahrnehmung
6.1.1
Sehen statt Lesen ...................................
6.1.2
Zwei Personen, zwei Meinungen ............
6.1.3
Selektive Wahrnehmung .......................
208
208
211
211
6.2
Die äußere Form ..................................................
6.2.1
Das Format ............................................
6.2.2
Formen .................................................
6.2.3
Die gute Gestalt .....................................
6.2.4
Texturen ................................................
6.2.5
Proportionen .........................................
214
214
216
222
223
224
6.3
Anordnung und Gewichtung ................................
6.3.1
Das Gesetz der Nähe .............................
6.3.2
Das Gesetz der Geschlossenheit .............
6.3.3
Symmetrie und Asymmetrie ...................
6.3.4
Goldener Schnitt ...................................
6.3.5
Die Drittel-Regel ...................................
6.3.6
Der Rhythmus .......................................
6.3.7
Die Leserichtung ....................................
6.3.8
Visuelles Gewicht und Kontrast ..............
224
225
227
229
231
234
235
237
239
6.4
Wahrnehmung und Gestaltung ............................
6.4.1
Gesetz der Ähnlichkeit ...........................
6.4.2
Gesetz der Erfahrung .............................
6.4.3
Gesetz der Kontinuität ...........................
6.4.4
Figur-Umfeld-Beziehung ........................
6.4.5
Schwerkraft ...........................................
6.4.6
Gesetz der Gleichzeitigkeit .....................
245
245
248
249
250
252
252
6.5
Durch Inhalte navigieren ..................................... 196
5.6.1
Navigationsmenüs ................................. 196
5.6.2
Alternative Navigationswege .................. 199
Gute Webgestaltung ............................................
6.5.1
Einheit ...................................................
6.5.2
Angemessenheit ....................................
6.5.3
Einfachheit ............................................
6.5.4
Die Liebe zum Detail .............................
253
254
255
256
257
7
Screendesign
Fazit ..................................................................... 205
7.1
Grundlagen Screendesign .....................................
7.1.1
Aufgaben eines Screendesigns ................
7.1.2
Elemente eines Screendesigns ................
7.1.3
Screendesign-Prinzipien .........................
7.1.4
Die Design-Prinzipien der »Großen« ......
5
Informationsarchitektur
5.1
Einführung ........................................................... 165
5.1.1
Ein Alltagsbeispiel und sein
Webseiten-Pendant ............................... 166
5.1.2
Darum geht es ....................................... 168
5.2
Die Bedeutung der Informationsarchitektur ........
5.2.1
Die drei Aspekte – Inhalte, Nutzer,
Kontext .................................................
5.2.2
User first ................................................
5.2.3
Pageflow ................................................
5.2.4
Findability – vom Suchen und
Finden von Informationen .....................
168
169
170
171
172
5.3
Die Bedeutung der Navigation ............................. 173
5.3.1
Aufgaben einer gelungenen Navigation ... 173
5.4
Content-Strategie ................................................
5.4.1
Guter Content .......................................
5.4.2
Guter Content und die Rolle
des Webdesigners ..................................
5.4.3
Sammeln und strukturieren ....................
5.4.4
Produktion und Aktualität ......................
5.4.5
Storytelling ............................................
5.5
5.6
5.7
8
6
Tipps zur Umsetzung ............................................ 161
4.5.1
HTML-Prototpying ................................. 161
4.5.2
Testen .................................................... 163
Inhaltsstruktur entwickeln ...................................
5.5.1
Methoden und Tools .............................
5.5.2
Wording ................................................
5.5.3
Case Studies ..........................................
5.5.4
Navigations-Prinzipien –
den Erwartungen entsprechen ...............
176
176
177
178
181
182
184
185
188
189
192
259
259
266
270
274
9
Inhalt
Inhalt
7.2
7.3
10
Der Gestaltungsprozess .......................................
7.2.1
Der kreative Prozess ..............................
7.2.2
Moodboards ..........................................
7.2.3
Style Tiles ..............................................
7.2.4
Die Arbeit mit Designprogrammen .........
7.2.5
Design-Feedback ...................................
276
276
281
284
286
288
Vom Design zur Umsetzung ................................. 289
7.3.1
Modulares Design .................................. 290
7.3.2
Design-Styleguide .................................. 293
8
Layout und Raster
8.1
Anatomie einer Webseite .....................................
8.1.1
Der Header-Bereich ...............................
8.1.2
Der Inhaltsbereich .................................
8.1.3
Die Fußleiste .........................................
8.1.4
Der umgebende Block ...........................
297
298
300
302
302
8.2
Wireframes erstellen ............................................
8.2.1
Papier-Wireframes .................................
8.2.2
Gezeichnete Wireframes ........................
8.2.3
Digitale Wireframes ...............................
8.2.4
Die Graue-Boxen-Methode ....................
8.2.5
Vorteile und Grenzen von Wireframes ....
303
304
304
306
307
308
8.3
Raster – Grundlagen .............................................
8.3.1
Bedeutung .............................................
8.3.2
Layout-Grundlagen ................................
8.3.3
Rastersysteme ........................................
309
310
311
321
8.4
Ein eigenes Raster anlegen ..................................
8.4.1
Spalten und Spaltenabstand ...................
8.4.2
Rastergestaltung in Photoshop ...............
8.4.3
Raster mit HTML und CSS umsetzen ......
8.4.4
Eigene Webseiten-Layouts .....................
8.4.5
Interaktive Prototypen ...........................
323
324
325
329
339
342
8.5
Layouts gestalten .................................................
8.5.1
Komposition und Hierarchie ..................
8.5.2
Layout-Strukturen ..................................
8.5.3
Weißraum ..............................................
8.5.4
Above the Fold ......................................
8.5.5
Scrollen oder klicken – das ist hier
die Frage ...............................................
343
343
344
351
353
356
8.5.6
8.5.7
Das Raster brechen – out of the Box ...... 358
Layout-Prinzipien ................................... 360
9
Farbe im Webdesign
9.1
Welche Rolle spielt die Farbe? ............................. 363
9.1.1
Farbe und Webdesign ............................ 364
9.2
Farbe: eine Wissenschaft für sich .........................
9.2.1
Licht und Farbe ....................................
9.2.2
Wie unsere Farbwahrnehmung
funktioniert ...........................................
9.2.3
Farbpsychologie .....................................
366
367
9.3
Farbsysteme .........................................................
9.3.1
Farbkreise ..............................................
9.3.2
RGB – das additive Farbmodell ..............
9.3.3
CMYK – das subtraktive Farbmodell .......
9.3.4
Farbtiefe ................................................
9.3.5
Farbdefinition ........................................
9.3.6
Farbton, Sättigung, Helligkeit .................
368
369
371
372
373
373
375
9.4
Das Web-Farbmanagement .................................. 381
9.4.1
Mit Farbräumen & Farbprofilen arbeiten 381
9.5
Farbwirkung .........................................................
9.5.1
Warme Farben ......................................
9.5.2
Rot ........................................................
9.5.3
Orange ..................................................
9.5.4
Gelb ......................................................
9.5.5
Kalte Farben ..........................................
9.5.6
Blau .......................................................
9.5.7
Grün ......................................................
9.5.8
Violett/Lila .............................................
9.5.9
Neutrale Farben .....................................
9.5.10 Schwarz .................................................
9.5.11 Weiß .....................................................
9.5.12 Grau ......................................................
9.5.13 Grell, greller, Neon ................................
9.5.14 Zusammenfassung Farbwirkung .............
385
386
387
392
395
399
399
402
406
408
410
412
414
416
417
9.6
Farbkontraste .......................................................
9.6.1
Farbe-an-sich-Kontrast ..........................
9.6.2
Hell-Dunkel-Kontrast .............................
9.6.3
Kalt-Warm-Kontrast ...............................
417
418
419
420
365
365
11
Inhalt
Inhalt
9.6.4
9.6.5
9.6.6
9.6.7
9.6.8
9.7
Komplementärkontrast ..........................
Quantitätskontrast .................................
Qualitätskontrast ...................................
Simultankontrast ....................................
Bunt-Unbunt-Kontrast ...........................
421
422
423
424
424
Farbschemata .......................................................
9.7.1
Monochromes Farbschema ....................
9.7.2
Analoges Farbschema ............................
9.7.3
Komplementäres Farbschema ................
9.7.4
Teilkomplementäre, triadische und
tetradische Farbschemata .......................
9.7.5
Tool-Empfehlung: Unterstützung bei
der Farbfindung .....................................
425
426
427
427
428
429
9.8
Gelungener Farbeinsatz im Webdesign ................ 430
9.8.1
Farbe, Corporate Design & Identität ...... 431
9.8.2
Farbverläufe .......................................... 434
9.9
Farbe und Usability .............................................. 438
9.9.1
Hürden bei der Farbwahrnehmung ........ 439
9.10
Ein eigenes Farbschema entwickeln .....................
9.10.1 Inspiration sammeln und Vorbilder
finden ....................................................
9.10.2 Farbtrends und Inspirationsquellen ........
9.10.3 Tools, um Farbkombinationen zu
erzeugen ...............................................
9.10.4 Praktische Umsetzung: Farbschemata
selbst gestalten ......................................
9.11
440
441
442
443
445
Fazit ..................................................................... 450
10
Typografie
10.1
Typografie im Web ............................................... 451
10.1.1
Neue Möglichkeiten .............................. 452
10.1.2 Und was ist gute Typografie? .................. 452
10.2 Leseverhalten im Web .......................................... 454
10.2.1 Prozess des Lesens ................................. 455
10.2.2 Lesen am Bildschirm .............................. 456
10.3 Schriftarten ..........................................................
10.3.1 Serifenschriften ......................................
10.3.2 Serifenlose Schriften ..............................
10.3.3 Andere Schriften ....................................
12
457
458
461
463
10.4 Schriftdarstellung im Web ...................................
10.4.1 Fontrendering – das Runde muss
ins Eckige ..............................................
10.4.2 Websichere Schriften .............................
10.4.3 Webfonts ..............................................
10.4.4 Webfonts-Anbieter ................................
10.4.5 Text als Bild ...........................................
465
465
468
470
472
476
10.5 Makrotypografie ..................................................
10.5.1 Liniensystem ..........................................
10.5.2 Schriftschnitte .......................................
10.5.3 Schriftgröße ...........................................
10.5.4 Zeilenabstand ........................................
10.5.5 Schriftfarbe – Text- & Hintergrundkontrast .................................................
10.5.6 Zeilenlänge ............................................
10.5.7 Grundlinienraster ...................................
10.5.8 Textausrichtung & Silbentrennung ..........
10.5.9 Abstände & Leerraum ............................
10.5.10 Schriftdefinition mit CSS ........................
490
493
494
495
498
500
10.6 Mikrotypografie ...................................................
10.6.1 Buchstaben- & Wortabstand ..................
10.6.2 Anführungszeichen ................................
10.6.3 Trenn- und Gedankenstriche ..................
10.6.4 Einrückungen Texteinzug .......................
10.6.5 Versalien & Kapitälchen .........................
10.6.6 Zahlengliederung ...................................
10.6.7 Sonderzeichen .......................................
501
501
502
503
503
504
505
507
10.7 Gelungene Webtypografie – Textformatierungen
und Gestaltungstipps ..........................................
10.7.1
Die Schriftauswahl .................................
10.7.2 Die Gestaltung von Überschriften ..........
10.7.3 Fließtext ................................................
10.7.4 Links .....................................................
10.7.5 Listen ....................................................
10.7.6 Tabellen .................................................
10.7.7 Zitate .....................................................
10.7.8 Kaufmanns-Und ....................................
10.7.9 Text-shadow ..........................................
10.7.10 Typografische HTML-Elemente ...............
507
508
513
516
517
518
519
520
522
523
525
477
478
479
482
486
10.8 Typografische Inspiration: Best Cases .................. 525
10.8.1 Minimalistisch ....................................... 525
13
Inhalt
Inhalt
10.8.2
10.8.3
11
Bilder und Grafiken
11.1
Einführung: Die Macht der Bilder ........................
11.1.1
Eigenschaften von Bildern ......................
11.1.2
Konsequenzen für die Auswahl
von Bildern ............................................
11.1.3
Bilder im Einsatz ....................................
533
535
11.2
Bilder im Web ......................................................
11.2.1 Bilder als Layoutelemente ......................
11.2.2 Bilder als Orientierungselemente ...........
11.2.3 Bilder als Inhaltselemente ......................
11.2.4 Bilder als emotionale Elemente ..............
537
538
539
541
541
11.3
Bilderquellen ........................................................
11.3.1 Urheberrecht .........................................
11.3.2 Creative-Commons-Bilder ......................
11.3.3 Bilder vom Kunden ................................
11.3.4 Fotos und Grafiken selbst erstellen ........
11.3.5 Fotoagenturen .......................................
11.3.6 Fotografen beauftragen ..........................
542
542
543
544
544
545
549
Motive & Bildstimmung ......................................
11.4.1 Austauschbare Bilderwelten ...................
11.4.2 Räumlichkeiten ......................................
11.4.3 Menschen, Mitarbeiter und das Team ....
11.4.4 Porträts .................................................
11.4.5 Profilbilder .............................................
11.4.6 Inszenierung von Produktfotos ...............
549
550
553
555
558
561
562
Bildgestaltung ......................................................
11.5.1 Der Bildausschnitt ..................................
11.5.2 »Unrechteckige« Formate ......................
11.5.3 Graustufen/Duplexfarben ......................
11.5.4 Montagen/Collagen ...............................
11.5.5 Großformatige Bilder/Hintergrundbilder
11.5.6 Bildtrends ..............................................
564
564
565
570
573
574
575
11.4
11.5
11.6
14
Bold Typo .............................................. 528
Verspielt ................................................ 529
11.7
Icon-Fonts ............................................................ 581
11.7.1
Vor- und Nachteile von Icon-Fonts ........ 584
11.8
Illustrationen ........................................................
11.8.1 Thematische Illustrationen .....................
11.8.2 Dekorative Illustrationen ........................
11.8.3 Illustrativer Text .....................................
11.8.4 Informative Illustrationen (Infografiken)
11.9
Bildbearbeitung ................................................... 588
11.9.1 Die nicht destruktive Bildbearbeitung .... 589
531
532
Icons .................................................................... 578
11.6.1 Icons bringen Inhalte auf den Punkt ....... 579
11.6.2 Aufmerksamkeit steuern und
Struktur geben ....................................... 580
584
585
586
587
587
11.10 Bildformate ..........................................................
11.10.1 Die Bildgröße .........................................
11.10.2 Die Bildkomprimierung ..........................
11.10.3 Die Auswahl des richtigen Bildformats ...
11.10.4 Für Web speichern ................................
11.10.5 Bildgrößen optimieren ...........................
590
591
591
592
594
595
11.11 Bilder in HTML und CSS .......................................
11.11.1 Bilder in HTML ......................................
11.11.2 Bilder in CSS ..........................................
11.11.3 Responsive Bilder ..................................
11.11.4 Retina-Displays ......................................
596
596
598
599
603
11.12 Weitere Bilder-Tools ............................................. 606
11.13 Zusammenfassung Bilder ..................................... 607
12
Navigations- und Interaktionsdesign
12.1
Die Gestaltung der Hauptnavigation ....................
12.1.1
Position .................................................
12.1.2 Umsetzung ............................................
12.1.3 Gestaltung .............................................
12.1.4 Dropdown-Menü ..................................
12.1.5 Mega-Dropdown-Menü .........................
12.1.6 Kreative Navigationen ............................
12.1.7 Feste Navigation ....................................
609
610
614
617
618
621
622
627
12.2 Die Gestaltung der Subnavigation ....................... 630
12.3 Die Gestaltung der Metanavigation ..................... 631
12.4 Die Gestaltung der Footer-Navigation ................. 633
12.5 Navigation auf mobilen Endgeräten –
responsive Navigation .......................................... 634
12.5.1 Top-Nav – alles so lassen ........................ 635
15
Inhalt
Inhalt
12.5.2
12.5.3
638
14
Animationen
640
643
14.1
645
Animationen mit CSS ........................................... 703
14.1.1
»hover«-Effekte mit CSS3-Transitions ..... 703
14.1.2 CSS3-Transform – Verzerren, Skalieren
und Drehen ........................................... 708
646
14.2 Animationen und Interaktivität mit JavaScript ..... 711
14.2.1 JavaScript-Bibliotheken .......................... 712
Footer-Navigation – ganz ans Ende ........
Einfaches Toggle-Menü –
Ein- und Ausblenden .............................
Multi-Toggle ..........................................
Off-Canvas-Menü –
Rein- und Rausfahren ............................
Weitere allgemeine Gestaltungstipps für
eine mobile Navigation ..........................
12.6 Weitere Navigationsmittel ...................................
12.6.1 Links ......................................................
12.6.2 Individuelle Linkunterstriche ..................
12.6.3 Buttons .................................................
12.6.4 Die Suchfeld-Navigation ........................
12.6.5 Weitere Navigationselemente ................
650
650
651
654
658
662
12.7 Formulare .............................................................
12.7.1
Die Komponenten eines Formulars ........
12.7.2 Eingabefelder ........................................
12.7.3 Rückmeldungen .....................................
12.7.4 Validierung ............................................
12.7.5 Die User Experience bei Formularen ......
12.7.6 Formulare mit HTML5 ...........................
665
665
666
668
668
669
670
12.5.4
12.5.5
12.5.6
13
Webdesignstile und -trends
13.1
Die Webdesignstile ..............................................
13.1.1
Frühere Webdesignstile ........................
13.1.2 Skeuomorphismus .................................
13.1.3 Flat-Design ............................................
13.1.4 Minimalismus ........................................
13.1.5 Typografie ..............................................
13.1.6 Illustrationen .........................................
13.1.7 Der Vintage- oder auch Retro-Stil ..........
13.1.8 Fazit ......................................................
673
673
676
677
680
682
684
684
686
13.2 Webdesigntrends .................................................
13.2.1 Scrollen .................................................
13.2.2 Grafische Effekte ....................................
13.2.3 Transparenz ...........................................
687
687
693
696
14.3 Interaktive Elemente ............................................
14.3.1 Bildergalerie ..........................................
14.3.2 Tabs .......................................................
14.3.3 Accordion ..............................................
14.3.4 Content-Slider .......................................
14.3.5 Header-Slideshow ..................................
14.3.6 Modalboxen ..........................................
14.3.7 Tooltip ...................................................
14.3.8 Weitere Animationen und Effekte ..........
713
713
714
717
718
719
720
722
723
14.4 Audiovisuelle Elemente ........................................ 724
14.4.1 Das HTML5-Videoelement ..................... 724
14.4.2 Das HTML5-Audioelement .................... 727
15
Websitetypen
15.1
Corporate Website ...............................................
15.1.1
Die Corporate Website als Türöffner ......
15.1.2 Analyse einer Corporate Website ...........
15.1.3 Das Website-Branding ...........................
729
731
732
733
15.2 Portfolio ............................................................... 734
15.2.1 Der Ausdruck von Persönlichkeit ............ 734
15.2.2 Präsentation der eigenen Arbeit ............. 736
15.3 Shop ..................................................................... 738
15.3.1 Vertrauen schaffen ................................. 740
15.3.2 Konkurrenz und Shop-Vielfalt ................ 743
15.4 Blog ......................................................................
15.4.1 Das Corporate Blog ................................
15.4.2 Das Info-Blog ........................................
15.4.3 Aufbau eines Blogs ................................
744
745
745
746
15.5 Landing Page ........................................................ 748
15.5.1 Aufbau einer Landing Page .................... 748
16
17
Inhalt
15.6 Microsite .............................................................. 750
15.7 Web-Apps ............................................................ 751
15.8 Newsletter ........................................................... 752
16
Tipps, Tricks und Tools
16.1
Wichtiger »Kleinkram« .........................................
16.1.1
Zum Ausdrucken – Print-Stylesheet ........
16.1.2 Das Webseiten-Symbol – Favicon ..........
16.1.3 Webseite nicht gefunden –
die 404-Meldung ...................................
760
16.2 Code-Feintuning ..................................................
16.2.1 Responsibility ........................................
16.2.2 Performance ..........................................
16.2.3 Testen und Debuggen ............................
761
761
761
764
16.3 In Kontakt bleiben ...............................................
16.3.1 Weiterbildung .......................................
16.3.2 Netzwerk ...............................................
16.3.3 Lesenswert ............................................
766
766
766
767
755
755
758
Die DVD zum Buch ........................................................ 771
Index .............................................................................. 773
18
Index
Index
2-D-Transform 709
3-D-Transform 709
3-Klick-Regel 195
5-Sekunden-Test 125
123RF 547
404 760
960 Grid 135, 141, 323
960 Grid System 342
@font-face 582
A
Above the Fold 353
Absatz 453, 499, 503
Abstand 498
Accessibility 35, 484, 765
Accordion 204, 689, 717
active 616
adaptiv 320
Adaptive 140, 149
Adaptive Images 602
Adaptives Layout 320
Additives Farbmodell 371, 404
Agentur 114, 287, 554, 734
AJAX 668, 669, 712
Akquise 80
A List Apart 135
Alleinstellungsmerkmal 86, 179
Ampersand 522
Analoges Farbschema 427
Analytics 126, 128
Änderungswünsche 61
Android 275
Anführungszeichen 502
Angebot 55, 66, 76
AngularJS 712
Animation 130, 621, 703
Anordnung 224, 236, 303,
343, 345
Antialiasing 466
Antiqua-Schrift 458
Anzahlung 63
App 98, 443, 751
Apple 136, 562, 674, 678, 699
iPad 141
iPhone 136, 141
Arbeitsablauf 170
Arbeitsplatz 578
Arial 469
Artikelbild 746
Ästhetik 130, 260
Asymmetrie 229
Audio 727
Auflösung 312
Auftraggeber 74
Auswertung 62
Authentizität 132
B
B2B 99, 101
B2C 99
Backlinks 127
Bankverbindung 505
Banner-Blindheit 213
Barcamp 767
Barrierefreiheit 35
before 521
behance 279
Beige 685
Benutzerbewertung 744
Benutzerfreundlichkeit 118
Beratung 66
Bestellformulare 665
Betonungen 361
Bewegung 250
Bild 112, 113, 133, 364, 531,
622, 693, 733, 746
als Header 539, 700
als Platzhalter 606
Ausschnitt 564
austauschbare Bilderwelt 550
Bilderwelt 268, 531
Creative-Commons 543
CSS-Sprites 764
Dateigröße 595
Duplexeffekt 571
Eigenschaften 532
Emotionen 532, 541
flexibel 159
Formate 590
GIF 593
Größe 591, 595
großflächig 694
Header 539
Hintergrundbild 538, 574, 601
im Web 537
in Kreisform 566
JPG 592
Komprimierung 591
Landschaft 577
Layoutbilder 538, 548
lizenzfrei 546
lizenzpflichtig 546
Mitarbeiterfotos 551
Motive 549
Out-of-the-Box 565
PNG 593
Porträt 558
Profilbild 561
responsive 599
Stockfotos 268
Tools 595, 598, 606
Bildagentur 113, 545
Bildausschnitt 564
Bildbearbeitung 286, 588
Duplexbild 571
Ebenenmaske 590
Ebenenstile 590
Einstellungsebene 550
Füllebene 589
Für Web speichern 589
Nicht destruktiv 589
Schnittmaske 566
Smartobjekte 590
Speichern 594
Vektormaske 590
Bildergalerie 713
Bilderwelt 268, 531, 550, 747
Bildformat 590, 762, 764
773
Index
GIF 593
JPG 592
PNG 593
Bildgröße 591, 595
Bildmontage 573
Bildmotive 549
Bildschirmauflösung 312
Bildschirmgröße 136, 214
Bindestrich 503
Bit 373
Blau 369, 399, 420
Blickverlauf 235, 240
Blindtext 145, 516
blockquote-Tag 520
Blocksatz 496
Blog 115, 133, 205, 744, 766
Blog-Artikel 731
Bootstrap 153, 296, 323
Box-Modell 330
box-sizing 331
BP 732
Brainstorming 278
Methode 280
Branding 733
Braun 389, 685
Breadcrumbs 201, 662
Breakpoints 139, 140, 152, 338
Briefing 54, 73, 74, 81
Browser-Stylesheet 329
b-Tag 481
Buchstabenabstand 501
Budget 75
Bunte Farben 367, 370, 419, 424
Bunt-Unbunt-Kontrast 424,
425, 449
Business-to-Business 99, 101
Business-to-Consumer 99
Button 93, 118, 227, 654,
666, 704, 751
Call-to-Action-Button 390,
393, 435, 749
C
Call-to-Action-Button 273, 354,
390, 393, 435, 657, 749
Card Sorting 186
Carousels 718
Case Studies 189
774
Index
cite-Tag 520
clearfix 332
Clearing 331
ClickandBuy 741
CMS 115, 760
CMYK 372, 397
Collage 108, 281, 573
Color Hailpixel (Web Colours
Data) 444
Color Scheme Designer 429
Colorschemer (Multicolr
Search) 444
Colourco 430
Contao 116
Content 107
Content-Benchmarks 179
Content first 25, 40, 142, 146,
165, 170, 634
Content-Formate 179
Content is king 165, 176,
274, 451
Content-Management-System
115, 760
Content Marketing 165
Content-Strategie 176
Conversion Rate 70, 750
Copy 516
Corporate Blog 744
Corporate Design 80, 364, 400,
431, 432, 732, 745, 749, 754
Corporate Identity 80, 84,
431, 453
Corporate Website 80, 94, 394,
403, 413, 730, 745, 748, 750
Creative-Commons 543
Cross-Selling 96
CSS 30, 32, 436, 584, 703, 753
active 616
before 521
Bilder 598
box-sizing 331
Browser-Stylesheet 329
CSS-Normalisierung 330
CSS-Reset 329
em 484
Farbdefinition 373
Flexbox-Modell 343
font 500
@font-face 582
font-family 500
font-size 484, 500
font-style 481
font-variant 500, 504
font-weight 482, 500
gradient 436
Grid-Layout 343
Hexadezimalcode 374
hover 518, 615, 618, 626,
643, 653, 703
hyphens 497
Klassennamen 335
letter-spacing 501
linear-gradient 436
line-height 486, 500
margin 321, 499
max-width 317
Multi-Column-Layout 343
padding 321, 499
Prefix 437
Pseudoklasse 518, 521, 615
rem 485
RGBA 698
Sprites 598
text-decoration 518
text-shadow 523
text-transform 504
transition 703
Transparenz 696
visited 653
CSS3 32, 130, 148, 288, 436,
485, 523, 568, 679, 703, 762
border-radius 569
Keyframe-Animation 711
Kreis 568
transform 708
Transitions 130
CSS-Farbverlauf 437
CSS Font Stack 470
CSS-Normalisierung 330
CSS-Reset 329
CSS-Sprites 598, 764
D
Dateigröße 595
Datenschutz 128
Datum 506
Debuggen 764
Deckkraft 696
Dekorative Schrift 464
Design 107
Minimalismus 171
Design-Konventionen 273
Design Pattern 292, 751
Designprogramme 286
Design-Styleguide 293
Desktop first 143
Detailtypografie 501
Development
CSS Font Stack 470
Fallback Fonts 469
DHTML 33
Dialogbox 720, 722
digitale Wireframes 306
DIN 505
DIN-Norm 457
Dokumentation 53, 281
Dokumentieren 281
Domain 506
Dreieck 216, 218, 565
Drittel-Regel 234
Dropdown-Menü 185, 197,
618, 706
Drucken 755
Druckfarben 372
Drupal 116
DTHML 711
Duplexbild 570, 571
Duplexfarben 570
E
Effektivität 119
Effizienz 119
Einfachheit 254
Eingabefeld 660, 665, 666
Einheit 254
Einheitlichkeit 362
Einrückung 503
Einstellungsebene 589
E-Mail 506
E-Mail-Client 753
E-Mail-Newsletter 752
em (CSS) 484
Emotionale Elemente 269
Emotionen 112, 131, 183, 537,
541, 553, 574, 724
em-Tag 481
Endless Scrolling 693
Entwicklung
CSS Font Stack 470
Fallback Fonts 469
strong-Tag 481
Error-Meldung 760
Erster Eindruck 270, 733
Evaluation 63
Evernote 279
Existenzgründung 432
Expertenanalyse 124
Eyecatcher 580
Eyetracking 349
F
Facebook 183, 274, 401, 454,
531, 562, 581, 730
Fach-Blog 745
Fallback Fonts 469
Falz 353
Fancybox 713
FAQ 717
Farbdefinition 373
Farbe 93, 236, 239, 241, 245,
250, 283, 344, 363, 744
additives Farbmodell 404
analoges Farbschema 427
Beige 685
Blau 369, 399, 420
Braun 389, 685
bunte 367, 370, 419, 424
Bunt-UnbuntKontrast 424, 449
Corporate Design 431
Corporate Identity 431
Druckfarbe 372
Emotionen 367, 369
Gelb 369, 395, 427
Gold 398
Grau 414, 424
Grün 402, 427
Hell-Dunkel-Kontrast 419, 438,
439, 447, 490
Helligkeit 375, 418, 419, 426,
427, 446
Hexadezimalcode 374
HKS 375
kalte 424
Kalt-Warm-Kontrast 420
Komplementärkontrast 421
Licht 365
Lila 406
Magenta 427
Neon 416
neutral 408, 409, 424
Orange 392, 685
Qualitätskontrast 423, 426
Quantitätskontrast 422, 424
Rot 369, 387, 420, 685
Sättigung 375
Sättigungskontrast 447
Schwarz 372, 410, 424, 681
Simultankontrast 424
Tool 426, 429, 437, 440, 443
Transparenz 696
Trends 442
triadisches Farbschema 428
unbunte 367, 370
Usability 438
Verläufe 426, 434
Violett 406, 427
Wahrnehmung 367
warme 424
Weiß 412, 424, 681
Farbe-an-sich-Kontrast 418
Farbenlehre 363
Farbharmonie 425
Farbkombination 425, 746
Farbkontrast 368, 417, 490
Farbkreis 369, 422
Goethes Farbkreis 369
von Itten 369
von Küppers 370
Farbmanagement 381, 382, 383
Farbmodell
additives 371
CMYK 372
RGB 371
Farbprofil 381, 382
Farbpsychologie 386
Farbräume 381
Farbschema aus Bildvorlage 446
Farbschema entwickeln 440, 445
Farbschemata 417, 425, 441
Farbsehschwäche 439
Farbspektrum 366, 410
Farbsysteme 368
Farbtemperatur 386
kalte Farben 399
warme Farben 386
775
Index
Farbtheorie 369
Farbtiefe 373
Farbton 375, 418
Farbtools
Adobe Kuler 444
ColorHexa 444
Design Seeds 444
Farbtrends 442
Farbverlauf 434, 675
Farbwirkung 367, 385
Favicon 758
Faxnummer 505
Feedback 288
Feedreader 38
Fehlermeldung 760
Feinkonzept 59
Feste Navigation 627
Fetter Schnitt 481
Figur-Umfeld-Beziehung 250
Findability 172
Firebug 764
Fireworks 286, 287, 307
Fixationen 455
Fixes Layout 314
Fläche 241, 251, 364, 412, 417,
422, 424
Flash 23, 674, 703, 711, 724
Flat-Design 24, 165, 171, 435,
654, 677
F-Layout 349
Flexbox-Modell 343
Flexibles Layout 315
Flexibles Raster 149
Flickr 279, 531, 542
Fließtext 516
Float 331
Fluides Layout 316
Fluid Grid 140, 149
font (CSS) 500
Fontdeck 472
font-face 470
font-family 500
Fontrendering 465
fonts.com 472
font-size 484, 500
FontSquirrel 473
font-style 481, 500
font-variant 500, 504
font-weight 482, 500
Footer 302, 339, 632
Footer-Navigation 198, 633, 638
776
Index
Form 216, 239, 344, 364
Dreieck 216, 218, 565
freie Formen 220
Hexagon 569
Kreis 216, 217, 251, 565
Linie 219
Quadrat 216, 251, 252
räumliche Formen 221
Rechteck 216
Format 214
Formular 118, 269, 665
Button 666
Eingabefeld 665
Inputfeld 665
Labels 665
Reset-Button 666
Submit-Button 666
Forum 767
Foto 283
Fotoagentur 545, 747
Fotograf 113, 549
Fotolia 547
Foundation 323
F-Pattern 349
Framework 124, 295, 323
Freie Formen 220
Freie Mitarbeit 69
Frontend 30
Frontend-Styleguide 286, 294
Frost, Brad 290
Fußleiste 302
Für Web speichern 589
G
Gebrauchstauglichkeit 120
Gedankenstrich 503
Gegensätzlichkeit 362
Gehirn 213, 276, 366, 532
Gelb 369, 395, 427
Genericons 582
Georgia 459
Geschwindigkeit 761
Gesetz der Ähnlichkeit 245
Gesetz der Erfahrung 248
Gesetz der Geschlossenheit 216,
227, 617
Gesetz der guten Gestalt 222
Gesetz der Kontinuität 249
Gesetz der Nähe 225, 229,
352, 617
Gesetz der Prägnanz 222
Gestaltungsgrundlagen 207, 277
Asymmetrie 229
Drittel-Regel 234
Einheit 254
Figur-Umfeld-Beziehung 250
Form 216
Format 214
Goldener Schnitt 231
Größe 240
gute Gestalt 222
Hierarchie 241
KISS-Prinzip 257
Konsistenz 246
Kontrast 239
Proportion 224
Raster 234
Rhythmus 235
Schwerkraft 252
Symmetrie 229, 235
visuelles Gewicht 239
Gestaltungstrends 673
getKirby 116
Gewichtung 224
GIF 23, 593
Glaubwürdigkeit 132, 264
Gleichgewicht 361
Gleichzeitigkeit 252
Goethes Farbkreis 369
Gold 398
Goldener Schnitt 231, 310, 337
Google 226, 454, 542, 687, 712
Google Analytics 128
Google Fonts 473
Graceful Degradation 143
gradient 436
Grafiken 283, 531
Grafikprogramm 40, 316
Grau 414, 424, 570
graue Boxen 307
Graustufen 570
Grey-Box-Methodology 307
Grid-Layout 343
Grid-System 322
Grobkonzept 54, 77
Großbuchstaben 478, 504
Größe 236, 239, 240, 245, 344
Großschreibung 500
Grün 402, 427
Grundfarben 369
Grundlinie 478
Grundlinienraster 321, 494
GuideGuide 327
Gute Gestalt 222
H
h1 514
Hamburger Icon 647, 751
Harmonie 230, 231, 234, 370
Hauptnavigation 93, 118, 184,
298, 609
Header 91, 298, 339, 539, 586
Header-Bild 700
Headline 91, 212, 300, 344, 454,
580, 733
Hell-Dunkel-Kontrast 419,
438, 490
Helligkeit 239, 241, 245,
250, 344, 375, 418, 419,
426, 427, 446
Helligkeitskontrast 419
Helvetica 469, 512
Hexadezimalcode 374
Hexagon 569
Hierarchie 241
Hierarchieebenen 197
Hilfslinien 288, 326
Hintergrund 241, 412, 424
Hintergrundbild 538, 574, 601
Hintergrundfarbe 412, 416, 424,
428, 490
HKS 375
Hochauflösendes Display 467
Home 92
Homepage 732
Homepagebaukasten 56
Honorar 51
Horizontale Hauptnavigation 610
Horizontales Scrollen 692
hover 518, 615, 618, 626, 643,
653, 703
htaccess 760
HTML 30, 753
Bildausschnitt 565
Bilder 596
blockquote-Tag 520
b-Tag 481
cite-Tag 520
em-Tag 481
h1 514
img-Tag 596, 606
i-Tag 481
strong-Tag 481
HTML5 31, 130, 339, 670, 695
Audio 727
footer 339
nav 616
Video 695, 724
HTML-Blockelemente 138
HTTP-Requests 764
hyphens 497
I
Icon 93, 248, 578, 622, 701,
752, 758
Genericons 582
Icon-Fonts 581, 762
Icons 283, 288, 675
Idee 278
Ideenbuch 280
Ideenfindung 278
Illustration 113, 283, 584, 684
Maskottchen 586
Illustrator 286, 307
Image 84, 94
img-Tag 565
Impressum 632
InDesign 286, 307
Infinite Scrolling 627, 693
Info-Blog 744, 745
Infografik 42, 112
Informationsarchitektur 165,
168, 172
Beschreibung 168
Erreichbarkeit 168
Findability 172
Inhalte 169
Kontext 169
Navigation 173, 196
Organisation 168
Zielgruppe 169
Informationsgesellschaft 47
Informationsüberflutung 42,
129, 166, 211
Inhalte 115, 169
Aktualität 181
Arten 179
Content is King 451
erstellen 177
Geschichten erzählen 183
planen 177
sammeln 178
Storytelling 182
strukturieren 177, 178
Inhaltsbereich 300
Inhaltselemente 268
Inhaltserstellung 112
Inhaltsformate 179
Inhaltsstruktur 184, 198
Innenabstand 614
Innovation 345
Inputfeld 665
Inspiration 279
Corporate Design 442
Typografie 442
Inspirationsmappe 279
Instagram 182, 531, 535, 545
Interaktion 132, 263
Interaktionselemente 269
Interaktiver Prototyp 309, 342
Internet Explorer 703
Interview 125
Inverser Text 492
Inverse Schrift 492
iOS 699, 752
iPad 141, 320
iPhone 136, 141, 320, 676
Ist-Analyse 79
iStock 547
i-Tag 481
Itten 369, 418, 421
J
JavaScript 30, 33, 130, 668, 695,
703, 711, 762
DTHML 711
JavaScript-Bibliotheken 712
JavaScript-Plugin 688
Joomla 116
Joy of Use 129, 269, 537
JPG 592
jQuery 33, 130, 622, 639, 689,
695, 712, 763
Lightbox 712
777
Index
K
Kalte Farben 241, 399, 424
Kalt-Warm-Kontrast 420
Kandinsky 368
Kantenglättung 466
Kapitälchen 504
Karten legen 186
Kategorisierung 204
Kaufmanns-Und 522
Keyframe-Animation 711
Keywords 127
KISS-Prinzip 257
Klassennamen 335
Klassische Serifenschrift 458
Kleinschreibung 500
Klick-Dummy 68, 124, 342
Kollabieren 331
Kommunikation 52, 64, 89
Empfänger 89
Kommunikationsmodell 89
Sender 89
im Unternehmen 431
Kommunikationsmodell 89
Kommunikationsprozess 98
Kommunikationsstrategie 88
Komplementäres
Farbschema 427
Komplementärfarben 421,
427, 439
Komplementärkontrast 421
Komposition 343
Konferenz 767
Konfigurator 117
Konkurrenz 41, 82, 179, 744
Konsistenz 246
Konsum 364
Konsumenten 42, 208
Konsumgesellschaft 41
Kontaktformular 117, 665
Kontext 169
Kontext-Links 200
Kontrast 239, 243, 250, 490
Kontur 250
Konventionen 175, 345, 609
Konversionsrate 750
Konzeption 73, 107, 129, 133
Wireframe 303
Kopfleiste 298
778
Index
Körperfarbe 372
Kosten 50, 57
Kreative Navigationen 622
Kreativer Prozess 276
Kreativität 208, 276
Kreis 216, 217, 251, 565, 568
Krug, Steve 118, 173, 205
Kunde 75, 80, 98, 114, 140,
303, 548
Kundenanalyse 78
Kundenbewertungen 741
Kundenbindung 753
Kundenkommunikation 140
Küppers 370, 422
L
Labels 665
Ladezeit 272, 762
Landing Page 303, 748
Landschaft 577
Lastenheft 54
Laufweite 479
Lautes Denken 123
Layout 477, 746
Abstand 498
adaptives 320
fixes 314
flexibles 315
responsives 318, 493
statisches 145, 312
Layoutbilder 538, 548
Layoutelemente 268
Layout-Typen 313
Leerraum 225, 351, 580, 681
Leerzeichen 506
Leiten 261
Leitsystem 364
Lesbarkeit 438
Leserichtung 237, 299, 611
Lesezeichen 173, 759
letter-spacing 501
Licht 365
Lichtstrahlen 365, 372
Lightbox 712, 713, 720
Lila 406
linear-gradient 436
line-height 486, 500
Linie 219, 229, 230
Liniensystem 478
Link 189, 517, 650, 752
sensitiver Bereich 614
Linksbündig 495
Liste 518, 540
Lizenzfrei 546
Lizenzpflichtig 546
Logo 212, 222, 229, 248, 298,
396, 400, 403, 407, 476, 733
Look & Feel 108, 175, 283,
538, 740
Lorem Ipsum 516
Lupe 661, 662
M
Magenta 427
Makrotypografie 477
Mappe 279
margin 321, 499
Marke 453
Marketing 40, 81, 385
Marketing-Mix 87
Maskottchen 586
Maßeinheiten
em 316
rem 316
Material Design 687
max-width 140, 317
Media Queries 135, 149, 151,
319, 320, 338, 601, 754, 756
Mega-DropdownMenü 103, 621
Mega-Footer 633
Meilensteine 51, 61
Metadaten 298
Metanavigation 93, 190, 198,
242, 298, 611, 631
Metro-Design 678
Microsite 750
Microsoft 678, 687
Mikrotypografie 501
Millersche Zahl 194
Mindmap 185, 280
Minimalismus 171, 412, 448,
525, 680
Minuszeichen 503
Mitarbeiter 555
Mittellänge 478, 482
Mobile 443
Mobile Content 165
Mobile first 40, 139, 140, 142,
146, 170
Mobile Internet 137
Mobile Navigation 634
Mobiler Viewport 160
Mobile Webseite 142
Mockup 342
Modalbox 720
Modal Window 720
Modern Design 678
Moderne Serifenschrift 460
Modernizr 144
Modulares Design 290
Monitor 366, 371, 381
Monitorauflösung 312
Monochromes
Farbschema 426, 427
Monospace 464, 469
Moodboard 69, 108, 110, 281
Farbe 283
Foto 283
Style Tiles 284
MooTools 33, 712
Moqups 307
Motivation 262
Mouseover 703, 722
Multicolr Search, Color
Hailpixel 444
Multi-Column-Layout 343
Multi-Toggle 643, 648
Multi-Toggle-Navigation 644
N
nav 616
Navigation 132, 173, 267, 609
alternative 733
aus Bildern 624
Breadcrumbs 201
Dropdown-Menü 706
farbige Navigationspunkte 623
feste 627
fixe 690
Hauptnavigation 93, 212, 438
Listen 616
Metanavigation 93
mobile 634
responsive 634
Tab 714
Typografie 626
versteckte 629
vertikale 625
Wording 188
Navigation mit Icons 622
Navigationsebenen 193
Navigationselemente 267
Navigationspunkte 194, 704
Navigationsstruktur 111, 120,
167, 173, 187, 194
Navigationswege 187
Navigationswege, alternative
199, 733
Neonfarben 416
Netzwerk 766
Neuromarketing 132
Neutrale Farbe 408, 409, 424
Newsletter 752
Nichtserifenschriften 509
Nielsen, Jakob 172
Nutzergruppe 767
Nutzungserlebnis 129
Nutzungsszenario 106, 169
O
Oberlänge 479, 482
Off-Canvas-Menü 645, 648
One Pager 171, 311, 356, 688,
690, 737
Online-Branche 47
Online-Marketing 87, 349, 729
Onlineshop 695, 738
Open Source 128
Orange 392, 685
Orientierung 261
Orientierungselemente 266
Outlook 753
Out of the Box 358
P
padding 321, 499, 614
Pageflow 171
Pagination 204
Papier-Wireframes 304
Parallax 574, 627, 689
Pareto-Prinzip 258
Pattern Lab 292
PayPal 741
Performance 696, 761
Persona 742
Personality 736
Personas 104, 110, 113
Pflichtenheft 54, 59
Pflichtfelder 667
Photocase 547
Photoshop 40, 135, 145, 148,
286, 307, 325, 377, 382, 383,
441, 445, 566, 571, 581, 588,
607, 676, 745, 762
GuideGuide 327
Hilfslinien 326
Plug-in 288
Photoshop-Plugin 327
PHP 33, 668, 711
Physiologie 365
Pinterest 42, 279, 531
Piwik 128
Platzhaltertext 145
Plug-in 117, 130, 288
PNG 593
Popup 720
Portfolio 26, 202, 394, 407, 416,
684, 734
Porträt 558
Position 236
Navigation 609
Positionierung 85, 95
Positionierung (Elemente) 239,
242, 245, 252, 303, 344
Positionierungserwartung 350, 610
Positionierungskonventionen 346
Präfix 706
Präsentation 68
Prefix 437
Preloader 695
Presales 94
Print 135
print.css 755
Printdesign 310
Printpublikation 263
Print-Stylesheet 755
Print wirkt 533
Produktbilder 544
779
Index
Produktfoto 562
Professionalität 264
Profilbild 561, 562, 606
Progressive Enhancement 143
Projektabschluss 62, 69
Projektdefinition 48
Projektdreieck 50
Projektidee 53
Projekt-Karikatur 48
Projektmanagement 75
Projektmanager 52
Projektphasen 53
Projektstart 53
Proportion 224, 423
Prototyp 69, 124, 712
Prototyping 124
PSD to HTML 40
Pseudoklasse 518, 521, 615
Psychologie 365
Pull-Medium 537
Push-Medium 537
Q
Quadrat 216, 251, 252
Qualität 50, 114, 119, 264
Qualitätskontrast 423, 426
Qualitätskontrolle 53
Qualitätsmanagement 755
Quantitätskontrast 422, 424
Quellcode 121, 127, 464
Querverkauf 96
Querverlinkungen 200, 653
R
Rahmen 499, 699
Rams, Dieter 270
Rapid Prototyping 342
Raster 140, 234, 254, 268, 288,
309, 678
flexibles 140, 149
GuideGuide 327
Photoshop 325
Spaltenbreite 336
starres 314
Rasterkalkulatoren 321, 339
780
Index
Rastern 466
Rastersysteme 311, 321
Räumliche Formen 221
Reason Why 87
Recherche 73, 76
Rechnung 63
Rechteck 216
Rechtsbündig 496
Redesign 433
Referenz 736
Regression 456
Reiter 714
Relaunch 88, 166
rem 316, 485
Rendering 465
Reset-Button 666
Responsive Bilder 599
Responsive Case Studies 140
Responsive Layouts 493
Responsive Navigation 634,
690, 752
Footer-Navigation 638
Hamburger Icon 647
Multi-Toggle 643
Off-Canvas-Menü 645
Select-Menü 638
Toggle-Menü 640
Top-Nav 635
Responsiver Workflow 138, 144
Responsive Layouts 318, 319
Responsive Tables 520
Responsive Typografie 160, 456
Responsive Webdesign 38, 117,
135, 140, 165, 342, 584, 679,
752, 765
adaptiv 320
Adaptive Images 602
Breakpoints 338
flexibles Raster 140
Hintergrundbild 601
Media Queries 319, 338, 601
Typografie 160, 456, 485
Responsive Wireframes 307
Retina-Display 467, 599, 603
Retro 684
RGB 371, 382, 389, 397, 412
additives Farbmodell 404
RGBA 698
Rhythmus 235, 361
Risikomanagement 71
Rot 369, 387, 420, 685
Rot-Grün-Sehschwäche 439
RSS 38
RWD R Responsive Webdesign
S
Sakkaden 455
Sammelmappe 278
sans-serif 469
Sättigung 375
Sättigungskontrast 447
Scannen 171
Schatten 434
Schlagwörter 204
Schlagwortliste 204, 663
Schnittmaske 566
Schönheit 260
Schreibschrift 463, 469
Schriftart 364, 457, 500, 757
Schriftauswahl 508
Schriftbreite 479
Schriftfamilie 479, 510
Schriftfarbe 490
Schriftgewicht 500
Schriftgröße 482, 500, 757
Schrift im Web 465
Schriftkombination 508
Schriftlage 479
Schrift mit gleicher
Zeichenbreite 469
Schriftschnitte 479, 509
Schrift, serifenlose 678
Schriftstärke 479
Schriftstil 500
Schriftwahl 507
Schwarz 372, 410, 424
Schwarz auf weiß 412
Schwerkraft 252
Screendesign 28, 88, 107, 108,
114, 126, 259, 342
emotionale Elemente 269
Inhaltselemente 268
Interaktionselemente 269
Layoutelemente 268
Navigationselemente 267
Orientierungselemente 266
Prinzipien 270
User-Interface 453
Screenreader 34, 622
Screenshot 108, 283
script.aculo.us 33, 712
Scrollbalken 312, 314
Scrollen 236, 356, 687, 723
ScrollMagic 689
Sehen statt Lesen 208
Seitenleiste 301
Seitennamen 650
Seiten-Templates 347
Seitentitel 649
Sekundärfarbe 369
Selbstständiger 558, 734
Select-Menü 638
Selektives Erinnern 213
Selektive Wahrnehmung 211, 213
Sensitiver Bereich 614
SEO 180, 597
Serifen 458
Serifenlose Schrift 461, 469
Serifenschriften 458, 469, 509
Serviceinhalte 632
Shop 84, 87, 95, 98, 103, 115,
123, 202, 212, 303, 695, 738
Sidebar 301
Sieben-plus/minuszwei-Regel 194
Silbentrennung 495, 497
Simultankontrast 424
Single Pager 688
Sinus-Milieus 101
Sitemap 107, 111, 115, 185,
203, 664
Situations-Analyse 79
Skeleton 323
Sketch 286, 307
Skeuomorphismus 676
Skizze 280
Slab Serifenschrift 461
Slider 575, 689, 718, 733, 763
Content-Slider 718
Slideshow 719
Smartphone 25, 112, 136, 443,
454, 456, 545, 600, 694
Social Media 87, 114, 166, 582
Sonderzeichen 507
Sortieren 204
Soziale Netzwerke 182, 561,
582, 733, 745
Spalten 324
Spaltenabstand 324
Spaltenbreite 336, 493
Spannung 243
Spationierung 501
Spiegelung 434
Sprachauswahl 663
Sprache 533, 535
sRGB 382
Startseite 92, 173, 303, 340,
347, 732
Statische Layouts 312
Stile 673
Stöberer 742
Stockfotos 268
Stockphoto 747
Storytelling 165, 182, 690
Strategie 73, 78, 83, 88
Strich 499
strong-Tag 481
Styleguide 109
Style Tiles 284
Submit-Button 661, 666
Subnavigation 185, 197, 613,
618, 630
Suche 202, 658
Sucher 742
Suchmaschine 733, 748
Suchmaschinenoptimierung 34,
166, 597, 731, 745, 750
Symmetrie 229, 235
Systemschrift 468, 512
T
Tab 689, 749
Tabelle 519
Tabellen-Layout 23, 753
Tablet 25, 136
Tabs 204
Tag Cloud 204
Tag-Cloud 663
Tags 205, 663
Tastatur 622
Teaser 212, 300, 733
Technik 115
Techniktrends 673
Technische Analyse 127
Teilkomplementäres
Farbschema 428
Teilzahlung 63
Telefonnummer 505
Template 291, 347, 686, 744
Tertiärfarbe 369
Testaufgaben 126
Testimonial 132
Tetradisches Farbschema 428
Textausrichtung 495
text-decoration 518
Texteinzug 503
Textfarbe 428, 490, 652
text-shadow 523
text-transform 504
Textur 223, 245, 250, 676, 685
Textverarbeitung 457, 481
Theme 686
Thumbnail 718, 737
Times New Roman 459,
483, 512
Tl;dr 454
Toogle-Menü 640
Tooltip 670, 722
Touch-Icon 759
Touchscreen 137
transform 708
transition 703
Transitional Serifenschrift 459
Transitions 130
Transparenz 132, 696
Treffen 77
Trends 81, 278, 367, 442, 687
Trennstriche 503, 540
Triadisches Farbschema 428
Tutorial 766
Twitter 42, 182, 183, 284, 730
Typekit 472
TYPO3 116
Typografie 283, 587, 675, 678,
682, 733, 744, 746
Abstand 498
Ampersand 522
Anführungszeichen 502
Antialiasing 466
Antiqua-Schrift 458
Arial 469
Bankverbindung 505
Bindestrich 503
Blindtext 516
Blocksatz 496
b-Tag 481
Buchstabenabstand 501
Copy 516
781
Index
Typografie (Forts.)
Courier 464
dekorative 464
Detailtypografie 501
Didot 460
DIN-Norm 457
Einrückungen 503
em-Tag 481
Fallback Fonts 469
Farbe 490
Faxnummer 505
fetter Schnitt 481
Fixationen 455
Fließtext 516
font (CSS) 500
Fontdeck 472
font-face 470
font-family 500
Fontrendering 465
fonts.com 472
font-size 500
FontSquirrel 473
font-style 481, 500
font-variant 500, 504
font-weight 482, 500
Frutiger 472
Garamond 459
Gedankenstrich 503
Georgia 459
Google Fonts 473
Großbuchstaben 478, 500, 504
Grotesk-Schrift 461
Grundlinie 478
Grundlinienraster 494
h1 514
Headline 454
Helvetica 462, 469
Hintergrundfarbe 490
hyphens 497
Illustration 587
inverser Text 492
inverse Schrift 492
i-Tag 481
Kantenglättung 466
Kapitälchen 504
Kaufmanns-Und 522
klassische Serifenschrift 458
Kleinschreibung 500
kursiver Schnitt 481
Laufweite 479
Leerzeichen 506
782
Index
Lesbarkeit 438
letter-spacing 501
line-height 500
Liniensystem 478
Links 517
linksbündig 495
Liste 518
Lorem Ipsum 516
Makrotypografie 477
Mikrotypografie 501
Mittellänge 478, 482
moderne Serifenschrift 460
Monospace 464, 469
Nichtserifenschriften 509
Oberlänge 479, 482
Old-Style 458
Rahmen 499
Rastern 466
rechtsbündig 496
Regression 456
rem 485
Rendering 465
responsive 456, 485
Rockwell 461
Sakkaden 455
sans-serif 469
Schreibschrift 463, 469
Schriftart 457, 500
Schriftauswahl 508
Schriftbreite 479
Schriftfamilie 479, 510
Schriftfarbe 428, 490
Schriftgewicht 500
Schriftgröße 482, 500
Schriftkombination 508
Schriftlage 479
Schrift mit gleicher
Zeichenbreite 469
Schriftschnitt 479, 509
Schriftstärke 479
Schriftstil 500
Schriftwahl 507
Serifen 458
serifenlose Schrift 461, 469
Serifenschriften 469, 509
Silbentrennung 495, 497
Slab Serifen 461
Sonderzeichen 507
Spaltenbreite 493
Spationierung 501
Strich 499
strong-Tag 481
Systemschrift 468, 512
Tabelle 519
Textausrichtung 495
Texteinzug 503
text-transform 504
Times New Roman 459, 483
Tl;dr 454
transitional Serifenschrift 459
Trennstrich 503
Typekit 472
Überschrift 454, 513
Univers 472
Unterlänge 479, 482
Unterstrich 518
Verdana 483
Versalhöhe 478
Versalien 478, 500, 504
Webfonts 470, 472, 512
Web Open Font Format 470
Web Safe Fonts 468
websichere Schrift 468
Wortabstand 501
Wortbild 455
x-Höhe 478
Zahlengliederung 505
Zeilenabstand 486, 500
Zeilenlänge 493
Zitat 520
U
Überschrift 91, 454, 513, 733
Umgebender Block 302
Umkehrmethode 280
Umsatzsteuer 64
Unbunte Farben 367, 370
Unendliches Scrollen 693
Unilever 732
Unique Selling Proposition 86
Unterlänge 479, 482
Unternehmensanalyse 78
Unternehmensblog 745
Unternehmensidentität,
Marke 453
Unternehmenskommunikation 431
Unterseiten 193, 240, 349
Unterstrich 518
Urheberrecht 542
Usability 39, 98, 118, 129, 420,
439, 610, 669, 741, 751
Farbe 438
Usability-Probleme 172
Usability-Test 121
Usability-Tool 121
Use Cases 106, 169
User 25, 39
User Experience 129, 690, 703,
717, 743
User first 143, 170
User Group 767
User Interface 171, 453
USP 86, 179, 181
V
Validator 34, 121, 764
Validierung 668
Verdana 483
Verkauf 66, 95
Verläufe 426, 434
Vermarktung 80, 94
Versalhöhe 478
Versalien 478, 500, 504
Verschlagwortung 205
Vertikale Hauptnavigation 613
Vertrag 56, 115
Vertrauen 130, 132, 740
Video 112, 130, 693, 724, 744
flexibel 159
Viewport 138, 320, 353
Viewport-Test 163
Vinci, da 369
Vintage 684
Violett 406, 427
visited 653
Visuelle Hierarchie 121, 343,
351, 609, 681
Visuelles Gewicht 239
Vorbild 82
W
W3C 33, 481
W3C-Validator 121
Wahrnehmung 208, 209, 253,
367, 370
Farbwahrnehmung 439
Informationsüberflutung 211
selektive 211, 213
selektives Erinnern 213
Wahrnehmungsgesetze 245
WAI 37
Warme Farben 241, 424
Wayback Machine 25
WCAG 440
WCAG 2.0 37, 491
Web 2.0 23, 434, 675
Web Analytics 128
Web Content Accessibility
Guidelines 440
Webdesigner 736
Webdesign, Geschichte 673
Webdesign Showcases 442
Webdesignstile 673
Webdesign-Workflow 138
Web Developer
Toolbar 606, 764
Webfonts 29, 288, 470, 472,
512, 581, 626, 683
Web Open Font Format 470
Web Safe Fonts 468
Websichere Schrift 468
Website-Anatomie 297, 344
Website, responsiv
Bestandteile 149
Weiß 412, 424
Weißraum 225, 351, 580, 681
Weiterbildung 64, 766
Werbeanzeigen 211, 441, 532,
535, 536, 574
Werbebanner 748, 753
Werbung 40, 208, 368, 400, 415
Wettbewerb 41, 83, 744
Windows 274, 678
Wireframe 69, 107, 126, 280,
284, 303, 342
aus Papier 304
digitale 306
Grey-Box-Methodology 307
responsive 307
Software 307
Wireframe-Tools 307
Wissensgesellschaft 47
Wording 124, 167, 188, 192
WordPress 116
Workflow 39, 178
responsiv 144, 146
traditioneller 145
Wortabstand 501
Wortbild 455
Wrapper 314, 333
X
x-Höhe 478
XING 562, 715
Y
YAML 323
YouTube 42
YUI 712
Z
Z-Achse 687
Zahlengliederung 505
Zeichnen 280, 304, 305
Zeilenabstand 486, 500, 758
Zeilenlänge 493
Zeit 50
Zeitplan 60
Ziele 75, 78, 94, 115, 169, 176
qualitative 95
quantitative 95
Zielgruppe 75, 81, 88, 98, 169,
179, 742, 750
Analyse 84, 98, 99, 110
Bedürfnisse 179
Zitat 520
Z-Layout 349
Zugänglichkeit 35
Zurück-Button 173
Zweidrittel-Regel 337
Zweiter Eindruck 272
783
Know-how für Kreative.
Martin Hahn arbeitet als selbstständiger Webdesigner für kleine
und mittelständische Kunden und kennt daher die Herausforderungen, denen sich ein Webdesigner heute stellen muss, aus
jahrelanger eigener Praxiserfahrung ganz genau. Als freier ArtDirector arbeitet er auch für Agenturen und gibt seit vielen Jahren als Dozent u. a. für Screendesign, Photoshop sowie HTML/
CSS sein Wissen weiter.
Martin Hahn
Webdesign – Das Handbuch zur Webgestaltung
783 Seiten, gebunden, in Farbe, mit DVD, Dezember 2014
49,90 Euro, ISBN 978-3-8362-2692-9
www.galileo-press.de/3509
Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Gerne dürfen Sie diese Lese-
probe empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Die vor-
liegende Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nutzungsund Verwertungsrechte liegen beim Autor und beim Verlag.
Teilen Sie Ihre Leseerfahrung mit uns!