Leitfaden · Design & UX

UI/UX-Designprozess: Von der Recherche zur Oberfläche

Die meisten Gestaltungsprojekte scheitern an der Reihenfolge, in der sie ablaufen, nicht an der Arbeit selbst. So läuft ein UI/UX-Prozess typischerweise ab — vom ersten Gespräch über Ziele bis zur Oberfläche, die ein Entwickler baut —, und warum jede Stufe vor der nächsten existiert.

Was ist der UI/UX-Designprozess?

Der UI/UX-Designprozess ist die Abfolge von Entscheidungen, die aus einem Ziel eine funktionierende Oberfläche macht. Er beginnt damit, was das Projekt erreichen soll und für wen, führt über Struktur und Verhalten und endet mit einem visuellen Design, das detailliert genug ist, um gebaut zu werden. Jede Stufe verringert die Zahl offener Fragen, damit die nächste anhand von Belegen statt Meinung entschieden werden kann.

Es ist eine Abfolge, keine starre Vorlage. Die folgenden Stufen beschreiben einen vollständigen Prozess; reale Projekte fassen sie zusammen, verkürzen oder wiederholen sie je nach Umfang, und es ist normal, zu einer früheren Stufe zurückzukehren, wenn sich später ein strukturelles Problem zeigt.

UX vs. UI: wie sie zusammenwirken

UX ist der Teil, den man nicht direkt sieht: welche Inhalte existieren, wie sie gruppiert sind, welchen Weg jemand durch sie nimmt, und was die Oberfläche bei jedem Schritt tut. UI ist der sichtbare Ausdruck davon — Typografie, Farbe, Abstand, Bildsprache und die Gestaltung jeder Komponente und jedes Zustands.

Sie werden meist als zwei Disziplinen beschrieben, sind in der Praxis aber zwei Sichtweisen auf dieselbe Entscheidung. Eine Hierarchie ist gleichzeitig ein UX-Urteil darüber, was wichtig ist, und ein UI-Urteil über Größe und Gewicht. Deshalb läuft der Prozess erst Struktur, dann Oberfläche: Ein schönes Layout über einer verwirrenden Struktur übernimmt die Verwirrung, während eine klare Struktur dem visuellen Design etwas Konkretes gibt, das es ausdrücken kann.

Eine ausführlichere Darstellung der Eigenschaften, die das fertige Ergebnis haben sollte, findet sich unter Was macht eine gute User Experience aus.

Der UI/UX-Designprozess

1. Discovery und Ziele

Die erste Stufe besteht darin, zu vereinbaren, wofür das Projekt da ist. Das heißt: das Ergebnis in klaren Worten benennen — einen Service erklären, Anfragen generieren, ein Produkt verkaufen, eine veraltete Website ersetzen — und die Rahmenbedingungen dazu identifizieren: bestehende Inhalte, technische Plattform, Markenmaterial, interne Freigaben und alles, was sich nicht ändern lässt. Ohne dies werden spätere Entscheidungen über Geschmack ausgetragen, weil kein gemeinsamer Maßstab existiert.

2. Nutzer- und Geschäftskontext

Als Nächstes geht es darum, zu verstehen, für wen die Oberfläche ist und was die Organisation von ihr braucht. Das kann von einem kurzen Gespräch mit den Personen, die mit Kunden sprechen, bis zur Auswertung bestehender Analytics, Support-Anfragen und Suchverhalten reichen. Das Ergebnis ist kein Selbstzweck-Dokument — es ist eine kurze Liste der wichtigen Zielgruppen, der Fragen, mit denen sie kommen, und der Geschäftsprioritäten, denen die Oberfläche gleichzeitig dienen muss.

3. Informationsarchitektur

Architektur ist die Struktur unter der Gestaltung: welche Inhalte existieren, wie sie gruppiert werden, was auf oberster Ebene steht, und wofür jede Seite zuständig ist. Sie wird vor dem Layout erarbeitet, weil sie Navigationslabels, URL-Struktur und die Anzahl benötigter Seiten bestimmt. Inhalt und Struktur werden gemeinsam entschieden — ein Layout für Inhalte zu gestalten, die noch nicht existieren, ist die häufigste Ursache für Nacharbeit.

4. User Flows

Ein Flow ist der Weg, den jemand geht, um eine Aufgabe zu erledigen: ankommen, verstehen, vergleichen, entscheiden, handeln. Die wichtigsten Flows zu kartieren, zeigt, wo ein Schritt fehlt, wo zwei Pfade konkurrieren, und wo eine Entscheidung verlangt wird, bevor die dafür nötige Information gegeben wurde. Flows sind an diesem Punkt günstig zu ändern und teuer, sobald sie gebaut sind.

5. Wireframes

Wireframes klären Layout, Hierarchie und Inhaltsreihenfolge, ohne dass Farbe und Bildsprache ablenken. Ihr Zweck ist es, strukturelle Fragen zu beantworten — was zuerst erscheint, was die Hauptaktion ist, was aufgeschoben werden kann —, solange sie noch schnell überarbeitet werden können. Wireframes mit echten Überschriften und echten Texten statt Platzhaltertext zu prüfen, macht das Feedback erst nützlich.

6. Interaktionsdesign

Interaktionsdesign umfasst, wie sich die Oberfläche verhält: was klickbar ist und wie es das signalisiert, was bei Hover und Fokus passiert, wie sich Navigation öffnet, wie Lade- und Leerzustände erscheinen, und wie Fehler kommuniziert werden. Bewegung gehört ebenfalls hierher, und ihre Aufgabe ist es, einen Zustandswechsel zu erklären, nicht ihn zu dekorieren. Auf dieser Stufe definiertes Verhalten hält eine Oberfläche vorhersehbar, sobald sie gebaut ist.

7. Visuelles UI-Design

Visuelles Design wendet Typografie, Farbe, Abstand, Bildsprache und Tonalität auf die bereits vereinbarte Struktur an. Als System umgesetzt — Schriftskala, Abstandsskala, Farbrollen, Komponentenzustände — statt als Sammlung einzelner Screens, bleibt es konsistent, während das Projekt wächst, und gibt Entwicklern eindeutige Regeln zum Bauen. Auf dieser Stufe treffen sich Marke und Oberfläche, und eine Seite beginnt, sich wie zu einer bestimmten Organisation gehörig anzufühlen.

8. Responsives Design

Jeder wichtige Breakpoint wird gestaltet, nicht nur geerbt. Die Inhaltsreihenfolge muss auf kleinem Bildschirm oft geändert werden, Tap-Ziele brauchen Platz, Navigation wird meist zu einer anderen Komponente, und alles, was auf Hover setzt, braucht ein Touch-Äquivalent. Da die meisten Besucher über das Smartphone kommen, lohnt es sich generell, den kleinen Bildschirm zuerst zu lösen und von dort aus zu erweitern.

9. Prototyping und Review

Ein klickbarer Prototyp macht aus statischen Screens etwas, das man durchgehen kann. Er deckt Probleme auf, die flache Entwürfe verbergen — ein Schritt, der länger wirkt als erwartet, ein Label, das missverstanden wird, ein Formular, das zu früh zu viel verlangt. Reviews können interne Durchgänge sein oder die Beobachtung von Menschen bei einer Aufgabe; der Wert liegt darin, zu sehen, wo Zögern auftritt, nicht darin, zu fragen, ob es gefällt.

10. Verfeinerung und Übergabe

Befunde werden priorisiert — alles, was eine Aufgabe blockiert, zuerst, Anmerkungen zur Vorliebe zuletzt —, und die Gestaltung wird entsprechend überarbeitet. Die Übergabe deckt dann ab, was die Umsetzung braucht: Komponentenzustände, Abstandsregeln, Schrift- und Farb-Tokens, Verhalten bei Breakpoints, Anforderungen zur Barrierefreiheit und die Assets selbst. Gestaltungsarbeit läuft meist während des Baus weiter, weil Fragen auftauchen, die keine statische Datei vorausgesehen hat.

Wie diese Stufen zu einem Projekt geformt werden, beschreibt die Seite UI/UX-Design-Services, und fertige Oberflächen sind in den ausgewählten Arbeiten versammelt, darunter die RAGHADD-Case-Study.

Wie lange dauert UI/UX-Design?

Es gibt keine Standarddauer, und jede Angabe, bevor der Umfang bekannt ist, ist eine Vermutung. Die ehrliche Antwort ist, dass das Timing von einer Handvoll Variablen abhängt, und dieselbe Seitenzahl kann je nach deren Ausprägung sehr unterschiedlich lange dauern.

Umfang — wie viele unterschiedliche Seitentypen und Flows wirklich Gestaltung brauchen, statt wie viele URLs existieren.
Komplexität — eine Marketing-Website und eine Produktoberfläche mit Konten, Zuständen und Berechtigungen sind unterschiedliche Probleme.
Bereitschaft der Inhalte — ob Texte, Bildmaterial und Markenassets existieren oder parallel zur Gestaltung erstellt werden müssen.
Feedback-Zyklen — wie schnell Reviews stattfinden und wie klar Entscheidungen getroffen werden, ist oft der größte Einzelfaktor.
Anforderungen der Umsetzung — Plattform, Integrationen und wer baut, prägen, wie viel Detail die Übergabe braucht.

Eine realistische Schätzung kommt nach der Discovery, sobald der Umfang schriftlich festgehalten ist. Alles davor ist bestenfalls eine Spanne.

Wie man sich auf ein UI/UX-Designprojekt vorbereitet

Vorbereitung verkürzt ein Projekt zuverlässiger als alles, was ein Designer tut. Vor der ersten Arbeitssitzung hilft es, Folgendes geklärt zu haben:

Das eine Ergebnis aufschreiben, das das Projekt erreichen muss, und woran man es erkennen würde.
Entscheiden, wer die primäre Zielgruppe ist und mit welcher Frage sie am häufigsten kommt.
Bestehendes Material sammeln — Texte, Bildmaterial, Markendateien, Analytics, Support-Anfragen.
Technische Rahmenbedingungen früh identifizieren: Plattform, Integrationen, wer es bauen wird.
Vereinbaren, wer Feedback gibt und wer die endgültige Entscheidung trifft, bevor die erste Review beginnt.
Ehrlich sein darüber, welche Inhalte noch geschrieben werden müssen, da Inhalt meist der langsamste Teil ist.

Wird eine bestehende Website ersetzt, lohnt es sich, sie zuerst zu überprüfen — die UI/UX-Design-Audit-Checkliste beschreibt, was zu prüfen ist, und zeigt oft, welche Teile es wert sind, behalten zu werden.

Häufige Fragen

Was unterscheidet UX von UI?

UX betrifft Struktur und Verhalten — was die Oberfläche enthält, wie sie organisiert ist und was bei jedem Schritt passiert. UI ist die sichtbare Oberfläche: Typografie, Farbe, Abstand, Bildsprache und Komponentengestaltung. Es sind getrennte Belange, aber keine getrennten Projekte; die Oberfläche drückt die Struktur aus, und eine Änderung an einem betrifft meist auch das andere.

Durchlaufen alle Projekte jede Stufe?

Nein. Die Abfolge oben beschreibt einen vollständigen Prozess, und reale Projekte verkürzen ihn. Eine kleine Marketing-Website kann Architektur und Wireframes in einen einzigen Schritt zusammenfassen, während ein komplexes Produkt erheblichen Aufwand allein in Flows steckt. Die Stufen sind eine Checkliste von Entscheidungen, die irgendwo getroffen werden müssen, kein fester Zeitplan.

Sollten Inhalte fertig sein, bevor die Gestaltung beginnt?

Nicht unbedingt fertig, aber die Form sollte bekannt sein. Um echte Überschriften und echte Botschaften herum zu gestalten, ergibt ein Layout, das zu dem passt, was tatsächlich gesagt werden muss; um Platzhaltertext herum zu gestalten, führt meist zu einem Layout, in das der Inhalt später hineingepresst werden muss.

Wo fügt sich Testing ein?

Überall dort, wo es etwas gibt, worauf man reagieren kann. Struktur kann in der Wireframe-Stufe geprüft werden, Verhalten in der Prototyp-Stufe, und die gebaute Oberfläche, sobald sie live ist. Frühere Überprüfung ist günstiger, weil eine Änderung an einem Flow weit weniger kostet als eine Änderung an einer gebauten Seite.

Ist ein Relaunch immer die richtige Antwort?

Oft nicht. Ist die zugrunde liegende Struktur solide, lassen sich Klarheit, Hierarchie, Labels und Formulare meist am bestehenden Aufbau verbessern. Eine strukturierte Überprüfung ist der Weg, um herauszufinden, welche Situation vorliegt, bevor man sich für einen Neubau entscheidet.

Über den Autor

Geschrieben von Anas Essam, einem Technologieberater und Creative Director, der an KI-Systemen, Webdesign, Branding und digitalem Wachstum arbeitet. Ansässig in Ägypten, tätig für Teams weltweit.

Erst die Struktur, dann die Oberfläche

Ein Prozess ist nur nützlich, wenn er zum jeweiligen Projekt passt. Planen Sie eine neue Website, ein Produkt oder einen Relaunch, ist es der richtige Anfang, das Ziel zu beschreiben. Mehr Texte finden sich in den Insights.

Ein Gespräch beginnen