Webflow vs. Shopify
Können No-Code-Tools professionelle Shops liefern?
Für meine Bachelorarbeit im Studiengang User Experience Design habe ich untersucht, wie weit Low-/No-Code Tools gehen können, wenn man sie auf einen komplexen Anwendungsfall wie E-Commerce anwendet. Plattformen wie Webflow und Shopify versprechen, digitale Gestaltung zu demokratisieren. Aber können sie wirklich professionelle, skalierbare und benutzerfreundliche Online-Shops liefern, ganz ohne Code?
Dafür habe ich eine fiktive Modemarke namens BlueBird entworfen und den gesamten Shop auf beiden Plattformen umgesetzt. Das Ergebnis: ein detaillierter, praxisnaher Vergleich zweier sehr unterschiedlicher Entwicklungsansätze.
- Typ
- Web · No-Code · Bachelorarbeit
- Rolle
- Forschung & Entwicklung
- Zeitraum
- 2023
- Tools
- Webflow · Shopify · Figma
Recherche & Fragestellung
Meine Forschung drehte sich um zwei zentrale Fragen: Erstens, welche Einschränkungen und Herausforderungen haben Designer, wenn sie Low-/No-Code Tools wie Webflow und Shopify für den Aufbau eines E-Commerce nutzen? Und zweitens, welche praktischen Empfehlungen lassen sich daraus für andere ableiten?
Statt mich nur auf Theorie oder Vergleiche aus zweiter Hand zu stützen, habe ich einen identischen Shop in beiden Plattformen gebaut. So konnte ich den Design- und Entwicklungsprozess von beiden Seiten erleben und herausfinden, wo jedes Tool glänzt und wo es an seine Grenzen stößt.
Konzept & Markendesign
Um eine realistische Testumgebung zu schaffen, habe ich ein vollständig gebrandetes E-Commerce-Erlebnis für ein nachhaltiges Modelabel namens BlueBird entwickelt. Die Marke wurde für Max entworfen, eine fiktive Persona: ein junger, internetaffiner Student, der Wert auf Qualität, Transparenz und einfaches Online-Shopping legt. Max wurde zur Linse, durch die ich Usability und Flow auf beiden Plattformen bewertet habe.
Von Typografie und Farbpalette bis zu Logo und Tonalität wurde jedes Element der Marke auf die Zielgruppe abgestimmt. Die visuelle Identität nutzt Neue Haas Grotesk Display für Klarheit und digitale Lesbarkeit, während PlaceIt-Mockups jedem Produkt (T-Shirt, Hoodie, Cap, Tote Bag) einen konsistenten, hochwertigen Look gaben.
UX-Prozess
Den UX-Prozess startete ich in Figma, wo ich jeden Screen des BlueBird Online-Shops von Grund auf designte. Die Homepage enthielt einen auffälligen Hero-Bereich, Produkt-Slider, Newsletter-Anmeldung und Blog-Vorschau. Dazu kamen eine Produktübersicht mit Filter- und Sortieroptionen, eine detaillierte Produktseite mit Varianten-Auswahl und FAQs sowie ein mehrstufiger Checkout-Flow mit Fokus auf Klarheit.
Nach Fertigstellung des High-Fidelity-Prototyps führte ich ein Expert Review mit einem Senior UX Designer von TEAM23 in Augsburg durch. Das Feedback half mir, mehrere zentrale Aspekte zu verbessern: stärkere Kontraste für bessere Zugänglichkeit, vereinfachte Navigation im Checkout und klarere Formulare mit Breadcrumb-System.
Umsetzung
Webflow
In Webflow nutzte ich die Designer-Umgebung und die Relume Webflow Library, um den BlueBird Shop umzusetzen. Die Design-Treue war beeindruckend: Ich konnte meine Figma-Layouts nahezu pixelgenau nachbauen. Der WYSIWYG-Editor machte Layout-Anpassungen schnell und visuell, und die Plattform erlaubte Custom Code ohne Probleme. Die Code-Export-Funktion war ein weiterer Pluspunkt und bot einen Ausweg aus dem Webflow-Ökosystem.
Allerdings hatte Webflow auch Einschränkungen: Kein eingebauter Testmodus für Checkout-Flows, Limits bei E-Commerce- und CMS-Einträgen, und minimale native Marketing-Unterstützung ohne Drittanbieter-Tools.
Shopify
Den gleichen Shop in Shopify zu bauen, war eine ganz andere Erfahrung. Ich nutzte das Dawn-Theme als Basis und passte es über den Theme-Editor und Liquid-Code an. Während die visuelle Flexibilität eingeschränkter war, überzeugte die Plattform bei Shop-Management und Skalierbarkeit: breitere Zahlungsmethoden, eingebauter Testmodus für den Checkout und eine native Mobile App für die Bestellverwaltung.
Die Anpassung hatte aber ihren Preis. Die starre Theme-Struktur machte es schwierig, das exakte Design zu replizieren, und viele visuelle Details erforderten CSS-Änderungen. Für Designer ohne Coding-Erfahrung können selbst einfache Änderungen zur Herausforderung werden.
Feature-Vergleich
Im Vergleich bot Webflow klar mehr Freiheit in visuellem und strukturellem Design, während Shopify bei der E-Commerce-Funktionalität überlegen war. Shopify unterstützt Testmodi, umfangreiche Zahlungsoptionen und eingebaute Marketing-Tools, allerdings auf Kosten der visuellen Kontrolle. Webflow gab mir Raum für ein maßgeschneidertes Erlebnis, hatte aber Defizite bei tieferen E-Commerce- und Skalierungsfunktionen.
Fazit & Empfehlungen
Dieses Projekt bestätigte: Es gibt kein einzelnes bestes Tool, nur das am besten passende für ein bestimmtes Ziel. Webflow ist ideal für Designer, die volle kreative Kontrolle wollen und dafür bereit sind, etwas Funktionalität zu opfern. Shopify eignet sich besser für Unternehmen mit Fokus auf soliden Commerce, Skalierung und Marketing von Anfang an.
Beide Tools zeigen das Potenzial von Low-/No-Code Ansätzen. Aber sie zeigen auch die Grenzen, besonders wenn Projekte mehr Flexibilität, Integration oder Anpassung erfordern.
Was ich gelernt habe
Das war eines der praktischsten und aufschlussreichsten Projekte, an denen ich gearbeitet habe. Der reale Anwendungsfall deckte Herausforderungen auf, die Theorie niemals vorhersagen könnte. Ich erkannte auch, dass Einschränkungen in Low-/No-Code Tools nicht nur technisch sind, sie beeinflussen direkt die Designergebnisse und erfordern Workarounds oder Kompromisse.
Die Arbeit über Plattformen hinweg machte mich zu einem anpassungsfähigeren Produktdenker, und die Zusammenarbeit mit einem Expert Reviewer half mir, meinen Designprozess nachhaltig zu verfeinern.
Passende Leistung: Webflow-Entwicklung