Die Herausforderung
Nach 10 Jahren Selbständigkeit, war es Kai Peinlich Interessenten auf seine Website zu schicken.
Dieses Projekt war von Anfang an einfach ein HELL-YES! So nenne ich Aufträge, wo einfach alles passt.
Warum?
Das habe ich in einem LinkedIn Beitrag zusammengefasst - als Anleitung, wie du mein Traumkunde werden kannst 😉.
Ausschnitt der Startseite. Kai Woll ist seit 10 Jahren systemischer Coach und Unternehmensberater
“Meine Website erlaubt auf den ersten Blick, mein Angebot mit dem persönlichen Nutzen zusammenzubringen. Sie fühlt sich gleichzeitig klar/kühl (Bergsee) und warm (Nest) an. Ein bisschen wie mein Lieblingscafé, wo ich mich gerne in eine gemütliche Ecke setze und verweile oder durchschnaufe. Sie ist eine Essenz von mir als Mensch und meiner langen Erfahrung. Sie ist wissend bis weise. Wie ein Mentor oder auch ein guter alter Freund, der es gut mit dir meint.”
- KAI WOLL (auf die Frage: Wie sieht deine Traum-Website aus? wie fühlt sie sich an?)
Das Design
Wir haben geschaut, was schon da war - (Logo, Farben, Schriften, die aktuelle Website, Präsentationen) und einen Teil so gelassen.
Nämlich alles, was für Kai funktioniert und sich gut anfühlt.
Geändert haben wir auch.
Damit sich Kais Persönlichkeit und seine langjährige Erfahrung auf der Seite widerspiegeln. Auf den ersten Blick.
Dank seiner ausführlichen Antworten auf alle meine Fragen im Projektplaner, hat sich bei mir schon beim Lesen ein Bild abgezeichnet.
Nachdem ich dann ein paar Notizen gemacht und ein bisschen recherchiert habe, war mir klar: dunkles Türkis bleibt, aber die schrillen/lauten Farbakzente müssen etwas Gediegenerem weichen.
Kai ist sehr klar und das genaue Gegenteil von oberflächlich. Das dunkle Türkis mit Verlauf unterstreicht diese Tiefe, die in seiner Ausstrahlung deutlich zu spüren und in seinem Beruf gefragt ist.
Fotos tragen natürlich viel zum professionellen Look bei.
Durch einen deutlichen Rand auf der linken Seite und durch zweispaltige Texte hier und da, wirkt die ganze Website vertraut wie ein Buch und trotzdem modern und klar.
Ein paar Gold-Akzente bringen die nötige Wärme rein und lassen alles gediegener wirken.
Genau das, was wir wollten!
Über das Projekt
Squarespace*
*Partnerlink
Die Konzeption für das Projekt beinhaltet wie immer zuerst eine ausführliche Analyse-Phase: Wir sprechen über Ziele, Angebote, Wunschkunden und schauen uns die Wettbewerber an. Wir besprechen, wie Traffic auf die Website kommt und ob das warmer oder kalter Traffic ist. Danach richtet sich auch, was inhaltlich drauf soll, wie die CTAs aussehen usw.
All das dokumentieren wir im Projektplaner und ich erarbeite daraus eine Sitemap und die ersten Wireframes (= strukturelle Anordnung der Inhalte in Abschnitte)
Wir stellen uns so zu sagen in die Schuhe der Website-Besucher und Interessenten und ziehen die Wege nach, wie sie durch die Website navigieren (sollen).
Übrigens: wenn du selbst deine Website strategisch und mit Plan angehen möchtest, hol dir den Mini-Kurs “Website-Strategie à la carte”.
Hier habe ich meinen eigenen Prozess strukturiert und dir all die Schritte einfach und übersichtlich in einem Workbook aufgeschrieben und praktische, kurze Erklärvideos dazu erstellt. Du kannst das Workbook direkt am PC ausfüllen und immer weiterentwickeln.
Wenn du dich in meine E-Mail Liste einträgst, bekommst du den Mini-Kurs übrigens für nur 29€, statt 69€. Und wenn du drin bleibst, profitierst du auch weiterhin von Goodies und Aktionen, die ich nur mit meiner Liste teile.
👇 Hier eintragen und 40€ sparen:
So entsteht nach und nach die Website während Kai im Urlaub ist.
Die Struktur und Inhalte haben wir vorab besprochen. Nach seinem Urlaub bekommt er sozusagen die geballte Änderung auf einmal zu sehen. Und ich bin natürlich sehr aufgeregt.
Oft ist es nämlich eher so, dass wir uns in mehreren Etappen dem Ziel nähern.
Hier kam alles auf einmal. Direkt auf der Startseite umgesetzt und präsentiert!
Und Kai war hin und weg. ☺️
Nach Freigabe, war ich deshalb dann ziemlich schnell durch mit der kompletten Umsetzung und am 22.07.2024 ging die Seite live.
Zwei Dinge möchte ich in diesem Projekt besonders hervorheben:
Tabs
Wenn es viel Text zu verarbeiten gibt, bedient man sich verschiedener Stilmittel die Infos so darzustellen, dass sie die Seite nicht überladen.
Typisch sind Akkordeon-Elemente, die in Squarespace im Standard schon ziemlich flexibel gestaltet werden können.
Oder eben solche Tabs.
Das geht in Squarespace nicht von Haus aus, aber zum Glück gib es andere Lösungen.
Hier zum Beispiel das vielseitige Tabs-Plugin von Will Myers. Ich liebe seine Tutorials, bin in seiner Membership Code Curious und habe auf dieser Website zum ersten mal seine Tabs im Einsatz!
Love it!
Whitespase
Für das gleiche “Problem” ist Whitespace mein liebstes Stilmittel.
Als Whitespace, auch Leerraum oder negativer Raum, bezeichnet man die Bereiche einer Webseite, die frei von Inhalt oder visuellen Elementen sind. Also Abstände zwischen Textabsätzen, Ränder um Bilder, Leerzeilen und Pufferbereiche um andere Designelemente. Whitespace ist nicht unbedingt weiß; es kann jede Hintergrundfarbe haben. Auf der Startseite sehr deutlich zu erkennen.
Was bringt‘s?
1. Lesbarkeit:
Durch das Einfügen von Leerraum zwischen Textabsätzen und um Textblöcke herum wird der Text leichter lesbar und verständlicher. Es hilft den Augen, sich auszuruhen, und verhindert, dass die Seite überladen wirkt.
2. Hervorhebung von Inhalten:
Leerraum kann verwendet werden, um bestimmte Inhalte hervorzuheben und die Aufmerksamkeit der Benutzer auf wichtige Elemente wie Überschriften, Bilder oder Handlungsaufforderungen (Call-to-Actions) zu lenken.
3. Orientierung:
Whitespace sorgt für eine klare visuelle Hierarchie, die den Benutzern hilft, sich leicht zu orientieren.
4. Ästhetik:
Eine ausgewogene Verwendung von Leerraum trägt zu einem sauberen, modernen und professionellen Look bei. Das Design wird elegant und aufgeräumt.
5. Fokus und Benutzerfreundlichkeit:
Leerraum reduziert die visuelle Überlastung und lenkt den Fokus der Benutzer auf wesentliche Elemente. Das trägt zur Benutzerfreundlichkeit bei und verbessert die Interaktion mit der Webseite.
Unterschätze nicht die Wirkung von Leerraum. Es ist eins der wichtigsten Elemente, um Websites professionell aussehen zu lassen. Auf was du sonst achten kannst, habe ich hier aufgeschrieben.
Leistungsumfang:
Ziele und Anforderungen herausarbeiten. Was ist das Hauptziel der Website? Was sollen die Besucher:innen hier tun können?
Klares Konzept und eine einfache Navigation
Optimierung des Farbkonzepts und Auswahl der Schriftarten
Überarbeitung des Logos, passend zum neuen Konzept
Erstellung der Website auf Squarespace mit 5 Hauptseiten plus Datenschutz-, Impressumseite
Domain-Einstellungen unter Berücksichtigung von SEO-Aspekten
Erstellung eines Schaubilds für die Website
Kai Woll per Sprachnachricht:
“Jetzt will ich noch was sagen, was ich zum Anfang dieser Sprachnachricht sagen sollte.
Juchu! Ich bin total begeistert von dem, was wir da kreiert haben. Und ich bin von deiner Arbeit wahnsinnig begeistert.
Du hast das super in Szene gesetzt. Ich kann, so wie du es gemacht hast, dem Aufbau folgen. Ich kann dem Layout folgen. Ich kann der Ästhetik folgen. Ich finde mich wieder, es gefällt mir unwahrscheinlich gut.
Katja, das hast du richtig, richtig, richtig gut gemacht. Tausend Dank dafür.
Also ich werde dich allerbesten gewissens an jeder Ecke weiterempfehlen, wenn mich irgendjemand nach einer Webdesignerin fragt.
Wirklich, well done. Toll.”
Schaue dir die Squarespace Website von Kai Woll
live an:
VORHER / Nachher
Startseite vorher
Über-mich-Seite vorher
Neue Über-mich-Seite
Möchtest du deine eigene Website oder einen Onlineshop (Shopify oder Squarespace) umsetzten, dann lass uns unverbindlich sprechen. Hier kannst du ein kostenloses Gespräch mit mir ausmachen.