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.

novaCapta
Blog
Blue sky and clouds
Blog

Grundlagen der Datenmodellierung

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

novaCapta
Leistung
Diverse business people having a meeting with their colleague in an office
Leistung

Microsoft 365 Backup mit der novaCapta

Was passiert, wenn Ihre Daten in OneDrive, SharePoint oder Exchange beschädigt, gelöscht oder von Hackern verschlüsselt werden? Wie können Sie sicherstellen, dass Sie Ihre Daten schnell und einfach wiederherstellen können? Die Antwort ist das Microsoft 365 Backup!

novaCapta
Referenz
Firmenzentrale von Duravit
Referenz

Duravit: Von HCL Notes in die Microsoft Cloud

Für Duravit war der Wechsel in die Microsoft Cloud ein zentrales Thema, nachdem bereits Pandemie bedingt Microsoft Teams eingeführt wurde, um das Arbeiten von zu Hause für die vielen Mitarbeitenden zu ermöglichen.

novaCapta
Blog
Young business people in office
Blog

Ohne Digital Workplace keine digitale Transformation

Der Digital Workplace steht für neue Technologien, moderne Arbeitsweisen und soll bei alltäglichen Aufgaben entlasten. Was aber zeichnet einen Digital Workplace aus und was ist notwendig, um die digitale Transformation zu meistern?

novaCapta
Blog
Portraitbild von Gerardo Immordino
Blog

Working @ novaCapta: Gerardos Insights

Unser Kollege Gerardo Immordino ist seit Kurzem neuer Geschäftsführer der novaCapta Schweiz AG. Im Rahmen unserer Serie "Working @ novaCapta" stellen wir euch Gerardo einmal genauer vor.

novaCapta
Workshop
Ein Team arbeitet über einen Monitor gemeinsam an einem Dokument.
Workshop

Workshop: Active Directory Health Check (Domain Services)

Wir ermitteln mit Ihnen ein aktuelles Bild Ihrer lokalen Active Directory Domain Services sowie deren Gesundheitszustand.

novaCapta
Leistung
Business woman talking on a phone call in a coworking office
Leistung

GPT in Kombination mit Microsoft Services

GPT-Modelle bergen für Unternehmen ein erhebliches Potenzial zur Optimierung von Abläufen. Wir beraten Sie, wie Sie (individuelle) GPT-Modelle in Ihrem Unternehmen nutzen können, um die Effizienz zu steigern, Kosten zu senken und innovative Lösungen für Ihre geschäftlichen Herausforderungen zu finden.

novaCapta
Michael SonntagBlog
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

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.

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

Spaltenformatierung in SharePoint: Column formatting vs. JS

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

novaCapta
News
Trophy and confetti on light background, top view with space for text. Victory concept
News

novaCapta erneut von Kununu als Top Company ausgezeichnet

Wir sind stolz, bekannt zu geben, dass die novaCapta zum wiederholten Mal von Kununu als Top Company ausgezeichnet wurde. Diese Anerkennung unterstreicht unser Engagement für eine herausragende Unternehmenskultur und zeigt, dass unsere Mitarbeiter:innen die Grundlage unseres Erfolgs sind.

novaCapta
Leistung
Pretty designer in casualwear sitting on staircase with laptop on her knees
Leistung

AI-Agents: KI-gesteuerte Prozesse im Unternehmen nutzen

Bei der novaCapta sind wir darauf spezialisiert, maßgeschneiderte KI-Anwendungen zu entwickeln, die exakt auf die individuellen Anforderungen und Bedürfnisse Ihres Unternehmens zugeschnitten sind und beraten Sie gerne zu möglichen Use Cases sowie zur Konzeption und Implementierung Ihres individuellen KI-Agents.

novaCapta
Blog
Detailaufnahme eines Fingers, dessen Fingerabdruck zur Identifizierung am Laptop genutzt wird. Daben sieht man ein Sicherheitsschloss.
Blog

NIS2 kommt: So bereiten Sie sich optimal vor

NIS2 kommt. Wie bereiten Unternehmen sich optimal vor? In unserem Blogbeitrag inkl. Video geben unsere Experten konkrete Tipps - und zeigen, welche Vorteile es hat, die Maßnahmen umzusetzen!

novaCapta
Referenz
Goldbären von Haribo
Referenz

Haribo: Zeitgemäße Kommunikation über SharePoint-Intranet

HARIBO führt ein globales Intranet auf Basis von Microsoft SharePoint ein. Die neue Lösung ermöglicht verbessertes Informationsmanagement, einen schnelleren Informationsfluss und vieles mehr!

novaCapta
Workshop
Business people having a meeting in a boardroom
Workshop

Power BI Grundlagen-Schulung

Daten sind die Grundlage unternehmerischer Entscheidungen. Mit Microsoft Power BI bleibt die Datenanalyse nicht nur Business Intelligence Expert:innen vorbehalten, sondern kann unmittelbar in den Fachbereichen erfolgen.

novaCapta
Blog
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

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

novaCapta
Blog
Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog

Xamarin – plattformübergreifende App-Entwicklung

Xamarin ist eine übergreifende Entwicklungsplattform, die die Welten zusammenführt und die bislang erforderliche Mehrarbeit weitgehend überflüssig macht.

novaCapta
Produkt
Ein Gang mit deckenhohen Regalen zu beiden Seiten, in denen ungeordnet Bücher gestapelt sind.
Produkt

Microsoft 365 Enterprise Wiki für Wissensmanagement

Microsoft 365 eröffnet vielzählige Möglichkeiten, um Kommunikation, Kollaboration und Wissensmanagement im Unternehmen zu stärken. Die einfache Integration der drei Aspekte ermöglicht eine flexible und für die Nutzer*innen transparente Informationsplattform, ohne dass Informationen und Wissen verloren geht. Wir ermöglichen Ihnen mit unserem Wiki-Modul die einfache und unkomplizierte Zusammenführung komplexerer Strukturen auf der Microsoft 365-Plattform.

novaCapta
Blog
Schreibtisch
Blog

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.

novaCapta
Blog
Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog

Corporate News – Das zentrale Medium interner Kommunikation

Um die Akzeptanz des unternehmenseigenen Intranets zu steigern, sind Corporate News ein erster Schritt, um Neuigkeiten, Strategie und Strukturen gleichmäßig zu kommunizieren.