Das Wichtigste in Kürze
- UI-Design übersetzt Nutzeraufgaben und Markenregeln in verständliche Bedienelemente; UX-Research, Implementierung und Tests entscheiden mit darüber, ob das Interface tatsächlich funktioniert.
- Seit dem 28. Juni 2025 müssen betroffene digitale Angebote die Anforderungen des Barrierefreiheitsstärkungsgesetzes berücksichtigen. Barrierefreiheit gehört deshalb bereits ins Briefing und nicht erst in die technische Abnahme.
- Bewerten Sie ein neues UI anhand von Aufgabenerfolg, Fehlern und Conversion statt anhand persönlicher Vorlieben. Kleine qualitative Tests mit repräsentativen Nutzenden liefern früh konkrete Hinweise.
Was sich beim UI-Design seit 2024 verändert hat
UI-Design endet nicht mehr beim statischen Bildschirm. Figma stellte am 7. Mai 2025 mit Figma Make eine Prompt-to-App-Funktion für interaktive, codebasierte Prototypen vor; am 24. Juli 2025 verließen Make und weitere KI-Funktionen die Betaphase. Solche Werkzeuge beschleunigen Varianten, ersetzen aber weder Nutzerforschung noch die Prüfung realer Inhalte und Randfälle.
Parallel ist Barrierefreiheit vom Qualitätsmerkmal zum verbindlichen Projektkriterium geworden. Das BFSG gilt seit dem 28. Juni 2025 für die erfassten Produkte und Dienstleistungen; Ausnahmen und der konkrete Anwendungsbereich sollten für jedes Angebot geprüft werden. Die WCAG 2.2, seit dem 5. Oktober 2023 W3C-Empfehlung, ergänzt gegenüber WCAG 2.1 neun Erfolgskriterien, darunter sichtbare Tastaturfokusse und ausreichend große Zielbereiche.
Auch der Werkzeugmarkt hat sich verschoben: Adobe XD befindet sich laut Adobe weiterhin im Wartungsmodus, während Penpot als Open-Source- und Self-Hosting-Alternative sowie KI-gestützte Prototyping-Angebote an Bedeutung gewonnen haben. Ideen zu visuellen Mustern finden Sie ergänzend in den UI-Design-Trends; Trends sollten jedoch nie über Verständlichkeit und Zugänglichkeit gestellt werden.
Aktuelle UI-Design-Tools im Vergleich
| Werkzeug | Key Features | Bewertung für neue Projekte | Besonders passend für |
|---|---|---|---|
| Figma Design und Make | Gemeinsame Dateien, Designsysteme, interaktive Prototypen und Prompt-to-App | Sehr stark für fachübergreifende Zusammenarbeit; KI-Ergebnisse müssen fachlich, technisch und rechtlich geprüft werden | Verteilte Produkt-, Design- und Entwicklungsteams |
| Penpot | Open Source, Self-Hosting, SVG, Design Tokens sowie Layouts mit CSS Grid und Flex | Stark bei Datensouveränität und enger Design-Code-Verzahnung | Organisationen mit Self-Hosting- oder Open-Source-Anforderungen |
| Sketch | Mac-App für Interface und Designsystem, Web-App für Kommentare und Entwickler-Inspektion, iOS-Vorschau | Solide für etablierte Mac-Workflows; die eigentliche Design-App bleibt an macOS gebunden | Mac-zentrierte Designteams mit eingespielten Bibliotheken |
| Adobe XD | Interface-Design, Prototypen und Übergabe vorhandener XD-Dateien | Für neue Vorhaben nur eingeschränkt empfehlenswert, da Adobe keine neuen Funktionen entwickelt | Pflege bestehender XD-Projekte und geplante Migrationen |
Die Bewertung bezieht sich auf den dokumentierten Produktstand im Oktober 2026. Prüfen Sie vor einer Entscheidung zusätzlich Datenschutz, Rollenrechte, Exportierbarkeit, Beschaffungsvorgaben und die Kompatibilität mit Ihrem bestehenden Designsystem. Penpot beschreibt seine aktuellen Funktionen auf der Produktseite, Sketch seinen plattformübergreifenden Ablauf in der Dokumentation und Adobe den Wartungsmodus von XD.
So setzen Sie UI-Design im Unternehmen messbar ein
- Geschäftsziel und Nutzeraufgabe verbinden: Formulieren Sie nicht „Die Seite soll moderner wirken“, sondern beispielsweise „Mehr qualifizierte Besucher sollen das Angebotsformular vollständig absenden“. Legen Sie Ausgangswert, Zielmetrik und Messzeitraum vor dem Redesign fest.
- Reale Abläufe untersuchen: Analysieren Sie Suchanfragen, Supportfälle, Abbruchstellen und Aufzeichnungen nur im rechtlich zulässigen Rahmen. Der Unterschied zwischen Oberfläche und Nutzungserlebnis wird im Leitfaden zum UX-Design ausführlicher erklärt.
- Früh prototypisieren: Testen Sie Navigation, Formularlogik und Rückmeldungen, bevor das Team Details pixelgenau ausarbeitet. ScienceSoft beschreibt dazu einen Ablauf aus Recherche, mehreren Runden realer Usability-Tests, Stakeholder-Abstimmung und frühen UI-Prototypen.
- Barrierefreiheit im Design prüfen: Dokumentieren Sie Kontraste, Fokuszustände, Fehlermeldungen, Tastaturabläufe, Vergrößerung und Alternativen für nicht-textliche Inhalte direkt in Komponenten und Akzeptanzkriterien.
- Nach Veröffentlichung kontrolliert messen: Vergleichen Sie Aufgabenerfolg, Fehlerquote und Conversion mit dem Ausgangswert. Für belastbare Variantenvergleiche benötigen Sie ein sauberes Experimentdesign; praktische Grundlagen finden Sie im Beitrag über A/B-Testing.
Der 2025 veröffentlichte Überblick von ORBIS ordnet nutzerzentriertes Design, UI, UX, Implementierung und Testing ausdrücklich als zusammenhängende Themen ein. Für Unternehmen ist das die entscheidende organisatorische Konsequenz: Marketing, Produkt, Entwicklung, Kundenservice und Compliance benötigen gemeinsame Abnahmekriterien.
Kennzahlen für Planung und Abnahme
- 28. Juni 2025: Seit diesem Datum ist das BFSG für die davon erfassten Produkte und Dienstleistungen verbindlich; die Bundesfachstelle nennt für bestimmte Dienstleistungen von Kleinstunternehmen eine Ausnahme.
- 9 zusätzliche Erfolgskriterien: Diese kamen mit WCAG 2.2 gegenüber WCAG 2.1 hinzu. Dazu zählen unter anderem „Focus Not Obscured“ und „Target Size (Minimum)“.
- 5 Testpersonen: Nielsen Norman Group empfiehlt dies als häufig sinnvollen Startpunkt für eine qualitative Usability-Runde, sofern die Personen eine vergleichbare Nutzergruppe vertreten.
- Rund 85 %: In dem zugrunde liegenden Modell können fünf Personen unter bestimmten Annahmen etwa 85 % der Usability-Probleme entdecken. Die Quelle warnt ausdrücklich davor, diesen Wert auf quantitative Studien oder heterogene Zielgruppen zu übertragen.
Die beiden letztgenannten Werte sind Planungsrichtwerte, keine Garantie. Bei mehreren deutlich unterschiedlichen Nutzergruppen sollten Sie jede Gruppe gesondert betrachten; für statistisch belastbare Messwerte sind größere Stichproben erforderlich. Details erläutert die Nielsen Norman Group.
Stimme aus der Praxis
„Mit Werkzeugen wie Figma Make können wir einen Prototyp schnell erlebbar machen. Was früher sechs Wochen vom Gedanken bis zur sichtbaren Idee dauerte, gelingt nun innerhalb weniger Stunden.“
Vishal Kapoor, SVP of Product bei Affirm, sinngemäß aus dem Englischen nach Figma
Die Zeitersparnis betrifft laut Aussage die frühe Exploration, nicht automatisch ein produktionsreifes und validiertes Interface. Reale Inhalte, Fehlerfälle, Zugänglichkeit, Datenschutz und technische Machbarkeit bleiben eigene Prüfschritte.
Mini-Rechner: Welchen Wert könnte eine UI-Hürde blockieren?
Der Rechner bildet ein Szenario ab: Er multipliziert monatliche Besuche mit der Differenz zwischen aktueller und angestrebter Abschlussrate sowie dem durchschnittlichen Wert eines Abschlusses. Das Ergebnis ist keine Prognose, sondern eine Priorisierungshilfe für Research und Tests.
Wann externe Unterstützung sinnvoll ist
Externe Unterstützung kann sich lohnen, wenn intern Research-Kompetenz fehlt, mehrere Plattformen vereinheitlicht werden müssen oder Barrierefreiheit und Designsystem gleichzeitig in den Prozess einfließen sollen. Klären Sie vor der Vergabe, welche Research-Ergebnisse, editierbaren Dateien, Komponenten, Zustände, Testprotokolle und Nutzungsrechte übergeben werden; der Beitrag zur Auswahl einer Webdesign-Agentur hilft bei der Vorbereitung.
Passende UI-Design-Partner für Ihr Projekt finden
Häufige Fragen zu UI-Design
Was ist der Unterschied zwischen UI- und UX-Design?
UI-Design gestaltet die sicht- und bedienbaren Elemente eines digitalen Produkts, etwa Navigation, Typografie, Formulare und Zustände. UX-Design betrachtet den gesamten Nutzungsvorgang einschließlich Recherche, Informationsarchitektur, Abläufen und Tests. Beide Disziplinen überschneiden sich, sind aber nicht austauschbar.
Welche Ergebnisse sollte ein UI-Design-Projekt liefern?
Typische Ergebnisse sind priorisierte Nutzerabläufe, Wireframes, getestete Prototypen, responsive Ansichten, dokumentierte Komponenten und Zustände sowie Übergabe- und Abnahmekriterien. Umfang und Dateiformate sollten vor Projektbeginn vertraglich festgelegt werden.
Wie viele Personen braucht ein Usability-Test?
Für eine frühe qualitative Runde sind fünf repräsentative Personen häufig ein sinnvoller Ausgangspunkt. Unterschiedliche Zielgruppen sollten getrennt getestet werden. Quantitative Aussagen über Conversion, Aufgabenerfolg oder Bearbeitungszeit erfordern eine passend berechnete größere Stichprobe.
Kann KI ein UI vollständig erstellen?
KI kann Varianten, Komponenten und interaktive Prototypen schneller erzeugen. Sie kennt jedoch nicht automatisch Ihre tatsächlichen Nutzerbedürfnisse, rechtlichen Anforderungen, Datenflüsse oder technischen Grenzen. Behandeln Sie generierte Ergebnisse deshalb als überprüfbaren Entwurf.
Muss jedes Unternehmen das BFSG beachten?
Nein, der Anwendungsbereich hängt unter anderem vom Produkt, der Dienstleistung und der Unternehmensgröße ab. Lassen Sie die konkrete Betroffenheit prüfen. Unabhängig davon erweitert ein barrierearmes Interface den Zugang und reduziert Bedienhürden.
UI Design, oder User Interface Design, ist komplex und betrifft fast alle Aspekte des Webdesigns. Dennoch ist es aus dem Online-Marketing nicht mehr wegzudenken und entscheidet mittlerweile über Erfolg und Misserfolg von Online-Produkten und Diensten.
In diesem Sortlist-Artikel wollen wir erklären, was man unter User Interface Design versteht und wie Sie es in Ihrem Unternehmen erfolgreich eingesetzt können.
Was ist UI Design?
User Interface Design hat die effektive Interaktion mit Online-Produkten zum Ziel. Kurzum: UI vereinfacht die Interaktion zwischen Mensch und Maschine. Dabei steht die Bedienfreundlichkeit der Benutzeroberfläche, also des User Interface, im Vordergrund.
UI ist die Antwort auf die Frage, wie Grafik- und Text-Elemente auf einer Website angeordnet sein müssen oder wie eine Website organisiert sein muss, damit sie für den User möglichst einfach und intuitiv zu bedienen ist.
UI Design ist kein modischer Grafik-Stil, mit dem Sie Ihre Website aufhübschen können. Die reibungslose Mensch-Maschine-Interaktion muss bei der Gestaltung einer neuen Website von Anfang an mitgedacht werden.
Was ist der Unterschied zwischen UI und UX Design?
User Experience Design (UX) und User Interface Design (UI) sind zwei verwandte Design-Konzepte, die oft für Verwirrung und Verwechslungen sorgen.
Worum geht es beim UI Design?
UI Design ist die benutzerorientierte grafische Gestaltung des User Interface. Designer arbeiten dabei mit teils klassischen Webdesign-Elementen wie Grafiken, Navigation, Typografie, Farben, Schaltflächen, Module, Informationscontainer und Text, die Benutzerfreundlichkeit steht aber im Mittelpunkt.
Das User Interface Design ist somit Teil des User Experience Design. UX Design ist weitgreifender als UI und beschäftigt sich mit der holistischen Erfahrung, die ein User mit einem Online-Produkt hat.
Worum geht es beim UX Design?
Die Herausforderung der User Experience (UX) besteht darin, effektive Lösungen für die Probleme und viele Anliegen der Internetnutzer zu finden. UX hilft dem User, seine Ziele leicht zu erreichen.
Denn während User Interface Design in erster Linie technische Anforderungen umsetzt, steht beim User Experience Design die Wertschätzung der Internetnutzer im Mittelpunkt. Bei der Entwicklung des User Experience Designs wird durch sogenannte Usability Tests regelmäßig Feedback von tatsächlichen Usern abgefragt, um das bestmögliche Online-Erlebnis für den Nutzer zu gestalten.
Mehr über UX Design können Sie in diesem Artikel erfahren.
Für das Erstellen von Websites ist es wichtig, zu verstehen, dass User Interface Designer eine Anfrage eines UX Designers umsetzen können, umgekehrt aber nicht. Das User Experience Design befasst sich nicht mit den operationellen Problemen des User Interface Designs.
Was muss ein UI Designer können?
Die Aufgabe des UI-Designers ist es, eine attraktive, einladende und praktische Schnittstelle zu schaffen, die leicht zu bedienen ist. Alles muss intuitiv sein. Zu diesem Zweck führt der Designexperte Kundengespräche, um deren Erwartungen, Ziele und Bedürfnisse zu verstehen.
Die Aufgaben des UI Designers
Die tägliche Arbeit des Designers basiert auf der effizienten Anordnung von Grafik- und Text-Elementen, um die Benutzeroberfläche angenehm zu gestalten und idealerweise Emotionen auszulösen.
Zu den Hauptaufgaben zählen:
- die Optimierung der Benutzeroberfläche,
- die Gestaltung einer intuitiven und flüßigen Navigation,
- die Einarbeitung des Corporate Designs in die Website und
- die Balance zwischen Grafik- und Textelementen herzustellen.
Die Arbeit am „graphical user interface“ kann nicht von der Arbeit am UX Design abgekoppelt werden. Daher muss von einem User Interface Designer:
- die User Experience-Herausforderung des Projekts verstanden und beachtet werden,
- der Austausch mit dem UX Designer gefördert werden,
- das Verhalten von Usern analysiert werden, um die mangelhaften Elemente zu optimieren und
- Mock-ups durchgeführt werden, um Entwürfe des UI Designs zu testen.
Kreative und technische Anforderungen
Ein UI Designer muss kreativ und innovativ sein und ausgezeichnete Grafikdesignfähigkeiten haben.
Er/sie sollte die Adobe Suite (Photoshop, Illustrator und Indesign) perfekt beherrschen und einige Programmiersprachen wie PHP, JavaScript, HTML 5, Visual Basic, JQuery und MySQL anwenden können.
Neben technischen Fähigkeiten und Kreativität sollte ein UI Designer auch ein begabter Teamplayer und Kommunikator sein, um Ideen erklären und auf Gegenvorschläge angemessen reagieren zu können. Zusätzlicher ist der User Interface Designer oft Schnittstelle zwischen den verschiedenen Abteilungen, wie UX Designer, Programmierer und Kunde.
In-house Grafiker vs. externe Agentur
Auch wenn größere Unternehmen oft über einen Grafikdesigner im Haus verfügen, ist die Einstellung eines Designers vor allem für kleinere Unternehmen, die nur punktuell Bedarf an einem Designer haben, eine große Herausforderung.
Hier lohnt es sich mitunter, Kontakt mit Design-Agenturen aufzunehmen und unverbindliche Angebote einzuholen. Sortlist bringt Sie gerne mit den richtigen Agenturen für Ihr Anliegen in Kontakt.
Fazit
UX und UI Design ergänzen sich bei der Gestaltung einer Website oder Anwendung. Obwohl diese beiden Disziplinen nicht voneinander getrennt werden können, ist es wichtig, sie nicht zu verwechseln.
Hinter dem UI Design steckt das Ziel, eine attraktive Benutzeroberfläche (User Interface) zu gestalten, die alle grafischen Aspekte einer Anwendung oder Website umfasst. Das UX Design befasst sich mit der ganzheitlichen Erfahrung eines Nutzers mit einer Website.
Die Gestaltung des User Interface ist also nur eine Komponente des UX Designs. Es geht darum, das Surfen so intuitiv wie möglich zu gestalten, indem ein funktionelles Grafikdesign verwendet wird, das optimal auf den User zugeschnitten ist.
