Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 6 Gestaltungsgrundlagen
Pfeil 6.1 Webdesign und die menschliche Wahrnehmung
Pfeil 6.1.1 Sehen statt Lesen
Pfeil 6.1.2 Zwei Personen, zwei Meinungen
Pfeil 6.1.3 Selektive Wahrnehmung 
Pfeil 6.2 Die äußere Form
Pfeil 6.2.1 Das Format
Pfeil 6.2.2 Formen
Pfeil 6.2.3 Die gute Gestalt
Pfeil 6.2.4 Texturen
Pfeil 6.2.5 Proportionen
Pfeil 6.3 Anordnung und Gewichtung
Pfeil 6.3.1 Das Gesetz der Nähe
Pfeil 6.3.2 Das Gesetz der Geschlossenheit
Pfeil 6.3.3 Symmetrie und Asymmetrie
Pfeil 6.3.4 Goldener Schnitt
Pfeil 6.3.5 Die Drittel-Regel
Pfeil 6.3.6 Der Rhythmus
Pfeil 6.3.7 Die Leserichtung
Pfeil 6.3.8 Visuelles Gewicht und Kontrast
Pfeil 6.4 Wahrnehmung und Gestaltung
Pfeil 6.4.1 Gesetz der Ähnlichkeit
Pfeil 6.4.2 Gesetz der Erfahrung
Pfeil 6.4.3 Gesetz der Kontinuität
Pfeil 6.4.4 Figur-Umfeld-Beziehung
Pfeil 6.4.5 Schwerkraft
Pfeil 6.4.6 Gesetz der Gleichzeitigkeit
Pfeil 6.5 Gute Webgestaltung
Pfeil 6.5.1 Einheit
Pfeil 6.5.2 Angemessenheit
Pfeil 6.5.3 Einfachheit
Pfeil 6.5.4 Die Liebe zum Detail
 
Zum Seitenanfang

6.3    Anordnung und Gewichtung Zur vorigen ÜberschriftZur nächsten Überschrift

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 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.

 
Zum Seitenanfang

6.3.1    Das Gesetz der Nähe Zur vorigen ÜberschriftZur nächsten Überschrift

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.

Hier erkennen wir vier Spalten von Kreisen. Aufgrund der Nähe der Elemente in der Vertikalen sehen wir keine Zeilen, sondern Spalten.

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 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.

Navigations-, Teaser-, Inhalts- und Fußbereich sind durch Farbflächen bei www.profoundgrid.com klar voneinander getrennt.

Abbildung 6.33    Navigations-, Teaser-, Inhalts- und Fußbereich sind durch Farbflächen bei www.profoundgrid.com klar voneinander getrennt.

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 Google-Suchergebnisse 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:

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.

Abbildung 6.34    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 ihn am besten in der Webgestaltung einsetzt, werde ich noch später in Abschnitt 8.5.3, »Weißraum«, eingehen.

Platzverschwendung? Nein, widman.ski  lässt einfach mal Weiß wirken.

Abbildung 6.35    Platzverschwendung? Nein, widman.ski lässt einfach mal Weiß wirken.

Das Gesetz der Nähe zeigt auch, dass es wenig sinnvoll ist, möglichst viele Inhalte auf möglichst kleinem Raum unterzubringen, 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 z. B. optische Ähnlichkeit. Was zusammengehört, sollte auch zusammen angeordnet werden.

»Es steht zusammen, was zusammengehört.«
(Frei nach Willy Brandt)

 
Zum Seitenanfang

6.3.2    Das Gesetz der Geschlossenheit Zur vorigen ÜberschriftZur nächsten Überschrift

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.

Das »Muster«, dass wir zuerst Kreise sehen und dann erst die einzelnen Elemente, ist bei uns stark ausgeprägt.

Abbildung 6.36    Das »Muster«, dass wir zuerst Kreise sehen und dann erst die einzelnen Elemente, ist bei uns stark ausgeprägt.

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, die 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.

Klar zu erkennen: Dies ist ein Button!

Abbildung 6.37    Klar zu erkennen: Dies ist ein Button!

Auch in den Seitenleisten vieler Webseiten kommt dieses Prinzip zum Einsatz, das sich auch durch farbige Flächen umsetzen lässt. Mit dem Gesetz der Geschlossenheit lassen sich Informationen ordnen 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 Postbank-Website zeigt den Einsatz des Gesetzes der Geschlossenheit gut auf.

Die Login-Seite des Online-Bankings der Postbank und das Gesetz der Geschlossenheit. Ein einfaches Formular mit wenigen Textinformationen. Im linken Bild das Original und im rechten sind die Einheiten, die aufgrund des Gesetzes zusammengehören, verdeutlicht worden, banking.postbank.de.

Abbildung 6.38    Die Login-Seite des Online-Bankings der Postbank und das Gesetz der Geschlossenheit. Ein einfaches Formular mit wenigen Textinformationen. Im linken Bild das Original und im rechten sind die Einheiten, die aufgrund des Gesetzes zusammengehören, verdeutlicht worden, banking.postbank.de.

Links sehen Sie den Originalscreenshot, 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 von 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, wären Inhaltsbereiche nicht mehr so gut getrennt und insgesamt die Informationen nicht mehr so leicht aufnehmbar. Abbildung 6.39 führt dies einmal exemplarisch vor.

Das Gesetz der Geschlossenheit missachtet: Zusammengehörige Bereiche sind in der von mir extra veränderten Version viel schwerer zu erkennen.

Abbildung 6.39    Das Gesetz der Geschlossenheit missachtet: Zusammengehörige Bereiche sind in der von mir extra veränderten Version viel schwerer zu erkennen.

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.

Logo-Design | Auch im Logo-Design macht man sich das Gesetz der Geschlossenheit gerne zunutze. Die Anzahl der Elemente kann bei Logos dadurch so weit 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.

Symmetrische Logos wirken harmonisch und ästhetisch ansprechend.

Abbildung 6.40    Symmetrische Logos wirken harmonisch und ästhetisch ansprechend.

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.

 
Zum Seitenanfang

6.3.3    Symmetrie und Asymmetrie Zur vorigen ÜberschriftZur nächsten Überschrift

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.

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.

builtbybuffalo.com setzt auf ein symmetrisches Design.

Abbildung 6.41    builtbybuffalo.com setzt auf ein symmetrisches Design.

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.

Asymmetrische Logos wirken spannungsvoller und interessanter.

Abbildung 6.42    Asymmetrische Logos wirken spannungsvoller und interessanter.

Sind die einzelnen Objekte entlang einer vertikalen – gedachten – Linie ausgerichtet, empfindet der Betrachter die Webseite als 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 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.

Drei Beispiele für den abwechslungsreichen Wechsel zwischen Symmetrie und Asymmetrie im Screendesign (von links nach rechts: balletbc.com, deepmind.com und stripe.com/radar).

Abbildung 6.43    Drei Beispiele für den abwechslungsreichen Wechsel zwischen Symmetrie und Asymmetrie im Screendesign (von links nach rechts: balletbc.com, deepmind.com und stripe.com/radar).

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.

 
Zum Seitenanfang

6.3.4    Goldener Schnitt Zur vorigen ÜberschriftZur nächsten Überschrift

Das Teilungsverhältnis beim Goldenen Schnitt

Beim Goldenen Schnitt entspricht das Verhältnis der kürzeren zur längeren Strecke, der längeren Strecke zur Gesamtstrecke. Das Verhältnis der Strecken beträgt dabei 1:1,618.

Zentrale Positionierungen, wie bei der Symmetrie, wirken oft auch statisch und langweilig. Um einen spannenderen Bild- oder Layoutaufbau zu finden, gibt es z. B. eine der bekanntesten gestalterischen Regeln: den Goldenen Schnitt. Er beschreibt die harmonische Aufteilung einer Fläche. Er findet sich in der Natur, so z. B. beim menschlichen Körper, wie auch in der Architektur, Kunst, Fotografie und im Grafikdesign.

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.

Auch im Printdesign wird der Goldene Schnitt gerne zur harmonischen Ausrichtung des Satzspiegels genutzt.

Abbildung 6.44    Auch im Printdesign wird der Goldene Schnitt gerne zur harmonischen Ausrichtung des Satzspiegels genutzt.

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.

Aufteilung eines Bildes nach dem Goldenen Schnitt erzeugt eine harmonische Wirkung.

Abbildung 6.45    Aufteilung eines Bildes nach dem Goldenen Schnitt erzeugt eine harmonische Wirkung.

Mehr Spannung kommt allerdings in ein Bild, wenn die wichtigen Elemente NICHT nach dem Goldenen Schnitt platziert werden. (Foto: © Diogo Tavares – unsplash.com)

Abbildung 6.46    Mehr Spannung kommt allerdings in ein Bild, wenn die wichtigen Elemente NICHT nach dem Goldenen Schnitt platziert werden. (Foto: © Diogo Tavares – unsplash.com)

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, z. B. 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ückgegriffen.

Vorliebe oder Gewohnheit?

Es ist unklar, ob der Goldene Schnitt eine angeborene ästhetische Vorliebe oder lediglich ein früh entstandenes Design-Verfahren ist, an das wir uns inzwischen so gewöhnt haben. Unabhängig davon hat er einen großen Einfluss auf die verschiedensten Design-Disziplinen.

SCHRITT FÜR SCHRITT

Goldener Schnitt in Photoshop

Freistellungswerkzeug

Wenn ein Bild in Adobe Photoshop zurechtgeschnitten werden soll, z. B. weil der Ausschnitt verändert werden soll, eignet sich am besten das Freistellungswerkzeug.

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.

Überlagerungsoptionen für das Freistellungswerkzeug in Photoshop

Abbildung 6.47    Überlagerungsoptionen für das Freistellungswerkzeug in Photoshop

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.

»Hilfslinien« beim Beschneidungswerkzeug unterstützen Sie beim Freistellen, hier mit dem Raster Goldener Schnitt. (Foto: © David Marcu – unsplash.com)

Abbildung 6.48    »Hilfslinien« beim Beschneidungswerkzeug unterstützen Sie beim Freistellen, hier mit dem Raster Goldener Schnitt. (Foto: © David Marcu – unsplash.com)

Danach müssen Sie Ihre Auswahl nur noch mit (¢) bestätigen. Diese Überlagerungsoptionen können einem die Arbeit enorm erleichtern, einen harmonischen Ausschnitt zu finden bzw. markante Bildobjekte sinnvoll im Bildausschnitt zu positionieren.

 
Zum Seitenanfang

6.3.5    Die Drittel-Regel Zur vorigen ÜberschriftZur nächsten Überschrift

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 ähnlich wie eine symmetrische Anordnung stabil.

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.

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 Design-Elemente, die besondere Bedeutung haben sollen, platziert werden. Die sich daraus ergebende Asymmetrie empfindet der Betrachter als interessant und ästhetisch ansprechend.

Teilung eines Bildes nach der Drittel-Regel (Foto: © Diogo Tavares – unsplash.com)

Abbildung 6.49    Teilung eines Bildes nach der Drittel-Regel (Foto: © Diogo Tavares – 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.

Klassische Aufteilung eines Blogs: zwei Drittel Inhaltsbereich, ein Drittel Sidebar, wie beim affenblog.de

Abbildung 6.50    Klassische Aufteilung eines Blogs: zwei Drittel Inhaltsbereich, ein Drittel Sidebar, wie beim affenblog.de

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.

 
Zum Seitenanfang

6.3.6    Der Rhythmus Zur vorigen ÜberschriftZur nächsten Überschrift

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 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).

Rhythmusbrü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.

Der Rhythmus kann regelmäßig sein, ähnlich der Symmetrie. Die Elemente sind vom ähnlichen oder gleichen optischen Gewicht oder wiederholen sich, sodass das Gesamtlayout eher ruhig und statisch wirkt. So ein Rhythmus lässt sich gut in Abbildung 6.51 erkennen, in der die Webseite seedlipdrinks.com zu sehen ist.

Ein regelmäßiger Rhythmus, dem man folgen muss, bei seedlipdrinks.com

Abbildung 6.51    Ein regelmäßiger Rhythmus, dem man folgen muss, bei seedlipdrinks.com

Ein Rhythmus kann aber auch unregelmäßig sein, wie z. B. 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 allein 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.

Ein Klassiker: Drei Teaser nebeneinander, dazu noch zentrierter Text, das ergibt eine symmetrische Wirkung.

Abbildung 6.52    Ein Klassiker: Drei Teaser nebeneinander, dazu noch zentrierter Text, das 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.

Unregelmäßiger Rhythmus bei blackestate.co.nz

Abbildung 6.53    Unregelmäßiger Rhythmus bei blackestate.co.nz

Ein asymmetrischer Abschnitt. Die Aufteilung entspricht ungefähr der Drittel-Regel, katarina-witt-stiftung.de.

Abbildung 6.54    Ein asymmetrischer Abschnitt. Die Aufteilung entspricht ungefähr der Drittel-Regel, katarina-witt-stiftung.de.

 
Zum Seitenanfang

6.3.7    Die Leserichtung Zur vorigen ÜberschriftZur nächsten Überschrift

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. Elemente, die inhaltlich zusammengehören, werden daher auch gerne horizontal nebeneinander angeordnet.

Klassische Anordnung von links nach rechts bei pmrsoftware.de: zuerst die Headline samt Subline und Button, dann ein Teaser-Bild

Abbildung 6.55    Klassische Anordnung von links nach rechts bei pmrsoftware.de: zuerst die Headline samt Subline und Button, dann ein Teaser-Bild

Drei Teaser stehen nebeneinander bei forever-soft.de. Die Leserichtung signalisiert: Sie gehören zusammen.

Abbildung 6.56    Drei Teaser stehen nebeneinander bei forever-soft.de. Die Leserichtung signalisiert: Sie gehören zusammen.

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.

Auffälliger Call-to-Action-Button am rechten Rand bei mawendo.de

Abbildung 6.57    Auffälliger Call-to-Action-Button am rechten Rand bei mawendo.de

Eine auffällige Gestaltung kann beispielsweise durch die Größe oder Farbe erfolgen. 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 (z. B. Orange oder Grün) auch jede Menge Aufmerksamkeit auf sich ziehen.

 
Zum Seitenanfang

6.3.8    Visuelles Gewicht und Kontrast Zur vorigen ÜberschriftZur nächsten Überschrift

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.

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.

Einmal mit (links) und einmal ohne (rechts) visuelle Hierarchie. Der Unterschied ist offensichtlich, farbentour.de/seo/content-marketing-seo.

Abbildung 6.58    Einmal mit (links) und einmal ohne (rechts) visuelle Hierarchie. Der Unterschied ist offensichtlich, farbentour.de/seo/content-marketing-seo.

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 ihrer inhaltlichen Bedeutung entsprechend auch visuell gestaltet werden.

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 (z. B. 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«)!

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.

Knapp zusammengefasst: Je größer der Text, desto wichtiger ist er, hier bei stiftung-stadtgedaechtnis.de.

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.

Helligkeit und Farbe | Ganz allgemein wirken dunkle Flächen gewichtiger als helle Elemente. Dieser Effekt kann sich auf einem eher dunklen Hintergrund umkehren.

Ein roter Button fällt auf bei visionsserviceadventures.com.

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.

Farblich gekennzeichnete Fehlermeldungen zeigen dem Anwender schnell, wo er agieren muss, wie bei healthtab.com/en/users.

Abbildung 6.61    Farblich gekennzeichnete Fehlermeldungen zeigen dem Anwender schnell, wo er agieren muss, wie bei healthtab.com/en/users.

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.

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 dienen dazu, einzelnen Elementen eine besondere Bedeutung zu geben, sei es als Link oder sei es als farbliche Markierung ganzer Kategorien. Mehr zu Farben, ihrer Wirkung und ihrem gezielten Einsatz steht in Kapitel 9, » Farbe im Webdesign«.

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.

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.

Die Elemente haben, je nach Lage, eine visuelle Gewichtung und Wirkung. Objekte, die weiter oben stehen, wirken z. B. leichter und spannungsvoller als weiter unten stehende. Elemente, die weiter links stehen, wirken »leichter« und dynamischer. Rechts stehende wirken eher ruhiger und stabiler.

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.

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.

Und dann gibt es noch »Orte« mit besonderer Bedeutung (siehe dazu auch Abschnitt 8.1, »Anatomie einer Webseite«), z. B. 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 die Ausrichtung der Webseitenelemente sollten also einerseits der Erwartungshaltung der Anwender entsprechen und im Idealfall auch gleichzeitig für die benötigte Harmonie und Spannung sorgen.

Klassische Anordnung: oben links das Logo, darunter die Hauptnavigation und rechts oben die Metanavigation, moszeik.com

Abbildung 6.64    Klassische Anordnung: oben links das Logo, darunter die Hauptnavigation und rechts oben die Metanavigation, moszeik.com

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 z. B. in ein Rechteck oder einen Kreis setzen. Hat diese Form dann noch eine markante Hintergrundfarbe, bekommen die Form und damit auch der Inhalt, also der Text, eine entsprechend hohe visuelle und damit inhaltliche Bedeutung.

Viele Kästen geben einer Seite Struktur. Besonders auffällig ist aber der farbige Kasten 200 Kunden bei fischerappelt.de.

Abbildung 6.65    Viele Kästen geben einer Seite Struktur. Besonders auffällig ist aber der farbige Kasten 200 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.

Kontraste entstehen durch starke Gegensätze, durch auffallende Gestaltungsunterschiede, z. B. den 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 plated.com arbeitet z. B. mit einer großen Fülle von Kontrasten: weißer Text auf farbigem Bildhintergrund, grauer Text auf farbigem Hintergrund, inhaltliche Bereiche mit Farbflächen getrennt und unterschiedliche Elementgrößen.

Vielfältige Kontraste kennzeichnen die Screendesigns bei plated.com und pmrsoftware.de.

Abbildung 6.66    Vielfältige Kontraste kennzeichnen die Screendesigns bei plated.com und pmrsoftware.de.

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.

Übung: Visuelle Hierarchie
  • Schreiben Sie die wichtigsten Informationen (ca. 5–10) auf, nach denen der Anwender auf Ihrer Website suchen wird.

  • Geben Sie den Informationen Werte (1–10) nach ihrer Bedeutung für den durchschnittlichen Besucher (1 = weniger wichtig, 10 = sehr wichtig).

  • Schauen Sie sich das Screendesign an: Weisen Sie den Elementen Werte zu (1–10) nach der tatsächlichen Bedeutung im Design.

  • Inwiefern decken sich die Erwartungen des Besuchers mit der tatsächlichen Bedeutung?

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. 23 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.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern