Kostenlose Website-Analyse - jetzt sichern
Tipps

Der richtige Prozess der Website Erstellung

Flo Steinle
-
30
.
05
.
2024

Inhaltsverzeichnis

Eine zielgruppenorientierte und funktionale Website entsteht in mehreren Etappen. Wer schonmal selbst versucht hat, eine Website zu erstellen - mit einem Baukasten-Programm oder einem Template - hat sicher gemerkt, dass der Prozess so eher zäh verläuft und man immer wieder an Kleinigkeiten hängen bleibt. Das liegt daran, dass normalerweise jede Menge Schritte passieren müssen, bevor es überhaupt an die Entwicklung der Website geht. 

Mit der richtigen Vorarbeit lässt sich die Website deutlich effizienter erstellen und das Ergebnis wird einfach besser. Natürlich gibt es keinen vorgegebenen Prozess, der in 100% der Fälle funktioniert. Doch dieser Prozess zur Website Erstellung hat sich bei meiner Arbeit als Webdesigner immer wieder bewährt: 

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 konkreten Customer Journey im Hinterkopf 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. Damit kann ich die statischen Designs aus Figma ohne Verluste übertragen und zu einer funktionalen Website machen. 

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

Content Management Systeme (CMS) sind eine Voraussetzung für alle Webseiten, auf denen sich veränderbare Inhalte befinden. 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 sicherzustellen, dass alle Seiten, die bei Google gefunden werden sollen, auch auffindbar sind. 

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.

Welche Rolle spielt die Zielgruppenanalyse bei der Website-Erstellung?

Warum ist es wichtig, den Content frühzeitig im Website-Erstellungsprozess zu planen?

Wie kann man sicherstellen, dass die Website nach der Veröffentlichung erfolgreich ist?

Ü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 digitaler Produkte spezialisiert und hat schon für namhafte Kunden wie Fressnapf und Finanzfluss arbeiten dürfen. In seinem Blog teilt er persönliche Erfahrungen und Tipps rund um die Themen Design 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
Projekte
Webflow
13
.
03
.
2024

Website Relaunch für den Abnehmexperten Simon Mathis: So habe ich die conversion-starke Website für das bekannte Coaching-Unternehmen erstellt

Webflow
Tipps
02
.
12
.
2023

Was macht eine Webflow Agentur?

Du hast ein interessantes Projekt?
Lass uns plaudern!