Gestaltgesetze: wie das Auge ordnet

Wer eine Website öffnet, liest sie nicht zuerst. Er sieht sie. In den ersten Sekundenbruchteilen, bevor auch nur ein Wort bewusst gelesen ist, hat das Gehirn die Seite bereits geordnet: Es hat Gruppen gebildet, Zusammenhänge hergestellt, Wichtiges von Unwichtigem getrennt. Dieser Vorgang läuft automatisch ab und folgt erstaunlich stabilen Regeln. Wer diese Regeln kennt, kann Seiten so gestalten, dass sie auf Anhieb verständlich wirken. Wer sie ignoriert, produziert Seiten, die unruhig und anstrengend sind, ohne dass man genau sagen könnte, warum.

Die Regeln wurden Anfang des 20. Jahrhunderts von der Gestaltpsychologie beschrieben, vor allem von Max Wertheimer, Wolfgang Köhler und Kurt Koffka. Ihre Grundidee: Wir nehmen nicht einzelne Punkte, Linien und Flächen wahr, sondern Ganzheiten, eben Gestalten. Das Ganze ist dabei etwas anderes als die Summe seiner Teile. Diese Einsicht ist heute die Grundlage fast jeder Gestaltungslehre, vom Plakat bis zur App.

1. Die wichtigsten Gestaltgesetze

Probieren Sie die vier Gesetze aus, die für digitale Gestaltung am wichtigsten sind. Achten Sie darauf, wie sich Ihre Wahrnehmung der Punkte verändert, obwohl sich an den Punkten selbst kaum etwas ändert.

Beim Gesetz der Nähe genügt ein etwas größerer Abstand in der Mitte, und aus einem gleichmäßigen Raster werden zwei Gruppen. Beim Gesetz der Ähnlichkeit sehen Sie plötzlich Spalten, weil sich Form und Farbe abwechseln. Die gemeinsame Region ist das stärkste Mittel: Ein Rahmen oder eine Hintergrundfläche fasst Elemente zusammen, selbst wenn sie sonst wenig gemeinsam haben. Und die Geschlossenheit zeigt, wie aktiv das Auge arbeitet: Es ergänzt unvollständige Formen zu einem Kreis und einem Rechteck, obwohl beide Lücken haben.

2. Abstände sind Aussagen

Das Gesetz der Nähe ist im Alltag das wichtigste und das am häufigsten verletzte. Viele Layouts verwenden überall denselben Abstand: zwischen Überschrift und Text, zwischen zwei Absätzen und zwischen zwei Abschnitten. Das Ergebnis wirkt ordentlich, aber das Auge kann nicht erkennen, was zusammengehört. Eine Überschrift, die gleich weit vom vorigen wie vom folgenden Text entfernt ist, scheint zu schweben.

Abb. 1.1Abstand nach Zusammengehörigkeit

Die Regel lautet deshalb: Der Abstand innerhalb einer Gruppe ist kleiner als der Abstand zwischen Gruppen. Eine Überschrift steht näher an ihrem Text als am vorigen Abschnitt. Ein Formularfeld steht näher an seiner Beschriftung als am nächsten Feld. Ein Bild steht näher an seiner Bildunterschrift als am folgenden Absatz. Wer diese eine Regel konsequent anwendet, verbessert fast jedes Layout sofort – ohne eine einzige Farbe oder Schrift zu ändern.

3. Ähnlichkeit schafft Verlässlichkeit

Das Gesetz der Ähnlichkeit hat eine zweite, oft unterschätzte Seite: Nutzer schließen von gleichem Aussehen auf gleiche Funktion. Wenn alle Links blau und unterstrichen sind, erwartet man hinter jedem blauen, unterstrichenen Wort einen Link. Ist ein Wort nur zur Hervorhebung blau, klickt der Nutzer vergeblich und ist irritiert. Wenn die wichtigste Handlung auf einer Seite ein gefüllter Knopf in der Markenfarbe ist, sollte sie das auf jeder Seite sein. Konsistenz ist deshalb keine Pedanterie, sondern eine Voraussetzung dafür, dass Nutzer eine Website lernen können.

Umgekehrt gilt: Was sich unterscheidet, sollte sich auch deutlich unterscheiden. Zwei Knöpfe, die fast gleich aussehen, aber verschiedene Dinge tun, sind schlimmer als zwei klar verschiedene. Ein gutes Designsystem arbeitet deshalb mit wenigen, klar unterscheidbaren Varianten statt mit vielen Abstufungen.

4. Figur und Grund, Kontinuität

Zwei weitere Gesetze begegnen in digitalen Oberflächen ständig. Figur und Grund beschreibt, dass wir ein Bild immer in einen Vordergrund und einen Hintergrund zerlegen. Ein Dialogfenster über einer abgedunkelten Seite nutzt das gezielt: Der Dialog wird zur Figur, alles andere tritt zurück. Probleme entstehen, wenn diese Trennung unklar ist, etwa bei Text auf unruhigen Fotos. Das Auge weiß dann nicht, was Vordergrund ist, und das Lesen wird mühsam. Eine halbtransparente Fläche hinter dem Text oder ein ruhigerer Bildausschnitt lösen das Problem.

Die Kontinuität beschreibt, dass das Auge Linien und Reihen folgt. Elemente, die auf einer gemeinsamen Linie liegen, werden als zusammengehörig wahrgenommen, und der Blick wandert entlang dieser Linie weiter. Zeitleisten, Fortschrittsanzeigen in Bestellprozessen und Karussells nutzen das. Auch Ausrichtung gehört hierher: Texte und Bilder, die an einer gemeinsamen Kante ausgerichtet sind, wirken geordnet, selbst wenn sie unterschiedlich groß sind. Schon ein oder zwei Pixel Versatz werden dagegen als Unordnung empfunden.

5. Gestaltgesetze als Prüfwerkzeug

Die Gestaltgesetze eignen sich nicht nur zum Gestalten, sondern auch zum Prüfen. Ein einfacher Test besteht darin, die Augen leicht zusammenzukneifen oder einen Screenshot unscharf zu machen, bis kein Text mehr lesbar ist. Was dann noch sichtbar ist, sind die Gruppen, die das Auge bildet. Stimmen sie mit den inhaltlichen Einheiten überein? Sieht man drei Blöcke, wo drei Leistungen vorgestellt werden? Oder zerfällt die Seite in ein ungeordnetes Muster aus Flecken? Dieser sogenannte Unschärfetest dauert Sekunden und zeigt Ordnungsprobleme zuverlässig. Er ist deshalb auch für alle nützlich, die Design nicht selbst machen, sondern beurteilen oder beauftragen.

Ein Beispiel aus der Praxis: Auf der Leistungsseite eines Fitnessstudios standen sechs Kursangebote in einem gleichmäßigen Raster, jeweils mit Symbol, Überschrift und Text. Besucher empfanden die Seite als unübersichtlich, obwohl sie aufgeräumt aussah. Der Grund: Die Abstände zwischen Symbol, Überschrift und Text waren genauso groß wie die Abstände zwischen den Leistungen. Nachdem jede Leistung auf eine leicht getönte Karte gesetzt und die inneren Abstände halbiert wurden, entstanden sechs klar getrennte Einheiten. Inhalte, Farben und Schriften blieben unverändert. Solche Korrekturen gehören zu den günstigsten Verbesserungen, die es im Design gibt, weil sie nur die Ordnung betreffen und keine neuen Inhalte erfordern.

Stand: September 2026. Kursmaterial der Klarwerk Akademie.