Online Plattform erstellen:
Design Mockup Entwürfe
Die Gestaltung und das Design Ihrer Online Plattform kann für ihren Erfolg ausschlaggebend sein. Das Erscheinungsbild beeinflusst die Benutzerzufriedenheit, die Conversionrate sowie die Reputation Ihrer Marke – und es entscheidet, ob ein Besucher in den ersten Sekunden bleibt oder die Plattform verlässt, bevor er auch nur eine Funktion gesehen hat.
Vor dem Projektstart sollten Sie detaillierte Designentwürfe ausarbeiten. Bei Shopboostr läuft die Design-Phase rund zwei Wochen zum Festpreis und folgt einer ebenso langen Konzept-Phase – beides immer mit klar definierten Mockups, bevor eine einzige Zeile Code geschrieben wird. Aus 13 Jahren Plattformbau wissen wir: Die teuersten Designfehler sind nicht ästhetisch, sondern strukturell. Ein vergessener Filter, eine nachträglich gewünschte Bewertungsfunktion, ein zweites Nutzerprofil – das sind keine Korrekturen mehr, das ist Neubau.
Damit Sie genau das vermeiden, finden Sie in diesem Artikel die Designvorlage, die wir auf Basis von über 100 umgesetzten Plattformprojekten entwickelt haben. Sie deckt die drei entscheidenden Ebenen ab, an denen Plattform-Design steht oder fällt:
- Homepage – der Eindruck der ersten drei Sekunden
- Struktur – die Navigation und Informationsarchitektur über alle Nutzerrollen hinweg
- Unterseiten – Produktdetails, Profile, Suche, Checkout und Onboarding
[yikes-mailchimp form=“5″]
Das Wichtigste in Kürze
- Die Design-Phase bei Shopboostr dauert ca. 2 Wochen zum Festpreis – direkt im Anschluss an die ebenfalls zweiwöchige Konzeption.
- Komplette Plattform-Projekte starten ab 10.000€, mittelkomplexe Plattformen liegen bei ca. 15.000€, komplexe Projekte ab 20.000€.
- Bei den über 100 umgesetzten Plattformen haben wir gesehen: Zwischen 60% und 80% der Nutzer kommen mobil – Mobile-First ist Pflicht, nicht Trend.
- Plattformen haben strukturell mindestens zwei Nutzerrollen (Anbieter und Nachfrager) – das verdoppelt den Design-Aufwand gegenüber einem klassischen Shop.
- Strukturelle Designfehler kosten später mehr als die gesamte Design-Phase – deshalb trennen wir Konzept- und Designphase strikt.
Was bedeutet „Plattform-Design“ – und was ist der Unterschied zu Mockup, Wireframe und Prototyp?
Im Erstgespräch begegnen uns diese Begriffe ständig durcheinander – häufig nutzt der Kunde alle vier synonym. Die Klarstellung ist mehr als Wortklauberei, weil jede Ebene einen anderen Zweck hat und ein anderes Budget bindet:
Wireframe – die Strichzeichnung. Kein Design, keine Farben. Nur Boxen, Linien und Beschriftungen. Ziel: Die Struktur einer Seite zu klären, bevor irgendjemand über Optik diskutiert.
Mockup – die statische Designansicht. Farben, Typografie, echte Bilder, finale Buttons – aber ohne Klickfunktion. Ziel: Den visuellen Eindruck verbindlich festlegen.
Prototyp – das klickbare Mockup. Sie können sich durch die Plattform navigieren, als wäre sie real. Ziel: Nutzerwege testen, bevor entwickelt wird.
Design (im engeren Sinn) – meint bei uns das fertige UI/UX-Konzept, das aus diesen Vorstufen entsteht und in den Code überführt wird.
In unserem Prozess fließen Wireframe, Mockup und Prototyp in die zweiwöchige Design-Phase ein – als ein integriertes Paket zum Festpreis.
Plattform-Design ist nicht Shop-Design
In den Projekten, die wir seit 2013 begleitet haben, ist das einer der am häufigsten unterschätzten Punkte: Wer schon einmal mit einem klassischen Webdesigner einen Online-Shop gebaut hat, übersetzt diese Erfahrung oft 1:1 auf eine Plattform – und scheitert genau daran.
Ein Shop hat einen Anbieter (Sie) und einen Käufer. Eine Plattform hat mindestens zwei aktive Nutzerrollen: jemanden, der einstellt, und jemanden, der konsumiert. Bei Branchenverzeichnissen wie dem Reinigungsverzeichnis kommen noch B2B- und B2C-Sichten dazu. Das bedeutet praktisch:
- Zwei separate Onboarding-Strecken – die Anbieterregistrierung sieht anders aus als die Nachfrageransicht
- Zwei separate Dashboards – ein Anbieter braucht Statistik, Buchungsverwaltung, Auszahlungen; ein Nachfrager will Suche, Filter, Buchungshistorie
- Zwei separate Vertrauensschichten – ein Anbieter will wissen, dass Bezahlung sicher abläuft; ein Nachfrager will wissen, dass der Anbieter seriös ist (Verifizierung, Bewertungen, Profilqualität)
Genau hier scheitern reine UI-Designer aus dem Shop-Bereich – und ehrlich gesagt auch viele CMS-Systeme, die für lineare Käuferreisen gebaut sind.
Die fünf Designphasen einer Online Plattform – mit Festpreis-Logik
Ein professionelles Plattform-Design durchläuft fünf Phasen, die bei uns klar voneinander getrennt sind. Diese Trennung ist kein bürokratischer Selbstzweck, sondern verhindert genau das Overengineering-Problem, das wir bei Quereinsteigern regelmäßig sehen: Sie polieren am Mockup, während die zugrundeliegende Logik noch unklar ist.
- Strategie-Phase (kostenloses Strategiegespräch) Wir gehen Zielgruppe, Geschäftsmodell und Funktionsumfang systematisch durch. Wenn wir der Meinung sind, dass eine Idee in der aktuellen Form nicht trägt, sagen wir das hier – nicht erst nach drei Wochen Design.
- Konzept-Phase (ca. 2 Wochen, Festpreis) Hier entstehen Wireframes, User Flows und die Funktionslogik. Welche Seiten gibt es? Welche Nutzerrolle sieht was? Welche Aktionen sind möglich? Das ist die wichtigste Phase – und gleichzeitig die, die Quereinsteiger am liebsten überspringen würden.
- Design-Phase (ca. 2 Wochen, Festpreis) Auf Basis des Konzepts entstehen die finalen Mockups. Farben, Typografie, Komponenten, Icons – alles wird im Designsystem festgehalten, damit später hinzukommende Seiten konsistent bleiben.
- Programmierung (ca. 2 Monate, Festpreis) Wir entwickeln immer mit React und Node.js. Das Design wird komponentenbasiert umgesetzt, damit Weiterentwicklung später nicht in Refactoring mündet.
- Iteration nach Launch Nach dem Go-live kommen echte Nutzer dazu – und mit ihnen echtes Feedback. Designanpassungen erfolgen ab hier datengestützt, nicht aus dem Bauch heraus.
„In über 100 Projekten haben wir einen Mustervergleich gesehen: Plattformen, die mit einem schlanken MVP gestartet sind und nach echtem Nutzerfeedback gewachsen sind, schlagen fast immer Plattformen, die zwölf Monate im stillen Kämmerlein perfektioniert wurden. Der Markt belohnt Lernen, nicht Vollständigkeit.“ — Dimitri Haußmann, Gründer Shopboostr
Die Designvorlage von Shopboostr im Detail
Homepage
Die Homepage einer Plattform hat eine andere Aufgabe als die eines Shops: Sie muss in wenigen Sekunden zwei Fragen beantworten – „Was ist das hier?“ und „Was bekomme ich, wenn ich bleibe?“. Wer bis hier nicht versteht, ob er Anbieter oder Nachfrager auf dieser Plattform sein soll, klickt weg.
Aus unseren Projekten haben sich diese Pflichtelemente herauskristallisiert:
- Klare Wertversprechen-Headline – kein Marketingsprech, sondern die konkrete Antwort auf „Was bekomme ich hier?“
- Sichtbare Doppel-CTA für beide Nutzerrollen – „Anbieter werden“ und „Anbieter finden“ müssen beide oberhalb der Falz sichtbar sein
- Suchbar oder browsebar – Plattformen mit großem Angebot brauchen eine prominente Suchleiste, kategorielastige Plattformen brauchen eine sichtbare Kategorienavigation
- Vertrauensanker – Logos bekannter Partner, Mitgliederzahlen, Auszeichnungen, Testimonials
- Social Proof oberhalb der Falz – Bewertungen, Nutzerzahlen, „Verifiziert durch …“-Badges
Struktur
Die Strukturebene entscheidet darüber, ob ein Nutzer beim zweiten Besuch noch findet, was er beim ersten Mal gesucht hat. Sie ist die unsichtbarste – und gleichzeitig die teuerste, wenn sie schiefläuft.
Pflichtelemente einer guten Plattformstruktur:
- Konsistente Hauptnavigation über alle Seiten hinweg
- Rollenspezifische Sekundärnavigation im eingeloggten Zustand (Anbieter sehen „Inserate“, Nachfrager sehen „Buchungen“)
- Sticky-Suchleiste auf allen Listenseiten
- Breadcrumbs auf tieferen Seiten
- Footer mit Trust-Bereich (Impressum, Datenschutz, AGB, Zahlungsarten, Support)
Die Datenarchitektur dahinter ist mindestens genauso wichtig wie das visuelle Design. Wer die Filterlogik im Konzept vergisst, designt später Listenansichten neu.
Unterseiten
Die Unterseiten sind die Arbeitspferde der Plattform. Hier passiert das eigentliche Geschäft – nicht auf der Homepage.
Die wichtigsten Templates, die jede Plattform braucht:
- Listenansicht mit Filtern, Sortierung und Karten-/Listenwechsel
- Detailansicht mit Galerie, allen Specs, Anbieterprofil, Bewertungen, Buchungs-/Kontakt-CTA
- Anbieterprofil als eigenständige Seite mit Übersicht, Bewertungen, weiteren Inseraten
- Anbieter-Dashboard mit Inserateverwaltung, Statistik, Nachrichten, Auszahlungen
- Nachfrager-Dashboard mit Suchhistorie, Favoriten, Buchungen, Bewertungen
- Checkout/Buchungsstrecke mit klarer Schritt-für-Schritt-Logik
- Onboarding-Flows – jeweils ein eigener für Anbieter und Nachfrager
Bei der Zahlungsabwicklung empfehlen wir Mollie für den DACH-Markt oder Stripe für internationale Skalierung – beide bündeln Kreditkarte, PayPal, Lastschrift, Apple Pay und Google Pay zu ca. 2,5% pro Transaktion in einer Integration.
Fallstudie: Fyndery – wenn Design den entscheidenden Unterschied macht
Fyndery begann mit einer schlanken MVP-Version und wenigen Anbietern. Im Design lag von Anfang an der Fokus nicht auf auffälligem visuellen Effekt, sondern auf der sauberen Trennung der beiden Nutzerreisen: Kursanbieter sehen einen anderen Einstieg, eine andere Sprache und ein anderes Onboarding als Endkunden, die nach Workshops suchen.
Genau diese strukturelle Designentscheidung – und nicht eine besonders ausgefallene Farbpalette – war einer der Faktoren, die Fyndery inzwischen zum ERGO Award Gewinner und einer etablierten Marke in der Nische gemacht haben. Die Lehre für jede neue Plattform: Plattform-Design beginnt nicht bei der visuellen Identität, sondern bei der Frage, wer mit welchem Ziel auf welche Seite kommt – und wie die Reise von dort weitergeht.
Was kostet das Design einer Online Plattform?
Der Einstieg liegt bei 10.000€ – immer als Festpreis. Dieser Betrag deckt ein komplettes MVP inklusive Konzept, Design und Entwicklung ab. Aufgeschlüsselt sieht das so aus:
- Einfache Plattform / MVP: ab 10.000€ gesamt
- Mittelkomplexe Plattform: ca. 15.000€ gesamt
- Komplexe Plattform: ab 20.000€ gesamt
- Hosting nach Launch: ab 30€/Monat
- Wartungspaket: 500€/Monat mit 10 Stunden inklusive
- Zahlungsabwicklung: ca. 2,5% pro Transaktion über Mollie oder Stripe
Konzept, Design und Programmierung – immer zu einem fixen Preis. Diese Differenz zur Stundensatz-Abrechnung ist kein Marketingargument, sondern verändert das gesamte Anreizsystem im Projekt: Wir haben strukturell ein Interesse daran, effizient zu arbeiten.
Tools, die wir empfehlen – und wo Tools nicht reichen
Für die Erstellung von Wireframes und Mockups gibt es solide Tools: Figma ist heute der Standard, Sketch weiterhin verbreitet, Adobe XD in vielen Agenturen im Einsatz. Für schnelle Skizzen funktionieren auch Balsamiq, Miro oder Moqups gut.
Aber: Ein Tool macht kein gutes Design, genauso wenig wie ein Hammer ein Haus baut. Die Bibliotheken in Figma, Canva und Co. sind voll von Vorlagen, die für klassische Webseiten gedacht sind – nicht für Plattformen mit zwei Nutzerrollen, Buchungslogik und Anbieter-Dashboards.
Was Sie aus diesen Tools nicht bekommen: eine durchdachte Datenarchitektur, eine konsistente Designsprache über alle Templates, einen sauberen Übergang vom Mockup in produktionsreifen React-Code. Genau das ist die Aufgabe einer Plattform-Agentur.
[yikes-mailchimp form=“5″]
FAQ – Häufige Fragen zum Plattform-Design
Was kostet das Design einer Online-Plattform und wie lange dauert es?
Bei Shopboostr läuft die Design-Phase rund zwei Wochen zum Festpreis und folgt einer ebenso langen Konzept-Phase. Ein komplettes Plattform-Projekt inklusive Design startet ab 10.000€, mittelkomplexe Plattformen liegen bei ca. 15.000€, komplexe Projekte ab 20.000€.
Was ist der Unterschied zwischen einem Plattform-Design und einem normalen Webshop-Design?
Eine Plattform hat mindestens zwei Nutzerrollen – Anbieter und Nachfrager – und braucht für beide getrennte Onboarding-Strecken und Dashboards. Aus 13 Jahren Plattformbau wissen wir: Genau diese Doppelstruktur ist der Punkt, an dem klassische Shop-Designer in der Regel scheitern.
Brauche ich fertige Mockups, bevor ich mit Shopboostr spreche?
Nein. Im kostenlosen Strategiegespräch reichen eine grobe Idee und eine klare Zielgruppe. Wireframes, Mockups und Designsystem entstehen ab der Konzept-Phase und sind im Festpreis enthalten.
Welche Tools nutzt Shopboostr für das Design?
Wir arbeiten mit Figma als Design-Standard. Der entscheidende Wert liegt aber nicht im Tool, sondern in der Methodik: Wir entwickeln Designsysteme, die direkt in React-Komponenten überführbar sind – damit Mockup und finales Produkt nicht auseinanderlaufen.
Kann ich das Design später noch anpassen? Ja.
Das Designsystem ist von Anfang an so angelegt, dass Komponenten wiederverwendbar und erweiterbar sind. Spätere Anpassungen erfolgen entweder über das Wartungspaket (500€/Monat mit 10 Stunden inklusive) oder als separate Festpreis-Pakete für größere Erweiterungen.
