Viele Gründer und junge Unternehmen erstellen Ihre Websites bekanntlich selbst und nutzen eines der Website-Building Tools, die es mittlerweile wie Sand am Meer gibt. Doch wie läuft die Erstellung einer richtig beeindruckenden Website ab? Während in vielen Unternehmen wild drauf los designed wird, geht ein ausgefeilter Prozess deutlich tiefer.
Bekanntlich führen viele Wege nach Rom, daher ist unser 7 Schritte-Prozess auch definitiv nicht in Stein gemeißelt. Wichtig ist, flexibel auf den aktuellen Stand des eigenen Businesses einzugehen und dort zu starten, wo es sich richtig anfühlt.
Damit die nächste Unternehmenswebsite ein voller Erfolg wird, haben wir die wichtigsten Schritte für die Erstellung in einem Guide zusammengefasst:
Schritt 1: Sitemap und Kommunikation
In der ersten Phase wird definiert, wie und was kommuniziert wird. Wie erfolgt die Kundenansprache? Wer sind eigentlich die eigenen Kunden? Welche Positionierung nimmt das eigene Business ein? Welche Pages soll es geben und warum?
Es empfiehlt sich, die eigene Website nicht um die eigenen Vorstellungen zu schmieden, sondern genau auf die Customer Journey potenzieller Kunden anzupassen. So ist ein weit verbreiteter Trugschluss bspw., dass User häufig über die Startseite auf die Website kommen und von dort ihren Besuch starten. Viel wahrscheinlicher ist allerdings, dass ein gut formulierter Blogartikel gefunden wird und die Customer Journey auf der Website über den Unternehmensblog erfolgt.
Die Positionierung spielt bei der Kommunikation eine große (oder sogar die größte) Rolle. Es sollten Vorteile oder Pain-Points idealer Kunden direkt angesprochen werden. So erhöht sich das Vertrauen in ein Business und Kunden fühlen sich da abgeholt, wo sie zur Zeit stehen.
Aus Positionierung und Customer Journey abgeleitet, lässt sich die Sitemap einer Website definieren. Einfach gesagt ist die Sitemap eine Übersicht aller Unterseiten und des groben Contents, der auf diesen Seiten gezeigt werden soll.
Schritt 2: Wireframing
Basierend auf der festgelegten Sitemap und der Positionierung aus Schritt 1, wird ein Wireframing erstellt. Basically ein Drahtgerüst der Website. Natürlich aber digital. Das Wireframing dient dazu, die Layouts der Website zu visualisieren und anzuzeigen, an welchen Stellen, Bilder / Illustrationen / Grafiken und an welchen Stellen Texte benötigt werden. Das Wireframing definiert noch detailgetreuer, wie User durch die Website geleitet werden und ist somit essentiell für die UX (User-Experience).
Schritt 3: Copywriting
Es wird viel diskutiert, ob erst das Wireframing oder erst die Copy der Website erstellt werden sollte. Wir supporten das Statement, dass die Website (mit visuellen Inhalten), die Copy unterstützen sollte. Allerdings beobachten wir bei den meisten Projekten, die wir betreuen, dass ein grobes Gerüst der Website ungemein hilft, die Copy besser auf den Punkt zu bringen. Ist am Ende vielleicht ein Henne-Ei-Problem. Am besten startet man mit dem Schritt, der für das eigene Team zur Zeit leichter zu bewerkstelligen ist und passt den anderen Schritt auf die Inhalte an.
Schritt 4: Webdesign
Erst in Schritt 4 geht es wirklich um das finale Design der Website. Meistens in Figma wird das mit Copy gefüllte Wireframing nun “in Farbe gegossen”. Basierend auf der Corporate Identity des Unternehmens (Farben, Schriftarten, etc.) entsteht das finale Design. Die Komplexität des Layouts ist dabei immer an die Enduser anzupassen. Ist die eigene Zielgruppe bspw. eher älter, empfehlen sich klassischere Layouts, die mit wenigen Animationen auskommen. Bei einer jüngeren Zielgruppe können Layouts gerne auch mal aus der Reihe tanzen, solange sie noch funktional bleiben. Nach dieser Phase steht das finale Design der Website.
Schritt 5: Webflow Development
Steht das Design und ist die Wahl des CMS auf Webflow gefallen, wird das statische Design nun zur funktionalen Website. Mit Webflow lassen sich Layouts aus Figma schnell und ohne Designverluste ins Web übertragen.
Damit die Website skalierbar bleibt, empfiehlt sich ein CSS-Naming-System wie bspw. Clients First von Finsweet. Hierdurch bleibt der Code übersichtlich, klein und auch nach längeren Development-Pausen bleiben alle Klassen verständlich. Der Name kommt hierbei aus der einfachen Benennung von Klassen, die darauf ausgerichtet sind, auch von ungeübten Usern verstanden zu werden.
Steht das finale Layout im Web und alle Stylings sind gesetzt, ist es Zeit für Animationen. In Webflow lassen sich sowohl CSS-Animationen (meistens für Hover als Buttons und ähnliche Aspekte verwendet), als auch komplexe iX2 Animationen erstellen. Durch die nahtlose Integration in den Webflow Designer entstehen so dynamische Websites. Auch hier ist es immer wichtig, das Niveau der Animationen auf die Endnutzer auszurichten. Zudem sind weniger Animationen immer zu bevorzugen, da diese zu verlangsamten Ladezeiten der Website führen können.
Als letzter Schritt im Webflow Development folgt dann die Responsiveness. Die Website ist an dieser Stelle fertig für Desktop-Bildschirme, allerdings besuchen die meisten User heutzutage Websites nicht mehr mit dem Computer, sondern mit mobilen Geräten. Um diese User nicht direkt wieder zu verlieren, lassen sich Websites mit Webflow auf über 1.000 Bildschirmgrößen optimieren. Hierzu werden sogenannte Breakpoints verwendet, die individuelle Styles für Desktops, Tablets und Smartphones zulassen.
Schritt 6: Launch und Optimierung
In der vorletzten Phase wird die Website einem finalen Feinschliff unterzogen. Wichtig sind hier insbesondere SEO und Pagespeed-Aspekte. Damit die Website nach dem Launch rennt wie eine 1 und auch von Google geliebt wird, empfehlen sich folgende Schritte:
- Animationen aufräumen
- CSS-Klassen aufräumen
- Favicon und Webclip zu setzen
- Allen Bildern Alt-Tags vergeben
- Alle Bilder auf webp komprimieren
- Subdomain Indexing zu deaktivieren
- Die Sitemap automatisch erstellen zu lassen
- Meta Title und Descriptions für alle Seiten zu setzen
- HTML, CSS und JS in den Site-Settings zu komprimieren
Wenn du im Detail wissen willst, wie du die einzelnen Schritte umsetzt, findest du hier eine detaillierte Übersicht: Wie du deine Webflow Website vor dem Launch optimierst.
Nach der finalen Optimierung der Website folgt dann nur noch der Launch. Verbinde hierzu deine Custom Domain mit deiner Website in den Site Settings (Ein Hosting Plan ist hierfür erforderlich) und drücke auf “Publish”. Ein best-practice ist, nach dem Launch die Website auf diversen Geräten und Browsern nochmal zu testen. So erkennst du übersehene Bugs schnell und kannst diese einfach ausbessern.
Schritt 7: Webflow Enablement
Nach dem Launch enden die meisten Projekte und die Website liegt danach etwas brach. Damit das nicht passiert, schließen Projekte bei uns immer mit einer Enablement Phase. In dieser Phase machen wir Teams und Solopreneure fit mit Webflow. In Videocalls und dedizierten Loom-Tutorials wird das Wissen vermittelt, das wirklich notwendig ist. Nach der Enablement-Phase, können Teams die Website selber verwalten und insbesondere:
- Blog Posts veröffentlichen, editieren und löschen
- den Webflow Editor verwenden
- Texte korrigieren und ändern
- Bilder austauschen
- Links verändern
So sorgen wir dafür, dass Website aktuell gehalten werden und für unsere Kunden bedeutet das, für Änderungen nicht immer zum Hörer zu greifen, um uns anzurufen. Ein Win-Win für beide Seiten.