- die Aufgaben von UI-Design benennen
- die Grenze zur Konzeption ziehen
- Hierarchie als Übersetzung des Konzepts verstehen
- Gestaltungsdiskussionen sachlich führen
Nach Struktur, Wegen und Wireframes kommt die Oberfläche. Dieses Modul behandelt sie als Handwerk mit klaren Regeln – nicht als Geschmacksfrage. Die erste und wichtigste Regel betrifft die Erwartung: Gestaltung kann viel, aber sie kann nichts reparieren, was im Konzept fehlt.
1. Wo UI-Design beginnt
Die Abgrenzung nach beiden Seiten ist nützlich. Nach unten: Farbe, Typografie und Layout im Allgemeinen sind eigene Themen, die im Kurs zu den Design-Grundlagen behandelt werden. Nach oben: Was auf der Seite steht und in welcher Reihenfolge, ist die Konzeption aus den vorangegangenen Modulen. UI-Design liegt dazwischen – es macht aus einer Anordnung eine Bedienoberfläche.
2. Was es leistet und was nicht
Das leistet UI-Design
Das leistet es nicht
Was im Konzept wichtig ist, muss auch optisch wichtig wirken. Größe, Kontrast und Abstand übersetzen die gedachte Reihenfolge in eine sichtbare – das ist die Kernaufgabe von UI-Design.
Die rechte Spalte ist der Grund, warum dieser Kurs die Konzeption vor die Oberfläche stellt. Ein Relaunch, der nur gestaltet, verändert die Zahlen selten – und dann wird der Gestaltung angelastet, was an der Struktur lag. Wer die Trennung im Projekt früh ausspricht, erspart beiden Seiten diese Enttäuschung.
3. Hierarchie ist die Kernaufgabe
Halle sanieren
Ohne den Betrieb zu unterbrechen
Wir erneuern Dach, Fassade und Tore im laufenden Betrieb – in sechs bis zehn Wochen, mit fester Preisspanne vorab.
Anfrage sendenEine Ebene Unterschied: Der Einstieg ist erkennbar, aber die Handlung geht noch unter.
Hierarchie entsteht nicht dadurch, dass etwas groß ist, sondern dadurch, dass es größer ist als anderes. Alle Mittel wirken relativ: Größe, Gewicht, Farbe, Abstand, Position. Werden zu viele Elemente hervorgehoben, hebt sich nichts mehr hervor – das ist der häufigste Fehler in Oberflächen, die „unruhig“ wirken.
4. Fünf Mittel und ihre Wirkung
| Mittel | Wirkung | Vorsicht |
|---|---|---|
| Größe | Stärkstes Mittel, wirkt sofort | Zu viele Größen erzeugen Unruhe – drei bis vier Stufen genügen |
| Gewicht (fett) | Hebt innerhalb einer Größe hervor | Ganze fette Absätze heben nichts hervor, sie erschweren nur das Lesen |
| Farbe | Lenkt den Blick und ordnet zu | Nie als einziges Unterscheidungsmerkmal – nicht alle sehen Farben gleich |
| Abstand | Gruppiert und trennt, ohne Linien zu brauchen | Wird unterschätzt; wirkt oft besser als jeder Rahmen |
| Position | Oben und links wird zuerst gelesen | Gilt nicht für alle Schriftsysteme und nicht für jedes Layout |
Kombinieren Sie sparsam. Eine Überschrift, die gleichzeitig größer, fett, farbig und eingerückt ist, benutzt vier Mittel für eine Aussage – zwei hätten gereicht, und das Ergebnis wäre ruhiger.
5. Gestaltungsdiskussionen führen
Der Satz „Mir gefällt das nicht“ lässt sich nicht widerlegen, weil er keine Behauptung enthält. Führen Sie Diskussionen deshalb über Aufgaben statt über Geschmack: Was soll jemand hier zuerst sehen? Erkennt man, was anklickbar ist? Ist die Reihenfolge im Blick dieselbe wie im Konzept? Auf diese Fragen gibt es überprüfbare Antworten – zum Beispiel, indem man jemandem die Ansicht fünf Sekunden zeigt und fragt, was ihm aufgefallen ist.
6. Häufige Fragen
Muss ich gestalten können, um UI zu beurteilen? Nein. Die Prüffragen aus Abschnitt 5 beantwortet jeder, der die Aufgabe der Seite kennt. Gestalten ist eine Fertigkeit, Beurteilen eine Methode.
Wie viel Spielraum bleibt bei einer vorhandenen Marke? Genug. Marken legen Farben und Schriften fest, selten Hierarchie, Abstände und Komponenten – und genau dort entsteht der Unterschied zwischen bedienbar und nicht bedienbar.
Und wenn eine Seite einfach altmodisch aussieht? Dann prüfen Sie zuerst die messbaren Punkte: Kontrast, Abstände, Schriftgrößen, Hierarchie. Sehr oft löst sich das Gefühl „altmodisch“ damit auf, ohne dass jemand über Geschmack streiten musste.
7. Übung zum Selbermachen
Öffnen Sie eine Seite, die Sie betreuen, und benennen Sie in einem Satz das Element, das zuerst gesehen werden soll. Zeigen Sie die Seite danach drei Personen für fünf Sekunden und fragen Sie: Was ist Ihnen zuerst aufgefallen? Stimmt die Antwort nicht mit Ihrem Satz überein, ist die Hierarchie das nächste Arbeitspaket – und Sie wissen jetzt, dass es kein Geschmacksthema ist.
- [1]Nielsen Norman Group (2025): Visual Hierarchy in UI Design.
- [2]Lidwell, W. / Holden, K. / Butler, J. (2010): Universal Principles of Design. Rockport.
- [3]Krug, S. (2014): Don't Make Me Think, Revisited. New Riders.
Stand: September 2026. Kursmaterial der Klarwerk Akademie. Methoden und Werkzeuge der Konzeption entwickeln sich weiter – die Grundprinzipien nutzerzentrierter Gestaltung bleiben.