Gestaltgesetze

Der Mensch ordnet Dinge in der Regel auf den ersten Blick in harmonisch oder unharmonisch ein. Wir betrachten etwas und sagen: „ja, das passt zusammen“. Layouts und Designs empfinden wir spontan als einladend und übersichtlich oder eben das genaue Gegenteil.

Manchmal ist man verblüfft, dass ein bestimmtes Layout praktisch von allen abgelehnt wird oder ein anderes von nahezu jedem als angenehm empfunden wird. Warum ist das so? Da gibt es einen gemeinsamen Nenner.

Dieser Nenner heißt Gestaltgesetze. Die Gestaltgesetze sind Grundregeln für die Gestaltung von allen möglichen Dingen und natürlich auch wichtig für das Design einer Website.

Es gibt eine ganze Menge solcher Gestaltgesetze, schließlich kann für jedes kleinste Detail eine Regel formuliert werden, aber wir wollen uns nur mit den wichtigsten beschäftigen, alles andere würde hier zu weit führen.

Das Gesetz der guten Gestalt

Je einfacher Elemente gestaltet sind, je klarer ihre Form ist, desto eher werden Menschen darauf aufmerksam und desto besser können sie sich die Dinge merken. Das ist vor allem in der Logoentwicklung besonders wichtig.

Die Konsumenten sollen das Logo natürlich sofort wiedererkennen und es darf auf gar keinen Fall mit irgendeinem anderen verwechselt werden.

Komplexe Formen stehen weniger im Vordergrund. Auch unklare, verschwommene Formen rücken in den Hintergrund, willst Du also einzelne Elemente hervorheben, so kannst Du das dadurch verstärken, indem Du weniger wichtige Dinge „verwaschener“ darstellst.

Dies kannst Du zum Beispiel auch durch eine Farbgebung erzielen, die der Umgebung bzw. dem Hintergrund sehr ähnlich ist, sodass das Objekt damit verschmilzt. Anders herum hebt Kontrast stärker hervor, unterstützt durch eine klare Formgebung rückt das Objekt in den Mittelpunkt der Aufmerksamkeit.

Das Gesetz der Geschlossenheit

Die menschliche Wahrnehmung ist schon faszinierend. Es gibt Situationen, da sehen wir Linien und Formen wo gar keine sind. Schuld ist das Gesetz der Geschlossenheit.

Gesetz der Geschlossenheit

Bei geschickter Anordnung von ausgewählten Formen, die eine weitere Form andeuten, ergänzt unser Gehirn automatisch die fehlenden Konturen.

Zum Bildbeispiel: Wir sehen nicht nur einfach Aussparungen in drei Kreisen, sondern ein ganzes Dreieck, welches eigentlich nicht vorhanden ist.

Unser Gehirn ist bemüht die Dinge, die wir sehen zu ordnen und in Beziehung zu setzen. Für die Gestaltung eröffnet dieses Gesetz die Möglichkeit durch geschicktes Weglassen Spannung und Interesse zu erzeugen.

Genauso, wie wir Formen in unserer Wahrnehmung ergänzen ist es andererseits unmöglich auf diese Weise Elemente zu verbinden, die durch Linien oder ähnliches getrennt sind.

Das Gesetz der Nähe

Elemente, die näher beieinander stehen werden als zusammengehörig gewertet. Ein ganz simples Beispiel sind Absätze in einem Text oder die Spalten einer Tageszeitung.

Niemand würde auf den Gedanken kommen, am Ende einer Zeile einfach die Lücke zwischen den Spalten zu überspringen, um auf gleicher Höhe in der benachbarten Spalte weiterzulesen.

Die Worte einer Spalte werden automatisch als zusammengehörig erkannt. Voraussetzung dafür ist, das die Abstände zwischen den Worten und Zeilen klein genug sind und die Abstände zwischen den Spalten groß genug.

Ist dies nicht der Fall, wurde auch nicht das Gesetz der Nähe angewandt und der Leser hat Schwierigkeiten zu entscheiden, wo der Text nun weiter geht.

Anderes Beispiel: Ein Bildtext oder ein Bildtitel wird als solcher erkannt, wenn er nahe genug an besagtem Bild steht und der Abstand zum restlichen Inhalt stimmt.

Je eindeutiger die Abstände, in beide Richtungen, umso eindeutiger können Elemente einander zugeordnet werden. Lücken sind nicht einfach nur leerer Raum, sie erfüllen auch einen Zweck.

Das Gesetz der Nähe ist gerade für die Orientierung auf einer Website wichtig.

Das Gesetz der Ähnlichkeit

So wie das Gesetz der Nähe ist auch das Gesetz der Ähnlichkeit für die Gestaltung einer Website unabdingbar.

Das Gesetz der Ähnlichkeit besagt, dass sich ähnelnde oder sich gleichende Elemente als zusammengehörig betrachtet werden. Ähnlichkeit wird zum Beispiel durch dieselbe Farbe, dieselbe Größe, dieselbe Form oder Gestalt erzeugt.

Je mehr Übereinstimmungen bestehen, umso deutlicher wird die Zusammengehörigkeit wahrgenommen.

Auf Websites ist dieses Gesetz sinnvoll für Elemente, die die gleiche Aufgabe erfüllen, vor allem wenn sie räumlich auseinander liegen und nicht das Gesetz der Nähe angewendet werden kann. So wird zusätzliche Ordnung und Übersicht auf die Site gebracht.

Zum Beispiel Download-Buttons oder „Mehr Info“-Buttons, die sind normalerweise nicht in einer einzigen Ansammlung anzutreffen, sondern stehen beim jeweiligen Beschreibungstext oder Produktbild oder dergleichen. Man käme bei Buttons mit derselben Funktion sicherlich nie auf die Idee, jeden einzelnen anders zu gestalten.

Das Gesetz der guten Fortsetzung

Der Effekt dieses Gesetzes lässt sich auf mehrfache Weise beschreiben. Der Betrachter folgt hierbei dem einfachsten, ihm vertrauten Weg, er verlängert Linien und andere einfache Strukturen gedanklich.

Gesetz der guten Fortsetzung

Auf der linken Seite des Bildes sehen wir eine senkrechte und eine waagerechte Linie, die ein Kreuz bilden. Nahezu niemand stellt sich die Zusammensetzung dieser Figur anders vor, z.B. aus zwei abgeknickten Linien, wie in der Mitte veranschaulicht, oder vier kurzen Linien, wie rechts verdeutlicht.

Weil Linien in komplexen, verzweigten Diagrammen oder Schaubildern oft die Richtung wechseln, sind diese schwer zu erfassen, keine Spur von einer guten Fortsetzung.

An einer imaginären Linie ausgerichtete Elemente werden als Einheit wahrgenommen, wir können das zum Beispiel sehr gut an einem Inhaltsverzeichnis erkennen.

Erstes Kapitel

  • Erste Überschrift
  • Punkt Nummer zwei
  • Ein weiterer Teil
  • Noch eine Überschrift

Wir empfinden die untereinander angeordneten Punkte als eine Linie, an der die Inhalte ausgerichtet sind.

Das Gesetz der Symmetrie

Wieder ein wichtiges Gesetz für das Webdesign. Symmetrisch angeordnete Elemente werden als zusammengehörig angesehen.

Gesetz der Symmetrie

Im Bild oben werden die blauen Kreise aufgrund ihrer symmetrischen Anordnung als eine Einheit wahrgenommen, sie bilden eine gezackte Linie.

Die hellblauen Kreise sind nicht symmetrisch und deshalb auch keine Einheit, sie bringen Unruhe ins Bild.

Durch Symmetrie werden klare Strukturen und Abgrenzungen geschaffen, das bedeutet wieder mehr Ordnung und Übersicht. Außerdem wirkt die Website dadurch harmonischer.

Das Gesetz der Erfahrung

Das Gesetz der Erfahrung hat Ähnlichkeiten mit dem Gesetz der Geschlossenheit. Unser Gehirn vergleicht permanent das, was wir gerade wahrnehmen mit bereits Gesehenem und ergänzt, wenn möglich, fehlende Details.

Gesetz der Erfahrung

Obwohl die Hälfte der Schrift abgeschnitten ist, können wir den Text lesen. Unser Gehirn vergleicht die Teilstücke mit Bildern aus unserer Erfahrung, ordnet die Stücke ein und vervollständigt automatisch die Worte.

Ebenso erkennen wir mühelos aus wenigen Strichen bestehende Skizzen, wenn wir das darauf Dargestellte bereits vorher gesehen haben.

Fazit:

Das sind im Groben mit die wichtigsten Gestaltgesetze. Wenn Ihr eure eigene Website gestalten wollt, sollten sie zu eurem Handwerkszeug  gehören. Sie sind relativ einfach umzusetzen und einige unterstützen die so wichtige Usability. Die Beachtung der Gestaltgesetze dient somit dem Erfolg eurer Website.

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

1 Comment