Jeder Bildschirm, den Sie verwenden, wurde von jemandem entworfen: der Startbildschirm einer Banking-App, ein Suchfeld, eine Einstellungsseite. UI-Design ist die Disziplin, die darüber entscheidet, wie diese Bildschirme angeordnet sind, wie jedes Steuerelement aussieht und wie es reagiert, wenn Sie es berühren.
Ein UI-Designer arbeitet mit wenigen Bausteinen. Layout und Abstand gruppieren zusammengehörige Dinge. Durch die visuelle Hierarchie wird die wichtigste Aktion hervorgehoben. Typografie und Farbe tragen Bedeutung und Marke. Komponenten wie Tasten, Eingaben, Karten und Menüs werden einmal entworfen und wiederverwendet, sodass sich das Produkt einheitlich anfühlt.
Jede Komponente hat auch Zustände. Eine Schaltfläche hat die Status „Standard“, „Hover“, „Gedrückt“, „Fokussiert“, „Deaktiviert“ und „Laden“ und jeder benötigt ein Design. Das Weglassen von Zuständen ist einer der häufigsten Gründe dafür, dass ein Design in einem Modell fertig aussieht, im echten Produkt jedoch kaputt wirkt.
Interaktion und Bewegung sind ebenfalls Teil der Benutzeroberfläche. Kleine Antworten, oft Mikrointeraktionen genannt, bestätigen, dass ein Tipp funktioniert hat, zeigen den Fortschritt an oder erklären, wo etwas passiert ist. Sie sollten schnell und zielstrebig sein und die Systemeinstellung für reduzierte Bewegung respektieren.
Der Großteil des UI-Designs erfolgt heute in Figma, wobei Penpot, Sketch und Lunacy gängige Alternativen sind. Für Schnittstellen, die auf reale Daten und Eingaben in der fertigen App reagieren müssen, nutzen Designer auch interaktive Tools. ExodeUI, das wir erstellen, ist eines: Es speichert Zustände, Federphysik und Ereignisse in einer offenen Datei, die in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI und Flutter ausgeführt wird.