10 Design Hacks - Teil 1

1. Auswahl eingrenzen

Eine große Auswahl an Schriften und Farben zu haben mag zwar schön klingen, allerdings bringt dieser Reichtum an Möglichkeiten die meisten Projekte schnell zum Stagnieren. Um ein Design schnell und strukturiert auf die Beine zu stellen, ist es sinnvoll sich nicht bei jeder kleinen Entscheidung den Kopf zu zerbrechen, sondern im Voraus Systeme zu entwerfen. Anstatt beispielsweise jedes Mal zum Farbwähler zu greifen, wählen Sie aus einem Satz von 8 bis 10 Farbabstufungen, die Sie im Voraus festgelegt haben. 

In Figma erstellen Sie sich einfach Ihre gewünschten Farben in Form von Feldern in Ihrem Figma-Dokument auf einem eigenen Frame. Wählen Sie dann jeweils die Farben aus, klicken rechts in der Leiste auf die vier Punkte neben “Fill” und anschließend auf das “+”. Geben Sie der Farbe nur noch einen Namen und speichern Sie sie als neuen “Color Style” ab.

Wenn Sie das mit jeder Farbe getan haben, sind diese jeder Zeit als “Color Style” abrufbar. Wenn Sie im Nachhinein Farben ändern wollen, können die Styles einfach editiert werden und die Änderungen passen sich automatisch an alle Objekte des Dokuments mit diesem Style an.

Das Gleiche gilt für Schriften in Form von Text Styles. Legen Sie vorab verschiedene Schriftarten, -größen und -schnitte als Headline, Subline, Bodytext etc. fest. 

Wenn Sie dann den Text auswählen, auf die vier Punkte neben “Text” klicken und anschließend wieder auf das “+”, können Sie auch hier die Styles benennen und abspeichern.

2. Hervorhebung durch Abschwächung: Weniger macht mehr

Oftmals geraten Designer in die Situation, dass das Hauptelement eines Interface nicht genügend hervorsticht und es nichts gibt, was man dem Element hinzufügen kann, damit es den benötigten Stellenwert erhält. In diesem Fall kann es sinnvoll sein, nicht das Hauptelement gestalterisch zu verstärken, sondern herumliegende Nebenelemente abzuschwächen. Wenn Sie zum Beispiel versuchen, ein aktives Navigationselement durch eine andere Farbe auffallen zu lassen, sticht es im Vergleich zu den inaktiven Elementen nicht wirklich hervor:

Stattdessen sollten Sie versuchen die Elemente, die mit ihm konkurrieren, weniger stark hervorzuheben, indem Sie beispielsweise die Deckkraft der inaktiven Elemente reduzieren:

Dieses Prinzip ist auch auf großflächigere Elemente übertragbar. Wenn eine Seitenleiste zu sehr mit dem Hauptteil einer Seite konkurriert, nehmen Sie ihm einfach den Hintergrund weg.

3. Labels sind zweitrangig

Auch wenn Labels in Anbetracht der Zugänglichkeit und Benutzerfreundlichkeit im ersten Moment sinnvoll erscheinen, stiften sie meist mehr Unruhe als Ordnung. Was viele nicht bedenken ist, dass die meisten Informationen wunderbar ohne Kennzeichnungen auskommen. Jeder weiß beispielsweise, wie eine Telefonnummer oder E-Mail-Adresse aussieht, auch ohne Beschriftung vorab. Und wenn das Format nicht ausreicht, ist es oft der Kontext. Wenn Sie in einem Mitarbeiterverzeichnis den Ausdruck “Kundenbetreuung” unter dem Namen eines Mitarbeiters sehen, brauchen Sie kein Label, um zu erkennen, dass es sich um die Abteilung handelt, in der die Person arbeitet.

Selbst, wenn mal eine Information ohne Label nicht auskommt, ist es immer noch besser sie im Kontext zu verpacken, anstatt des Hinzufügens einer Beschriftung. Schreiben Sie zum Beispiel nicht “Auf Lager: 12”, sondern lieber so etwas wie “12 auf Lager”. 

Wenn Sie in der Lage sind Beschriftungen und Werte in einer einzigen Einheit zu kombinieren, ist es viel einfacher jedem Datenelement eine sinnvolle Form zu geben, ohne auf Klarheit zu verzichten.

4. Reduzieren statt Hinzufügen

Dass ein Design genügend Weißraum braucht, mag wohl jedem Designer bekannt sein. Allerdings passiert es oft genug, dass auch wenn Abstände vergrößert werden, immer noch zu wenig Platz zum Atmen vorhanden ist.

Ein einfacher Trick, um dieses Problem zu lösen, ist nicht das Hinzufügen, sondern das Entfernen von Weißraum. Dieser Ansatz besteht darin, einem Entwurf zunächst viel zu viel Platz zu geben und diesen anschließend Stück für Stück zu entfernen, bis man mit dem Ergebnis zufrieden ist. In der Praxis hat diese Methode schon einige UI’s gerettet!

Doch auch dichte User Interfaces haben ihre Daseinsberechtigung. Angenommen, Sie müssen wie bei einem Dashboard, viele Informationen auf einmal sichtbar machen. In diesem Fall kann es sich lohnen, die Informationen dichter beieinander und komprimierter zu gestalten, sodass alles auf einen Bildschirm passt und sich das Design belebter anfühlt. Behalten Sie dabei allerdings immer im Hinterkopf, dass dies eine bewusste Entscheidung ist. 

5. Vermeidung mehrdeutiger Abstände

Rahmen oder Hintergrundfarben sind ideal, um Gruppen von Elementen voneinander zu unterscheiden. Was aber, wenn es diese sichtbaren Trennungen nicht gibt? Angenommen, Sie entwerfen ein Formular mit übereinander angeordneten Beschriftungen und Eingaben. Wenn der Abstand unter der Beschriftung mit dem Abstand unter der Eingabe übereinstimmt, wirken die Elemente in der Formulargruppe nicht eindeutig "verbunden".

Im besten Fall muss der Benutzer sich mehr Mühe geben das Interface zu interpretieren, und im schlimmsten Fall bedeutet es, dass er versehentlich die falschen Daten in das Feld einträgt. Die Lösung besteht darin, den Abstand zwischen den einzelnen Elementgruppen zu vergrößern, damit klar ist welche Beschriftung zu welcher Eingabe gehört.

Dies waren die ersten fünf unserer zehn Design Hacks. Die restlichen Design Hacks folgen nächste Woche im zweiten Teil.