Webdesign-Projekte können sich oft unnötig in die Länge ziehen, vor allem wenn die Prozesse nicht optimal organisiert sind. In diesem Blogbeitrag möchte ich Dir meinen Workflow vorstellen, mit dem ich es schaffe, 70 % meiner Kundenprojekte innerhalb von maximal drei Wochen abzuschließen. Bei den anderen 30 % verzögert sich der Abschluss, weil mehrere Personen im Entscheidungsprozess involviert sind oder das Feedback vom Kunde zu lange dauert.
Mein Prozess basiert darauf, dass ich Figma als Prototyping- und Designtool verwende und Webflow für die Entwicklung. Natürlich kannst Du auch andere Programme nutzen, aber ich persönlich finde die Kombination aus Figma und Webflow besonders effektiv. Vor allem, wenn es darum geht, nachhaltig erfolgreiche Webprojekte zu realisieren.
1. Onboarding
Der erste Schritt in meinem Webdesign-Prozess ist das Onboarding, das eine klare Grundlage für das gesamte Projekt legt. Hierbei nutze ich die Informationen aus den Verkaufsgesprächen, wie z. B. Details zur Branche, der bestehenden Website, der Corporate Identity (CI), relevanter Konkurrenz und den Zielen der neuen Website. Diese Daten helfen dabei, die Ausrichtung des Projekts genau zu definieren.
Um den Kunden von Anfang an gut abzuholen, erkläre ich ihm in einem Onboarding-Call genau, was ihn erwartet und wie der Prozess abläuft. Transparente Kommunikation ist entscheidend, damit der Kunde stets weiß, in welchem Schritt wir uns befinden und was als Nächstes passiert.
Das Onboarding besteht aus zwei zentralen Punkten, die bereits ausgearbeitet sein müssen, bevor der Call stattfindet: Moodboard und Struktur. Für beide Elemente erstelle ich jeweils eine eigene Seite in Figma, die ich dem Kunden während des Calls präsentiere. Das Moodboard vermittelt die visuelle Richtung, während die Struktur eine klare Übersicht über den Seitenaufbau und die Inhalte der neuen Website bietet. Erst wenn beide Aspekte definiert sind, vereinbaren wir den Onboarding-Call, um den Kunden durch den weiteren Prozess zu führen.
1.1 Moodboard
Ein Moodboard im Webdesign dient als visuelle Orientierungshilfe und gibt einen ersten Eindruck davon, wie die zukünftige Website aussehen könnte. Als Quellen können Plattformen wie Dribbble, Google, die Webseiten der Konkurrenz und Arbeiten von Designern wie Pawel Gola verwendet werden. Dabei ist es wichtig, stets aus der Perspektive des Kunden und der Zielgruppe zu denken. Das Design sollte nicht zu ausgefallen werden, es sei denn, der Kunde wünscht es explizit.
1.2 Struktur der Website
Im nächsten Schritt wird der Aufbau der Website skizziert, um eine klare Übersicht über den Seitenfluss zu schaffen. Hierfür verwende ich das Relume Figma File, indem ich einzelne Sektionen als Wireframes einfüge. Anstatt eine separate Sitemap zu erstellen, wird die Struktur direkt durch Pfeile zwischen den Seiten und Wireframes dargestellt, sodass der Zusammenhang und die Navigation klar ersichtlich sind. Diese visuelle Darstellung macht es dem Kunden einfach, die Benutzerführung und das Ziel der Website – z. B. die Erhöhung der Conversionrate – zu verstehen.
Tipp: Mehrere Call-to-Actions (CtA) einbauen!
2. Webdesign in Figma
Beim Webdesign in Figma wird das Design der Website auf Basis der zuvor entwickelten Struktur und des Moodboards detailliert ausgearbeitet. Zuerst wird die Home-Seite erstellt, da sie als Hauptseite den Stil und die visuelle Richtung der gesamten Website vorgibt. Sobald die Home-Seite fertig ist, wird sie an den Kunden geschickt, um Feedback einzuholen. Nach der Freigabe der Home-Seite werden die restlichen Seiten für die Desktop-Version entwickelt.
Je nach Zielgruppe ist es nicht immer nötig, sofort eine mobile Version zu entwickeln. Diese kann später nachgezogen werden. Eine mobile Version in Figma zu erstellen und zu entwickeln, ist aufwendiger. Wenn es nicht ausdrücklich gewünscht ist oder die meisten Nutzer über das Smartphone kommen, kannst du diesen Schritt überspringen oder maximal ein mobiles Design für die Startseite entwerfen.
Alle Revisionen sollten in diesem Schritt eingearbeitet werden, bevor es in die Entwicklung geht. Erst wenn das komplette Design final vom Kunden abgenommen ist, wird mit der Entwicklung begonnen. Das sorgt dafür, dass spätere Änderungen vermieden werden und spart uns sowohl Zeit als auch unnötige Kopfschmerzen während der Entwicklungsphase.
3. Entwicklung in Webflow
Die Entwicklung ist der einfachste Teil des Prozesses, sofern das Design pixelgenau und sauber umgesetzt wurde. In diesem Schritt achte ich darauf, das Design exakt nach den Vorgaben umzusetzen, um nachträgliche Änderungen zu vermeiden. Der Prozess erfolgt nach dem Prinzip "Desktop First" – das bedeutet, dass zunächst alle Seiten für die Desktop-Version entwickelt werden, bevor die mobile Optimierung erfolgt. Dabei ist es wichtig, dass die mobile Version genauso reibungslos funktioniert wie die Desktop-Version, um ein nahtloses Nutzererlebnis zu gewährleisten.
Sobald die Entwicklung abgeschlossen ist, wird die Website auf einer Staging-Domain bereitgestellt, damit der Kunde die fertige Seite prüfen kann. Dies geschieht einmal nach Fertigstellung der Home (Desktop) und der kompletten Fertigstellung. Bei Freigabe erfolgt die Finalisierung, bei der wichtige Schritte wie SEO-Optimierung und technisches Setup durchgeführt werden. Um den Kunden bei der Nutzung der Website zu unterstützen, wird außerdem eine kleine Schulung in Form eines Loom-Videos bereitgestellt, das die wichtigsten Funktionen und Anpassungen erklärt.
Add-On: Copywriting / Content
Nach über 50 Projekten habe ich festgestellt, dass es in diesem Schritt keinen festen Prozess gibt, da vieles vom Kunden und seiner Arbeitsweise abhängt. Wenn der Kunde bereits Inhalte vorbereitet hat, lasse ich sie mir vorab zuschicken. Falls dies nicht der Fall ist, erstelle ich die Inhalte nach dem Onboarding in enger Abstimmung mit ihm. Manche Kunden benötigen jedoch zuerst das Design, um ihre Inhalte zu finalisieren – in diesem Fall wird der Content während des Webdesign-Prozesses ergänzt.
Eine alternative Vorgehensweise besteht darin, dem Kunden einen Fragebogen zuzusenden, um die benötigten Inhalte strukturiert zu sammeln, oder die Inhalte selbst zu erstellen, falls gewünscht. Im Optimalfall liegen Bilder als auch Texte vor Beginn der Entwicklung vor, um Verzögerungen zu vermeiden und die Website nahtlos umsetzen zu können.
Fazit
Im Fazit zeigt sich, dass der Erfolg des Projekts in der Realität stark vom Kunden abhängt. Das Ziel bleibt jedoch, den Prozess mit möglichst wenigen Revisionen und minimalen Meetings effizient zu gestalten. Es ist wichtig, selbstbewusst in der eigenen Expertise und den getroffenen Entscheidungen zu sein, um den Kunden klar durch den Prozess zu führen und die besten Ergebnisse zu erzielen. Ein klar strukturierter Ablauf und professionelle Kommunikation helfen dabei, das Projekt reibungslos und erfolgreich abzuschließen.
