Du hast ein interessantes Projekt? Lass uns sprechen.
Deine Website gemeinsam weiterentwickeln

Schick’ uns eine unverbindliche Projektanfrage und wir melden uns innerhalb von 24 Stunden bei dir.

Lass uns über Ziele, Inhalte und die passende technische Umsetzung für dein Unternehmen sprechen.

Flo Steinle im Vordergrund, im Hintergrund der Webflow Entwickler Tobias und Assistentin Julia

Für die Praxis

Teste vor der Übergabe echte Aufgaben mit dem späteren Team. Eine funktionierende Vorschau allein ist noch keine vollständige Abnahme.

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Blog

Der richtige Prozess der Website Erstellung

Tipps
30.05.2024

Der richtige Prozess der Website Erstellung

Der richtige Prozess der Website Erstellung

Eine Website mit Webflow entsteht nicht erst im Designer. Ziele, Inhalte, Struktur und Verantwortlichkeiten legen die Grundlage. Dieser Ablauf zeigt, wie wir Konzeption, Gestaltung, Umsetzung und Prüfung miteinander verbinden.

1. Customer Journey planen

Der erste Schritt zur erfolgreichen Website Erstellung ist es, sich von den eigenen Vorstellungen zu lösen und sich in die potenziellen Website Besucher hineinzuversetzen. 

Ziel der Website ist es schließlich, den Besucher von einem reinen Interessenten zu einem begeisterten Käufer zu machen. Deine Website bestimmt diese Customer Journey maßgeblich mit. Aus diesem Grund ist es wichtig, die einzelnen Schritte und Entscheidungsfaktoren deiner Kunden zu kennen. 

Welche Prozesse und Tätigkeiten führt der Kunde bis zur Kaufentscheidung durch? Welche Zweifel gibt es? Welche Faktoren sind dem Kunden am wichtigsten? Schneller und einfacher Kauf, gute Serviceleistung, intensive Beratung, günstiger Preis?

‍

Eine klassische Customer Journey kann zum Beispiel so aussehen: 

  1. Aufmerksamkeit & Inspiration
    Aufmerksamkeit weckst du zum Beispiel durch Werbung, Social Media Posts oder sogar durch deine Metabeschreibung bei Google.
  1. Informationssuche & Recherche
    Zieht der Kunde deine Dienstleistung oder dein Produkt in Betracht, wird er sich vor einem Kauf darüber informieren wollen. Auf deiner Website sollten alle Infos und Antworten intuitiv zu finden sein. 
  1. Konversion & Kauf
    Im dritten Schritt sollte die Website in der Lage sein, die letzten Zweifel deines potenziellen Kunden aufzulösen und ihm ein gutes Gefühl beim Kauf geben. Dabei spielt nicht nur das Copywriting eine Rolle, sondern auch das professionelle, vertrauenserweckende Webdesign.
  1. Bindung & Empfehlung
    Das Ziel ist für die meisten Unternehmen kein einmaliger Kauf, sondern wiederkehrende Kunden. Voraussetzungen dafür sind natürlich hochwertige Leistungen deines Unternehmens und ein toller Kundenservice. Aber auch die Website spielt eine Rolle, da sie maßgeblich zu deinem Unternehmens-Image beiträgt. Ein zielgruppenorientiertes, durchdachtes Design schafft eine Marke, mit der sich der Kunde auch zukünftig identifiziert. 

2. Sitemap erstellen

Mit einer anhand von Gesprächen, Vertriebsfragen und vorhandenen Daten geprüften Customer Journey kann eine Sitemap erstellt werden. Hier geht es noch nicht um das Design, sondern um die reine Website Struktur. Welche Unterseiten soll es geben? Was soll auf den einzelnen Seiten zu finden sein? Wie sind die Seiten miteinander verlinkt? 

So stellen wir sicher, dass die Website am Ende kein undurchschaubares Labyrinth aus 1000 Unterseiten wird, sondern sinnvoll aufgebaut ist. Wichtig zu beachten ist dabei, dass Kunden nicht immer unbedingt über die Startseite auf die Website kommen. Es ist wahrscheinlich, dass sie zunächst auf einem suchmaschinenoptimierten Blogartikel landen, oder einer Produktseite aus einem Ad. Die Website muss also von jeder Unterseite aus intuitiv navigierbar sein. 

3. Wireframing/Layout

Der nächste Schritt im Prozess der Website Erstellung ist das Wireframing. Das heißt nichts anderes, als die Layouts der einzelnen Unterseiten zu planen. Die Position von Bildern, Textabschnitten und anderen Elementen wird festgelegt und erst später mit Design und Inhalten gefüllt. 

4. Copywriting und Webdesign

Auf der Grundlage des Wireframings nimmt die Website jetzt Gestalt an. Dabei kommt die klassische Henne-Ei-Frage auf: Kommt zuerst das Copywriting, das später vom Webdesign unterstützt wird, oder kommt erst das Webdesign, an welches sich der Copywriter anpasst? 

Beides ist möglich und hängt von den individuellen Gegebenheiten des Projekts ab. Meistens ist es eine Zusammenarbeit und läuft in Kooperation. 

Ich persönlich nutze für das Webdesign das Design-Tool Figma. Hier kann ich mit dem Design experimentieren und komplett fertig gestaltete Seitenlayouts erstellen - samt Farben, Schriftarten, Logos und mehr. Der Vorteil dabei ist, dass Änderungen in Figma schnell und unkompliziert möglich sind. Außerdem kann der Kunde jederzeit auf das Design zugreifen, was die Kommunikation deutlich vereinfacht. 

5. Website Erstellung mit Webflow

Erst, wenn das Design feststeht und von allen Mitentscheidern bestätigt wurde, geht es an die tatsächliche Website Erstellung. Ich nutze dafür in den meisten Fällen Webflow. Dabei übertragen wir das Design in ein responsives System und prüfen es mit echten Inhalten. Schriftumbruch, Bedienung und kleinere Displays erfordern bewusst geplante Anpassungen. 

Steht das Website-Layout in Webflow, kann die Seite mit Animationen wie Hover- und Scroll-Effekten oder Slidern dynamischer gestaltet werden. 

Ein wichtiger Bestandteil der Website Erstellung ist die Responsiveness der Seite. Das bedeutet, dass die Website auf allen Geräten und Bildschirmgrößen gut aussehen und funktionieren soll. Style und Layout können mit Webflow für verschiedene Geräte wie Laptop, Tablet und Smartphone individuell angepasst werden. 

6. CMS einrichten

Ein CMS lohnt sich vor allem bei wiederkehrenden oder häufig ergänzten Inhalten. Einzelne statische Seiten benötigen nicht automatisch eine Collection. Dazu gehören Blogartikel, Mitarbeiterprofile, Produktbeschreibungen und mehr. 

Um die Inhalte in Zukunft möglichst einfach bearbeiten zu können, muss ein funktionelles CMS eingerichtet werden. Das CMS von Webflow verwende ich besonders gern, da man es vollkommen individuell an jede Website anpassen kann. Es ist dann intuitiv zu bedienen, sodass meine Kunden Ihre Website Inhalte selbst ändern und erweitern können, ohne jedes Mal zum Telefon greifen zu müssen.

7. Der Website Launch

Der Moment, auf den alle hingefiebert haben: Der Launch der neuen Website. Im Voraus sollten natürlich alle Links, die Responsivität auf verschiedenen Geräten und sämtliche Texte auf Rechtschreibfehler überprüft worden sein. Dann wird die Website online gestellt und die Google Search Console eingerichtet, um Indexierung und Suchleistung wichtiger Seiten zu kontrollieren. Eine eingerichtete Search Console garantiert keine Aufnahme in die Suche. 

Im Anschluss sollte unbedingt noch einmal getestet werden, ob Bilder, Animationen, Links und Responsivität weiterhin funktionieren. 

Und was passiert nach der Website Erstellung?

Für uns als Webflow Agentur stellt eine Website kein Produkt dar, das einmal erstellt wird und dann für immer ein Bild der Perfektion ist. Im Gegenteil: Die erste Version der Website hat in der Regel noch viel Optimierungspotenzial. Doch um zu erkennen, wo sie optimiert werden kann, müssen erstmal Besucher auf die Seite kommen. 

Natürlich kann man sich im Voraus Gedanken dazu machen, was die Zielgruppe möchte und wie man auf der Website die bestmögliche Customer Experience bieten kann. Aber erst, nachdem die Website online ist, kann man analysieren, ob man richtig lag. 

Dazu gibt es verschiedene Tools, mit denen man die Bewegung der Besucher auf der Website nachverfolgen kann oder sieht, wie Besucher auf die Website gelangt sind und welche Keywords und Unterseiten am besten performen. Anhand dessen kann und sollte die Website kontinuierlich erweitert und verbessert werden.

Was wir heute zusätzlich vor dem Launch prüfen

Zu einem aktuellen Webflow-Projekt gehören ein klarer Veröffentlichungsablauf, persönliche Konten und eine Prüfung der tatsächlichen Rechte. Formulare werden bis zum Empfänger getestet, nicht nur bis zur Bestätigungsseite. Vor einem Relaunch dokumentieren wir die bisherigen URLs und relevante Ausgangswerte.

Prüfe außerdem die Tastaturbedienung, verständliche Fehlermeldungen, Kontraste sowie mobile Navigation. Nach dem Launch braucht es einen Verantwortlichen für technische Probleme und einen Termin zur gemeinsamen Auswertung. Unsere Relaunch-Checkliste führt die Schritte näher aus.

{{callout}}

{{cta}}

Häufig gestellte Fragen

Warum beginnen wir mit Zielgruppe und Zielen?

Wann entstehen die Texte?

Wie wird die Website abgenommen?

Braucht jede Website ein CMS?

Was passiert nach dem Launch?

Flo Steinle

Über den Autor

Flo Steinle ist leidenschaftlicher UX & UI Designer, Webdesigner und Webflow Experte aus Düsseldorf. Seit vielen Jahren ist Flo auf die Konzeption und Gestaltung von Websites und hat schon für namhafte Kunden wie Fressnapf und Finanzfluss gearbeitet. In seinem Blog teilt er persönliche Erfahrungen aus dem Agenturalltag und Tipps rund um die Themen Webdesign und Webflow.

Weitere Blog-Artikel

Aktuelle Themen, Tipps & Tricks und persönliche Erfahrungen rund um die Themen UX & UI Design, Webdesign und Webflow.

Alle Artikel anzeigen
Webflow
Tipps
27.10.2026

Mehrsprachige Websites mit Webflow: Einrichtung, SEO und Tools im Vergleich

Tobias Ziegler
Tobias Ziegler
Webflow Experte
Tipps
Webflow
25.10.2026

Versicherungs-Websites: Warum wir bei StandardLife Figma, Webflow und TYPO3 verbinden

Flo Steinle
Flo Steinle
Gründer & Webdesigner