---
title: "UI/UX Design für Shopify-Shops & Websites | uniqueweb®"
description: "UI/UX Design von uniqueweb®: Struktur, Nutzerführung, Wireframes und Design-System für Shopify-Shops und Storyblok-Websites. Jetzt anfragen."
canonical_url: "https://www.unique-web.de/leistungen/ui-ux-design"
meta:
  "og:description": "UI/UX Design von uniqueweb®: Struktur, Nutzerführung, Wireframes und Design-System für Shopify-Shops und Storyblok-Websites. Jetzt anfragen."
  "og:title": "UI/UX Design für Shopify-Shops & Websites"
---

> Index of every page on this site: [llms.txt](https://www.unique-web.de/llms.txt)

UI/UX Design · Shopify & Storyblok

# UI/UX Design für Shopify-Shops und Websites.

Gutes UI/UX Design führt Besucher ohne Umwege zum Kauf oder zur Anfrage. Wir planen Struktur und Nutzerführung, zeichnen Wireframes und gestalten ein Design-System, das zu deiner Marke passt. Alles abgestimmt auf Shopify-Themes und Storyblok-Komponenten, damit das Design genau so umgesetzt wird, wie es geplant ist.

[**Kostenloses Erstgespräch**](https://www.unique-web.de/kontakt "Kostenloses Erstgespräch") [**So läuft dein Projekt ab**](https://www.unique-web.de/leistungen/ui-ux-design#ablauf "So läuft dein Projekt ab")// Design und Entwicklung aus einer Hand · Antwort in 24 h

**5,0**

aus 6 Google-Bewertungen

- **Shopify Partner**
- **Storyblok Partner**

<dl>

<dt>Conversion bei Radwerk</dt>
<dd>**+23 %**</dd>

<dt>Conversion bei Sandoro®</dt>
<dd>**+17 %**</dd></dl>

Typische Ausgangslage

## Gutes Design, aber wenig Wirkung?

Meist liegt die Ursache in Struktur und Nutzerführung.

- **Besucher finden nicht, was sie suchen**Navigation und Kategorien folgen der internen Logik und weniger der Sicht deiner Kunden.
- **Produktseiten lassen Fragen offen**Wichtige Infos zu Varianten, Lieferzeit oder Einsatz fehlen oder stehen zu weit unten.
- **Mobil wird es umständlich**Filter, Formulare und Checkout sind auf dem Smartphone mühsam zu bedienen.
- **Jede neue Seite ist eine Einzelanfertigung**Es gibt keine festen Bausteine, also wird jede Landingpage neu gestaltet und entwickelt.
- **Das Erscheinungsbild ist uneinheitlich**Farben, Abstände und Buttons sehen auf jeder Seite etwas anders aus.

Unser Ansatz

**Design, das zur Technik passt.**

Bei uns gestaltet und entwickelt dieselbe Person. Deshalb planen wir Layouts von Anfang an als Bausteine, die sich in Shopify oder Storyblok sauber umsetzen lassen. Dein Team kann sie später für neue Seiten wiederverwenden.

[**Unsere Leistungen**](https://www.unique-web.de/leistungen/ui-ux-design#leistungen "Unsere Leistungen")

Leistungen

## Was unser UI/UX Design umfasst.

Du buchst alles zusammen oder einzelne Bausteine, zum Beispiel nur die Struktur vor einem Relaunch.

### **Struktur & Navigation**

Seitenstruktur, Menüs und Kategorien aus Sicht deiner Kunden. Damit jeder Inhalt einen klaren Platz hat.

### **Nutzerführung & Conversion**

Klare Wege zu Warenkorb, Checkout oder Anfrage. Mit Fokus auf die Seiten, die Umsatz bringen.

### **Wireframes**

Einfache Entwürfe der wichtigsten Seiten. So klären wir Inhalte und Aufbau, bevor es um Farben geht.

### **UI-Design**

Gestaltung passend zu deiner Marke, für Smartphone und Desktop. Mit Blick auf Lesbarkeit und Ladezeit.

### **Design-System**

Farben, Schriften, Abstände und Komponenten als feste Regeln. Neue Seiten sehen dadurch automatisch einheitlich aus.

### [Barrierefreies Design](https://www.unique-web.de/leistungen/barrierefreie-website)

Kontraste, Schriftgrößen, Fokus-Zustände und Formulare nach WCAG 2.1 AA, von Anfang an mitgedacht.

Mehr erfahren

Abgestimmt auf die Technik

## Gestaltet für Shopify und Storyblok.

Ein Entwurf ist nur so gut wie seine Umsetzung. Deshalb richten wir das Design an der Plattform aus, auf der dein Projekt läuft.

**01**

**Shopify-Themes**

Wir gestalten in Sections und Blocks, wie Shopify sie vorsieht. Dein Team stellt Seiten später im Theme-Editor selbst zusammen. Mehr zu unseren [Shopify-Shops](https://www.unique-web.de/leistungen/shopify-agentur).

**02**

**Storyblok-Komponenten**

Jedes Element im Design wird eine Komponente im Visual Editor. So baut dein Team neue Landingpages aus fertigen Bausteinen. Mehr zu [Storyblok CMS](https://www.unique-web.de/leistungen/storyblok-agentur).

**03**

**Headless Frontends**

Bei einem eigenen Frontend mit Nuxt hast du die größte Gestaltungsfreiheit. Wann sich das lohnt, zeigt die Seite [Headless Commerce](https://www.unique-web.de/leistungen/headless-shopify).

Ablauf

## So läuft dein Designprojekt ab.

Vom Ziel zum fertigen Design-System. Du gibst nach jedem Schritt Feedback, bevor wir weitermachen.

/ 01

**Analyse & Ziele**

Wir klären Zielgruppe, Ziele und Ausgangslage. Bei bestehenden Shops starten wir gern mit einem Audit.

kostenlos im Erstgespräch

/ 02

**Struktur & Wireframes**

Seitenstruktur und Wireframes der wichtigsten Seiten. Hier legen wir Inhalte und Nutzerführung fest.

abgestimmt

/ 03

**UI-Design & Design-System**

Wir gestalten die Seiten und halten alle Regeln im Design-System fest.

markengerecht

/ 04

**Umsetzung**

Wir setzen das Design selbst in Shopify oder Storyblok um. Es geht kein Detail bei einer Übergabe verloren.

aus einer Hand

Referenzen

## Ausgewählte Projekte.

Shops und Websites, die wir gestaltet und entwickelt haben. Bei Radwerk und Sandoro® haben wir den Umstieg auf Shopify Headless auch für eine neue Nutzerführung genutzt. Beide Shops laden heute dreimal so schnell, die Conversion stieg um 23 % und 17 %.

### [Radwerk KG](https://www.unique-web.de/referenzen/radwerk-kg)

E-Commerce

- E-Commerce
- Shopify
- Fastly
- Algolia
- Automatisierung
- Shopware → Shopify

### [Sandoro® GmbH](https://www.unique-web.de/referenzen/sandoro-gmbh)

E-Commerce

- Shopify Headless
- Storyblok
- Nuxt
- B2B
- eBay
- Shopware → Shopify

### [Winterhalter Deutschland GmbH](https://www.unique-web.de/referenzen/winterhalter-deutschland-gmbh)

E-Commerce

- B2B
- E-Commerce
- Shopware 6

### [CLASSEQ Ltd](https://www.unique-web.de/referenzen/classeq-ltd)

E-Commerce

- Shopware 6
- E-Commerce
- B2B
- Headless
- Storyblok

### [Zehmerbräu Fauth Heinik GmbH](https://www.unique-web.de/referenzen/zehmerbraeu-fauth-heinik-gmbh)

Website

- Website
- Headless
- Storyblok
- Nuxt

### [YUMA Innenausbau GmbH](https://www.unique-web.de/referenzen/yuma-innenausbau-gmbh)

Website

- Website
- Storyblok
- Headless CMS
- Nuxt

FAQ

## Häufige Fragen zum UI/UX Design.

UX (User Experience) beschreibt, wie gut sich ein Shop oder eine Website nutzen lässt: Struktur, Wege und Abläufe. UI (User Interface) ist die sichtbare Gestaltung: Farben, Schriften, Buttons und Layouts. Wir planen beides zusammen.

Ja, wenn es zum Projekt passt. Ein gutes Theme ist schneller live und günstiger. Wir passen es an deine Marke an und ergänzen eigene Sections. Bei hohen Ansprüchen an Design und Ladezeit kann [Headless Commerce](https://www.unique-web.de/leistungen/headless-shopify) die bessere Wahl sein.

Wir stimmen Struktur und Wireframes mit dir ab, bevor wir gestalten. Bei bestehenden Shops beziehen wir Daten aus Analytics und Erkenntnisse aus einem Audit ein. Nach dem Launch zeigen die Zahlen, wo wir nachschärfen.

Ja. Kontraste, Schriftgrößen, Fokus-Zustände und Formulare planen wir nach WCAG 2.1 AA. Das ist die technische Grundlage des BFSG. Mehr auf der Seite [Barrierefreiheit (BFSG)](https://www.unique-web.de/leistungen/barrierefreie-website).

Ja. Durch das Design-System und feste Komponenten stellt dein Team neue Seiten selbst zusammen, in Shopify im Theme-Editor oder in [Storyblok](https://www.unique-web.de/leistungen/storyblok-agentur) im Visual Editor.

Das hängt vom Umfang ab, etwa von der Zahl der Seitentypen und davon, ob du ein komplettes Design-System brauchst. Nach dem kostenlosen Erstgespräch bekommst du ein unverbindliches Angebot.

Kontakt

## **Lass uns über dein Design sprechen.**

Erzähl uns, welchen Shop oder welche Website du neu gestalten willst und was heute nicht funktioniert. Wir melden uns mit einer ersten Einschätzung.

- Antwort innerhalb von 24 Stunden
- Kostenloses Erstgespräch, 30 Minuten
- Design und Umsetzung aus einer Hand

[**Projekt anfragen**](https://www.unique-web.de/kontakt "Projekt anfragen") [**info@unique-web.de**](mailto:info@unique-web.de "info@unique-web.de")

**5,0**

aus 6 Google-Bewertungen

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.unique-web.de/#website","@type":"WebSite","description":"E-Commerce Agentur aus Kirchheim bei München für Shopify-Shops und Websites mit Storyblok.","name":"uniqueweb®","url":"https://www.unique-web.de/","publisher":{"@id":"https://www.unique-web.de/#identity"}},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#webpage","description":"UI/UX Design von uniqueweb®: Struktur, Nutzerführung, Wireframes und Design-System für Shopify-Shops und Storyblok-Websites. Jetzt anfragen.","name":"UI/UX Design für Shopify-Shops & Websites","url":"https://www.unique-web.de/leistungen/ui-ux-design","@type":["WebPage","FAQPage"],"breadcrumb":{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#breadcrumb"},"isPartOf":{"@id":"https://www.unique-web.de/#website"},"mainEntity":[{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/1"},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/2"},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/3"},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/4"},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/5"},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/6"}],"potentialAction":[{"@type":"ReadAction","target":["https://www.unique-web.de/leistungen/ui-ux-design"]}],"primaryImageOfPage":{"@id":"https://www.unique-web.de/#logo"}},{"@id":"https://www.unique-web.de/#identity","description":"E-Commerce Agentur für Shopify-Shops (klassisch, Plus und headless) und Websites mit Storyblok, inklusive Audit, UI/UX Design, Barrierefreiheit, Schnittstellen, SEO & GEO und Betreuung.","email":"info@unique-web.de","foundingDate":"2020","name":"uniqueweb®","telephone":"+49 89 21530265","url":"https://www.unique-web.de","vatID":"DE305066247","@type":["Organization","LocalBusiness","ProfessionalService"],"address":{"@type":"PostalAddress","streetAddress":"Henschelring 9A","postalCode":"85551","addressLocality":"Kirchheim bei München","addressRegion":"Bayern","addressCountry":"DE"},"areaServed":["DE","AT","CH"],"founder":{"@type":"Person","name":"Maximilian Schwarz"},"geo":{"@type":"GeoCoordinates","latitude":48.1766208,"longitude":11.7681735},"image":{"@id":"https://www.unique-web.de/#/schema/image/1"},"openingHoursSpecification":{"@type":"OpeningHoursSpecification","opens":"09:00","closes":"18:00","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday"]},"sameAs":["https://maps.google.com/?cid=17842838023959891109","https://www.linkedin.com/company/unique-web","https://github.com/uniqueweb"]},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Start","item":"https://www.unique-web.de","position":1},{"@type":"ListItem","name":"Leistungen","item":"https://www.unique-web.de/leistungen","position":2},{"@type":"ListItem","name":"UI/UX Design","item":"https://www.unique-web.de/leistungen/ui-ux-design","position":3}]},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/1","@type":"Question","inLanguage":"de","name":"Was ist der Unterschied zwischen UI und UX?","acceptedAnswer":{"@type":"Answer","text":"UX (User Experience) beschreibt, wie gut sich ein Shop oder eine Website nutzen lässt: Struktur, Wege und Abläufe. UI (User Interface) ist die sichtbare Gestaltung: Farben, Schriften, Buttons und Layouts. Wir planen beides zusammen."}},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/2","@type":"Question","inLanguage":"de","name":"Arbeitet ihr mit fertigen Shopify-Themes?","acceptedAnswer":{"@type":"Answer","text":"Ja, wenn es zum Projekt passt. Ein gutes Theme ist schneller live und günstiger. Wir passen es an deine Marke an und ergänzen eigene Sections. Bei hohen Ansprüchen an Design und Ladezeit kann Headless Commerce die bessere Wahl sein."}},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/3","@type":"Question","inLanguage":"de","name":"Wie stellt ihr sicher, dass das Design funktioniert?","acceptedAnswer":{"@type":"Answer","text":"Wir stimmen Struktur und Wireframes mit dir ab, bevor wir gestalten. Bei bestehenden Shops beziehen wir Daten aus Analytics und Erkenntnisse aus einem Audit ein. Nach dem Launch zeigen die Zahlen, wo wir nachschärfen."}},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/4","@type":"Question","inLanguage":"de","name":"Ist das Design barrierefrei?","acceptedAnswer":{"@type":"Answer","text":"Ja. Kontraste, Schriftgrößen, Fokus-Zustände und Formulare planen wir nach WCAG 2.1 AA. Das ist die technische Grundlage des BFSG. Mehr auf der Seite Barrierefreiheit (BFSG) ."}},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/5","@type":"Question","inLanguage":"de","name":"Kann mein Team später neue Seiten selbst bauen?","acceptedAnswer":{"@type":"Answer","text":"Ja. Durch das Design-System und feste Komponenten stellt dein Team neue Seiten selbst zusammen, in Shopify im Theme-Editor oder in Storyblok im Visual Editor."}},{"@id":"https://www.unique-web.de/leistungen/ui-ux-design#/schema/question/6","@type":"Question","inLanguage":"de","name":"Was kostet UI/UX Design?","acceptedAnswer":{"@type":"Answer","text":"Das hängt vom Umfang ab, etwa von der Zahl der Seitentypen und davon, ob du ein komplettes Design-System brauchst. Nach dem kostenlosen Erstgespräch bekommst du ein unverbindliches Angebot."}},{"@id":"https://www.unique-web.de/#/schema/image/1","@type":"ImageObject","contentUrl":"https://www.unique-web.de/logo.png","inLanguage":"de","url":"https://www.unique-web.de/logo.png"},{"@id":"https://www.unique-web.de/#logo","@type":"ImageObject","caption":"uniqueweb®","contentUrl":"https://www.unique-web.de/logo.png","inLanguage":"de","url":"https://www.unique-web.de/logo.png"},{"@id":"https://www.unique-web.de/#organization","@type":"Organization","logo":"https://www.unique-web.de/logo.png","name":"uniqueweb®","url":"https://www.unique-web.de","address":{"@type":"PostalAddress","streetAddress":"Henschelring 9A","postalCode":"85551","addressLocality":"Kirchheim bei München","addressRegion":"Bayern","addressCountry":"DE"},"sameAs":["https://maps.google.com/?cid=17842838023959891109","https://www.linkedin.com/company/unique-web","https://github.com/uniqueweb"]}]}
```

## Sitemap

See the full [sitemap](https://www.unique-web.de/sitemap.md) for all pages.
