UI-Design ist ein Dauerbrenner-Thema. Hinter den Trends, die nur eine kurze Halbwertszeit haben, stecken drei Prinzipien, die jedes UI-Layout übersichtlicher und schneller verständlich machen — trend- und zeitunabhängig, auf jede Art von Screen anwendbar.
#01 Linkssündige Texte
Für Fließtexte gibt es, wenn es nicht einen wirklich triftigen Grund für eine Ausnahme gibt, eine unumstrittene Empfehlung: Texte sollten linksbündig sein.
Da wir in der westlichen Welt von links nach rechts lesen, machen wir am Ende einer Zeile immer wieder einen Sprung nach links. Der linksbündige Text hat den Vorteil, dass dieser Sprung immer an der gleichen Stelle landet — an der Achse, an der der Text ausgerichtet ist. So wird die Leseleichtigkeit und auch die Lesegeschwindigkeit deutlich erhöht.
Der Blocksatz sollte in der digitalen Welt nur bei Texten mit einer langen Zeilenlänge genutzt werden. Auf Mobilgeräten entstehen sonst unregelmäßige Zwischenräume, die das Auge ins Stolpern bringen.
#02 Visuelle Achsen
Visuelle Achsen werden meist nach dem Erstellen der Wireframes und vor dem Screendesign in einer UI-Design-Software wie Adobe XD oder Figma eingerichtet. Anhand dieser Achsen werden nun die Elemente des User-Interfaces — Buttons, Text, Bilder — ausgerichtet. Dieser Schritt sorgt nicht nur dafür, dass der User die Elemente schneller und intuitiver findet, er bewirkt auch, dass die Elemente an ihrem Platz ruhen können.
#03 Die 60/30/10-Regel
Die 60/30/10-Regel besagt, dass drei verschiedene Farben vorgegeben sind, aus denen sich alle weiteren Schattierungen ableiten:
- 60 % — Basisfarbe: meist neutral (Schwarz, Weiß, Creme-Weiß, Anthrazit oder Navy-Blau)
- 30 % — Kontrastfarbe: sorgt dafür, dass sich Texte gut lesen lassen und vom Hintergrund abheben
- 10 % — Detailfarbe: kennzeichnet Calls-to-Action und wichtige Informationen
In erster Linie ist diese Regel dazu da, den Content des Interfaces zu gliedern und Farben zu reduzieren, sodass knallige Farben nur dann genutzt werden, wenn sie etwas wirklich Wichtiges kennzeichnen.