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)

Focused at work. Side view of young busy employees working on computers while sitting at desk in modern open space
Produkt

novaCapta Design Editor für App Design

Ihre Apps. Ihr Design. Erstellen Sie mit dem novaCapta Design Editor benutzerdefinierte Vorlagen, um Ihre Canvas Apps schnell und einfach an Ihren Markenauftritt anzupassen.

Verlegung von Majcoat durch Dachdecker
Referenz

SIGA: Mehrsprachige Zusammenarbeit per Microsoft 365

Mithilfe der novaCapta wurde der Aufbau einer modernen, nachhaltigen Zusammenarbeits- und Kommunikationsplattform für den weltweiten Einsatz in mehreren Sprachen gestaltet.

Blue sky and clouds
Blog 09.12.15

Vorgesetzte in Nintex per LDAP-Abfrage ermitteln

"Meine Sekretärin erledigt das für mich." Es ist der Klassiker der Workflows: Die Genehmigung. Neu im novaCapta Blog ► Mit Nintex Vorgesetzte per LDAP-Abfrage ermitteln ✓ So funktioniert's ✓ Jetzt nachlesen!

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 24.08.15

CQRS in ASP.Net MVC mit Entity Framework

Die Entwicklung von Anwendungen in einem mehrschichtigen Aufbau hat sich etabliert. Design Patterns wie MVC schaffen Lösungen.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 23.02.15

Warum ist Inline-CSS und JavaScript-Code so schlecht?

Warum der Einsatz von Inline-CSS bzw. JavaScript-Code schlecht ist, da Dinge wie Caching, DRY-Prinzip, Wartbarkeit und Media-Queries gänzlich außer Acht gelassen werden.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 17.12.14

Multi Factor Authentication (Azure und SharePoint)

Microsoft führt mit der Multi Faktor Authentisierung (MFA) eine weitere und kostenlose Authentifizierungsebene zu in Office 365 hinzu.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 15.10.19

GraphQL – Die Alternative zu REST

GraphQL ist eine Abfragesprache für APIs zur Ausführung von Abfragen mit Hilfe eines für die Daten definierten Typensystems. In dieser kleinen Blog-Serie schauen wir uns einfache Queries und Mutations an.

Schreibtisch
Blog 15.10.19

Anhänge nach Datentyp in PowerApps einschränken

Eine immer wieder auftauchende Anfrage bei digitalen Prozessen ist die Beschränkbarkeit von Anhangsdokumenten. Glücklicherweise lässt sich diese Funktionalität relativ unkompliziert mit wenigen kleinen Formeln in PowerApps nachbauen.

News der novaCapta
Blog 26.10.15

Gefilterte Ansicht über Unterschiede in mehreren Spalten

Tipps & Tricks zu SharePoint ► Begrenzte Filtermöglichkeiten in Ansichten umgehen & gefilterte Ansicht über Unterschiede in mehreren Spalten

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 12.06.18

Spaltenformatierung in SharePoint: Column formatting vs. JS

Eine Gegenüberstellung der Spaltenformatierung von JSLink zu der neueren Methode Column formating in Office 365.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 01.07.20

PDF-Konverter in Power Automate

Kann ich mittels Microsoft Power Automate und einer SPFx-Anwendung ohne größere Probleme einen PDF-Konverter erstellen? Die einfache Antwort: Ja. Und auch die Ausführliche gibt’s hier.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 08.07.15

Change Management in IT-Projekten

Viele IT-Projekte scheitern am Zusammenspiel verschiedener Faktoren, wie unklare Ziele, ungenügende Ressourcen, schlechte Kommunikation und fehlende User-Akzeptanz.

Programmer Woman Coding On Computer
Blog 30.09.21

Ohne Programmierkenntnisse zum Entwickler werden

Bei der Digitalisierung von Unternehmen erfordern passgenaue Business-Apps und automatisierte Workflows bislang ­erheblichen Entwicklungsaufwand. Microsoft setzt dem die Power Platform entgegen, mit der sich auch ohne Programmierkenntnisse gleichwertige Geschäftsanwendungen erstellen lassen sollen.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 21.01.16

Fünf Tipps für eine verbesserte Software-Adoption

Die Generation Y stellt im Arbeitsumfeld neue Anforderungen an Unternehmens-Software und -Systeme. Unsere fünf Tipps, um die Adoption einer Software erhöhen.

Eine Angestellte lädt auf ihrem Handy die Microsoft Teams App für digitale Zusammenarbeit herunter.
Blog 27.05.21

Microsoft Teams: mehr als Videotelefonie und Chat

Corona treibt viele Arbeitnehmer ins Homeoffice – und zu Microsoft Teams. Eine Umfrage der novaCapta zeigt, dass Teams mehr Potenzial bietet als viele wissen. Wie Teams den Alltag wirklich erleichtert, verrät Andy Frei, Mitglied der Geschäftsleitung novaCapta CH, im Interview.

Blue sky and clouds
Blog 12.08.14

Farben zur Optimierung des SharePoint-Kalender

Auch in SharePoint kann man Kategorien für Teamkalender-Einträge farblich abheben und damit die Lesbarkeit erhöhen. Wir zeigen Ihnen, wie das geht.

Close up of female hands while typing on laptop
Blog 31.12.14

Qualitätsmanagement - Dokumentation verwalten mit SharePoint

Qualitätsmanagement-Dokumente zu verwalten wird schnell unübersichtlich und kompliziert. Wir haben eine Lösung entwickelt, die das Dokumentenmanagement deutlich vereinfacht.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 05.08.20

Umfragen in Teams mit Microsoft Forms

Umfragen bieten die Möglichkeit, bei der Planung von beispielsweise Events schnell zu einem Termin/Ergebnis zu kommen oder aber auch Feedback zu vergangenen Ereignissen einzuholen. Mit Microsoft Forms lassen sich Umfragen schnell und einfach in Teams erstellen bzw. integrieren.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 28.05.18

Struktureller Aufbau eines Angular Modules

Dieser Blogbeitrag beschäftigt sich mit dem strukturellen Aufbau eines Angular Modules und der Kommunikation der einzelnen Komponenten.