Es muss nicht gleich ein kompletter Relaunch sein, manchmal reicht ein Website Refresh, um frischen Wind in Deinen Onlineauftritt zu bringen. Get inspired 🪄
Du kennst das vielleicht: Du hast Deine WordPress Website ganz oder mit etwas Unterstützung selbst erstellt, viel Zeit, Schweiß und Tränen investiert und Dich durch diverse Tutorials und Anleitungen gekämpft. Dann steht sie endlich live und der Stolz ist groß – und dann … bleibt es irgendwie still. Wenig Anfragen. Vielleicht sogar Verwirrung. Und definitiv ein vages Gefühl von „Da geht doch mehr!“
So ähnlich ging es meiner Kundin Heike Loosen, Expertin für geistige Fitness, Gehirn- und Gedächtnistraining. Sie hatte ihre Website mit viel Engagement aufgebaut – zunächst mit der kostenlosen Version von Elementor, später ergänzt durch die Pro Version.
Dabei entstand eine inhaltlich starke Seite, voll mit guten Inhalten, durchdachten Angeboten und echter Expertise. Und trotzdem: Es fühlte sich für sie nicht rund an. Denn im Lauf der Zeit zeigte sich: Es gab Potenzial, die Möglichkeiten von Elementor effizienter zu nutzen und die Gestaltung noch stärker auf ihre Zielgruppe abzustimmen. Der Wunsch nach mehr Klarheit und Struktur wuchs – im Frontend wie im Backend.
Für den Feinschliff hat Heike sich daher gezielt meine Unterstützung geholt – als Website Refresh im Zuge eines VIP Days. Das Endziel: Es sollte wieder mehr Leichtigkeit rein.
Gesagt, getan 😊
Ich habe ihr Elementor Pro optimal eingerichtet, technische Altlasten entfernt und die Nutzer:innenführung optimiert.
Vorher gab es Unordnung im Backend; veraltete Plugins, die dauernd Aufmerksamkeit brauchten; ein ständiges An- und Abschalten von Landingpages – und obendrein ein nerviges Ein- und Ausblenden von Angeboten. Das Ergebnis danach: Die gewünschte Klarheit & Struktur, und endlich Ruhe im System.
Die Ausgangslage
An den Inhalten und dem Branding sollte sich groß nichts ändern; die Texte waren gut und Heike hatte ein professionelles Logo und eine aufmerksamkeitsstarke Farbgebung. Was schon da war, sollte nur besser zur Geltung kommen.
Vorher – Nachher des Website Refresh am Beispiel der Startseite
Manchmal reicht es, mit kleinen Änderungen und Anpassungen, eine gestalterisch inkonsistente und etwas improvisierte Website einheitlicher, klarer und professioneller wirken zu lassen.
Ich zeige Dir am Beispiel der Startseite, wie auch Du mit wenigen Kniffen Deine Website optimieren kannst.
Du siehst immer zuerst die Vorher- und anschließend die Nachhervariante.
Header mit Navigation
Der Header mit dem Menü ist einer der wichtigsten Anker auf einer Website, der Besucher:innen Orientierung bietet und sie auch zu den Angeboten führt. Bei der Vorhervariante mit dem über dem Menü platzierten Logo wird Platz verschenkt und die Social Media Icons führen Interessierte direkt wieder weg von der Website – nicht optimal.
Der letzte Punk eines Menü ist oftmals der aufmerksamkeitsstärkste, das solltest Du nutzen. Hier ist er optimal platziert, geht aber auf aufgrund der Farbgebung etwas unter.
Mit wenigen Kniffen wird der Header-Bereich optimiert: Das Logo rutscht auf eine Höhe mit dem Menü, der blaue Balken verschwindet. Die dunkle Schrift ist auf dem weißen Hintergrund jetzt viel besser zu lesen.
Der wichtigste Menüpunkt wird optisch hervorgehoben und fällt sofort ins Auge. Die Social Media Icons wandern nach unten in den Footer.
Hero Abschnitt
Der Heroabschnitt ist einer der wichtigsten Teile einer Website. Zusammen mit dem Footer macht er den Bereich „Above the Fold“ aus. Das war früher der Teil der gefalteten Zeitung, den man direkt auf dem Stapel sah – und dessen Überschrift neugierig machte. Im Webdesign ist es der Teil, der beim Aufruf der Seite als erstes erscheint. Er entscheidet in weniger als 3 Sekunden, ob Besucher:innen bleiben und die Seite weiterscrollen oder die Website direkt wieder verlassen.
Vorher enthielt er drei Slider mit Bildern, aber ohne aussagekräftigen Text. Interessierte wissen gar nicht, um was es geht.
Ein Bild sagt bekanntlich mehr als 1.000 Worte und transportiert in Millisekunden Emotionen. Damit aber auch sofort klar ist, um welches Thema es auf der Website geht, wird das Bild mit einer knackigen Überschrift versehen.
Für eine bessere Lesbarkeit steht der Text auf einem farbigen Hintergrund – so kann das Motiv dem Text nicht „in die Quere kommen“. Das Layout orientiert sich dabei an den Social Media Posts. So kommt auch ein Wiedererkennungswert über verschiedene Kanäle hinaus rein.
NEU: Einleitung
Auf der ursprünglichen Startseite folgte direkt ein Abschnitt mit kostenlosen Angeboten. Auf der überarbeiteten Version kommt erst nochmal ein kleiner Abschnitt, der in das Thema einleitet. Dazu ein sympathisches Bild, das Vertrauen aufbaut.
NEU: Aktuelles
Mein Ansatz beim Erstellen von Websites ist, sie aktiv als Marketinginstrument einsetzen – und das bedeutet, dass nicht alle Bereiche statisch sind, sondern manche Bereiche regelmäßig wechseln.
Der Abschnitt „Aktuelles“ ist quasi wie ein Schaufenster, das das derzeitige Angebot zeigt. Hier ist der Call-to-Action bzw. der Button von der Farbgebung identisch mit dem Button im Header, führen sie beide doch zur gleichen Unterseite.
Kostenlose Angebote
Nachdem die wichtigste Info bereits weiter oben dargestellt wurden, darf jetzt gerne ein Abschnitt mit einem kleinen Geschenk kommen. Hier zum Beispiel in Form von kostenlosen Angeboten. Sie schaffen einen Anreiz, sich zum Newsletter anzumelden und in Verbindung zu bleiben.
An diesem Abschnitt gab es nicht viel zu verbessern. Ich habe die Überschriften und die Abstände angepasst sowie die Buttons logisch benannt und ihnen eine neutralere Farbe gegeben, damit sie nicht optisch mit dem Primär-Button konkurrieren.
Tendenziell versuche ich Bilder mit integriertem Text zu vermeiden, da sie nicht sonderlich barrierefrei sind (der Text kann nicht separat ausgelesen oder vergrößert werden). Mein Kompromiss: Ich habe alle textlichen Informationen auf dem Bild in den Alt-Text eingefügt, so dass ein Screenreader diesen zumindest vorlesen kann.
Über mich
Ein wichtiger Teil auf der Website von Personenmarken ist ein kleiner Abschnitt über mich, auf denen Du Dich den Besucher:innen kurz vorstellst. Menschen kaufen bekanntlich von Menschen und wollen wissen, mit wem sie es zu tun haben 😊
Entsprechend habe ich den Abschnitt passend zum Rest der Seite etwas angepasst, ein größeres Bild genommen, und zu guter Letzt auf die Über mich-Seite weiter verlinkt.
Die Startseite fungiert ja wie das Cover und/oder Inhaltsverzeichnis einer Zeitschrift und soll Deinen Besucher:innen einen Überblick geben, was Du alles auf der Website präsentierst.
Aktuelle Angebote
Entsprechend macht es Sinn, dass Du auch schon auf der Startseite auf Deine weiteren Angebote verweist. Heike bietet verschiedene Kurse und Formate rund um Gedächtnistraining an.
War ein Kurs nicht verfügbar bzw. zu kaufen, hat sie ihn von der Startseite runter genommen und die entsprechende Unterseite auf Entwurf umgestellt. Das artet schnell mal in Stress aus.
Und auch Google ist kein Fan davon, wenn Links von außerhalb auf eine Unterseite verweisen, die nicht verfügbar ist – Stichwort schlechte User Experience.
Die Lösung: Angebote, die regelmäßig verfügbar sind, bleiben inklusive ihrer Unterseiten sichtbar. Interessierte können sich informieren und das Produkt kaufen – oder finden für die Zeit zwischen den Launches statt einer Checkoutseite eine Warteliste vor, in die sie sich eintragen können.
So sammelst Du weiterhin Kontakte und kriegst auch einen kleinen Einblick, wie gefragt ein Angebot ist 😉
Firmenangebote
Die Wand aus Text wirkt im ersten Moment eher wie ein reiner Infotext oder wie das Kleingedruckte zu einem Angebot; insgesamt also weniger einladen, um den Text zu lesen.
Weil auch in Unternehmen Menschen sitzen, die von Menschen kaufen und entsprechend über eine Zusammenarbeit entscheiden, bringt auch hier ein Bild von einem der Firmenangebote die gewünschte Emotionalität rein und lockert das Design optisch auf.
Social Proof
Social Proof (auf Deutsch: soziale Bewährtheit oder sozialer Beweis) wie die Logos der Kooperationspartner oder Auftraggeber erzeugt Vertrauen (wichtig für den Know-Like-Trust-Faktor im Marketing: Dieser bedeutet einfach ausgedrückt, dass Menschen lieber bei jemandem kaufen, den sie kennen, mögen und vertrauen).
Statt diese im Footer durchflitzen zu lassen, habe ich die Logos etwas prominenter zum Firmenangebot gesetzt und kleine Optimierungen durchgeführt: Die Logoleiste läuft jetzt etwas langsam durchs Bild und springt mehrere Logos auf einmal. Beim Hovern mit der Maus bleibt die Leiste stehen und die Punkte direkt darunter zeigen, an welcher Stelle man beim Durchlauf steht.
Footer
Der Footer erscheint wie der Header auf jeder Unterseite und schließt die Seite somit ab. Bei der Vorherversion nimmt er viel Platz ein, verschenkt diesen aber auch.
Dabei ist er der optimale Ort, um noch einmal wichtige Links, einen Call to Action (wie die Anmeldung zum Newsletter) und die rechtlichen Infos sowie die Links zu Social Media unterzubringen.
Wer sich bis zum Ende der Seite durchgescrollt hat, darf sie jetzt gerne eine Pause auf Social Media gönnen 😊
Website Refresh – vorher & nachher im direkten Vergleich
Hier siehst Du nochmal beide Startseitenversionen im direkten Vergleich. Inhaltlich hat sich kaum etwas geändert; lediglich die Präsentation ist eine andere.
Fazit Website Refresh
Manchmal braucht es keine radikale Veränderung, manchmal braucht es einfach nur mehr Klarheit. Und siehe da, der Website Refresh war kein radikaler Umbau – sondern ein gezieltes Feintuning.
Keine neue Marke, keine neuen Produkte. Aber plötzlich wirkt die Seite wie aus einem Guss, führt Interessierte gezielt durchs Angebot und transportiert genau die Professionalität, die Heike ohnehin längst lebt 😁
Inspiration für Dich?
Wenn Du beim Lesen an Deine eigene Seite denkst und merkst: „Stimmt… das könnte ich auch mal angehen“ – donut worry 🍩 Manchmal reicht eine kluge Umstrukturierung, ein bisschen Weißraum, eine visuell-emotionale Komponente – und Deine Website wird endlich zu dem, was sie sein soll:
Dein stärkstes Marketinginstrument.
Wenn Du Fragen hast oder jetzt richtig Lust auf ein „Refresh ohne Stress“, vereinbare Dir hier gerne ein Kennenlerngespräch mit mir und wir sprechen ganz unverbindlich, wie ich Dich dabei unterstützen kann.
Du willst was für Dein Gehirn tun?
Wenn Du bis Mitte Juli im Großraum Düsseldorf bist, nutze die Gelegenheit und nimm samstags an Heikes Brainwalking – Bewegung trifft Gedächtnistraining im Vorster Wald bei Kaarst teil. Bei diesem wortwörtlichen Geh-Hirntraining kommt frische Luft in die Lunge und neue Synapsen in den Kopf 😉
Eine Antwort
Liebe Britta,
vielen Dank für Deinen frischen Blick und die großartige Unterstützung beim Website-Refresh!
Die Seite wirkt jetzt nicht nur moderner und klarer, sondern ist auch viel leichter zu handhaben – für mich ein riesiger Unterschied im Alltag.
Besonders hilfreich war für mich die Einrichtung der Warteliste. Vorher hatte ich nicht alle Seiten auf dem Schirm – jetzt habe ich endlich Übersicht und kann Inhalte gezielt aktuell halten.
Auch Deine How-To-Videos und die konkreten Vorgaben für Bildgrößen und Formate waren Gold wert. Das hat vieles vereinfacht und mir wirklich Sicherheit im Umgang mit der Seite gegeben.
Es sind genau diese durchdachten Details, die die Arbeit so viel leichter machen.
Jetzt freue ich mich richtig darauf, die Seite mit Leben zu füllen – und endlich ein paar mehr Blogartikel zu schreiben.
Danke Dir nochmal – das war genau die Unterstützung, die ich gebraucht habe! Ich empfehle Dich gerne weiter!
Liebe Grüße
Heike