UI-Design

Die beiden Begriffe werden gern vermischt. Eine Faustregel hilft: UX-Design legt fest, welche Schritte jemand geht und in welcher Reihenfolge. UI-Design bestimmt, wie jeder dieser Schritte aussieht und sich anfühlt. Am Beispiel eines Kontaktformulars:

• UX: Braucht es fünf Felder, oder reichen drei? Bekommt es eine eigene Seite?
• UI: Wie groß sind die Felder, wie sieht ein Fehlerhinweis aus, welche Farbe hat der Absenden-Button?

Am Ende der UX-Arbeit stehen meist Wireframes und Abläufe. Am Ende der UI-Arbeit stehen gestaltete Screens und ein Satz an Bausteinen, aus denen die Website gebaut wird.

UI-Designer denken in wiederkehrenden Elementen. Ein Button wird einmal entworfen, mit allen Zuständen: normal, beim Überfahren mit der Maus, gedrückt, deaktiviert. Danach sieht er überall gleich aus. Gesammelt ergeben diese Bausteine ein Designsystem oder einen Styleguide.

Dazu gehören auch Zustände, die selten auftauchen, etwa eine leere Trefferliste oder eine Fehlermeldung im Formular. Werden sie im Entwurf vergessen, improvisiert später jemand beim Programmieren, und genau an diesen Stellen sieht die Website plötzlich anders aus.

Großen Raum nimmt die Typografie ein, weil Websites zum größten Teil aus Text bestehen. Schriftgröße und Zeilenabstand bestimmen, wie gut sich eine Seite lesen lässt. Mehr dazu im Ratgeber Typografie im Webdesign.

• Einheitlichkeit: Gleiche Dinge sehen gleich aus. Wer einmal verstanden hat, wie ein Link aussieht, erkennt ihn überall.
• Klare Gewichtung: Die wichtigste Aktion einer Seite fällt sofort auf, Nebensachen treten zurück.
• Kontrast und Größe: Texte sind auch für Menschen mit schwächeren Augen lesbar, Schaltflächen auf dem Handy groß genug für den Daumen.
• Rückmeldung: Nach einem Klick passiert sichtbar etwas, zum Beispiel ein Ladehinweis oder eine Bestätigung.

Die Gestaltung folgt der Marke. Farben und Schriften kommen aus dem Corporate Design, das UI-Design übersetzt sie in Regeln für den Bildschirm. Bei Websites kommt hinzu, dass jede Oberfläche auf sehr unterschiedlichen Bildschirmen funktionieren muss. Ein Menü, das am Rechner als Leiste oben steht, klappt auf dem Handy meist hinter ein Symbol.

Bei uns gehört UI-Design zur Leistung Screendesign und UI/UX-Design. Umgesetzt werden die gestalteten Screens anschließend in WordPress mit Elementor oder WPBakery, bei Individualentwicklung mit Symfony.

Verwandte Begriffe: UX-Design · Wireframe · Styleguide · Favicon