Eine professionelle Website entsteht nicht durch Zufall. Sie ist das Ergebnis eines klar strukturierten Prozesses, bei dem Strategie, individuelles Webdesign und technische Entwicklung aufeinander aufbauen.
Mein Website-Prozess wurde in über 50 Kundenprojekten eingesetzt, kontinuierlich verbessert und auf eine möglichst effiziente Zusammenarbeit ausgelegt. Dabei entsteht keine Website auf Basis eines austauschbaren Templates. Das Design wird individuell an das Unternehmen, die Zielgruppe und die konkreten Ziele der Website angepasst.
In diesem Beitrag zeige ich dir, wie der optimale Website-Prozess von der ersten Besprechung bis zum erfolgreichen Launch abläuft.
1. Onboarding und strategischer Kick-off
Jedes Website-Projekt beginnt mit einem gemeinsamen Kick-off-Termin. Dieser dauert in der Regel etwa eine bis eineinhalb Stunden und bildet die strategische Grundlage für das gesamte Projekt.
Im ersten Schritt sprechen wir über Design-Inspirationen. Dabei schauen wir uns gemeinsam Websites, Gestaltungselemente, Schriftarten, Farben und visuelle Richtungen an, die zum Unternehmen passen könnten. Je genauer wir die gewünschte Stilrichtung definieren, desto gezielter kann das spätere Webdesign entwickelt werden.
Gleichzeitig klären wir die Aufgabenverteilung. Wer liefert die Texte? Welche Bilder sind bereits vorhanden? Wird eine professionelle Copy benötigt? Welche Inhalte müssen vom Kunden bereitgestellt werden? Durch diese klare Verteilung entstehen während des Projekts keine unnötigen Verzögerungen.
Weitere wichtige Bestandteile des Onboardings sind:
- Definition der Zielgruppe und des Ideal Customer Profiles
- Festlegung der Ziele der Website
- Planung der Sitemap und Seitenstruktur
- Analyse relevanter Wettbewerber
- Definition benötigter Inhalte und Funktionen
- Prüfung des vorhandenen SEO-Potenzials
- Abstimmung technischer Anforderungen
Das primäre Ziel vieler Websites ist die Generierung qualifizierter Anfragen. Je nach Unternehmen kann die Website aber auch den Vertrieb unterstützen, Informationen vermitteln, Bewerbungen generieren, Event-Anmeldungen fördern oder bestehende Kunden zu bestimmten Angeboten führen.
Auch technische Funktionen werden bereits zu diesem Zeitpunkt berücksichtigt. Dazu gehören beispielsweise Login-Bereiche, Weiterleitungen, Formulare, externe Integrationen, Mehrsprachigkeit oder ein Blog.
2. Mehrere Varianten für die Hero-Sektion
Nach dem Onboarding beginnt die eigentliche Designphase. Dabei starten wir nicht direkt mit der vollständigen Website, sondern zunächst mit der Hero-Sektion der Startseite.
Die Hero-Sektion ist der erste Bereich, den Besucher beim Aufrufen der Website sehen. Sie entscheidet innerhalb weniger Sekunden darüber, welchen Eindruck das Unternehmen vermittelt und ob sich ein Nutzer weiter mit dem Angebot beschäftigt.
Deshalb entwickeln wir in der Regel zwischen zwei und fünf unterschiedliche Varianten für diesen Bereich. Je nach Projekt können es auch mehr Varianten sein.
Dabei testen wir unterschiedliche Ansätze:
- helle und dunkle Designs
- verschiedene Schriftarten
- unterschiedliche Bildwelten
- individuelle Grafiken und visuelle Elemente
- Varianten mit oder ohne Farbverläufe
- verschiedene Anordnungen von Texten und Call-to-Actions
- unterschiedliche Formen und wiederkehrende Designelemente
Der Kunde erhält dadurch nicht nur eine einzige Designrichtung, sondern eine echte Auswahl. Gleichzeitig können wir anhand des Feedbacks sehr genau erkennen, welche Gestaltungselemente zur Marke und zur gewünschten Außenwirkung passen.
Die ausgewählte Hero-Sektion gibt anschließend die visuelle Richtung für die gesamte Website vor. Farben, Formen, Linien, Grafiken und andere Elemente werden im weiteren Design wieder aufgegriffen. Dadurch entsteht ein einheitlicher und hochwertiger Markenauftritt.
3. Individuelles Design der Startseite
Nachdem die Designrichtung festgelegt wurde, entsteht die vollständige Startseite als individuelles Screendesign in Figma.
Die Startseite soll nicht nur optisch überzeugen. Sie muss Besucher strukturiert durch das Angebot führen, Vertrauen aufbauen und sie zu einer konkreten Handlung bewegen. Deshalb werden Design, Storytelling und Conversion-Strategie miteinander verbunden.
Dabei achten wir unter anderem auf:
- eine klare und verständliche Navigation
- eine überzeugende Darstellung des Angebots
- einen logischen Aufbau der einzelnen Sektionen
- strategisch platzierte Call-to-Actions
- eine einheitliche Markenidentität
- Vertrauenselemente wie Referenzen und Kundenstimmen
- eine verständliche Nutzerführung
- ein grundlegendes Animationskonzept
Bereits im Figma-Design wird festgelegt, welche Elemente später animiert werden und wie sich die Website beim Scrollen oder bei Interaktionen verhalten soll. So sind Animationen kein nachträglicher Zusatz, sondern ein fester Bestandteil des Gesamtkonzepts.
4. Gestaltung der Unterseiten
Sobald die Startseite abgestimmt ist, werden die benötigten Unterseiten gestaltet. Dazu können beispielsweise Leistungsseiten, Über-uns-Seiten, Referenzen, Kontaktseiten, Landingpages oder CMS-basierte Bereiche gehören.
Die Unterseiten orientieren sich visuell an der Startseite, erhalten aber jeweils einen eigenen Aufbau passend zu ihrem Zweck. Eine Leistungsseite benötigt beispielsweise eine andere Nutzerführung als eine Karriereseite oder eine Case Study.
Der größte Teil des Kundenfeedbacks findet bewusst während der Designphase statt. In dieser Phase können Inhalte, Strukturen und visuelle Entscheidungen schnell angepasst werden.
Erst wenn die Designs freigegeben wurden, beginnt die technische Entwicklung. Dadurch vermeiden wir aufwendige grundlegende Änderungen während der Umsetzung und sorgen für einen planbaren Projektablauf.
5. Pixelgenaue Entwicklung in Webflow
Nach Abschluss der Designphase wird die Website in Webflow entwickelt. Dabei wird das freigegebene Figma-Design möglichst pixelgenau übertragen und für sämtliche relevanten Bildschirmgrößen optimiert.
Die Entwicklung umfasst unter anderem:
- responsives Design für Desktop, Tablet und Smartphone
- eine saubere Struktur nach dem Client-First-System
- individuelle Animationen und Interaktionen
- technisch saubere Überschriften- und Seitenstrukturen
- grundlegende OnPage-SEO-Optimierungen
- verständliche und suchmaschinenfreundliche URLs
- Einrichtung von CMS-Templates
- Integration von Analyse- und Tracking-Tools
- Einbindung benötigter Formulare und Schnittstellen
- optionale Mehrsprachigkeit, beispielsweise mit Weglot
Die mobile Darstellung wird dabei nicht einfach verkleinert. Inhalte, Abstände, Schriftgrößen und Elemente werden für kleinere Bildschirme individuell angepasst.
Je nach Zielgruppe kann zusätzlich bereits in Figma eine eigene mobile Designversion erstellt werden. Bei B2B-Websites wird anhand der vorhandenen Nutzerdaten entschieden, wie umfangreich die mobile Konzeption ausfallen sollte.
Testing, Performance-Optimierung und Launch
Vor dem Launch wird die Website umfassend getestet. Dabei prüfen wir die Darstellung und Funktionalität auf verschiedenen Geräten, Bildschirmgrößen und Browsern.
Gerade Browser wie Safari können Inhalte teilweise anders darstellen als Chrome oder Firefox. Deshalb ist ein geräte- und browserübergreifender Test ein fester Bestandteil des Prozesses.
Zusätzlich wird die Performance der Website optimiert. Dazu gehören unter anderem:
- Komprimierung von Bildern und Medien
- Optimierung der Ladezeiten
- Überprüfung der Core Web Vitals
- Reduzierung unnötiger Skripte
- Kontrolle von Animationen und Interaktionen
- Prüfung sämtlicher Links und Formulare
Beim Launch übernehmen wir außerdem den vollständigen Domain-Prozess. Dazu zählen das Verbinden der Domain, die technischen DNS-Einstellungen und die Einrichtung notwendiger 301-Weiterleitungen. Besonders bei einem Website-Relaunch sind korrekte Weiterleitungen wichtig, damit bestehende Rankings und alte URLs nicht verloren gehen.
Schulung zur eigenständigen Contentpflege
Nach dem Launch erhält der Kunde eine Schulung zur Pflege der Website in Webflow. Texte, Bilder, Blogbeiträge, Referenzen und andere CMS-Inhalte können dadurch zukünftig selbstständig aktualisiert werden.
Das Unternehmen bleibt nach dem Projekt unabhängig und muss nicht wegen jeder kleinen Änderung einen Entwickler beauftragen. Gleichzeitig kann die Website jederzeit technisch oder inhaltlich weiterentwickelt werden.
Fazit: Ein klarer Prozess sorgt für bessere Ergebnisse
Ein professioneller Website-Prozess verbindet strategische Vorbereitung, individuelles Design und eine saubere technische Umsetzung.
Besonders wichtig ist die klare Trennung zwischen Design und Entwicklung. Entscheidungen über Aufbau, Farben, Inhalte und visuelle Elemente werden zunächst in Figma getroffen. Erst nach der Freigabe wird die Website in Webflow umgesetzt.
Dadurch entsteht eine Website, die nicht nur hochwertig aussieht, sondern auch verständlich aufgebaut, technisch performant und auf die Ziele des Unternehmens ausgerichtet ist.
FAQ zum Website-Prozess
1. Wie lange dauert die Erstellung einer professionellen Website?
Die Dauer hängt vom Umfang und von den benötigten Funktionen ab. Kleinere Websites können innerhalb weniger Wochen entstehen. Größere Projekte mit vielen Unterseiten, individuellen Funktionen oder mehreren Sprachen benötigen entsprechend mehr Zeit.
2. Warum wird das Design zuerst in Figma erstellt?
In Figma können Design, Inhalte und Seitenstruktur schnell abgestimmt werden, bevor die technische Entwicklung beginnt. Änderungen sind dort deutlich effizienter möglich als an einer bereits entwickelten Website.
3. Warum ist die Hero-Sektion so wichtig?
Die Hero-Sektion ist der erste sichtbare Bereich einer Website. Sie prägt den ersten Eindruck, vermittelt das Angebot und entscheidet häufig darüber, ob ein Besucher weiterscrollt oder die Seite wieder verlässt.
4. Werden Templates für das Webdesign verwendet?
Nein. Das Design wird individuell auf das Unternehmen, die Marke, die Zielgruppe und die Ziele der Website zugeschnitten. Inspirationen dienen lediglich als Orientierung für die gewünschte Richtung.
5. Ist die fertige Website für Smartphones optimiert?
Ja. Die Website wird responsiv entwickelt und für Desktop, Tablet und Smartphone optimiert. Je nach Projekt kann zusätzlich ein individuelles mobiles Screendesign in Figma erstellt werden.
6. Werden SEO und Tracking ebenfalls berücksichtigt?
Grundlegende OnPage-SEO-Maßnahmen, suchmaschinenfreundliche URLs und technische Seitenstrukturen werden während der Entwicklung berücksichtigt. Auf Wunsch können außerdem Tracking-Systeme wie Google Analytics, Google Tag Manager oder weitere Tools integriert werden.
7. Können Inhalte nach dem Launch selbst bearbeitet werden?
Ja. Nach dem Launch erfolgt eine Webflow-Schulung, sodass Texte, Bilder, Blogbeiträge, Referenzen und andere Inhalte selbstständig gepflegt werden können.
.webp)
