UX/UI-Design entscheidet, wie ein digitales Produkt funktioniert (die User Experience) und wie es auf dem Bildschirm aussieht und reagiert (das User Interface). Für Entscheider zählen nicht die Definitionen, sondern der Ertrag: Gut gemachtes UX/UI-Design steigert die Conversion, senkt die Zahl der Supportanfragen und macht die Entwicklung günstiger, weil weniger Screens zweimal gebaut werden. Nach unserer Erfahrung sind die Kosten in den letzten zwei Jahren gesunken, seit KI die wiederkehrende Produktion übernimmt (Komponentenvarianten, erste Entwürfe, Bildaufbereitung, Tests), während Research, Konzept, Art Direction und die handwerkliche Qualität am Ende Arbeit von Menschen bleiben, und dorthin gehört das Geld. Dieser Leitfaden erklärt die beiden Hälften in einfachen Worten: welches Research sich bezahlt macht, wie User Journeys, Wireframes und Interfaces zusammenspielen, warum ein Designsystem wichtig ist, womit Sie bei Kosten und Zeit rechnen sollten und wie Sie einen Designpartner auswählen.
Was ist der Unterschied zwischen UX und UI?
User-Experience-Design befasst sich mit Struktur und Verhalten: was Menschen erreichen wollen, welche Schritte sie gehen, was sie an jedem Schritt wissen müssen und wo sie hängen bleiben. Seine Ergebnisse sind Research-Erkenntnisse, User Journeys, Sitemaps und Wireframes.
Interface-Design befasst sich mit der Darstellung: Typografie, Farbe, Abstände, Komponenten, Zustände und Bewegung. Seine Ergebnisse sind fertige Screens, Prototypen und eine Komponentenbibliothek.
Beides lässt sich nicht mit Erfolg getrennt einkaufen. Ein schönes Interface auf einer verwirrenden Journey verliert trotzdem Menschen; eine logische Journey mit einem nachlässigen Interface wirkt unseriös. Produktdesign ist der Begriff, der oft verwendet wird, wenn eine Gruppe beides in der Hand hat, zusammen mit den wirtschaftlichen Zielen des Produkts.
Welche Nutzerforschung zahlt sich aus?
Research ist der Teil eines Projekts, der am häufigsten gestrichen wird, und der Teil, dessen Fehlen später am meisten kostet. Das Ziel ist kein dicker Bericht. Es geht darum, Annahmen durch Belege zu ersetzen, bevor jemand etwas baut, und das in Tagen, nicht in Monaten.
Was Sie zuerst entscheiden sollten
- Wer die wichtigsten Nutzer sind und welche Aufgaben für sie und für das Unternehmen am meisten zählen.
- Was Sie bereits wissen: Analytics, Support-Tickets, Verkaufsgespräche, frühere Studien, die Gründe, die Kunden für ihren Abschied nennen.
- Die riskanteste Annahme im Projekt und der günstigste Weg, sie zu prüfen.
Eine Handvoll kurzer Interviews mit echten Nutzern, gelesen neben Analytics und Supportfragen, deckt meist die meisten wesentlichen Probleme einer Journey auf, und das reicht, um mit Zuversicht zu gestalten.
Was später kommen kann
Umfangreiche Umfragen, lange Persona-Dokumente und monatelange Discovery-Phasen rechnen sich bei einem kleinen oder mittleren Projekt selten. Beginnen Sie mit gezieltem Research und testen Sie dann während der Gestaltung. Ist das Produkt neu, behandeln Sie auch das erste Release als Research.
Bei Odduel übernimmt KI das Sortieren: Sie transkribiert und gruppiert Interviewnotizen, fasst Tickets zusammen und erkennt Muster im Feedback. Designer verbringen ihre Zeit damit, mit Nutzern zu sprechen und Entscheidungen zu treffen, und die Erkenntnisse werden von den Personen geprüft, die dabei waren. Dieselbe Arbeitsteilung zieht sich durch unsere Projekte in der KI-Entwicklung: Die Maschine übernimmt die Menge, Menschen das Urteil.
User Journeys, Wireframes, Interfaces
Design geht in drei Schritten vom Abstrakten zum Konkreten. Jeder beantwortet eine Frage, die Sie bei der Abnahme stellen können sollten.
| Schritt | Die Frage, die er beantwortet | Was Sie prüfen |
|---|---|---|
| User Journey | Welche Schritte geht eine Person, um eine Aufgabe zu erledigen? | Ein Diagramm des Wegs, mit den Ausstiegen |
| Wireframe | Was steht auf jedem Screen, und in welcher Reihenfolge? | Graue Layouts mit echten Inhalten |
| Interface | Wie sieht es aus, wie fühlt es sich an, wie reagiert es? | Fertige Screens und ein klickbarer Prototyp |
- User Journeys. Eine Journey bildet die Schritte zu einer Aufgabe ab: registrieren, ein Angebot anfragen, bezahlen. Sie legt überflüssige Schritte offen, bevor ein einziger Screen gezeichnet ist, und hier wird die Conversion meist gewonnen oder verloren.
- Wireframes. Grobe Layouts, die Struktur und Priorität festlegen. Sie lassen sich günstig ändern und halten die Diskussion bei Inhalt und Reihenfolge statt bei Farben.
- Interfaces. Das vollständige visuelle Design auf Basis der Marke. Jeder Zustand (leer, Laden, Fehler, Erfolg) wird gestaltet, statt ihn der Entwicklung zum Raten zu überlassen. Ist die Marke noch nicht gefestigt, lesen Sie zuerst unseren Branding-Leitfaden.
Ein Beispiel. Nothing To Eat, eine Sandwich-Marke in Amsterdam, brauchte eine Website, die verkauft, bevor sie erklärt. Die Journey wurde auf eine Entscheidung reduziert: Wer bestellen will, kommt direkt zur Speisekarte, auf derselben Seite, und alles andere steht neben diesem Weg statt davor. Eine Seite, eine Aufgabe, jeder Screen-Zustand gezeichnet, bevor die Umsetzung begann.
Was ist ein Designsystem, und brauchen Sie eines?
Ein Designsystem ist eine gemeinsame Bibliothek aus Komponenten, Regeln und Tokens (Farben, Schriftgrößen, Abstände), die Designer und Entwickler gemeinsam nutzen. Es hält ein Produkt konsistent, während es wächst und neue Leute dazukommen.
Was es für das Unternehmen leistet:
- Tempo. Neue Seiten und Funktionen werden aus getesteten Teilen zusammengesetzt.
- Konsistenz. Buttons, Formulare und Meldungen verhalten sich überall gleich.
- Qualität. Barrierefreiheit und Performance sind einmal in jede Komponente eingebaut.
- Geringere Kosten für Änderungen. Eine Markenaktualisierung wird an einer Stelle umgesetzt.
Ein Designsystem muss nicht umfangreich sein, um nützlich zu sein. Zugleich hat KI hier unsere Arbeit am sichtbarsten verändert: Die Varianten einer Komponente, der Code dahinter und ihre Tests entstehen in Stunden und werden dann geprüft. Deshalb starten unsere Projekte in Webdesign und Webentwicklung und App-Entwicklung mit einem System statt mit einem leeren Bildschirm. Unser Leitfaden zur Website-Entwicklung verfolgt das System bis in die Umsetzung.
Testing
Tests verbinden Design und Wirklichkeit. Nützliche Methoden, von der günstigsten bis zur aufwendigsten:
- Fünf-Sekunden-Tests auf einer zentralen Seite: Woran erinnern sich die Menschen?
- Tests mit klickbaren Prototypen mit wenigen Nutzern pro Runde, bevor es Code gibt.
- Prüfungen der Barrierefreiheit nach den Kriterien der WCAG 2.2: Kontrast, Tastaturbedienung, Beschriftungen, Fokus.
- Analytics nach dem Launch: Wo verlassen Menschen eine Journey?
- A/B-Tests für Seiten mit viel Traffic, auf denen kleine Unterschiede zählen.
Testen Sie früh mit groben Prototypen: Ein Wireframe ist in Minuten geändert, eine programmierte Funktion in Tagen. Automatisierte Prüfungen, auch KI-gestützte, finden einen nützlichen Teil der Probleme über viele Screens auf einmal; alles finden sie nicht, deshalb ergänzen wir manuelle Durchgänge mit Tastatur und Screenreader, bevor etwas live geht.
Warum Barrierefreiheit ab dem ersten Wireframe mitdenken?
Barrierefreiheit funktioniert als Gestaltungsprinzip ab dem ersten Wireframe weit besser denn als letzte Kontrolle, und sie ist für viele Produkte inzwischen eine gesetzliche Anforderung: Der European Accessibility Act gilt seit dem 28. Juni 2025 für eine breite Palette digitaler Produkte und Dienstleistungen, die in der EU verkauft werden.
Barrierefrei gestalten bedeutet:
- Kontraste, die die WCAG-Verhältnisse für Text und Bedienelemente erfüllen.
- Schriftgrößen, die auf kleinen Bildschirmen und beim Zoomen lesbar bleiben.
- Tastaturwege durch jede Journey, mit sichtbarem Fokuszustand.
- Beschriftungen und Hinweise, die sich nicht allein auf Farbe oder Platzhaltertext verlassen.
- Bewegung, die sich für Menschen reduzieren lässt, die das brauchen.
- Fehler, die in Worten erklärt werden, direkt am Feld, mit einem Weg zur Korrektur.
Nichts davon schränkt gutes Design ein. Meist macht es das Design besser, denn Klarheit für Menschen mit Behinderungen ist Klarheit für alle, die ein Smartphone im Sonnenlicht nutzen. Verankern Sie diese Regeln im Designsystem, und jede neue Komponente erbt sie; die Kosten der Konformität sinken mit jeder Seite.
Was UX/UI-Design kostet und wie lange es dauert
Wir veröffentlichen keine Preisliste, weil sich zwei Produkte mit derselben Zahl von Screens im Aufwand um ein Mehrfaches unterscheiden können. Den Betrag bestimmen die Zahl der unterschiedlichen Journeys und Screen-Typen, die Tiefe des Research, ob ein Designsystem enthalten ist und wie viele Personen jede Runde freigeben.
Was KI verändert hat, ist die Produktion: Komponentenvarianten, die Zustände jedes Screens, die Bildaufbereitung und der erste Durchgang der Spezifikationen brauchen heute Stunden statt Tage. Nach unserer Erfahrung dauert ein fokussiertes Projekt, etwa die Neugestaltung einer zentralen Journey, ab dem freigegebenen Briefing einige Wochen; das Design eines ganzen Produkts oder einer ganzen Website läuft in Phasen über ein paar Monate, wobei Research und Tests den Teil des Zeitplans einnehmen, den früher die Produktion brauchte. Unser Leitfaden dazu, was eine Website kostet, beschreibt das Gesamtbudget. Wenn Sie ein bestehendes Produkt ersetzen statt ein neues zu beginnen, wird ein Website-Relaunch anders geplant, weil Inhalte, Daten und Suchpositionen bereits bestehen.
Wie arbeiten Sie mit einem Designpartner zusammen?
Was ein guter Designpartner mitbringt und was Sie von ihm erwarten dürfen:
- Einen klaren Prozess vom Research bis zur Übergabe, mit festgelegten Abnahmepunkten.
- Design für die Wirklichkeit des Browsers: responsive Layouts, echte Inhalte, jeder Zustand abgedeckt.
- Enge Zusammenarbeit mit den Entwicklern, damit sich das Gestaltete bauen lässt und das Gebaute dem Design entspricht. Bei Odduel sind die Entwickler ab dem ersten Wireframe im Projekt, sodass wir für unsere eigene Umsetzung gestalten oder an Ihre übergeben können.
- Dokumentation: Komponenten, Regeln und Entscheidungen, festgehalten für alle, die später dazukommen.
- Ein Blick für die aktuelle Praxis, ohne Moden hinterherzulaufen.
Fragen Sie, wie die Agentur KI einsetzt. Eine glaubwürdige Antwort umfasst die Auswertung von Research, schnelle Varianten zum Erkunden und automatisierte Prüfungen. Jede finale Entscheidung bleibt dabei beim Designteam. Unsere eigene Antwort steht in KI in Webdesign und Webentwicklung. Lassen Sie sich das Research hinter einem früheren Projekt zeigen, dazu Produkte, die live sind, nicht nur Portfolio-Bilder. Unser Beitrag wie Sie eine Digitalagentur auswählen listet weitere Fragen, die sich lohnen. Wie die ersten Wochen aussehen, beschreibt der Beitrag zum Agentur-Onboarding.
Häufige Fragen zur Agenturwahl
Wie viel Budget sollte ich für UX/UI-Design einplanen?
Das hängt von der Zahl der Journeys und Screen-Typen, der Tiefe des Research und davon ab, ob ein Designsystem enthalten ist. Design ist ein überschaubarer Anteil der Gesamtkosten eines digitalen Projekts und spart weit mehr an vermiedener Nacharbeit. Bitten Sie um ein Angebot, das nach Leistungen aufgeschlüsselt ist, damit sich die Beträge zweier Agenturen vergleichen lassen.
Wie lange dauert UX/UI-Design mit Odduel?
Ein fokussiertes Projekt, etwa die Neugestaltung einer zentralen Journey, dauert ab dem freigegebenen Briefing einige Wochen. Das Design eines ganzen Produkts oder einer ganzen Website dauert länger und läuft in Phasen. KI verkürzt die Auswertung des Research und die Produktion, sodass mehr Zeit für Tests und Feinschliff bleibt.
Was ist der Unterschied zwischen UX- und UI-Design?
UX-Design legt fest, was ein Produkt tut und in welcher Reihenfolge: die Journeys, die Struktur, die Inhalte auf jedem Screen. UI-Design legt fest, wie es aussieht und reagiert: Typografie, Farbe, Komponenten und Bewegung. Ein gutes Produkt braucht beides, in einem gemeinsamen Auftrag.
Brauche ich ein Designsystem für ein kleines Produkt?
Meist ja, in kleiner Form. Ein paar Dutzend dokumentierte Komponenten und ein Satz Tokens halten ein Produkt konsistent, während es wächst, und machen jede neue Funktion günstiger. Es entsteht als Teil des ersten Designs, nicht als eigenes Projekt.
Wie verändert KI Kosten und Zeitplan?
Sie beschleunigt die Auswertung des Research, das frühe Erkunden, die Produktion von Komponenten und die Qualitätsprüfungen, was Projekte verkürzt und die Kosten senkt. Das Urteil darüber, was Nutzer brauchen und wie sich das Produkt anfühlen soll, bleibt bei den Designern, und jedes Ergebnis wird von einer Person geprüft, bevor es Sie erreicht.
Wenn ein Produkt oder eine Website nicht so läuft, wie sie sollte, liegt die Ursache meist in einer Handvoll Journeys. Unsere Leistung UX/UI-Design beginnt genau dort: Research, wo es sich auszahlt, Prototypen, die Sie testen können, Interfaces für Ihre Marke und ein System, auf dem Ihre Entwickler aufbauen können, aus Barcelona und São Paulo. Oder erzählen Sie uns von Ihrem Projekt.
