BlogbeitragDesign trifft Technik: Website-Redesign mit Figma und WordPress

Kennst du das, wenn du deine eigene Website öffnest und du andauernd denkst, du müsstest endlich etwas ändern, weil du dich nicht so richtig wohl fühlst? Oder du schaust dir andere Designs an und bist ganz euphorisch, weil du auch endlich ein ästhetisches Webdesign für deine eigene Website möchtest? Genauso ging es mir vor einem halben Jahr. Oder beziehungsweise geht es immer noch. Ich stecke mitten im Redesign meiner Website.

Wieso meine Website irgendwie nie richtig fertig wird und warum das auch gut so ist, erfährst du in diesem Blogartikel. Außerdem gebe ich dir konkrete Insights, wie genau ich beim Redesign vorgegangen bin und teile wertvolle Erkenntnisse mit dir. Ich möchte meine Website und meinen Blog persönlicher und authentischer gestalten und dich mehr in meine Überlegungen und strategische Entscheidungen mitnehmen. Dabei soll natürlich aber der technische und fachliche Part trotzdem nicht zu kurz kommen. Das Ergebnis siehst du in diesem Blogpost.

Warum schon wieder was ändern? Die Gründe für mein Website-Redesign

Seit mehr als 3 Jahren bin ich nun selbstständig. Zunächst nebenberuflich und nun im Wandel zur hauptberuflichen Vollselbstständigkeit. Ich habe so viele Veränderungen mitgemacht. Auch eine Schwangerschaft, eine Langzeitreise und generell viel Input von Außen haben auch mich verändert. Und nun kann ich einfach die alten Designs und Muster meiner Website nicht mehr sehen. Ich habe sie damals ganz am Anfang meiner Selbstständigkeit selbst erstellt. Ich bin nun einfach rausgewachsen, wie aus meinen Skinny Jeans früher. Ich hab mich natürlich gefragt, ob das jetzt sein muss. Kann ich mich nicht auf die wichtigen Dinge konzentrieren wie Kundenakquise oder andere organisatorischen Aufgaben? Es gibt so viel zu tun, gerade beim Wechsel in die Vollselbstständigkeit. Vielleicht ist das auch eine Persönlichkeitsfrage, aber für mich hat es einfach nicht mehr gepasst. Und wenn ich eines in den letzten Jahren gelernt habe, dann noch mehr auf mein Gefühl zu hören. Denn nur, wenn alles richtig stimmig ist, kann ich selbst auch dahinter stehen und ICH sein. Und umso mehr freue ich mich nun, dass ich mitten im Prozess stecke und euch davon berichten kann. Denn ja, es ist ein (längerer) Prozess bei mir. Nachdem ich also für mich entschieden hatte, dass es Zeit für Veränderung ist, begann der eigentliche Prozess des Redesigns.

Der Prozess des Redesigns: Warum dauert das denn so lange?

Ich hätte das Redesign meiner Website theoretisch in wenigen Tagen abschließen können – so wie ich es bei meinen Kundenprojekten mache. Doch das eigene Business und die eigene Website landen oft hinten an. Zwischen Kundenprojekten, Familie und Alltag habe ich immer nur dann Zeit gefunden, wenn mal kurz Luft war. Dann habe ich an kleinen Dingen gearbeitet: Schriftarten ausprobiert, Farben überdacht, Abschnitte auf Papier (ja, du liest richtig, dazu gleich mehr) entworfen und die Bildsprache definiert.

Es hat mich oft frustriert, dass der Prozess so lange dauert. Nach über sechs Monaten bin ich nun fast mit der Startseite fertig. Würde ich es jemand anderem so empfehlen? Wohl kaum! Denn der ständige Wechsel zwischen Arbeit am Redesign und anderen Aufgaben kostet viel Energie und führt oft dazu, dass man sich immer wieder neu eindenken muss. Aber wie genau kann man denn nun ein Redesign durchführen?

Jetzt aber Real Talk: Wie genau geht man bei einem Redesign einer Website vor?

Zunächst war es mir persönlich wichtig mein Moodboard zu überarbeiten. Dies erstelle ich auch bei meinen Kundinnen und Kunden, egal wie „groß“ die Website ist oder wie aufwendig das Redesign. Ich empfehle auch dir zumindest die Farben, Schriften, Bildsprache, Icons, Logo etc. zusammenhängend irgendwo festzuhalten. Denn es ist sehr wichtig, dass du konsistent in deiner Gestaltung bleibst und authentisch deinen Stil rüber bringst. Das Moodboard habe ich mit Canva erstellt bzw. überarbeitet, geht natürlich aber auch anders.

Dann habe ich mir grob einen Aufbau auf Papier gezeichnet. Das mache ich manchmal, auch nicht immer. Es hilft mir, erstmal meinen Gedanken freien Lauf zu lassen. Nebenbei suche ich mir Inspiration, vor allem auf Pinterest oder in anderen Designs. Wichtig ist hierbei einerseits nicht den Überblick zu verlieren und zu viele verschiedene Dinge reinbringen zu wollen (Stichwort Konsistenz). Andererseits darfst du natürlich nicht kopieren oder Designs übernehmen, lasse dich einfach inspirieren und finde deinen eigenen Style.

In Figma habe ich dann Abschnitte meiner Website grob visualisiert. Manchmal nur mit grauen Kästchen und Lorem-Ipsum- Text. Manchmal schon konkreter mit richtigem Text oder vergleichbaren Bildern. Außerdem habe ich geschaut, was ich noch wiederverwenden möchte, denn ich wollte nicht alles komplett neu machen. Man könnte auch das ganze Design komplett pixelgenau in Figma erstellen. Figma dient mir als Entwurfstool – das eigentliche Design setze ich dann in WordPress um.

Ein wichtiger Schritt ist die Arbeit in einer Staging-Umgebung. Hier konnte ich das Redesign testen, ohne die Live-Seite zu beeinträchtigen. Für WordPress gibt es nützliche Plugins, die eine Staging-Umgebung schnell einrichten. Bei meinem Projekt habe ich außerdem Divi verwendet und konnte so auch Abschnitte in der Cloud speichern und auf der Live-Seite hochladen. Einige Abschnitte werde ich auch auf anderen Seiten wiederverwenden und kann mir daher einiges an Arbeit sparen.

Zusammenfassung zum Website Redesign

1. Moodboard erstellen: Farben, Schriften, Bildsprache, Icons und Logo visuell festhalten, um konsistent und authentisch zu bleiben (z. B. in Canva).
2. Inspiration sammeln: Auf Plattformen wie Pinterest und in anderen Designs nach Inspiration suchen, ohne zu kopieren, und dabei den eigenen Stil finden.
3. Struktur skizzieren: Den groben Aufbau der Website auf Papier festhalten, um Gedanken freien Lauf zu lassen.
4. Abschnitte in Figma visualisieren: Erste Entwürfe in Figma erstellen, mit grauen Kästchen und Dummy-Text oder schon konkreteren Inhalten.
5. Staging-Umgebung einrichten: In WordPress mithilfe von Plugins eine Staging-Umgebung aufsetzen, um Änderungen zu testen, ohne die Live-Seite zu beeinträchtigen.
6. Design umsetzen: Mit Tools wie Divi oder anderen Baukästen Abschnitte finalisieren und auf der Live-Seite umsetzen.
7. Wiederverwendung planen: Abschnitte, die auf anderen Seiten verwendet werden sollen, identifizieren und in der Cloud speichern, um Zeit zu sparen.

Und was jetzt? Wie geht es nach dem Redesign weiter?

Für mich persönlich ist die Reise nie zu Ende – und das ist auch gut so. So wie ich mich als Person weiterentwickle, verändert sich auch meine Sicht auf Design und Ästhetik ständig. Meine Website ist nicht nur mein digitales Aushängeschild, sondern auch Ausdruck meiner Expertise und Persönlichkeit. Darum werde ich auch in Zukunft immer wieder Anpassungen vornehmen, um auf dem neuesten Stand zu bleiben und meine Entwicklung sichtbar zu machen.

Ein Redesign ist für mich nicht nur eine Notwendigkeit, sondern eine spannende Reise. Es fordert mich kreativ und technisch heraus und hilft mir, meine Fähigkeiten weiterzuentwickeln. Genau das macht mir auch Freude: der Prozess, das Lernen, das ständige Optimieren. Und vielleicht geht es dir ja ähnlich?

Hast du schon einmal ein Redesign durchgeführt? Welche Herausforderungen hast du dabei erlebt? Oder bist du noch am Überlegen, wie du ein Redesign durchführen kannst? Vielleicht brauchst du Unterstützung, um deine Vision zum Leben zu erwecken?

Lass uns darüber sprechen! Hinterlasse mir einen Kommentar oder schreibe mir direkt, wenn du Fragen hast oder Hilfe bei deinem eigenen Redesign brauchst. Gemeinsam finden wir den besten Weg, deine Website auf den Punkt zu bringen – authentisch, professionell, kreativ und ganz nach deinen Wünschen.