UI/UX-Design für Produktmarken: Die Oberfläche gehört zur Marke

Viele Produktmarken investieren viel in Verpackung und Kampagnen. Die Oberfläche, über die Kunden tatsächlich kaufen, konfigurieren oder bestellen, wird dagegen oft als technisches Detail behandelt. Dabei ist genau sie der Ort, an dem Kunden die Marke benutzen, nicht nur ansehen.

Was ist UI/UX-Design? Einfach erklärt

UI/UX-Design ist die Gestaltung digitaler Produkte so, dass Menschen sie verstehen, gern benutzen und ihr Ziel erreichen. Die Abkürzungen stehen für User Interface (Benutzeroberfläche) und User Experience (Nutzererlebnis). Gemeint sind Websites, Onlineshops, Apps, Konfiguratoren und Kundenportale, also alles, worauf jemand klickt, tippt oder wischt.

Ein einfaches Bild: Bei einem Café ist UX die Frage, ob man den Eingang findet, wo man bestellt und wie lange man wartet. UI ist, wie die Karte gestaltet ist, wie die Theke aussieht und ob man die Preise lesen kann. Beides zusammen entscheidet, ob man wiederkommt.

UI und UX: zwei Seiten derselben Arbeit

	UX-Design	UI-Design
Frage	Wie kommt der Kunde ans Ziel?	Wie ist die Oberfläche gestaltet?
Ergebnis	Abläufe, Wireframes, Prototyp	Layout, Typografie, Farben, Schaltflächen
Fehler, wenn es fehlt	Kunden finden sich nicht zurecht	die Marke wirkt billig oder beliebig

Gutes UX mit schwachem UI kann austauschbar wirken. Gutes UI mit schwachem UX kann beeindrucken und trotzdem Kunden auf dem Weg verlieren.

Die Grundlagen: Elemente und Prinzipien

Ob Shop oder Konfigurator, einige Grundlagen gelten fast immer.

Element	Worum es geht	Typische Frage
Informationsarchitektur	Ordnung der Inhalte und Navigation	Wo würde ein Kunde dieses Produkt suchen?
Nutzerfluss	Schritte bis zum Ziel	Welche Schritte lassen sich weglassen?
Visuelle Hierarchie	was zuerst ins Auge fällt	Ist die wichtigste Handlung sofort sichtbar?
Typografie	Lesbarkeit und Gliederung	Lässt sich der Text auf dem Smartphone lesen?
Farben und Kontrast	Orientierung und Markenwirkung	Sind Schaltflächen klar von Text zu unterscheiden?
Rückmeldungen	Reaktion auf Eingaben	Weiß der Kunde, was passiert ist und was als Nächstes kommt?
Formulare	Eingaben mit möglichst wenig Aufwand	Wird nur gefragt, was wirklich gebraucht wird?

Daraus ergeben sich Prinzipien, die sich in der Praxis bewähren: Konsistenz (gleiche Dinge sehen gleich aus und verhalten sich gleich), Klarheit vor Originalität bei Bedienelementen, verständliche Sprache statt Fachbegriffen und kurze Wege zu den häufigsten Aufgaben.

Bedienbarkeit und Marke sind kein Widerspruch

Oft hört man, eine starke Gestaltung gehe auf Kosten der Bedienbarkeit. Das kann passieren, wenn gestalterische Entscheidungen die Bedienung erschweren. Entstehen Abläufe und Gestaltung gemeinsam, kann eine Oberfläche klar sein und trotzdem nach der Marke aussehen: mit ihrer Schrift, ihren Farben, ihrer Art, Dinge zu zeigen.

Bei den Websites von Vouch und Syber Technology haben wir genau das verbunden: verständliche Führung durch die Inhalte und eine Gestaltung, die zur jeweiligen Marke passt.

Wo Produktmarken UI/UX brauchen

• Onlineshop: Produktseiten, Filter, Warenkorb und Kasse
• Konfigurator: die Auswahl von Optionen bis zum Preis
• Kundenbereich: Bestellungen, Nachbestellungen, Rechnungen
• Händlerportal: Preislisten, Bestände, Bestellungen für Wiederverkäufer

Bei The Cargo Brothers führt der Preisrechner durch Land, Fahrzeugtyp und Strecke bis zum sofortigen Angebot. Die Reihenfolge der Fragen kann beeinflussen, ob ein Interessent bis zum Ende kommt.

Wie ein UI/UX-Projekt abläuft

Die Programmierung folgt als Website, Webanwendung oder Konfigurator. Bei Alkeme Design kommen Gestaltung und Umsetzung aus einer Hand, das vermeidet Verluste zwischen Entwurf und fertigem Produkt.

1. Analyse: Wer nutzt die Oberfläche, wozu, auf welchem Gerät?
2. Abläufe: Welche Schritte führen zum Ziel, und welche sind überflüssig?
3. Wireframes: einfache Skizzen der Ansichten, erste Entwürfe in der Regel innerhalb von 48 Stunden nach dem Start.
4. Gestaltung: die Oberfläche passend zum Markenauftritt.
5. Prototyp: eine klickbare Fassung, mit der sich Abläufe vor der Programmierung prüfen lassen.
6. Designsystem: Regeln und Bausteine, damit neue Ansichten später einheitlich gestaltet sind.

UI/UX-Design-Beispiele aus unserer Arbeit

Projekt	Aufgabe der Oberfläche	UX-Entscheidung
The Cargo Brothers	Preis für einen Fahrzeugtransport ermitteln	Fragen in der Reihenfolge Land, Fahrzeugtyp, Strecke, Angebot sofort auf der Seite
Vouch	Website einer Produktmarke, die auf Vertrauen setzt	Website rund um Produkt und Nutzer, mit passendem Grid
Syber Technology	Website einer Technologiemarke	Fokus auf Klarheit und einen modernen, glaubwürdigen Auftritt

Die Beispiele zeigen unterschiedliche Aufgaben. Gemeinsam ist ihnen, dass Ablauf und Gestaltung nicht nacheinander, sondern zusammen entwickelt wurden.

Typische UI/UX-Fehler bei Produktmarken

• Zu viele Optionen auf einmal. Ein Konfigurator, der alle Fragen auf einer Seite stellt, überfordert.
• Preis erst am Ende. Wer lange klickt, ohne eine Vorstellung vom Preis zu bekommen, bricht eher ab.
• Desktop zuerst gestaltet. Viele Kunden kommen über das Smartphone; Abläufe sollten dort zuerst funktionieren.
• Unklare Schaltflächen. „Weiter“ sagt weniger als „Angebot ansehen“.
• Fehlermeldungen ohne Lösung. „Ungültige Eingabe“ hilft niemandem.
• Gestaltung, die nur im Entwurf funktioniert. Lange Produktnamen, Umlaute und echte Fotos zeigen, ob die Oberfläche trägt.

Mehr zu Abbrüchen im Shop steht im Artikel Warenkorbabbruch.

Was kostet UI/UX-Design?

Der Aufwand hängt vor allem von der Zahl der Abläufe und Ansichten ab, nicht von der Zahl der Seiten. Eine Produktseite mit Warenkorb ist ein anderer Umfang als ein Händlerportal mit Rollen, Preislisten und Bestellhistorie. Weitere Faktoren sind:

• Anzahl der Gerätegrößen und Sprachen
• ob ein Designsystem für spätere Erweiterungen entstehen soll
• ob Tests mit Nutzern eingeplant werden
• ob Gestaltung und Programmierung aus einer Hand kommen

Bei Alkeme Design wird UI/UX-Design als Festpreis nach Umfang abgerechnet. Ein Konfigurator beginnt ab 800 € netto, eine Website liegt bei 2.500–25.000 € netto. Den Festpreis erhalten Sie nach dem Erstgespräch.

UI/UX mit KI-Werkzeugen?

KI-Werkzeuge können heute schnell Bildschirmentwürfe, Texte für Schaltflächen oder Varianten eines Layouts erzeugen. Für frühe Ideen ist das nützlich. Die eigentliche Arbeit liegt aber in Entscheidungen, die ein Werkzeug nicht kennt: Wer sind Ihre Kunden, welche Fragen stellen sie, welcher Schritt ist für Ihr Geschäft entscheidend? Ein generierter Entwurf ohne diese Klärung sieht fertig aus, löst aber selten das richtige Problem.

Barrierefreiheit von Anfang an

Barrierefreiheit früh einzuplanen, vermeidet spätere Nacharbeit. Unser Gestaltungsmaßstab sind die WCAG 2.2 auf Stufe AA. Das BFSG erfasst seit dem 28. Juni 2025 viele Onlineshops für Verbraucher in Deutschland; Kleinstunternehmen, die Dienstleistungen erbringen, sind ausgenommen (§ 3 Abs. 3). Für Österreich und die Schweiz prüfen wir die jeweiligen Regeln.

Woran Sie gutes UI/UX erkennen

• Kunden finden ohne Erklärung, was sie suchen.
• Auf dem Smartphone funktioniert alles so gut wie am Desktop.
• Fehlermeldungen sagen, was zu tun ist, nicht nur, dass etwas falsch ist.
• Die Oberfläche sieht nach Ihrer Marke aus, nicht nach einer Vorlage.

Mehr zu unserer Arbeit steht auf der Seite UI/UX-Design.

UI vs. UX: Wie wird der Unterschied im Projekt sichtbar?

UI beschreibt die gestaltete Oberfläche. UX betrachtet das Nutzungserlebnis im Zusammenhang mit der Aufgabe. Bei einem Produktkonfigurator betrifft die Oberfläche beispielsweise Felder, Abstände und Zustände. Die UX-Prüfung fragt zusätzlich, ob Menschen die Auswahl verstehen und das gewünschte Ergebnis erreichen.

Für einen gemeinsamen Test empfehlen wir eine konkrete Aufgabe ohne Hilfestellung. Protokollieren Sie, wo Personen stocken, welche Angaben fehlen und welche Fehlermeldungen verständlich sind. Eine optisch einheitliche Oberfläche ist dabei ein prüfbares Ergebnis. Ob der gesamte Ablauf verständlich ist, braucht eine gesonderte Beobachtung.