Mein Webdesign Prozess: Wie erstelle ich effektive Webseiten für meine Kund*innen?

Was passiert vor dem Projektstart?

1. Kennenlernen & „Discovery Session“

Falls potenzielle Kundinnen oder Kunden an einer Zusammenarbeit mit mir interessiert sind, lernen wir uns in einem ersten lockeren Gespräch gegenseitig kennen. Wenn dann grundsätzliches Interesse für eine Zusammenarbeit besteht, sprechen wir über aktuelle „Pain Points”, konkrete Ziele, wie Erfolg für das Projekt aussieht, sowie über das Budget. Mir ist es grundsätzlich sehr wichtig, nicht zu „verkaufen“, sondern ernsthaft herauszufinden, ob und wie ich mit meinen Leistungen und Skills echte Mehrwerte schaffen kann. Falls ich nicht der Richtige für das Projekt sein sollte, kann ich auf Wunsch andere Expertinnen oder Experten aus meinem Netzwerk weiterempfehlen.

2. Optional: Review & Quick-Wins für aktuelles Projekt/Webseite

Auch wenn ich auf Effizienz und Geschwindigkeit bei meiner Arbeit großen Wert lege, ich bin nicht an einer überhasteten und möglichst „kostenoptimierten“ Webseiten-Entwicklung interessiert. Für mich ist es wichtig, mit der bestmöglichen Arbeit auch den größtmöglichen Mehrwert zu schaffen.

Ich verstehe, dass eine neue Internetpräsenz für ein Unternehmen eine größere Investition in die Zukunft sein kann. Natürlich ist es naheliegend, das Risiko dieser Investition möglichst weit minimieren zu wollen. Aus eigener Erfahrung weiß ich, dass es gerade im Bereich Webdesign sehr viele Angebote auf dem Markt gibt – für die unterschiedlichsten Preise – deren Qualität für Fachfremde teilweise allerdings sehr schwer einzuschätzen ist. Falls Du Dich dafür interessierst, worauf du bei einem Webdesign Angebot achten solltest, findest du in diesem Artikel von mir hilfreiche Infos dazu.

Damit meine Kundinnen und Kunden sich von meinen Leistungen und meiner Arbeit vorab zu überzeugen können, biete ich neben der Skalierung meiner Design-Leistungen unter bestimmten Voraussetzungen auch kleinere Vorab-Projekte an, um beispielsweise kleine Optimierungen & Verbesserungen oder ein beispielhaftes Redesign der Hauptbühne einer Webseite umzusetzen.

3. Angebot

Sobald Ziele und Erwartungen sowie Projekt- und Leistungsumfang genau besprochen sind, lässt sich auch der Preis für ein Projekt relativ gut einschätzen. Erst wenn sämtliche offenen Fragen vorab geklärt sind und der Umfang sowie die Kosten des Projekts genau besprochen wurden, erstelle ich ein konkretes Angebot. Darin sind dann meine Leistungen, sowohl als auch wichtige Projekt-Meilensteine inklusive deren genaue Fristen enthalten.

Wie Läuft die Zusammenarbeit mit mir während einem Projekt ab?

Mir ist es wichtig, möglichst transparent zu arbeiten und Kommunikationswege kurz zu halten. Bei Bedarf richte ich einen Slack-Channel ein und ich bin jederzeit per E-Mail erreichbar. Gerade in der Anfangsphase eines Projekts ist es sinnvoll, etwa eine bis maximal zwei Stunden pro Woche Zeit für die Abstimmung von Arbeitsständen per Video-Konferenz einzuplanen. Im späteren Verlauf des Projekts werden Abstimmungen nur noch bei Bedarf geplant. Ich bin mir bewusst, dass Zeit eine äußerst wertvolle Ressource ist und beanspruche sie während der Zusammenarbeit mit meinen Kundinnen und Kunden nur so viel wie nötig. Auf Wunsch lassen sich natürlich jederzeit weitere zusätzliche Abstimmungen planen.

1. Strategie & Informationsarchitektur

Auf Basis der bereits in der „Discovery Session“ besprochenen Ziele wird die strategische Ausrichtung der Webseite (weiter)entwickelt. Anhand eines Desk Researchs werden Mitbewerberinnen und Mitbewerber analysiert. Mit einer initialen Informationsarchitektur werden dann die Voraussetzungen für sämtliche folgenden Arbeitsschritte geschaffen.

2. Brand-Driven Design & Design Draft

Ich arbeite gerne mit Kundinnen und Kunden zusammen, die sich darüber bewusst sind, wie hochwertiges Design effektiv und nachhaltig eigene Markenbotschaften kommunizieren kann. Idealerweise sind bereits bestimmte Werte definiert, für die ein Unternehmen, beziehungsweise eine Marke steht. Bei Bedarf definiere ich gemeinsam mit meinen Kundinnen und Kunden passende Markenwerte oder entwickle die bestehenden weiter. Diese Markenwerte werden dann von mir in eine Designsprache überführt, die auf dem bereits vorhandenen Corporate Design aufbaut. Zu einer Designsprache gehören der Umgang mit Farben, Typografie, Formen, Icons & Illustrationen, Bildsprache, Tonalität des UX & Copywritings und sogar Animationen & Interaktionen – kurzgesagt alles, was ganzheitlich betrachtet eine „User Experience“ ausmacht. Eine individuelle Designsprache bietet die Chance, neben einer optimierten Usability Emotionen zu wecken und ein digitales Erlebnis zu schaffen, das Besucher*innen begeistert, nachhaltig in Erinnerung bleibt und das Potenzial birgt, sie in überzeugte Kund*innen zu verwandeln.

„Eine individuelle Designsprache bietet die Chance, neben einer optimierten Usability Emotionen zu wecken und ein digitales Erlebnis zu schaffen, das Besucher*innen begeistert, nachhaltig in Erinnerung bleibt und das Potenzial birgt, sie in überzeugte Kund*innen zu verwandeln.“

Die Designsprache wird konkret anhand einer Seite, zum Beispiel der Homepage angewendet und abgestimmt. Das besondere an dieser Vorgehensweise: Ob ein Design später eher konventionell oder innovativ und neuartig ist, entscheide nicht ich als Designer, sondern dies wird aus der Marke, ihren Werten und Kommunikationszielen heraus begründet. Designentscheidungen sind also keine Geschmacksfrage, sondern erfüllen jeweils einen bestimmten Zweck.

3. Konzeption

Sobald die Designsprache definiert ist, werden weitere Unterseiten der Webseite in Form von Wireframes konzipiert. Hierbei arbeite ich bereits falls möglich mit realen Texten, um die Anforderungen an das visuelle Design später so genau wie möglich zu definieren. Wireframes beinhalten keine Gestaltungselemente wie Farben oder Bilder, um pragmatisch und effektiv auf inhaltlicher Basis das Fundament für die spätere visuelle Ausarbeitung zu legen.

4. Visuelles Design

In diesem Arbeitsschritt erstelle ich auf Basis der Wireframes das produktionsfertige Design für sämtliche Unterseiten einer Webseite in Figma. Hierbei werden sämtliche visuelle und ästhetischen Aspekte einer Webseite wie Bilder, Illustrationen oder ggf. auch Animationen im Detail ausgearbeitet.

5. Produktion von Inhalten: Bildmaterial, Fotografie & Illustrationen, Animationen

Je nach Unternehmen, für das ich eine Webseite erstelle, kommt es vor, dass Bildmaterial zunächst noch erstellt oder erworben werden muss. Ich unterstütze meine Kundinnen und Kunden auf Wunsch dabei, hochwertiges Material zu erstellen. Passend zum Projektbudget wird entweder Stock-Material verwendet oder es werden andere Freiberufler*innen wie Illustrator*innen oder Fotograf*innen (aus meinem Netzwerk) beauftragt.

6. UX & Copywriting

Ebenfalls sehr wichtige, aber häufig vernachlässigte Erfolgsfaktoren von Webdesign sind UX & Copywriting. Häufig in einem Atemzug genannt, meinen beide Begriffe unterschiedliche Dinge:

UX-Writing unterstützt die User-Experience und zahlt auf ein positives Nutzererlebnis ein. Es hilft dabei, Inhalte einer Webseite klar, intuitiv verständlich und zugänglich zu machen und ist damit insbesondere dann, wenn es um Conversion-Optimierung geht, unverzichtbar. UX-Writing betrifft eher funktionale Inhalte einer Webseite.

Bei Copywriting geht es um das Schreiben fesselnder und überzeugender Marketingtexte, die sich nicht nur durch eine zur Marke passende Tonalität auszeichnen, sondern auch wichtige Keywords enthalten und für Suchmaschinen optimiert sind.

Ich unterstütze meine Kunden dabei, passende Expertinnen und Experten für die Erstellung der Texte ihrer neuen Webseite zu finden oder, falls bereits Kontakte bestehen, ein gutes Briefing auf Basis der Marken- und Designausrichtung vorzubereiten.

7. Webflow Entwicklung

Sobald das Design einer Webseite abgestimmt und freigegeben ist, startet die Entwicklung in Webflow. Dies ist sowohl für mich, als auch für meine Kundinnen und Kunden ein besonderer Meilenstein, da das Projekt hierbei langsam seine finale Form annimmt und schon relativ bald zum ersten mal erfahren werden kann, wie sich die spätere Webseite genau „anfühlen“ wird. In der Regel setze ich zunächst das Content-Management-System (CMS) auf, sofern benötigt. Danach baue ich das Front-End auf und schließlich optimiere ich die Layouts für sämtliche Breakpoints. Dabei achte ich darauf, dass die Webseite allen gängigen Accessibility-Standards entspricht und bereits möglichst gut für Suchmaschinen optimiert ist, beziehungsweise den gängigen Best Practices folgt.

8. Webflow Schulung & Einpflegen redaktioneller Inhalte

Optional biete ich eine Webflow Schulung an, um meine Kundinnen und Kunden mit dem Backend vertraut zu machen. Das ist insbesondere dann hilfreich, falls die CMS Funktionalität von Webflow benötigt wird. Sobald die Seite ausreichend weit entwickelt wurde, können dann nämlich sämtliche dynamische Inhalte eingepflegt werden. Das können beispielsweise Blog-Artikel oder unterschiedliche Team-Mitglieder einer Team-Seite sein. Bei Bedarf unterstütze ich meine Kundinnen oder Kunden natürlich gerne bei diesem Arbeitsschritt.

9. Testen, Fehlerbehebung & Dienste von Drittanbietern

Sobald die Webseite fertig entwickelt ist und sämtliche Inhalte eingepflegt wurden, werden alle Unterseiten auf unterschiedlichen Browsern und Devices getestet, um mögliche Darstellungsfehler zu identifizieren und noch vor dem Launch zu beheben. Falls Dienste von Drittanbietern implementiert werden sollen, zum Beispiel eine Cookie- oder Lösung zur Analyse von Besucherverhalten, wird dies ebenfalls von mir umgesetzt.

10. Launch der Webseite 🚀

Mit dem pünktlichen Launch der Webseite ist das Projekt zunächst abgeschlossen. Auf Wunsch übernehme ich eine Gewährleistung dafür, dass die Seite bis zu drei Monate nach dem Launch einwandfrei funktioniert. In der Regel ist Webflow absolut wartungsarm und es ist mit großer Sicherheit davon auszugehen, dass eine Webseite langfristig ohne Wartung & Fehler betrieben werden kann. Kurz nach dem Launch können allerdings kleinere Fehler auftreten oder auffallen, die ich dann gerne kurzfristig und unbürokratisch löse.

Wie geht es nach dem Projektabschluss weiter?

Wenn meine Kundinnen und Kunden glücklich mit dem Ergebnis sind und keine weiteren Leistungen von mir benötigen, freut mich das natürlich sehr. Einige meiner Kundinnen und Kunden sind aber auch daran interessiert, ihre Internetpräsenz nach dem Launch sukzessive weiterzuentwickeln. Dabei kann es sich zum einen um neue Inhalte wie Module oder zusätzliche Unterseiten handeln oder aber auch und bestimmte CMS Funktionen, die die Seite um dynamische Inhalte wie einen Blog erweitern. Außerdem lässt sich eine Webseite natürlich auch unter realen Bedingungen mit echtem Feedback von Besucher*innen kontinuierlich weiter optimieren.

1. Optional: Strategie & Planung der Weiterentwicklung

Gemeinsam wird eine Roadmap festgelegt und ein Ticket-Board inklusive Aufwandsschätzungen und Priorisierungen aufgesetzt. Dies kann natürlich stetig gemeinsam abgestimmt, aktualisiert und erweitert werden.

2. Weiterentwicklung der Webseite

Die vorab definierten Tickets werden sukzessive nach Priorisierung und Rücksprache abgearbeitet. Neue Inhalte einer Webseite können zum Beispiel dynamische Inhalte wie ein Blog oder die Erweiterung oder Verbesserung des bestehenden Leistungsangebots oder neue Landing- oder Kampagnenseiten sein.

Ist Dir aufgefallen, dass in meinem Prozess noch etwas Wichtiges fehlt oder vermisst Du bestimmte Infos? Folge mir gern auf Instagram, LinkedIn oder Dribbble – ich freue mich schon darauf, mich konstruktiv mit Dir auszutauschen. 🤙