Skip to main content
libri UX design cane su divano

Warum ist visuelles Design wichtig?

Was ist visuelles Design?

Gemäß der Usability.gov-Definition ist visuelles Design die strategische Implementierung von Bildern, Farben, Schriftarten und anderen Elementen, um Design sowie Interaktion und Einbeziehung der Benutzer zu verbessern.

Visuelles Design unterscheidet sich vom Interaktionsdesign. Das Interaktionsdesign konzentriert sich auf die Funktionen, die zur Ausführung einer Aufgabe erforderlich sind. Visuelles Design bindet Benutzer ein, indem es auf die ordnungsgemäße Funktionalität aufmerksam macht und Aktivitäten auf einer Benutzeroberfläche nach Größe, Farbe und Verwendung von Leerzeichen priorisiert.

Visuelles Design ist daher viel mehr als eine Seite „schön“ zu machen. Wir können es eher als Brücke zwischen Grafikdesign und Benutzererfahrung betrachten. Kurz gesagt, das visuelle Design integriert statische Layouts und interaktive Elemente, um die Benutzerfreundlichkeit eines Produkts oder einer Dienstleistung zu erhöhen.

Grundprinzipien für ein gutes visuelles Design

Ein gutes Design hilft dabei, das Design als harmonisches Ganzes wahrzunehmen, das aus sofort identifizierbaren Elementen besteht und nicht als ein zerstreutes Chaos einzelner Teile. In dieser Hinsicht lautet die erste goldene Regel, alles zu entfernen, was nicht benötigt wird (less is more, trivial aber wahr).

Nach dem Beschneiden muss unbedingt Folgendes festgestellt werden:

– Welche Inhalte werden unsere Benutzeroberfläche belegen?

– Wie ist die hierarchische Beziehung zwischen Inhalten? (Im Zusammenhang schauen Sie sich die Präsentation Communicating with visual hierarchy von Luke Wroblewski, Google Product Director, an).

– wie man diese hierarchische Beziehung visuell unmittelbar macht

Die gute Organisation und folglich die kommunikative Effektivität einer Schnittstelle hängt von dieser vorläufigen Entwurfsphase ab.

Es gibt jedoch einige allgemeine Grundsätze, die befolgt werden müssen, um ein gutes Layout zu erstellen. Lassen Sie uns sie zusammen sehen:

Einheit: Elemente auf einer Seite, die visuell oder konzeptionell durch Nähe, ähnliche Merkmale usw. zur selben Gruppe gehören.

Einheit Beispiel visuelles Design
Was ist die Gruppe von Elementen auf diesem Bildschirm?
Quelle: Behance.net – Designer: Maia Shanina

Raum: die Leere, die die Elemente enthält und zwischen ihnen liegt. Der sogenannte negative Raum oder Leerraum ist entscheidend, um visuelles Rauschen zu reduzieren, die Lesbarkeit zu verbessern und dem Layout Raum zu geben.

white space Beispiel visuelles Design
Ein selbsterklärender weißer Raum… 😉
Quelle: Behance.net – Designer: Raja Kumar Gupta

Kontrast: er hebt einige Elemente hervor, die den Unterschied in Bezug auf Größe, Farbe, Richtung und Position im Raum betonen. Er hat einen sehr strategischen Wert, weil es das Auge dahin führt, wo es als wichtig erachtet wird.

Kontrast Beispiel visuelles Design
Das gesättigte Gelb fällt ins Auge und lädt zum Kauf ein.
Quelle: Behance.net – Designer: Lisa Logvinova

Hierarchie: sie macht den Wertunterschied zwischen Elementen des Layouts sofort sichtbar. Verwenden Sie den Kontrast durch verschiedene Größen und/oder Familien von Schriftarten, Farben und Positionen innerhalb des Layouts.

Hierarchie Beispiel visuelles Design
Was liest du zuerst? Und dann? Und danach?
Quelle: Behance.net -Designer: Timur Kozub

Balance: sie erzeugt die Wahrnehmung, dass es eine ausgewogene Verteilung der Elemente im Raum gibt (es bedeutet nicht unbedingt Symmetrie).

balance Beispiel visuelles design
Die optischen Gewichte des Sofas und der Texte sind perfekt aufeinander abgestimmt.
Quelle: Behance.net – Designer: Aksanna Kobelyan

Dominanz: sie konzentriert den Brennpunkt in einem bestimmten Element, dem alle anderen untergeordnet sind. Zu diesem Zweck kann es zu Unterschieden in Größe, Farbe, Position und Form kommen.

Dominanz Beispiel visuelles Design
Was ist das dominierende Element in diesem Bildschirm und warum?
Quelle: Behance.net – Designer: Double Vision, Keya Akter, Yasin Arafat.

Ähnlichkeit: sie verleiht einem Entwurfsprojekt Kohärenz und Kontinuität, wodurch die Struktur und Benutzerfreundlichkeit einer oder mehrerer Schnittstellen leichter verständlich werden.

Ähnlichkeit Beispiel visuelles Design
Aus diesem Grund führt eine gut gemachte App den Benutzer auf einfache und sofortige Weise zum Handeln.
Quelle: Behance.net – Designer: Sophie Kozachek

Rhythmus: der visuelle Rhythmus verwendet das Prinzip der Wiederholung grafischer und/oder struktureller Elemente nach einem präzisen Muster, um ein Gefühl der unmittelbaren Vertrautheit mit der Benutzeroberfläche wiederherzustellen.

Rhythmus Beispiel visuelles design
Versuchen Sie, jedem Elementtyp eine Nummer zuzuweisen: Wie ist der Rhythmus der Abfolge der grauen Logos? Und das der „Icon-Untertitel-Text“ -Gruppen?
Quelle: Behance.net – Designer: Ismail Hossain

Warum ist visuelles Design wichtig?

Beeinträchtigt gutes oder schlechtes visuelles Design die Benutzerfreundlichkeit und die Benutzererfahrung?

Sehr wohl.

In Don Normans Buch Emotional Design: Why we Love (or Hate) Everyday Things, berichtet Norman über eine Studie, die zeigt, wie der Grad der Ästhetik eines Systems die Wahrnehmung von Ästhetik und Benutzerfreundlichkeit nach dem Gebrauch beeinflusst, während der Grad der tatsächlichen Benutzerfreundlichkeit nicht den gleichen Effekt haben würde. Anders ausgedrückt, hat visuelles Design ebenso viel Einfluss auf das Gesamterlebnis wie die tatsächliche Benutzerfreundlichkeit. Wenn Sie sich darum kümmern, kann es das Kundenerlebnis Ihres Produkts oder Ihrer Dienstleistung erheblich verbessern. Der kategorische Imperativ lautet: verstehen Sie, wann, wie, wo und unter welchen Bedingungen ein potenzieller Kunde das Produkt verwendet, und tun Sie alles Mögliche, um die Aufgabe zu vereinfachen. Und schließlich testen Sie und vornehmen Sie notwendige Anpassungen.

Sich in die Lage des anderen zu versetzen, ist eine Übung von unschätzbarem Wert, selbst auf professioneller Ebene. Und auf lange Sicht zahlt es sich aus.

© 2022 Peritus srl
P.I.:IT02708230285