*Hinweis: Dieser Beitrag enthält Affiliate-Links. Wenn du auf einen Link klickst und etwas kaufst, erhalte ich eine kleine Provision. Für dich bleibt der Preis gleich.
Du willst dir eine Website erstellen lassen und fragst dich, wie so ein Projekt abläuft?
Genau an dieser Stelle entsteht oft Unsicherheit. Wie viel Zeit muss ich investieren? Was muss ich vorbereiten? Und wer behält den Überblick?
Deshalb zeige ich dir heute meinen Webdesign Workflow. Schritt für Schritt nehme ich dich durch meinen Webdesign Prozess mit und zeige dir, wie aus einer Idee eine klare, strukturierte und professionelle Website entsteht.
1. Projektstart: So beginnt mein Webdesign Workflow
Bevor ein Projekt offiziell startet, gibt es ein Kennenlerngespräch. Wir klären Ziele, Umfang und Rahmenbedingungen. Wenn alles passt, erhältst du ein Angebot, unterschreibst den Webdesign-Vertrag und leistest die Anzahlung. Danach legen wir einen festen Projektstart fest.
Projektorganisation in Asana
Für die Projektorganisation arbeite ich mit dem Tool Asana. Zum Start erhältst du Zugriff auf dein persönliches Projektboard. Dort findest du alle Aufgaben, Deadlines und nächsten Schritte. Du siehst jederzeit, wo wir stehen und was als Nächstes ansteht.
Strategie-Call
Im nächsten Schritt besprechen wir in einem Strategie-Call die konkreten Ziele und die Struktur deiner Website.
- Welche Seiten brauchst du wirklich?
- Welche Inhalte werden gebraucht?
- Welches Ziel soll im Fokus stehen?
- Wer ist deine Zielgruppe?
Hier entsteht der Plan, auf dem alles Weitere aufbaut.
Die "Content First"-Methode
Ich arbeite nach der „Content first“-Methode. Das bedeutet: Ich beginne erst mit dem Design, wenn Texte, Branding, Logo und Bilder vorliegen.
Zwischen Kennenlerngespräch und Projektstart liegen deshalb meist etwa vier Wochen. In dieser Zeit werden alle Inhalte erstellt. Für die Texte bekommst du von mir Textleitfäden oder wir arbeiten mit professionellen Texter:innen zusammen.
Erst wenn Inhalte und Struktur stehen, starte ich mit der Gestaltung.
2. Branding und Design-Richtung
Bevor ich mit dem eigentlichen Design starte, klären wir die visuelle Basis. Ohne sauberes Branding entsteht kein stimmiger Gesamtauftritt. Das ist der nächste Schritt in meinem Webdesign Workflow.
Das Branding
Manche Kund:innen kommen mit einem fertigen Branding. Andere haben nur ein Logo oder ein Farbkonzept, das noch nicht ganz rund ist. Wieder andere starten komplett ohne Branding.
Wer noch kein Branding hat, kann mein Branding-Paket dazubuchen. In diesem Fall entwickle ich eine klare Farbwelt, definiere passende Schriftarten und wähle Bilder aus oder bearbeite bestehende Fotos so, dass ein einheitlicher Look entsteht.
Beim Branding achte ich auf mehrere Punkte:
- Farbkontraste: Sind Texte gut lesbar? Funktionieren die Farben auf hellen und dunklen Hintergründen? Reicht der Kontrast der Farben für eine barrierearme Darstellung?
- Anzahl der Farben: Zu viele Farben wirken schnell unruhig. Ich reduziere auf eine klare Hauptfarbe, ergänzende Akzentfarben und saubere Neutralfarben.
- Gesamtwirkung: Passt die Farbwelt zur Zielgruppe und zur Positionierung? Wirkt sie professionell oder eher beliebig?
- Schriften und DSGVO: Schriftarten müssen technisch sauber in eine Website eingebunden werden. Am einfachsten funktioniert das mit Google Fonts. Google Fonts ist ein kostenloses Verzeichnis für frei nutzbare Schriftarten.
Moodboards
Sobald die Grundlagen stehen, erstelle ich Moodboards.
Darauf sammle ich:
-
die definierte Farbpalette
-
die ausgewählten Schriftarten
-
Bildstil und Fotos
Falls noch nicht genug Bildmaterial vorhanden ist, recherchiere ich passende Stockfotos und integriere sie auf dem Board. So lässt sich prüfen, ob Farben, Typografie und Bildwelt harmonieren.
Inspirations-Websites
Ich bitte meine Kund:innen außerdem um Beispiele von Websites, die ihnen gefallen. Manche schicken Links, andere erstellen ein Pinterest-Board.
Dabei geht es vor allem um den visuellen Eindruck: Stil, Klarheit, Stimmung. Nicht darum, Inhalte zu kopieren.
Welche Stimmung spricht dich an?
Magst du es eher minimalistisch oder lebendig?
Dieser Schritt ist wichtig, um ein gemeinsames Verständnis für Stil zu entwickeln. Design ist zwar strategisch, aber natürlich spielt auch persönlicher Geschmack eine Rolle. Durch die Beispiele sehe ich sehr schnell, welche Richtung sich für dich richtig anfühlt.
Gleichzeitig prüfe ich, ob dieser Stil zur Positionierung, zur Zielgruppe und zum Branding passt. Wenn etwas nicht stimmig ist, spreche ich das offen an und erkläre warum.
Die Inspirationsphase sorgt dafür, dass wir nicht ins Blaue hinein gestalten. Sie gibt Sicherheit auf beiden Seiten. Du weißt, dass ich deinen Geschmack verstehe. Und ich weiß, welche visuelle Richtung wir einschlagen.
3. Die Design-Entwürfe
Erst wenn Inhalte, Branding, Moodboard und Stilrichtung stehen, beginne ich mit dem eigentlichen Design.
Design der Startseite
Ich starte immer mit der Startseite. Sie gibt die visuelle Richtung für alle weiteren Seiten vor.
Der Entwurf entsteht im Grafikprogramm Figma. Zu diesem Zeitpunkt arbeite ich ausschließlich mit finalen Texten, Bildern und der festgelegten Farbwelt.
So entstehen Layout und Abstände nicht auf Basis von Platzhaltern, sondern mit realem Inhalt.
Beim Gestalten achte ich auf:
-
ausreichend Weißraum und klare Abstände
-
eine saubere und ruhige Gesamtwirkung
-
eine klare Hierarchie von Überschriften und Texten
-
regelmäßige Call-to-Action-Bereiche
Design ist kein Dekoelement. Es führt durch die Inhalte und unterstützt das Ziel der Website.
Feedback-Runde
Sobald die Startseite fertig ist, lade ich den Entwurf in den gemeinsamen Drive-Ordner und erstelle ein Video. Darin erkläre ich dir meine Entscheidungen und führe dich durch die Seite.
Anschließend gibt es einen Feedback-Call. Hier klären wir offene Fragen und besprechen Anpassungen.
In der Regel reicht eine Korrekturschleife mit kleineren Änderungen. Wenn noch Feinheiten angepasst werden müssen, ist auch eine zweite Runde möglich. Was nicht funktioniert, sind wöchentliche Komplett-Neuentwürfe. Der Designprozess baut auf den vorherigen strategischen Entscheidungen auf.
Erst wenn die Startseite final freigegeben ist, gestalte ich die Unterseiten. So bleibt der gesamte Auftritt konsistent und durchdacht.
Dieser Schritt im Webdesign Workflow sorgt dafür, dass du nicht ins Ungewisse läufst. Du siehst frühzeitig, wie deine Website aussehen wird, bekommst Raum für Feedback und weißt gleichzeitig, dass der Prozess klar geführt ist.
4. Umsetzung in WordPress
Sobald das Design final freigegeben ist, beginnt die technische Umsetzung in WordPress.
Ich arbeite mit Elementor Pro*. Das Design aus Figma baue ich dort Schritt für Schritt nach. Ohne fertige Templates. Jede Seite entsteht individuell auf Basis des zuvor entwickelten Konzepts.
Technisches Setup
Bevor Inhalte sichtbar werden, richte ich die komplette technische Basis ein.
Dazu gehören:
-
Einrichtung beim Hoster, falls noch nicht vorhanden
-
Anlegen von E-Mail-Adressen
-
Installation und Konfiguration aller notwendigen Plugins
-
SSL-Zertifikat einrichten
-
Bildkomprimierungen
- Branding in WordPress integrieren & Schriften lokal hochladen
Viele dieser Schritte sind für dich unsichtbar, aber für den Erfolg deiner Website wichtig.
SEO und DSGVO
Während ich die Seiten aufbaue, achte ich auf eine saubere Struktur. Überschriftenhierarchien, interne Verlinkungen und Alt-Texte für Bilder werden direkt korrekt umgesetzt. Auch grundlegende SEO-Einstellungen und die Anbindung an die Google Search Console gehören dazu.
Für die mobile Optimierung wird jede Seite auf Laptop, Tablet und Smartphone getestet, damit Inhalte auf allen Geräten klar und gut lesbar sind.
Auch die DSGVO-Basis ist fester Bestandteil meines Webdesign Workflows.
Dazu gehören:
-
datenschutzkonforme Einbindung von Schriften
-
Cookie-Banner-Einrichtung
-
korrekte Einbindung der bereitgestellten Rechtstexte (Impressum & Datenschutzerklärung)
Wenn technisch alles funktioniert, ist die Website bereit für den nächsten Schritt: den Launch.
5. Der Launch
Sobald alle Seiten umgesetzt, getestet und freigegeben sind, geht die Website offiziell online.
Vor dem Launch teste ich noch einmal alle Funktionen: Formulare, Verlinkungen, mobile Darstellung, Ladezeiten. Dann gebe ich die Seite ein letztes Mal für Feedback frei. Letzte Anpassungen werden eingearbeitet, bevor wir zum finalen Schritt übergehen.
Die Website-Übergabe
Für den Launch verabreden wir uns zu einem gemeinsamen Übergabe-Call.
In diesem Termin gehen wir die Website noch einmal zusammen durch. Ich beantworte offene Fragen und stelle sicher, dass technisch alles wie gewünscht funktioniert.
Im Anschluss erhältst du ein schriftliches Übergabeprotokoll. Darin sind die wichtigsten Punkte festgehalten, damit der Projektabschluss für beide Seiten klar dokumentiert ist.
Schulungsvideos & Support
Nach dem Launch erhältst du persönliche Schulungsvideos zu deiner eigenen Website.
Darin erkläre ich dir:
-
das WordPress-Dashboard im Überblick
-
wie du Inhalte in Elementor selbst bearbeiten kannst
-
wo du Texte, Bilder oder Buttons anpasst
Außerdem gibt es 14 Tage Support. In dieser Phase können Fragen geklärt oder kleinere Korrekturen umgesetzt werden.
Wenn du dich langfristig nicht selbst um Updates, Sicherheit und technische Pflege kümmern möchtest, kannst du mich mit der Website-Wartung beauftragen. Viele meiner Kund:innen entscheiden sich dafür, weil sie sich auf andere Dinge konzentrieren wollen.
Mein Ziel ist, dass du dich sicher fühlst. Du sollst deine Website verstehen und nutzen können. Gleichzeitig weißt du, dass du Unterstützung bekommst, wenn du sie brauchst.
Fazit: Ein klarer Webdesign Workflow schafft Sicherheit
Viele schrecken vor einer neuen Website zurück, weil sie den Aufwand fürchten. Technik, Texte, Entscheidungen.
Mein Webdesign Prozess ist genau dafür da. Er nimmt dich Schritt für Schritt mit und gibt dir Orientierung. Du musst kein Technikprofi sein. Du musst nicht wissen, wie eine Seitenstruktur aufgebaut wird oder welche Plugins sinnvoll sind. Dafür bin ich da.
Am Ende steht keine zufällige Website, sondern ein durchdachter Auftritt, der zu dir und deinem Angebot passt.
