In diesem Artikel geben wir zunächst einen kurzen Überblick über die Entwicklung der Gestaltgesetze durch die Gestaltpsychologie. Anschließend stellen wir einige Gestaltgesetze und ihre Anwendung im Hinblick auf Design und Marketing vor.

Inhaltsverzeichnis

Geschmack ist nicht alles, es gibt Regeln

Die Gestaltung einer Webseite sollte nicht rein nach dem Belieben und dem Geschmack des Webdesigners Ihrer Wahl erfolgen. Eine qualitativ hochwertig arbeitende Agentur für Webdesign wird neben der technischen Umsetzbarkeit immer auch die Prinzipien der Gestaltgesetze beachten.

Diese Gesetze haben Einfluss darauf, wie eine Seite grundsätzlich aufgebaut ist. Übrigens gelten die Gesetze auch, wenn Sie noch nie von ihnen gehört haben, denn hier geht es um eine grundsätzliche Wahrnehmung von Ordnung und Schönheit.

Anwendung von Gestaltgesetzen im Webdesign

Wer sich im Internet behaupten möchte, kommt also um die Anwendung der Gestaltgesetze nicht herum. Aus den Gestaltungsregeln ergibt sich unter anderem, welche Webfonts sinnvoll sind und welche Farbkombinationen Webdesign ansehnlich machen oder eben nicht.

Die Regeln gelten für die gesamte Ordnung auf einer Webseite, die Menüführung, die Webfonts und Umrandungen. Hinzu kommt, dass manche Farbkombinationen Webdesign besser gelingen lassen als andere. Die Gestaltgesetze betreffen alle Faktoren, die die menschliche Wahrnehmung beeinflussen. Diese Erkenntnis beruht auf psychologischer Forschung und der daraus resultierenden Entwicklung der Gestaltgesetze.

Die Berliner Schule der Gestaltpsychologie und die Theorie des guten Designs

Ordnung ist das halbe Leben

Aus der Berliner Schule für experimentelle Psychologie ging Anfang des 20. Jahrhunderts die Gestaltpsychologie (oder auch Gestalttheorie) hervor. Es handelt sich um eine Richtung in der Wahrnehmungspsychologie, die sich mit Ordnung im psychischen Geschehen befasst.

Der Mensch ist auf Ordnung angewiesen, wenn er mit seiner Umwealt agiert. Unser Gehirn interpretiert alles, was wir wahrnehmen und greift dazu auf bereits gemachte Erfahrungen zurück.

Das Ganze ist mehr als die Summe seiner Teile

Die menschliche Wahrnehmung sowie sein Denken, Fühlen und Verhalten werden durch Gestaltung stark beinflusst. Ein wichtiger Leitsatz der Gestalttheorie lautet: Das Ganze ist etwas anderes, als die Summe seiner Teile. Das gilt in jeglichen Zusammenhängen und nicht nur im Zusammenhang von Content Design.

Etliche Gestaltpsychologen haben Gestaltgesetze formuliert, wobei manche sich auf sieben beschränken und andere über hundert Regeln festgestellt haben. Manche der Gesetze tauchen unter unterschiedlichen Namen auf, besagen aber inhaltlich teilweise das Gleiche. Was die Gestaltgesetze besagen, verdeutlichen wir anhand der folgenden Beispiele.

sommersommer
SOMMER+SOMMER
Stuttgart, Germany
4.9 - 5 Empfehlungen
Media & WerbungOnline Advertising & DisplaySocial MediaCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
beyond-digital
Beyond Digital
Düsseldorf, Germany
5 - 2 Empfehlungen
Content MarketingWebdesignCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
yaaas-creative-studio
YAAAS Creative Studio
Düsseldorf, Germany
4.9 - 5 Empfehlungen
Tools zur WebsiteerstellungWebentwicklungSocial MediaWebdesignWeb & SoftwareCreative & DesignMarketing
Agentur entdeckenarrow_forward
klareko%cc%88pfe-gmbh
KLAREKÖPFE GmbH
Stuttgart, Germany
4.9 - 4 Empfehlungen
Social MediaWebdesignCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
neckarfreunde-werbeagentur-gmbh
Neckarfreunde Werbeagentur GmbH
Stuttgart - München, Germany
5 - 1 Empfehlung
Digitale StrategieCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
upljft-gmbh
upljft GmbH
Hamburg, Germany
4.8 - 7 Empfehlungen
Marketing AutomationOnline Advertising & DisplayDigitale StrategieSocial MediaCreative & DesignSales & Customer SuccessBrandingMarketing
Agentur entdeckenarrow_forward
unicblue-brand-communication-gmbh
UNICBLUE Brand Communication GmbH
Gelsenkirchen, Germany
3.75 - 1 Empfehlung
WebentwicklungEvent-MarketingGrafikdesignWebdesignBranding
Agentur entdeckenarrow_forward
dr-maximilian-flu%cc%88gge-strategie-kommunikation
Dr. Maximilian Flügge Strategie & Kommunikation
Berlin, Germany
5 - 5 Empfehlungen
Content MarketingCreative & DesignPublic RelationsBrandingMarketing
Agentur entdeckenarrow_forward
echte-liebe
Echte Liebe
Köln, Wiesbaden, Berlin, Miami, Germany, USA
4.5 - 2 Empfehlungen
Media & WerbungOnline Advertising & DisplayWebentwicklungSocial MediaWeb & SoftwareCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
werbetriebwerk-ug
WerbeTriebwerk UG
Münster, Germany
4.5 - 10 Empfehlungen
WebentwicklungE-Commerce-SoftwareSocial MediaGrafikdesignWeb & SoftwareCreative & DesignMarketing
Agentur entdeckenarrow_forward
ligalux
LIGALUX
München - Hamburg - Berlin - Köln, Germany
5 - 3 Empfehlungen
GrafikdesignWebdesignBrandingMarketing
Agentur entdeckenarrow_forward
rechnerhaus-gmbh
Rechnerhaus GmbH
Lampertheim, Germany
5 - 3 Empfehlungen
Online Advertising & DisplayTools zur WebsiteerstellungWebentwicklungE-Commerce-SoftwareWebdesignWeb & Software
Agentur entdeckenarrow_forward
adrenalinsky-werbeagentur-gmbh
ADRENALINSKY Werbeagentur GmbH
Berlin, Köln, Germany
5 - 3 Empfehlungen
WebentwicklungEvent-MarketingSocial MediaGrafikdesignWeb & SoftwareCreative & DesignBrandingMarketing
Agentur entdeckenarrow_forward
thefabers
THEFABERS
Köln, Germany
5 - 2 Empfehlungen
WebentwicklungE-Commerce-SoftwareGrafikdesignWebdesignBranding
Agentur entdeckenarrow_forward
thinknewgroup
thinknewgroup
München, Germany
5 - 4 Empfehlungen
Social MediaWebdesignBrandingMarketing
Agentur entdeckenarrow_forward
incorporate-berlin
incorporate berlin
Berlin, Hamburg, Germany
4.5 - 5 Empfehlungen
GrafikdesignWebdesignWeb & SoftwarePublic RelationsBranding
Agentur entdeckenarrow_forward
digital-masters-gmbh
Digital Masters GmbH
Hamburg, Germany
0 - 0 Empfehlung
Online Advertising & DisplayTools zur WebsiteerstellungMobile & App-EntwicklungE-Commerce-SoftwareDigitale StrategieMobile & App-DesignWebdesign
Agentur entdeckenarrow_forward
uli-werbeagentur
Uli! Werbeagentur
Mainz, Wiesbaden, Frankfurt am Main, Germany
0 - 0 Empfehlung
WebdesignWeb & SoftwareMarketing
Agentur entdeckenarrow_forward
serviceplan-group
Serviceplan Group
München, Berlin, Bremen, Hamburg, Germany
0 - 0 Empfehlung
Media & WerbungWebentwicklungE-Commerce-SoftwareDigitale StrategieGrafikdesignWebdesignWeb & SoftwarePublic RelationsBrandingMarketing
Agentur entdeckenarrow_forward
nyba-media-gmbh
NYBA Media GmbH
Frankfurt, Germany
5 - 3 Empfehlungen
Online Advertising & DisplayWebentwicklungE-Commerce-SoftwareWebdesignMarketing
Agentur entdeckenarrow_forward
eggert-group
EGGERT GROUP
Düsseldorf, Germany
5 - 1 Empfehlung
Digitale StrategieWebdesignBrandingMarketing
Agentur entdeckenarrow_forward
we-like-social-media
We like Social Media
Berlin, Germany
5 - 1 Empfehlung
Online Advertising & DisplaySocial MediaWebdesign
Agentur entdeckenarrow_forward

Gesetz der Geschlossenheit

Das Gehirn vervollständigt Unvollständiges

Dieses Gesetz besagt, dass wir Formen und Muster in einem größeren Kontext betrachten. Unser Gehirn ist in der Lage, aufgrund bereits gemachter Erfahrungen möglicherweise fehlende Elemente zu ergänzen. Das liegt daran, dass wir Geschlossenheit bevorzugen, sie erscheint uns sinnvoller als offene Strukturen.

Schauen Sie sich zum besseren Verständnis das folgende Bild an. In diesem Foto sehen Sie nur 50 % des Mannes, der Rest ist durch die dunklen Streifen verdeckt. Dennoch haben Sie kein Problem, bei ihrer Betrachtung den ganzen Mann wahrzunehmen, Ihr Gehirn ergänzt problemlos die fehlenden Teile. Hier kommt das Gesetz der Geschlossenheit zum Tragen.

Quelle: pexels.com

Das Gesetz der Geschlossenheit wirkt bei Vollständigkeit und Unvollständigkeit

Im Content Design machen wir uns diesen Effekt zu Nutze, etwa in dem wir bei Logos und anderen Strukturen durch Auslassungen Aufmerksamkeit erzeugen. Außerdem sind wir durch das Gesetz der Geschlossenheit in der Lage, Elemente in optisch reduzierter Weise darzustellen, was die Übersichtlichkeit einer Benutzeroberfläche deutlich verbessert.

Durch den Einsatz von Umrandungen machen wir die Zusammengehörigkeit von Inhalt deutlich. Das Gleiche ist auch ohne Umrandung möglich, wenn Texte und andere Elemente entsprechend geschlossen präsentiert werden.

Gesetz des gemeinsamen Schicksals

Mitgehangen, mitgefangen

Die menschliche Wahrnehmung interpretiert Ereignisse aufgrund von Erfahrungen. Letztere besagt, dass Objekte, die sich in die gleiche Richtung bewegen, zusammengehören.

Für dieses Gesetz wird normalerweise ein Beispiel mit einer Reihe von Quadraten und Kreisen genommen. Wir gehen auf den ersten Blick davon aus, das jeweils gleichen geometrischen Formen zusammen gehören. Wenn sich nun in dieser Reihe je ein Kreis und ein Quadrat gemeinsam nach oben bewegen, dann sind plötzlich die beiden unterschiedlichen Formen Teile einer Gruppe.

Gleiche Funktion, gleiche Richtung

Im Webdesign kommt Bewegung in verschiedener Weise vor: Die Veränderung beim Mouseover, Buttons mit Schiebereglern, Kuchendiagramme mit hervorgehobenen Stücken. Ja, und auch bei den blinkenden Gifs, die hoffentlich irgendwann aussterben.

Stellen Sie sich nun ein differenziertes Formular zur Cookie-Einwilligung vor. Es ist nicht denkbar, dass wir bei der Zustimmung zu den einzelnen Marketing-Maßnahmen den Regler mal nach links und mal nach rechts schieben um „ja“ zu sagen. Von links nach rechts zu schieben bedeutet Zustimmung, fertig, das besagt das Gesetz des gemeinsamen Schicksals.

Gesetz der Ähnlichkeit

Was ähnlich ist, gehört zusammen

Ein wichtiges Prinzip unserer Wahrnehmung ist das der Ähnlichkeit. Es bezieht sich sowohl auf die Elemente, die wir momentan vor Augen haben, als auch diejenigen, die in unserem Gedächtnis gespeichert sind.

Bei der Aufteilung von Elementen auf einer Webseite kommt es darauf an, zusammengehörende Inhalte in ähnlicher Weise zu präsentieren. In diesem Sinne beinflussen Form, Position, Größe und Farbkombinationen Webdesign in vielfacher Weise. Das gleiche gilt umgekehrt für Elemente, die nicht zusammengehören, sie müssen unterschiedlich präsentiert werden.

Mehr ist nicht immer mehr

Sicher haben Sie schon einmal gehört, dass man die Webfonts auf einer Seite nicht auf zig verschiedene Arten formatieren sollte. Mal unterstrichen, mal fett, mal kursiv – und das Ganze womöglich noch nach Belieben: So eine Gestaltung widerspricht dem Gesetz der Ähnlichkeit und somit unserem ästhetischen Emfpinden.

Sollen unterschiedliche Webfonts auf einer Seite eingesetzt werden, so stellt das einen Bruch dar. Möglich ist so eine Abweichung von der Regel, wenn der Webdesigner einen klaren Plan vor Augen hat und weiß, was er tut.

Gesetz der Erfahrung

Das sagt schon der gesunde Menschenverstand

Wir haben bestimmte Erfahrungen, aufgrund derer wir Dinge einordnen können. Wir haben gelernt, dass wir an einem Stopp-Schild anhalten. Sehen wir ein Auto das Schild missachten, stellen sich unsere Nackenhaare hoch und wir befürchten eine Kollision. Der vielbesagt „gesunde Menschenverstand“ ist genau das, was einen Erwachsenen von einem Baby unterscheidet, nämlich die gemachten Erfahrungen.

Im Webdesign machen wir uns das Gesetz der Erfahrung zu Nutze

Nehmen wir den typsichen Button mit einem Haus darauf, der uns zurück auf eine Startseite führt, oder den mit dem Briefumschlag, der zum E-Mail-Formular führt. Es kommt nicht darauf an, dass diese immer genau gleich aussehen, aber aufgrund unserer Erfahrung wissen wir sie sofort einzuordnen.

Dieses Gesetz kommt auch bei derAuswahl von Webfonts zum Tragen. Wer nicht möchte, dass seine Website aussieht wie ein mit der Schreibmaschine geschriebenes Schriftstück aus dem vorigen Jahrhundert wird Schriften mit Serifen nur sparsam einsetzen und seine Benutzeroberfläche nicht mit Times New Roman gestalten.

Gesetz der Nähe

Was sich nahe ist, gehört zusammen

Elemente, die nah beieinander liegen, werden als zusammengehörig wahrgenommen. Das gilt nicht nur im Design, sondern beispielweise auch auf der Straße, wenn Menschen als zusammengehörig wahrgenommen werden, weil sie Hand in Hand gehen und wir sie als Paar einordnen. Das Gesetz der Nähe können schon Kleinkinder sicher interpretieren, schon im Kindergarten haben wir das Bedürfnis, zur Gruppe zu gehören.

Gesetz der Nähe: eins der Gestaltgesetze, die Sie im Webdesign berücksichtigen sollten

Nehmen wir einmal die Zitrusfrüchte auf dem obigen Bild. Es verursacht uns ein seltsames Unbehagen, das wir keine richtige Ordnung herstellen können, obwohl die Früchte ja offenkundig bewusst angeordnet wurden. Wenn wir hin und wieder auf eine Website aus den 90er Jahren treffen, mit tausend verschiedenen Webfonts, blinkenden Gifs und allen Farbkombinationen, die das Webdesign hergibt, dann haben wir ein vergleichbares Gefühl. Oft haben diese Seiten keine Abstände zwischen Elementen und missachten das Gesetz der Nähe und so gut wie jedes andere Gesetz der Gestaltung.

Bitte schön nah, mit etwas Platz dazwischen

Wie viel schöner ist es doch, wenn alles harmonisch in einer Gruppe und nicht so überladen angeordnet ist, wenn Elemente nach gleicher Art und mit Abständen dargestellt werden. Werden Gegenstände als Einheit wahrgenommen freut das unseren Ordnungssinn.

Beim Design einer Website ist das Gesetz der Nähe von großer Bedeutung. Links die zurselben Kategorie gehören, liegen in einer bestimmten Nähe zueinander. In Texten auf Landingpages sind die Abstände über und unter Überschriften meistens unterschiedlich groß. Ausnahmen bestätigen natürlich die Regel, wir haben uns beim Design unserer Website für gleiche Abstände über und unter den Überschriften. Zum Brechen von Gestaltgesetzen kommen wir weiter unten.

Gesetz der Kontinuität

Eine Linie verstehen wir besser als ein Durcheinander

Diese Prinzip überschneidet sich mit dem Gesetz der guten Fortsetzung

Schauen Sie sich diese Lichtpunkte an. Zunächst einmal wissen wir aufgrund des Gesetzes der Erfahrung, dass auch die unteren, verschwommenen Elemente Kreise sind. Wir nehmen die Lichtpunkte als Linien wahr, obwohl sie unterschiedliche Abstände haben, das liegt am Gesetz der guten Fortsetzung.

Machen Sie es dem Nutzer einer Webseite leicht

Gedachte Lininen oder Farbkombinationen bewirken beim Webdesign eine inhaltliche Nutzerführung. Zur Anwendung kommt dieses Prinzip auch bei der gleichmäßigen Einrückung von Texten und Menüpunkten. Letzlich folgen schon die grundsätzlichen Überlegungen zur Gestaltung einer Webseite dem Gesetz der Kontinuität.

Quelle: pexels.com

Gesetz der guten Gestalt

Wenn alles stimmt, dann ist es schön

Bekannt ist es auch unter dem Namen „Gesetz der Prägnanz“ oder „Gesetz der Einfachheit“. Diese Richtline besagt, dass eine Gestalt um so besser bzw. prägnanter ist, je mehr Forderungen der Gestaltgesetze berücksichtigt sind. Ein gut gestaltetes Element ist einfach gestaltet, damit das Gehirn es mit Leichtigkeit verarbeiten kann.

Keep it simple, stupid!

Im Grunde reduziert sich in der Gestaltung alles auf geometrische Formen, die wir schon aus der Zeit kennen, als wir noch mit Bauklötzen gespielt haben: Kreise, Dreiecke und Rechtecke.

Das Gesetz der guten Gestalt korrespondiert inhaltlich mit dem KISS-Prinzip: Keep it simple, stupid.

Gestaltgesetze brechen

Keine Regel ohne Ausnahme, das gilt auch beim Design. Selbstverständlich beinhaltet die Beherrschung der Regeln der guten Gestalt auch die Fähigkeit, diese bewusst zu brechen. Ein solcher Bruch der Gestaltgesetze dient üblicherweise der besseren Wahrnehmung und Steigerung der Aufmerksamkeit oder auch dem Branding.

Allerdings funktioniert das nur, wenn der Nutzer nicht von Sinneseindrücken überwältigt wird, Brüche müssen also sparsam eingesetzt werden. In Bezug auf Webdesign bedeutet das, dass Sie es am besten einem Profi überlassen.

Professionelles Webdesign unter Berücksichtigung der Gestaltgesetze

Es geht um das große Ganze

Beim Content Design, also der visuellen Gestaltung digitaler Inhalte geht es nicht nur um Schönheit. Letzlich geht es immer um das große Ganze, bei der Gestaltung von Webseiten haben wir die Funktionalität und die Effektivität gleichzeitig im Blick.

Wir wollen durch sinnvolle Anordnungen, richtige Auswahl der Webfonts und harmonische Farbkombinationen Webdesign nicht einfach nur schöner machen, sondern ein bestimmtes Verhalten beim Nutzer erreichen.

Am Ende des Tages soll der Kunde ein Produkt kaufen

Im Marketing geht es letztlich um Konversionen: Der Kunde soll eine Beziehung zu einem Unternehmen bekommen und ein Produkt kaufen.

Für die Top Webdesign-Agenturen, mit denen wir zusammen arbeiten, ist der Einsatz der Gestaltgesetze zum Besten der Kunden selbstverständlich. Diesen Agenturen stellen Ihnen die Kunst der Gestaltung im vollen Umfang zur Verfügung und optimieren somit Ihr Marketing.