In fast jedem Angebot für eine neue Website oder App steht ein Posten „UX UI Design“. Was Sie dafür bekommen, bleibt oft unklar. Dabei entscheidet genau dieser Teil des Projekts, ob Besucher finden, was sie suchen, und ob Sie nach dem Launch teure Änderungen nachbauen lassen müssen.
Dieser Beitrag erklärt, was UX Design und UI Design sind, worin sie sich unterscheiden, was UX- und UI-Designer tun und wie der Gestaltungsprozess abläuft. Wir stützen uns auf die internationale Norm ISO 9241-210, auf die Forschung der Nielsen Norman Group und auf unsere eigene Arbeitsweise: Bei Viralistic gestalten wir Websites in Figma und entwickeln sie in Astro, in Phasen, die Sie Schritt für Schritt freigeben.
Was ist UX Design?
UX Design ist die Gestaltung des gesamten Erlebnisses, das ein Mensch mit Ihrem Unternehmen, Ihrem Produkt oder Ihrer Dienstleistung hat. Auf einer Website geht es um drei Fragen. Finde ich, was ich suche? Verstehe ich, was dieses Unternehmen tut? Weiß ich, was mein nächster Schritt ist?
Die Nielsen Norman Group, das Forschungsunternehmen von Don Norman und Jakob Nielsen, definiert User Experience als alle Aspekte der Interaktion von Endnutzern mit dem Unternehmen, seinen Dienstleistungen und seinen Produkten. Das reicht weit über den Bildschirm hinaus. Ihr Beispiel ist eine Website mit Filmkritiken. Selbst wenn die Suche perfekt funktioniert, bleibt das Erlebnis schlecht für jemanden, der einen kleinen Independentfilm sucht, wenn die Datenbank nur Filme großer Studios enthält.
Auch die Normung kennt das Thema. ISO 9241-210 beschreibt Anforderungen und Empfehlungen für menschzentrierte Gestaltung über den gesamten Lebenszyklus interaktiver Systeme und nennt Websites ausdrücklich als Beispiel. UX Design ist damit vor allem eine Arbeitsweise: erst verstehen, was Menschen brauchen, dann entscheiden, wie es aussieht.
Was ist UI Design?
UI Design ist die Gestaltung der Oberfläche, die Menschen sehen und bedienen: Typografie, Farbe, Buttons, Formulare, Icons, Weißraum und Bewegung. UI-Designer sorgen dafür, dass die Oberfläche gut lesbar ist, überall gleich funktioniert und zur Marke passt.
Gutes UI Design macht eine gute Struktur benutzbar und glaubwürdig. Eine unlogische Struktur rettet es nicht.
Was bedeutet UX UI Design?
UX UI Design ist der Sammelbegriff für beide Disziplinen. In kleineren Teams und bei Agenturen übernimmt oft ein Designer oder ein Team beides. Das funktioniert gut, solange die Struktur zuerst kommt und die Gestaltung danach.
UX vs. UI: der Unterschied in einer Tabelle
UX regelt, wie etwas funktioniert. UI regelt, wie es aussieht und sich dabei anfühlt.
| UX Design | UI Design | |
|---|---|---|
| Leitfrage | Funktioniert es, und ist es logisch? | Ist es klar, hochwertig und wiedererkennbar? |
| Schwerpunkt | Struktur, Inhalte und Nutzerführung | Typografie, Farbe, Layout und Interaktion |
| Typische Ergebnisse | Recherche, Sitemap, User Flows, Wireframes | Gestaltungsrichtung, Komponenten, High-Fidelity-Screens |
| Zeitpunkt im Projekt | Beginnt vor der visuellen Gestaltung | Baut auf der freigegebenen Struktur auf |
| Woran Sie merken, dass es fehlt | Besucher springen ab oder finden den Button nicht | Die Marke wirkt billig oder uneinheitlich |
Ein Bild, das oft hilft: UX ist der Grundriss eines Hauses, UI sind Materialien und Ausstattung. Edles Parkett in einem Flur, der nirgendwohin führt, bleibt ein Flur, der nirgendwohin führt.
Was macht ein UX-Designer, was ein UI-Designer?
Ein UX-Designer findet heraus, was Nutzer brauchen, und übersetzt das in Struktur. Ein UI-Designer gibt dieser Struktur eine Form, die zur Marke passt. Gemeinsam liefern sie ein Design, das bereit für die Umsetzung ist.
Aufgaben im UX Design
- Gespräche mit Ihnen, Ihrem Team und wenn möglich Ihren Kunden führen und vorhandene Daten auswerten.
- Inhalte und Seitenstruktur ordnen: welche Seiten es gibt und wie sie zusammenhängen.
- Nutzerwege skizzieren: Wie kommt jemand vom ersten Eindruck zur Anfrage oder zum Kauf?
- Wireframes und Prototypen erstellen.
- Mit echten Menschen testen und die Ergebnisse einarbeiten.
Aufgaben im UI Design
- Ihr Corporate Design auf Bildschirme übertragen: Typografie, Farbe und Bildsprache.
- Komponenten wie Buttons, Formulare, Karten und Navigation gestalten, die überall gleich funktionieren.
- Zustände ausarbeiten: Was sieht man bei einem Fehler, beim Laden oder bei einer leeren Liste?
- Lesbarkeit und Kontrast sicherstellen.
- Das Design für die Entwicklung übergabefähig machen, zum Beispiel in Figma.
Ein Designer oder zwei?
In großen Produktteams sind UX und UI oft getrennte Rollen, ergänzt um UX-Researcher. Für die Website eines etablierten Unternehmens ist ein Designteam, das beides beherrscht, meist die bessere Wahl: weniger Übergaben, weniger Reibung. Wichtiger als die Berufsbezeichnung ist die Reihenfolge. Erst Struktur, dann Form.
Der UX-Design-Prozess in sechs Schritten
Ein guter UX-Prozess führt vom Verstehen über das Gestalten zum Prüfen. Diese sechs Schritte finden sich in nahezu jedem ernsthaften Projekt wieder, auch wenn die Tiefe je nach Budget variiert.
1. Recherche
Am Anfang steht das Verstehen. Wer besucht Ihre Website, was will diese Person erreichen und wo bricht sie heute ab? Gute Quellen sind Gespräche, Web-Analytics, Suchdaten und die Fragen, die Ihr Team jede Woche beantwortet.
2. Informationsarchitektur
Die Informationsarchitektur ordnet Ihre Inhalte: welche Seiten es gibt, wie sie heißen und wie sie zusammenhängen. Laut Nielsen Norman Group ist sie nicht Teil der sichtbaren Oberfläche, sondern deren Grundlage. Sie muss nicht endgültig sein, bevor Wireframes entstehen, ein erster Entwurf aber schon.
3. Wireframes
Ein Wireframe ist eine Skizze einer Seite ohne Farbe und Bilder. Er zeigt, was wo steht und in welcher Reihenfolge es gelesen wird. Gerade weil die Gestaltung fehlt, dreht sich das Gespräch um Inhalte und Nutzerführung statt um Geschmack.
4. Prototyp
Ein Prototyp ist eine klickbare Version des Designs. Sie sehen, wie die Screens aufeinander folgen, bevor eine Zeile Code geschrieben ist. In Figma entsteht der Prototyp in derselben Datei wie das Design.
5. Visuelles Design
Jetzt folgt das UI Design: Typografie, Farbe, Bildsprache und Komponenten auf Basis Ihres Corporate Designs. Ist das noch nicht klar definiert, lohnt es sich, zuerst ein Corporate Design erstellen zu lassen. Sonst gestalten Sie eine Oberfläche ohne Fundament.
6. Testen
Tests müssen nicht groß sein. Jakob Nielsen hat gezeigt, dass ein Test mit fünf Nutzern rund 85 Prozent der Usability-Probleme aufdeckt und dass drei kleine Testrunden mit je fünf Personen mehr bringen als eine große Studie (Nielsen Norman Group). Das gilt für vergleichbare Nutzer. Haben Sie deutlich unterschiedliche Zielgruppen, testen Sie je Gruppe. Nach dem Launch geht das Prüfen mit echten Daten weiter, mehr dazu in unserem Beitrag zur Conversion Rate Optimierung.
So arbeiten wir bei Viralistic
Unsere Webdesign-Phasen folgen derselben Logik. In der Fundamentphase entstehen ein BrandScript und eine Sitemap: jede Seite, die Ihre Website braucht, und wie die Seiten zusammenhängen. Daraus wird ein Wireframe, bewusst noch ohne Design. Erst wenn die Struktur steht, wird das Stylescape zu einem Markenhandbuch und einem High-Fidelity-Design in Figma ausgearbeitet, das wir anschließend in Astro entwickeln. Jede Phase endet mit einer Feedbackrunde, und die nächste baut auf Ihrer Freigabe auf.
Für Gre-Go, eine Buchungs- und Kooperationsplattform für die Personenbeförderung im Norden der Niederlande, haben wir Markengeschichten für Fahrgäste, für Chauffeure sowie für Hotels und Geschäftspartner geschrieben und die Sitemap und Wireframes erstellt. Mehr dazu lesen Sie in der Case Study zu Gre-Go.
Warum gute UX Entwicklungskosten spart
Gute UX spart Entwicklungskosten, weil Fehler auffallen, solange sie noch auf dem Papier stehen. Einen Wireframe anzupassen dauert einen Nachmittag. Dieselbe Änderung an einer fertigen Website betrifft Templates, Inhalte, Tests und manchmal das CMS.
Der bekannteste Beleg stammt aus dem Software Engineering. Barry Boehm und Victor Basili schrieben 2001 in der Zeitschrift IEEE Computer, dass es nach der Auslieferung oft 100-mal teurer ist, ein Softwareproblem zu finden und zu beheben, als in der Anforderungs- und Designphase (Boehm und Basili, 2001). Sie ergänzten selbst eine Einschränkung: Bei kleinen, unkritischen Systemen liegt der Faktor eher bei 5 zu 1. Eine Unternehmenswebsite gehört meist in diese zweite Gruppe. Auch fünfmal so teuer ist Grund genug, die Struktur zuerst richtig zu machen.
Wie das im Webprojekt schiefgeht, beschreibt die Nielsen Norman Group an einem Beispiel. Ein Team wählt eine Navigation mit einer Leiste oben und einer Spalte links, weil sie gut aussieht. Dieses Muster trägt Inhalte bis zu vier Ebenen tief. Später zeigt die Inhaltsinventur, dass viele Bereiche tiefer gehen. Dann muss das Team die Navigation neu gestalten oder die Inhalte in vier Ebenen pressen. Genau diese Nacharbeit verhindern Sitemap und Wireframe.
Was eine bessere UX-Struktur Ihnen konkret bringt:
- weniger Umbau, weil Entscheidungen über Seiten und Nutzerwege vor der Entwicklung fallen;
- kürzere Abstimmungen, weil ein Wireframe ohne Farbe den Fokus auf den Inhalten hält;
- weniger späte Wünsche, weil alle Beteiligten die Struktur bereits freigegeben haben;
- eine Website, die mitwachsen kann, weil eine klare Struktur neue Seiten aufnimmt, ohne dass die Navigation bricht.
Deshalb beginnen wir nie mit Code. Sie dürfen Ihre Meinung jederzeit ändern, aber eine Änderung an einer früheren Freigabe kostet zusätzliche Zeit und zusätzliches Budget. Je später im Projekt, desto mehr Arbeit hängt daran. Bei individueller Software gilt das noch stärker, lesen Sie dazu unseren Beitrag Software entwickeln lassen.
UX und UI Design für Premiummarken
Für Premiummarken ist UX kein technisches Detail. Hier entscheidet sich, ob Qualität online spürbar wird oder leise verschwindet.
Premium verlangt Zurückhaltung, und Zurückhaltung ist genauso eine UX-Entscheidung wie eine gestalterische. Weniger Optionen pro Screen. Ruhe in der Typografie. Ein klarer nächster Schritt. Auf unserer Designseite nennen wir das funktionalen Minimalismus: Struktur, Typografie, das Tempo der Oberfläche, die Performance der Technik und der Rhythmus der Inhalte sollen dieselbe Qualitätswahrnehmung tragen, die Ihre Kunden offline erleben.
Worauf es in der Praxis ankommt:
- Ein System. Das UI folgt Ihrem Markenhandbuch, sodass jede Seite und jede Komponente dasselbe Gewicht trägt.
- Geschwindigkeit. Eine langsame Website wirkt nachlässig, wie hochwertig das Design auch ist.
- Relevanz. Das Erlebnis kann sich an den Besucher anpassen. Wie das geht, lesen Sie in unserem Beitrag zur Website-Personalisierung.
Wie Premiummarken online Vertrauen aufbauen, zeigen wir in Luxus-Websites, die nachweislich konvertieren.
Wie Sie die passende UX-Agentur finden
Wählen Sie eine UX-Agentur nach Prozess und Denkweise, nicht nur nach einem schönen Portfolio. Das Portfolio zeigt, wo andere Projekte gelandet sind. Der Prozess entscheidet, wo Ihres landet.
Diese Fragen helfen bei der Auswahl:
- Wie beginnen Sie? Mit Recherche, Struktur und Sitemap oder direkt mit Screens?
- Gibt es eine Wireframe-Phase im Angebot? Ohne Wireframes wird die Struktur erst sichtbar, wenn das Design schon fertig ist.
- Wer entwickelt, was Sie gestalten? Bei Übergaben zwischen zwei Dienstleistern gehen häufig Details verloren.
- Was gehört am Ende mir? Fragen Sie nach den Designdateien, einem Markenhandbuch und dem Zugang zur Website.
- Wie laufen Feedback und Änderungen? Fragen Sie, was eine Änderung nach einer Freigabe kostet.
- Wie messen Sie nach dem Launch? Ein Design ist eine Hypothese, bis Sie sehen, wie Menschen es nutzen.
Achten Sie auch auf den Preis, aber vergleichen Sie, was Sie pro Phase bekommen. Bei Viralistic beginnen Webdesign-Projekte bei rund 4.000 Euro, größere, CMS-basierte Plattformen können 20.000 Euro oder mehr erreichen. Entscheidend ist vor allem, ob wir nur die Startseite und ein oder zwei gestaltungsintensive Seiten in Figma gestalten oder jede Seite im Detail. Einen ehrlichen Überblick über die Preisstufen am Markt finden Sie in Website erstellen lassen.
Wie wir helfen
Bei Viralistic gehören UX und UI zu einem Projekt unter einer strategischen Leitung. Wir beginnen mit Strategie und Struktur, gestalten in Figma und entwickeln in Astro. Auf der Seite zu unserem Design-Ansatz lesen Sie, wie wir Ihre Marke auf Benutzeroberflächen und Inhalte übertragen, die auch bei wachsendem Umfang stimmig bleiben. Auf unserer Webdesign-Seite finden Sie alle sechs Phasen mit der Feedbackrunde nach jeder Phase. Im Strategiegespräch sagen wir Ihnen ehrlich, ob Ihre Marke bereit für Design und Entwicklung ist oder was zuerst passieren sollte.
Häufig gestellte Fragen
Wofür steht die Abkürzung UX?
UX steht für User Experience, auf Deutsch etwa Nutzererlebnis oder Benutzererfahrung. UI steht für User Interface, die Benutzeroberfläche. UX Design umfasst das gesamte Erlebnis mit Ihrer Website, App oder Dienstleistung: finden, verstehen und handeln. UI Design ist der sichtbare Teil davon, also Typografie, Farbe, Buttons und Layout. In Stellenanzeigen und Angeboten stehen beide oft zusammen als UX UI Design.
Was ist der Unterschied zwischen UI und GUI?
GUI steht für Graphical User Interface, also die grafische Benutzeroberfläche mit Fenstern, Buttons und Icons. UI ist der weitere Begriff: Er umfasst jede Schnittstelle zwischen Mensch und System, auch Sprachsteuerung oder physische Bedienelemente. Bei Websites und Apps meint UI Design in der Praxis fast immer die grafische Oberfläche, deshalb werden beide Begriffe oft synonym verwendet.
Was macht ein UX-Designer?
Ein UX-Designer sorgt dafür, dass eine Website oder App für die Menschen, die sie nutzen, logisch funktioniert. Das beginnt mit Recherche: Was wollen Nutzer, und wo bleiben sie heute hängen? Danach ordnet der UX-Designer die Inhalte, skizziert Nutzerwege und Wireframes, baut einen Prototyp und testet ihn mit echten Menschen. Der UI-Designer gestaltet diese Struktur anschließend visuell.
Was kostet UX UI Design?
Das hängt stärker vom Umfang ab als vom Stundensatz. Vergleichen Sie, was Sie pro Phase bekommen: Recherche, Sitemap, Wireframes, UI Design und Tests. Bei Viralistic ist UX Teil des Webdesign-Projekts. Projekte beginnen bei rund 4.000 Euro, größere, CMS-basierte Plattformen können 20.000 Euro oder mehr erreichen, je nachdem, wie viele Seiten wir im Detail gestalten.
Wie viele Nutzer braucht ein Usability-Test?
Weniger, als die meisten erwarten. Jakob Nielsen von der Nielsen Norman Group zeigt, dass fünf Nutzer rund 85 Prozent der Usability-Probleme finden. Er empfiehlt mehrere kleine Testrunden statt einer großen Studie, damit Sie zwischendurch verbessern können. Haben Sie deutlich unterschiedliche Zielgruppen, testen Sie mit drei bis vier Personen pro Gruppe.
Brauche ich getrennte UX- und UI-Designer?
Für die meisten Websites nicht. Große Produktteams trennen die Rollen häufig, für eine Unternehmenswebsite ist ein Designteam, das beides beherrscht, meist die bessere Wahl: weniger Übergaben, weniger Reibung. Achten Sie vor allem auf die Reihenfolge. Wer direkt mit Farbe und Bildern beginnt, überspringt die Struktur, und die Rechnung dafür kommt später trotzdem.
Geschrieben von
Gründerin von Viralistic und offizielle n8n Ambassador
Marrallisa leitet von Amsterdam aus Strategie, Design, Sichtbarkeit und Automatisierung für Premiummarken. Sie hat Teams bei Volkswagen geschult und spricht auf Events von n8n und Anthropic. Möchten Sie Ihre Situation besprechen? Vereinbaren Sie direkt ein Gespräch mit ihr.