Lerne die Grundlagen für UI/Webdesign
(Teil 1.)

UI Design Grundlagen. Was für ein Wort. Das klingt irgendwie nach Schulunterricht und Schulunterricht mochten die meisten doch nie wirklich. Deswegen versuche ich das hier so juicy wie möglich zu gestalten und alles mit Beispielen zu verdeutlichen.

Und jetzt genug des blablas, los geht’s.

1. Ein Grid um sie alle zu knechten

Ein Grid (auf deutsch Raster) ist zur Ausrichtung deiner UI Elemente gedacht. Du unterteilst einen Bildschirm dabei in mehrere Spalten. Anhand dieser kannst du die Breite, die Ausrichtung als auch die Abstände deiner UI Elemente zueinander festlegen.

So sieht das dann aus:

Geh kreativ mit dem Grid um

Es muss nicht immer alles nebeneinander ausgerichtet sein. Du kannst dein Grid auch kreativer nutzen. Es müssen nicht immer nur Bilder und Texte nebeinander stehen.

Sei verspielt. Lass Elemente überschneiden, überlappen, verzerren usw. ABER richte immer alles am Grid aus. Somit wirst du ein cleanes und übersichtliches Design haben, das jedoch den User nicht sofort zu Tode langweilt.

Grid Tipps und Richtwerte für UI Design Anfänger:

  • Nutze Design-Software, die es dir einfach ermöglicht Grids festzulegen. Hierzu empfehle ich dir Figma (kostenlos, mein Favorit), Adobe XD (kostenlos), Sketch (nur für Mac und kostenpflichtig).
  • Benutze Grids sowohl für UI auf Mobilgeräten als auch auf Desktops.
  • Richtwert für die Anzahl der Spalten:
    • Desktop: 12 Spalten
    • Tablet: 12 Spalten
    • Smartphones: 3 Spalten
  • Richtwerte für Abstände der Spalten: Ich habe die Erfahrung gemacht, dass ein Abstand von 25 – 40px zwischen den Spalten zu guten Ergebnissen führt.
  • Richte alle Elemente strikt anhand des Grids aus. Ich garantiere dir, dass dadurch mehr Ruhe in dein Design einkehren wird.
  • Nutze den Abstand zwischen den Spalten auch für andere Abstände.
    • Beispiel: Dein Grid hat 30px Abstände zwischen den Spalten. Diese 30px kannst du ebenfalls als Abstand von Button zu Headline oder Texten nutzen. Die Augen des Users werden dies unbewusst wahrnehmen und für angenehm befinden. Wenn du jedoch das Gefühl hast, dass der Abstand zu groß oder zu klein ist, dann folge deinem Gefühl und halte dich nicht strikt an diese Regel.

2. White Space – für schnelle Ergebnisse

Vielleicht kennst du ja das Spiel “Finde Waldo”. Es geht darum, auf einem Bild voller Personen den Typen mit dem rot-weiß gestreiften Shirt, der rot-weiß gestreiften Mütze und der schwarzen Brille zu finden.

Hier das Bild:

Deine Aufgabe ist Waldo zu finden. Das wird ein bisschen dauern. Vielleicht wenige Sekunden, vielleicht einige Minuten. Fakt ist, du musst suchen.

Was Waldo ständig in den absurdesten Szenarien wie diesem Fressgelage macht, hab ich nie verstanden… Warum schaut er immer so auffällig in die Kamera? Hat der Typ was ausgefressen? Und was hat das mit UI Design zu tun?

Wenn ich dir jedoch Waldo so präsentiere, wird es nicht lange dauern bis du ihn gefunden hast:

Das ist White Space (Weißraum). Du läßt dem Auge Freiraum, um die benötigten Informationen schnell zu finden. Das ist vielleicht nicht ganz im Sinne des Spiels, aber wunderbar übertragbar auf UI Design.

White Space in UI Design

User haben keine Lust auf “Waldo”-Suche zu gehen. Es geht darum, schnell an Informationen zu kommen. Das funktioniert nur, wenn die angebotenen Infos einfach zu finden sind.

Stell dir jetzt eine Website oder App vor, die sehr viele Informationen beinhaltet. Diese Informationen sind alle eng aneinander geklatscht.

Das Auge nimmt nun sehr viele Informationen auf einmal wahr. Es findet keinen Ruhepunkt. Die Headline mit dem Button fällt kaum auf zwischen diesem riesigen Waldo Wirr Warr. Sie hat zu wenig White Space. Dadurch wird es schwierig die angebotenen Informationen zu filtern.

White Space to the rescue

Als aller erstes geben wir der Navigation und der Headline, inklusive dem Bild etwas mehr “White Space” – bzw. Abstand. Die Headline und der dazugehörige Button werden dadurch schneller wahrgenommen. Die Navigation wird stärker als eigenständiges Element registriert.

Wunderbar, die Headline und das Bild sind jetzt von viel Weißraum umgeben. Man muss nicht mehr “Finde die Headline” spielen. Die Headline ist jetzt klar und deutlich zu erkennen. Die Message gegebenenfalls einfach zu lesen.

Weitere Verbesserungen

  • Damit der Text im Button besser zu lesen ist und nicht gequetscht wirkt, geben wir auch ihm etwas mehr Luft zum atmen.
  • Dann erhöhen wir noch den Abstand von Button zu Headline. Dadurch wird der Button noch besser wahrgenommen.
  • Und der gesamte Bild-Text Block bekommt auch noch etwas mehr Aufmerksamkeit, indem wir links mehr Weißraum schaffen:

Damit die Textblöcke darunter auch wirklich als Textblöcke wahrgenommen werden, geben wir allen Elementen etwas mehr Weißraum.

Super, wir haben alles aufgeräumt und viel White Space für die einzelnen Elemente geschaffen. Dadurch können die Informationen der UI Elemente schneller gescannt und gefunden und vom Auge verarbeitet werden.

White Space Tipps für UI Design Anfänger:

  • Gib den Elementen die du hervorheben möchtest ausreichend White Space.
  • Gib Elementen lieber zu viel White Space als zu wenig.
  • UI Elemente die zueinander gehören sollten nicht zu viel White Space bzw. Abstand zueinander haben und dadurch lose im Raum schweben.
    • Beispiel – Headline + Button: Wenn der Button einen zu hohen Abstand zur Headline hat, wird er zwar stärker wahrgenommen (durch mehr White Space), aber der Context fehlt. Headline und Call To Action Buttons sollten miteinander wirken.

3. Padding und Margin – gar nicht mal so kompliziert

Egal ob du eine App-, Website- oder Software-UI gestaltest, um ein bisschen CSS Grundwissen kommst du nicht herum.

Zwei der wichtigsten Begriffe sind Padding und Margin. Für Anfänger sind diese zwei Dinge oft verwirrend, da sie sich irgendwie ähneln, aber gleichzeitig auch sehr unterschiedlich sind.

Schnell zusammengefasst kann man sagen:

  • Padding bläst Boxen nach innen auf
  • Margin erzeugt Abstand von Box zu Box

Du kannst dir all deine Elemente immer als “Boxen” vorstellen. In jeder Box sitzt Content und diese Boxen können auch ineinander verschachtelt sein. Ganz vereinfacht dargestellt, sieht das dann so aus:

Alle Elemente auf der Seite sind in einer roten Box. Manche Boxen beinhalten Text, andere Logos oder Bilder. In der Navigation siehst du eine verschachtelte Box. In der “Header-Box” ist die Logo-Box und mehrere “Navigationspunkt-Boxen”.

Okay, bleiben wir jetzt bei diesen Boxen. Ich möchte dir anhand des Buttons die beiden Begriffe Padding und Margin erklären.

Padding – Box aufblasen, Abstand nach innen erzeugen

Der Button unter der Headline, würde ohne Padding folgendermaßen aussehen:

Die Box hat einen schwarzen Hintergrund und beinhaltet Text. Wenn wir diese Box mit Padding “aufblasen” entsteht White-Space innerhalb der Box. Das sieht dann so aus:

Ich habe die Box mit 30px links sowie rechts und 20px oben sowie unten “aufgeblasen”. Dementsprechend hat die Box jetzt nach innen einen Abstand.

Padding erzeugt also Abstand bzw. White-Space nach innen.

Wenn du jetzt einen längeren Text in den Button setzt, sollte sich dein Padding nicht verändern:

Margin – Von Box zu Box Abstand erzeugen

Diesen Button setzen wir jetzt wieder unter die Headline-Box. Das würde dann folgendermaßen aussehen:

Der Button hat keinen Abstand zur Headline-Box. Wir können jetzt entweder dem Button einen Abstand (Margin) von 30px nach oben, oder der Headline einen Abstand (Margin) von 30px nach unten geben. Das Ergebnis ist immer gleich:

Es entsteht durch die Margin ein Abstand von Headline-Box zu Button-Box. Also ein Abstand nach außen.

Fassen wir nochmal zusammen:

  • Padding bläst Boxen auf und erzeugt Abstand nach innen
  • Margin erzeugt Abstand von Box zu Box, also Abstand nach außen

Du fragst dich bestimmt, wozu du dieses Wissen brauchst. Alleine bei der Kommunikation mit Developern wirst du diese Begriffe oft hören. Wenn du Design Software lernst, wirst du auch immer wieder auf die Begriffe stoßen und diese anwenden. In CSS wird dich das Thema auch immerzu verfolgen. Padding und Margin sind für UI Designer und Developer das, was Salz und Pfeffer für Köche sind, Grundzutaten und Grundwissen.

Padding und Margin Tipps sowie Infos für UI Design Anfänger:

  • Padding sowie Margin können Werte in jede Richtung haben. Du kannst einer Headline z.B. eine Margin von 30px nach links geben, dann ist diese eingerückt:
  • Denke gleich beim designen in Einheiten.
    • Wenn du z.B. einem Button Abstände gibst, dann denke gleich in Padding und Margin. Du gibst dem Button ein Padding von 20px oben/unten und 30px links/rechts, um ihn größer zu machen. Gleichzeitig hat jeder Button einen Abstand (Margin) von 30px nach oben (zur nächsten Box/Element).
  • Behalte Größenverhältnisse im Auge! Mit abnehmender Bildschirmgröße sollten Padding sowie Margin angepasst werden.
    • Wenn eine Überschrift aufgrund der Bildschirmgröße kleiner wird, solltest du auch den Abstand von Überschrift zu Button verringern. Gleichzeitig kannst du aber auch das Padding des Buttons etwas verringern. Damit sieht der Button im Verhältnis zu einer Headline nicht zu groß aus.
  • Überlege dir ein System für deine Abstände. Während du an deinem Design arbeitest, solltest du Abstände vereinheitlichen, so dass sie wiederverwendbar sind. Sei konsistent!
  • Das Padding einer Box kann mit abnehmender Bildschirmgröße ebenfalls abnehmen.