Adieu Design Fauxpas! 6 UI Design Grundlagen die Du kennen musst.

Inhalt

Jeder von uns erkennt eine schlechte Webseite, wenn wir sie sehen.

Doch kaum einer kann wirklich sagen, was genau das Design unelegant macht.

User Interface Design (UI Design) ist und bleibt subjektiv. Oftmals sind es sogar die out-of-the-box Designs, die für ein Alleinstellungsmerkmal sorgen und eine Webseite einzigartig machen. In diesem Beitrag soll es allerdings keinesfalls um kreative Superlative gehen. Vielmehr wollen wir mit Dir bei den Basics anfangen und Dir ausgewählte Design Grundlagen vorstellen, mit denen auch Du im Handumdrehen Dein Portfolio optimieren kannst.


Farbe und Kontrast

Worte sind nicht die einzige Möglichkeit zu kommunizieren. Visuelle Elemente, wie Farbe und Kontrast, beeinflussen die Bedeutung von Bildern oder auch die Deiner Webseite erheblich. Daher solltest Du versuchen, die Sprache der Farben sprechen zu lernen. Aus der Psychologie ist Dir sicher die Wirkung von Farben bekannt; rot steht für Bedrohung oder Energie; grün steht für Natur oder Harmonie; blau für Ruhe oder Vertrauen etc.

Doch im UI Design ist es fast noch wichtiger herauszufinden, wie man welche Farben miteinander kombiniert. Hier ist der Kontrast einer der wichtigsten Faktoren, denn das wohl fundamentalste Ziel des User Interface Designs ist es, den Benutzer intuitiv durch ein unbekanntes Terrain zu führen. Die erste und wichtigste Frage ist also: Wie schaffen wie es, das Auge des Betrachters dahin zu schicken, wo wir es haben möchten? Durch farbliche Akzente und Kontraste können wir die Aufmerksamkeit genau auf diese Punkte legen.

Bereits bei der Erstellung einer Farbpalette für Dein Design, kannst Du Wert auf Kontraste legen. Nutze allerdings keine stark gesättigten Farben. Durch hohe Kontraste erhöhst Du nicht nur die Usability, sondern unterstützt auch Farbenblinde, die geringe Helligkeitsunterschiede nur schwer unterscheiden können. Letzteres ist auch in Hinblick auf die Nutzung mobiler Endgeräte essenziell.

Adieu Design Fauxpas! 6 UI Design Grundlagen die Du kennen musst.

Als zusätzliche Unterstützung, kannst Du Dich bei der Erstellung Deines Interfaces an der 60-30-10 Regel orientieren. Diese besagt, dass 60% Deines Designs durch eine Primärfarbe, 30% durch eine Sekundärfarbe und 10% durch eine Signalfarbe (z.B. Call-to-action Buttons) geprägt sein sollte, um ein harmonisches Bild zu erzeugen.

Merke:

  • Erstelle eine Farbpalette für Dein Design (So einfach wie möglich, so viel wie nötig).
  • Orientiere Dich an der 60-30-10 Regel.
  • Nutze Deine Signalfarbe nur sporadisch (Wer am lautesten schreit, schreit am besten)

White Space

Dieser Aspekt ist sehr oft die Antwort auf die Frage nach dem „je ne sais quoi“. Wenn wir wirklich nicht wissen, warum ein Design unrund ist, dann kann die richtige Platzierung der Elemente auf einem Screen wahre Wunder bewirken.

Der sogenannte White Space ist grundsätzlich nur eine Bezeichnung des Abstands zwischen und in Deinen Designelementen/Schriftzügen und muss keinesfalls wirklich weiß sein. Er kann im Grunde jede Farbe, jedes Muster, jede Struktur oder auch jedes Hintergrundbild sein.

Oftmals besteht unter Webseitenbetreibern die Annahme, dass White Space, wenn zu groß, nur vergeudeter Freiraum ist, der eigentlich mit weiteren Informationen gefüllt werden sollte. Allerdings ist dieser Freiraum aus Design Perspektive einer der wertvollsten Werkzeuge, um das Design in Balance zu bringen und elegant wirken zu lassen. Zusätzlich gibt es dem Benutzer, der möglicherweise das erste Mal auf Deiner Plattform ist, die Chance, Inhalte besser zu „verdauen“.

Sieh Dir einmal dieses Beispiel an:

Adieu Design Fauxpas! 6 UI Design Grundlagen die Du kennen musst.

So ziemlich alles was an diesem Beispiel falsch ist, hat mit Platzierung und White Space zutun. Ändern wir nun mit ein paar Handgriffen die Relationen zwischen den einzelnen Elementen und achten dabei auf Konsistenz.

Adieu Design Fauxpas! 6 UI Design Grundlagen die Du kennen musst.

Man sieht direkt, dass das Anmeldeformular in der Gesamtheit stimmiger wirkt. Und das ganz allein dadurch, dass wir einen konsistenten Abstand zum äußeren Rahmen hergestellt und den einzelnen Elementen nun ihren eigenen Raum verschafft haben.

Merke:

  • Lass Dein Design atmen!
  • Verdopple Deinen Weißraum und halte eine mathematische Konsistenz ein.
  • Hab keine Angst vor Abstand zwischen Zeilen, Elementen und Elementgruppen.

Visuelle Hierarchie

Im UI-Design gilt: Größe fordert Aufmerksamkeit. Neben Farben, Kontrasten, und der richtigen Platzierung Deiner Designelemente ist es elementar, dem User auch durch Größe zu vermitteln, welche Informationen für ihn/sie am wichtigsten sind, oder sein sollen. Doch man signalisiert dadurch nicht nur Relevanz, sondern auch Struktur. Vor allem in Umgebungen mit viel Text/Inhalt, ist es unabdingbar durch Größenverhältnisse zu ordnen. Kommen wir einen Moment zurück zu unserem Anmeldeformular Beispiel.

Adieu Design Fauxpas! 6 UI Design Grundlagen die Du kennen musst.

Ohne Differenzierung der Größe nach, ist es dem User nicht direkt vorgegeben, wo sein/ihr Auge zuerst hinwandern soll. Versuche durch verschiedene Schriftgrößen oder auch Stile (Fett/kursiv) die Aufmerksamkeit auf bestimmte Inhalte zu richten. Auch Buttons oder Bilder können dadurch mehr in den Vorder- oder Hintergrund gebracht werden.

Adieu Design Fauxpas! 6 UI Design Grundlagen die Du kennen musst.

Merke:

  • Durch unterschiedliche Größen Deiner Elemente kannst Du dem Nutzer signalisieren, welche Inhalte besonders wichtig oder eher unwichtig sind.
  • Zusätzlich gibst Du Deinen Inhalten damit eine Struktur.

Komplexität VS Minimalismus

Dem wachsenden Trend nach Minimalismus und cleanem Design kann im Jahr 2021 wohl niemand mehr aus dem Weg gehen. Viele streben dem „effortless Look“ nach, auch im User Interface Design. Und das kommt nicht von ungefähr.

Wer sich mit Design auseinandersetzt, stößt zwangsläufig auf das Hick’sche Gesetz. Dieses wurde durch den Psychologen William Hick und seinen Forschungspartner Ray Hyman geprägt. Es bestätigt im Kern die These, dass Anwender nur so lang maximale Auswahl haben möchten, bis sie es tatsächlich haben. Übertragen auf das User Interface Design bedeutet das, auf nicht absolut notwendige Elemente unbedingt zu verzichten. Alles was lediglich „nice to have“ ist, überfordert den Benutzer nur unnötig und verschlechtert in Folge das individuelle Erlebnis.

Diese Seite ist ein Beispiel für gutes UI Design

Doch Achtung: Zu wenig ist genauso schlecht wie zu viel. Auch wenn wir den Anwender nicht überfordern wollen, ist es wichtig die notwendige Komplexität beizubehalten. Schnell verliert man im UI-Design die Outsider-Perspektive. Das bedeutet, man sieht gewisse Elemente als absolut selbsterklärend und intuitiv an, vor allem wenn es um Inhalte geht. Versuche also wichtige Informationen oder Menüpunkte klar darzustellen. Manchmal ist es auch hilfreich, wenn eine Dritte unabhängige Person einen Blick auf Dein Design wirft.

Merke:

  • Überfordere die User nicht durch unnötige Animationen/Menüpunkte
  • Behalte notwendige Komplexität
  • Konsultiere unabhängige Dritte als Testpersonen für Dein Interface

Typographie

Ein unumgängliches Thema im UI Design stellt auch die Wahl der Typographie dar. Hier ist den individuellen Wünschen in der Regel freier Lauf gelassen. Achte aber auch hier wieder darauf, dass die Schriftart und Schriftgröße ein Mittel zur Signalisierung von Strukturen oder Hierarchien ist.

Neben der Wahl der Schriftarten (Serifen/serifenfrei) können auch weitere Aspekte für die Gestaltung der Typographie berücksichtigt werden. Zum Beispiel eignet es sich oft sehr gut, den Zeilenabstand oder auch die Laufweite (Stichwort White Space) zu erhöhen, um die Leserfreundlichkeit bei Texten oder Artikeln zu erhöhen.

Adieu Design Fauxpas! 6 UI Design Grundlagen die Du kennen musst.

Merke:

  • Nutze gern kreative Schriftarten, achte aber bei Texten auf gute Lesbarkeit
  • Definiere Global Fonts für Überschriften/Subtitles/Body
  • Erhöhe White Spacing und Readability durch Laufweite und Zeilenabstand

 

Konsistenz

Dieser Aspekt sollte die Grundlage aller aufgeführten Design Prinzipien sein. Sorge dafür, dass der Nutzer ein Gefühl von Kontrolle und Vertrautheit hat, indem Du gewisse Standards auf Deiner Seite wahrst. Gewisse Elemente oder auch der generelle Aufbau Deiner Webseite sollten einheitlich sein. Die Schriftarten und -größen, Farben aber auch der allgemeine Stil, die Platzierung Deiner Elemente und der Rahmen Deiner Webseite/Deines Projektes sollten strukturiert sein. Ansonsten kann es schnell dazu kommen, dass Besucher Deiner Webseite verwirrt oder frustriert werden, im schlimmsten Fall Deine Seite direkt verlassen. Eine eingehaltene Konsistenz führt dazu, dass sowohl Du als auch Dein Produkt/Dienstleistung glaubwürdig bleibt und der Besucher in seinem positiven Eindruck bestätigt wird. Selbst wenn man plant, außergewöhnliche „out-of-the-box“ Interfaces zu designen, sollte man diesen Aspekt immer im Hinterkopf behalten, schließlich ist der Mensch ein Gewohnheitstier.

Merke:

  • Vereinheitliche grundsätzliche Elemente Deines Interfaces (Schriftarten/-größen, Farben, Strukturen, Platzierungen etc.) um dem Nutzer eine leichte Bedienung zu ermöglichen.

Fazit

Wenn es um User Interface Design geht, gibt es keinen one-size-fits-all Ansatz. Letzten Endes steht immer das Bauchgefühl über den eigentlichen Design Prinzipien. Das „perfekte Design“ gibt es also nicht. Die hier aufgelisteten Grundlagen sollen Dir also nur eine kleine Stütze sein, um herauszufinden, was an Deinem Entwurf vielleicht noch nicht ganz ausgeschliffen ist. Vielleicht konnten wir Dich auch einfach für ein paar Aspekte sensibilisieren, die Du vorher noch nicht beachtet hast.

Was sind Deine Design Prinzipien? Fallen Dir noch weitere Tipps ein?

Schreibe uns gern per Mail oder lass uns einen Kommentar da.

Lerne mōmentum auch in den Sozialen Medien kennen

Schreibe einen Kommentar

Diesen Beitrag teilen

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on xing
XING
Share on whatsapp
WhatsApp

Weitere Posts

8 Plug-Ins für bessere WordPress-Webseiten

WordPress ist das mit Abstand am meisten genutzte Content Management System  – sowohl in Deutschland als auch weltweit. Aus dieser Popularität hat sich eine große

Screenshot einer SEO-Auswertung

Was ist eigentlich EAT?

Wer sich hin und wieder mit dem Thema Suchmaschinenoptimierung auseinandersetzt wird früher oder später über die Begriffe EAT und YMYL stolpern. Doch was ist damit

Screenshot des WordPress CMS

Welches CMS macht für Dich Sinn?

Wie bereits in einigen Blogartikeln auf unserer Website erklärt, ist es heutzutage ein relevanter Nachteil für sein Unternehmen oder Dienstleistung keine Internetpräsenz zu besitzen. Heute