Close up shot of female hands typing on laptop

Grundlagen der Gestaltung

Das Wissen um die Phänomene wie Gesehenes wahrgenommen und bewertet wird, ist in den Gestaltgesetzen zusammengefasst. Anwendung finden die Gesetze im Design unterschiedlichster Medien. Sie bilden die Grundlage für das Design von Webseiten, Werbematerialien, Präsentationen und sie finden auch im Produktdesign Anwendung. 

Das, was wir sehen, ist mehr als nur die Summe der dargestellten Teile. Das Gehirn konstruiert Formen in eigentlich zusammenhanglose Linien. Zum Beispiel sehen wir ein Gesicht, wo nur zwei Punkte und Linien sind 
Das Wissen um die Phänomene wie Gesehenes wahrgenommen und bewertet wird, ist in den Gestaltgesetzen zusammengefasst. Anwendung finden die Gesetze im Design unterschiedlichster Medien. Sie bilden die Grundlage für das Design von Webseiten, Werbematerialien, Präsentationen und sie finden auch im Produktdesign Anwendung. Zum Beispiel im Aufbau einer Tastatur oder dem Bedienfeld einer Waschmaschine.

“Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible.”

Don Norman
Close up of female hands while typing on laptop

Gestaltgesetze

Es gibt, je nach Autor, zwischen sieben und 114 Gestaltgesetze. Ich habe neun herausgesucht, die für die Gestaltung von User Interfaces grundlegend sind.

  • Figur und Grund
  • Symmetrie
  • Einfachheit
  • Nähe
  • Kontinuität
  • Ähnlichkeit
  • Prägnanz
  • Geschlossenheit
  • Verbundenheit

Figur und Grund

Das menschliche Auge trennt wahrgenommene Bilder in Figur und Hintergrund. Beobachten wir ein Flugzeug beim Starten, so nehmen wir das Flugzeug als Figur und den Himmel, die Landschaft und Landebahn als Hintergrund wahr.
Kleinere und geschlossene Bereiche werden als Figur wahrgenommen. Dieser Effekt ist besonders stark bei symmetrischen und konvexen Formen. Die Figur zieht die Aufmerksamkeit des Betrachters auf sich und wird leichter im Gedächtnis behalten. Der Grund erstreckt sich hinter der Figur als ungeformtes Material.
Wenn Figur und Grund vom Gehirn nicht klar getrennt werden können, kommt es zu Kippbildern – siehe Bild unten.
Für ein gelungenes Design ist es daher wichtig, eine deutliche Trennung zwischen Figur und Grund zu berücksichtigen, sodass funktionale Einheiten vom Hintergrund unterschieden werden können.

Gesetz der Symmetrie

Das Gehirn versucht stets Figuren zu erkennen und nimmt deshalb symmetrisch angeordnete Elemente stärker wahr als zufällig platzierte. Symmetrisch Angeordnetes tritt in den Vordergrund, zufällig Platziertes erscheint im Hintergrund. Symmetrisches wirkt aufgeräumt und bleibt besser im Gedächtnis.
Dieser Effekt kann bewusst eingesetzt werden, um die Aufmerksamkeit zu führen und den Fokus auf das Wesentliche zu lenken. Symmetrisches wirkt harmonisch, ausgeglichen und aufgeräumt. Unausgewogene, nicht symmetrische Screendesigns stören dagegen die Betrachtung und können vom eigentlichen Ziel der Seite ablenken.

Gesetz der Einfachheit

Bei einer Figur, die auf mehrere Arten interpretiert werden kann, nimmt das Auge stets die einfachste Form wahr. Im Design ist daher darauf zu achten, dass es nicht zu Fehlinterpretationen kommt. Man kennt dies von schlechten Logos, in denen unbeabsichtigte Formen zu erkennen sind.
Im Bild oben sehen wir links zwei übereinander liegende Quadrate, kein Achteck oder aneinandergereihte Dreiecke. Dies funktioniert genauso bei flächigen Objekten. Rechts interpretiert das Gehirn ebenfalls die zwei einfachsten Formen, aus denen die Gestalt gebildet ist.

Gesetz der Nähe

Nah beieinander liegende Objekte werden vom Auge gruppiert und als Einheit wahrgenommen. Dies kann genutzt werden, um thematische Zusammenhänge darzustellen. Generell sollten zusammengehörige Objekte nah beieinander positioniert werden. Im Webdesign findet man die Anwendung dieses Gesetzes häufig in der Positionierung von Kacheln.

Gesetz der Kontinuität

… auch Gesetz der guten Fortsetzung genannt.
Linien geben eine Richtung vor, denen die Augen folgen. Im Bild oben links sehen wir zwei sich kreuzende Linien und nicht etwa zwei im rechten Winkel abknickende Linien.
Anwendung findet dieses Gesetz bei der Anordnung von Text. Eine Liste von Texten ist leichter lesbar, wenn alle Texte an einer Linie ausgerichtet sind.

Gesetz der Ähnlichkeit

Ähnliches wird als zusammengehörig wahrgenommen. Die Ähnlichkeit kann durch Farbe, Form, Größe, Textur oder Bewegungsrichtung erzeugt werden.
Im Umkehrschluss dieses Gesetztes werden in einer Menge von Objekten jene zuerst wahrgenommen, die sich von den anderen unterscheiden. Dies kann im Design zur Hervorhebung wichtiger Informationen dienen. Im Bild oben rechts wirken die Quadrate zusammengehörig und der Kreis steht im Fokus der Aufmerksamkeit.

Gesetz der Geschlossenheit

Das menschliche Gehirn vervollständigt fehlende Teile einer Figur automatisch. Im Bild oben sehen wir ein Quadrat, zwei Dreiecke und einen Würfel, obwohl keines der Objekte tatsächlich abgebildet ist. Die Abbildung der Ecken genügt und wir nehmen sogar einen dreidimensionalen Körper wie den Würfel wahr. Voraussetzung hierfür ist die Vertrautheit mit der angedeuteten Form – wer nie einen Panda gesehen hat, wird im WWF-Logo eine andere Form oder nur schwarze Flecken sehen.
Dieses Gestaltungsgesetz kann zur Reduzierung eines Designs und als Stilmittel genutzt werden.

Gesetz der Verbundenheit

Miteinander verbundene Objekte werden als Einheit wahrgenommen. Dieses Gesetz wirkt stärker als das Gesetz der Nähe oder Ähnlichkeit. Umriss- oder Verbindungslinien sind daher ein effektives Mittel zur Gruppierung von Objekten.

Anwendung der Gestaltgesetze

Die Gestaltgesetze bilden die Grundlage einer guten Gestaltung. Bei Designs, die mehrheitlich als schlecht und unprofessionell empfunden werden, wurden diese Gesetze mit Sicherheit nicht angewendet. Sie helfen aufzuräumen, klare Linien und Strukturen zu schaffen und den Blick auf das Wesentliche zu lenken. Das Kennen und Anwenden der Gestaltgesetze macht natürlich noch niemanden zu einem Designer, sie helfen aber das Aussehen von Präsentation, Dokumenten und UIs zu verbessern und ein professionelleres Erscheinungsbild zu erzielen.

Blue sky and clouds
Blog 31.01.18

Grundlagen der Datenmodellierung

Fachliches Modell mit ER-Diagrammen (auch ERM – Entity Relationship Model)

Business people having a meeting in a boardroom
Workshop

Microsoft Power BI Grundlagen Schulung

Mit Power BI bleibt die Datenanalyse nicht nur Business Intelligence Expert:innen vorbehalten, sondern kann unmittelbar in den Fachbereichen erfolgen. In unserer eintägigen Schulung lernen Sie wie!

IT Modernization
Service

IT Modernization

Wir helfen Ihnen dabei, Ihre IT ins digitale Zeitalter und in Einklang mit Ihrer Business-Strategie zu bringen.

Social 16.02.21

FAST-elovend 2021 – unsere virtuelle Karnevalsfeier

Kölle Alaf! Auch dieses Jahr feierten die Jecken der TIMETOACT GROUP Fastelovend - aber nur FAST so wie immer. Denn nach unserer (digitalen) Weihnachtsfeier ließen wir uns auch Karneval nicht nehmen und feierten Karneval einfach virtuell.

Social 04.03.21

Fit im Home Office

Um unsere KollgInnen im Home Office bestmöglich zu unterstützen, haben wir im Rahmen unseres betrieblichen Gesundheitsmanagement ein Online Seminar zum Thema "Fit im Home Office" angeboten, um ihnen ihren Alltag ein Stück weit zu erleichtern.

News

Studie IT-Modernisierung 2021

Gemeinsam mit der ARS und weiteren Partnern gab die IDG jüngst die Studie IT-Modernisierung 2021 heraus. Für 72% der Unternehmen hat die Modernisierung ihrer IT höchste Priorität.

Das Logo der CLOUDPILOTS.
Unternehmen

CLOUDPILOTS: Google Cloud, Workspace & AI Consulting

CLOUDPILOTS unterstützt Unternehmen bei Google Cloud, Digital Workplace und AI – von Strategie und Migration bis Betrieb.

Technologie 29.06.20

IBM

Wir sind IBM Platinum Business Partner und haben damit seit Jahren den höchsten Partnerstatus bei der IBM.

Event 25.03.22

AFCEA Fachausstellung 2022

Am 11. und 12. Mai 2022 findet die AFCEA Fachausstellung live im World Congress Center in Bonn statt.

May 11
Führungskräfte der novaCapta in einer Besprechung
Unternehmen

novaCapta GmbH

Auf Basis von Microsoft SharePoint, Office 365, Azure, BizTalk und PowerBI realisiert novaCapta GmbH Intranets, Kollaborationsportale, Business Intelligence-Lösungen, Individualanwendungen u.v.m.

Google Logo
Technologie 29.06.20

Google

Wenn wir an Google denken, denken wir an die Google Suche und Google Ads.

Unternehmen 16.09.20

synaigy - Digital Experience Service-Unternehmen

synaigy – die Digitalagentur für Ihr strategisches Projekt im digitalen Kundendialog bietet passende Lösungen in allen relevanten Bereichen des Digital Customer Engagement an.

News

ARS Event: KI meets Finance & Insurance

Am 20.11.2019 versammeln sich CxOs, Innovation Manager und Risk Manager zum ARS Event: KI meets Finance & Insurance 2019 in Nürnberg, um über die Zukunft der Finanzbranche zu diskutieren.

Digitale Hand mit schützendem Regenschirm – Symbol für Sicherheit in Finanz- und Versicherungsdienstleistungen.
Branche 24.09.20

Insurance

IT‑Lösungen für moderne Versicherungsunternehmen

Training
Service

Academy

Haben Sie ein spezielles Schulungsthema? Sprechen Sie uns an. Wir suchen und vermitteln Ihnen das passende Schulungsangebot.

Logo RedHat
Technologie 02.07.20

RedHat

Wir sind RedHat Advanced Partner. Mit RedHat als dem Marktführer in Open-Source-IT-Lösungen unterstützen wir unsere Kunden ihre Cloud Journey aktiv zu gestalten und umzusetzen.

Software & Application
Service

Software & Application

Agilität, Application Modernization, Fullstack Development und Requirement Engineering sind wichtige Aspekte der Business Application Development.

Standort

Dortmund

Finden Sie u.a. die synaigy GmbH in Dortmund: Am Rombergpark 31a, 44225 Dortmund, +49 221 97343 0, Mail: info@synaigy.com

Referenz

Von Notes zu Microsoft 365

TIMETOACT GROUP führt bei der HOCHBAHN einen Wechsel des bisherigen Lotus-Notes E-Mail-Systems auf eine moderne cloudbasierte Microsoft 365 Plattform.

Logo Armacell
Referenz

Gebündelte Kompetenz für schnelle Mailmigration nach M365

TIMETOACT unterstützt gemeinsam mit novaCapta als Managed Service Partner Armacell für eine erfolgreiche Mailmigration ► Jetzt Success Story lesen

Bleiben Sie mit dem TIMETOACT GROUP Newsletter auf dem Laufenden!