Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Gesetz der Nähe für Webdesign

In der Gestaltpsychologie sagt das Gesetz der Nähe aus, dass nahe beieinanderstehenden Elemente als zusammengehörig wahrgenommen werden. Das typische bei Pärchenbildung bei den Menschen – je näher sie sich stehen, desto größer ist die Verbundenheit. Auch das gilt bei Design im Allgemeinen und im Webdesign.

Dieses Gesetz gilt in der Gestaltpsychologie als eines der stärksten und sollte daher immer im Auge behalten werden.

Was hat das nun mit unserem Webdesign zu tun? Im folgenden Beispiel sehen wir sofort, dass die Standardvorgaben vom Browser das Gesetz der Nähe nicht wirklich berücksichtigen.

Gesetz der Nähe angewendet bei Webdesign am Beispiel von Textbereichen
Gesetz der Nähe angewendet bei Webdesign am Beispiel von Textbereichen

Erstellen wir eine HTML-Seite ohne jedes Design, werden die Standardabstände genutzt, die der Browser vorgibt. Hier sieht man schön, dass der Abstand zwischen Hauptüberschrift (h1) und Absatz (p) sehr groß ist. Hier erfolgt nach dem Gesetz der Nähe somit schon eine Trennung von Überschrift und Text – zur Erinnerung: Nähe bedeutet Zusammengehörigkeit!

Standardabstände vom Browser berücksichtigen wenig das Gesetz der Nähe
Standardabstände vom Browser berücksichtigen wenig das Gesetz der Nähe

Der Abstand zwischen Absatz und Absatz passt. Hier möchte man ja eine Trennung, eine Aufhebung der Zusammengehörigkeit.

Fatal wird dann aber der Übergang von Absatz zur zweiten Überschrift (h2) und wieder zum Absatz. Hier haben wir 2-mal den gleichen Abstand. Es ist also visuell gar nicht so klar, wo diese zweite Überschrift hingehört. Hier hilft natürlich unser Erfahrung, dass eine Überschrift i.d.R. zum folgenden Absatz gehört.

Was ist die Konsequenz aus dem Gesetz der Nähe?

Was machen wir über CSS, damit das Design besser wirkt. Wir verändern den Abstand zwischen Überschriften und Absätzen. Damit wir die Bereiche und Innen- bzw. Außenabstände deutlich sehen, färben wir die Bereiche mit Hintergrundfarben ein:

h1 { 
	background-color: lime;
}
p {
	background-color: yellow;
}

Damit wird auch sofort sichtbar, dass es sich um Außenabstände in CSS handelt, sprich wir also über die Anweisung margin die Abstände ändern.

Einfärben der einzelnen Textarten
Einfärben der einzelnen Textarten

Im ersten Schritt wollen wir die Hauptüberschrift zum Absatz rücken. Geben wir nun der Hauptüberschrift einen Außenabstand nach unten mit 0 mit, passiert nur ein leichtes Zusammenrücken. Einfach einmal testen.

h1 { 
    margin-bottom: 0;
    background-color: lime;
}

Erst wenn wir dem folgenden Absatz auch einen Außenabstand nach OBEN mitgeben, rücken die zwei Bereiche zusammen.

h1 { 
    background-color: lime;
    margin-bottom: 0;
}
p {
    background-color: yellow;
    margin-top: 0;
}

Wer sich über das Verhalten wundert, dass man beiden etwas mitgeben kann – das Schlagwort dazu nennt sich Zusammenfallen von Außenabständen (collapsing margin).

Wir wollen ein bisschen Sicherheit hereinbringen und nur dieses Verhalten erzeugen, wenn direkt ein Absatz nach einer Überschrift kommt. Dazu müssen wir nur den Selektor erweitern:

h1 + p {
    background-color: yellow;
    margin-top: 0;
}

Das Ergebnis sieht nun so aus:

Gesetz der Nähe bei Überschrift und ersten Absatz über CSS eingestellt
Gesetz der Nähe bei Überschrift und ersten Absatz über CSS eingestellt

Was machen wir nun mit unserer zweiten Überschrift h2? Diese soll mehr Abstand nach oben halten und näher zum nächsten Absatz rücken.

Erst einmal einfärben und den Abstand nach unten (funktioniert genauso wie wir es bereits bei h1 gemacht haben.

h2 {
    background-color: orange;
    margin-bottom: 0;
}
h2 + p {
    background-color: skyblue;
    margin-top: 0;
}

Jetzt wollen wir den Abstand zwischen dem letzten Absatz und der zweiten Überschrift erhöhen.

h2 {
    background-color: orange;
    margin-bottom: 0;
    margin-top: 1.4em;
}

Das Ergebnis:

Gesetz der Nähe angewendet auf Überschriften bei Webdesign
Gesetz der Nähe angewendet auf Überschriften bei Webdesign

Und wenn wir nun Vorher-Nach-Vergleich machen von der visuellen Wirkung sollte der Unterschied sehr deutlich sein:

Optische Wirkung des Gesetzes der Nähe
Optische Wirkung des Gesetzes der Nähe

Und das Ganze im Vergleich – links Standardabstände vom Browser – rechts korrigierte Abstände.

Gesetz der Nähe angewendet bei Webdesign am Beispiel von Textbereichen
Gesetz der Nähe angewendet bei Webdesign am Beispiel von Textbereichen
weitere eigene Projekte: