Ich lade dich heute dazu ein, einen Blick hinter die Kulissen zu werfen und dir eine Website anzusehen, die noch in Arbeit ist.
Beginnen wir ganz am Anfang:
Als Karin sich bei mir wegen einer neuen Website gemeldet hat, hatte sie folgende Wünsche und Ziele:
Wunsch:
Die berufliche Situation von Karin hat sich geändert, auch wenn sie weiter im Bereich Hundeernährung und Gesundheit tätig ist.
Die bisherige Website passt nicht mehr zu ihr. Dazu kommt, dass sie auf der Website nichts selbst anpassen kann.
Ziel:
Sie fühlt sich mit ihrer Website wohl und die Website zieht genau die Kunden an, die zu ihr passen.
Zudem will sie endlich ihre Website auch selbst bearbeiten können, um Kleinigkeiten schnell anzupassen.
Entscheidungen:
Um ihren Wünschen gerecht zu werden, haben wir beschlossen, die gesamte Website von Grund auf neu zu gestalten. Natürlich erfolgt dies in enger Zusammenarbeit mit Karin, um sicherzustellen, dass die Website ihre Persönlichkeit widerspiegelt. Dieser Neustart wird unter der Domain hundherumgesund stattfinden.
Aufgebaut wird die Website mit WordPress und Elementor Pro. Ausserdem werden wir liebevolle kleine Details einbauen, die die Website sehr persönlich machen.
Das Abenteuer beginnt: Das Website-Konzept
Gleich zum Start hat Karin von mir mein Workbook Planstark bekommen. Sie hat sich intensiv damit beschäftigt, so dass wir im ersten Meeting gleich richtig loslegen konnten.
Unser erster Schritt bestand darin, das Hauptziel für die Website festzulegen:
Interessenten sollen die Möglichkeit haben, ein Erstgespräch zu vereinbaren. Dies ist von zentraler Bedeutung, da Vertrauen in Karins Arbeit notwendig ist, damit sie auch gebucht wird.
Gleichzeitig möchten wir es bestehenden Kunden ermöglichen, unkompliziert ein passendes Paket zu buchen.
Das Webdesign
Die Website soll so individuell sein wie Karin selbst, und sie soll sich darin rundum wohlfühlen. Daher haben wir uns entschieden, eigene (gekaufte) Icons in das Design zu integrieren, um der Seite eine persönliche Note zu verleihen.
Bei den Farben waren wir uns zuerst uneinig. Denn Pink und Gold für eine «Hundegesundheits-Website»???
Aber Karin hat mir versichert, dass das nicht nur ihre Lieblingsfarben sind, sondern dass sie auch gut zu ihren Lieblingskunden passen.
Tatsächlich ergibt Pink, bei genauerer Betrachtung, durchaus Sinn. Es handelt sich um eine kraftvolle Farbe, die für Freude, Dynamik und Unbeschwertheit steht. Selbstverständlich werden wir sie bewusst und gezielt einsetzen.
Und Gold? Gold symbolisiert Wertigkeit. Das passt hervorragend zu Karins Angeboten und harmoniert wunderbar mit Pink. Besonders, da ich es nur in homöopathischen Dosen verwende.
Es mag zunächst unkonventionell erscheinen, doch diese Farbkombination spiegelt perfekt Karins Persönlichkeit und ihre Dienstleistungen wider.
Aber schau selbst:
Sieht richtig toll aus so oder nicht?
Kleine Details, die einen grossen Unterschied machen
Wenn es um die Gestaltung geht, sind es oft die kleinen Details, die grossen Einfluss haben. Für Karins Website haben wir uns darauf konzentriert, eine lebendige und herzliche Atmosphäre zu schaffen.
Deshalb siehst du (teilweise) eine sanfte Wellenform, um die verschiedenen Abschnitte voneinander zu trennen. Diese Wellen verleihen der Website eine Lebendigkeit.
Zusätzlich hat Karin Icons ausgewählt und erworben, die perfekt zu ihrem Thema passen und der Website eine zusätzliche persönliche Note verleihen.
Um sicherzustellen, dass sie nahtlos in das Gesamtdesign integriert sind, habe ich die Icons leicht angepasst. Wie findest du sie?
Nachdem wir auch noch die Schriften festgelegt hatten und Karin mir einige Fotos geschickt hatte, konnte ich loslegen.
WordPress installieren und erste Seite erstellen
Nach der Installation von WordPress habe ich eine einzige Seite mit vielen Elementen erstellt, damit wir eine Diskussionsgrundlage hatten.
In einem weiteren Meeting haben wir uns intensiv mit diesen Elementen auseinandergesetzt. Wir haben festgelegt, welche Elemente bleiben und welche noch angepasst werden müssen. Von gewissen haben wir uns ganz verabschiedet.
Nach diesem Meeting war der Kopfbereich der Startseite und der erste Abschnitt unserer Website definiert.
Die erste Angebotsseite
Nun war es an der Zeit, die erste Angebotsseite zu erstellen. Meine Herangehensweise ist es, zuerst immer eine Angebotsseite zu konzipieren. Erst wenn sie vollständig und benutzerfreundlich funktioniert, setze ich meine Arbeit fort. Natürlich teste ich nicht nur am PC, sondern auch am Handy und Tablet.
Wie fange ich an?
Ich habe mir Karins Texte angesehen und überlegt, wie ich sie auf der Angebotsseite am besten verwenden kann. Welche Fotos und Icons passen dazu?
Anschliessend habe ich ein klares Bild davon entworfen, wie die Website gestaltet werden soll. Aufgrund meiner Erfahrung konnte ich dies bereits im Kopf visualisieren.
Falls du nicht so viel Erfahrung hast, empfehle ich dir die Erstellung eines Storyboards für die Seite. Das kann dir dabei helfen das Layout einer Seite festzulegen.
Nach einem weiteren Meeting sieht die Angebotsseite nun so aus:
In der Zwischenzeit tauschen wir uns regelmässig per Mail über Fragen und Ideen aus, damit nichts vergessen geht. Ich liebe diesen Austausch und wenn ich dann noch so ein Mail bekomme:
Ist das einfach genial.
Angebotsseiten fertig stellen
Nachdem die erste Angebotsseite fertig war, habe ich alle anderen nach der gleichen Struktur entwickelt. So ist eine Einheit entstanden.
Obwohl die Texte jedes Angebots ihre eigenen Nuancen und Längen aufweisen, ist es ratsam, sich an eine grundlegende Struktur zu halten.
Als nächstes habe ich die «Über mich-Seite» erstellt.
«Über mich-Seite»- Mehr als nur Fachwissen
Diese Seite ist immer besonders herausfordernd. Mit ihr bauen wir Vertrauen zu unseren Lieblingskunden auf. Sie können auf ihr erfahren, wie du tickst und ob die Chemie zwischen euch stimmt.
Karin hat mir direkt einen grossartigen Text geschickt. Darin erzählt sie, wie sie überhaupt dazu kam, sich mit dem Thema Hundeernährungsberatung auseinanderzusetzen. Aber du erfährst auch noch einiges über sie als Mensch.
Durch die passenden Bilder ist eine Seite entstanden, die nicht nur klar zeigt, dass Karin kompetent ist und für das Thema brennt, sondern auch, was ihr als Mensch wichtig ist.
Hier kannst du dir die «Über mich-Seite» von Karin ansehen.
Die Kontaktseite - Lass uns ins Gespräch kommen
Es ist erstaunlich, wie oft die Kontaktseite vernachlässigt oder nur oberflächlich erstellt wird. Eigentlich unfassbar, bedenkt man, dass hier oft der erste Kontakt zu potenziellen Kunden entsteht.
Bei der «hundherumgesund-Website» haben wir das nicht so gemacht. Wir haben ausführlich darüber gesprochen, was auf die Seite soll.
Natürlich gehört dazu ein Kontaktformular, aber ebenso wichtig ist ein einladender Text und vor allem die Möglichkeit, sich für ein kostenloses Erstgespräch anzumelden.
Und so sieht die Seite jetzt aus:
Die Startseite als krönender Abschluss
Du hast es vielleicht schon gelesen: Die Erstellung der Startseite erfolgt bei mir stets zum Schluss. Diese Seite fungiert als Schaufenster für deine Website und soll Neugier wecken. Den Besucher dazu animieren, deine Angebote zu erkunden und sich für ein Erstgespräch anzumelden. Zumindest war das unser Ziel bei dieser Website.
Deine Ziele können andere sein. Aber es ist entscheidend, dass du sie klar definierst – nicht nur für die Startseite.
Ein wichtiger Gestaltungstipp für die Startseite lautet: Weniger ist mehr!
Vermeide den Fehler, diese Seite zu überladen. Die Startseite ist kein Lager, sondern soll ein ansprechendes Schaufenster sein.
Um sicherzustellen, dass dies bei Karins Website nicht geschieht, haben wir sorgfältig drei Angebote ausgewählt und nur diese auf der Startseite präsentiert.
Zusätzlich gibt es einen kurzen Text über Karin und einen klaren Handlungsaufruf – einen sogenannten Call-to-Action –, der die Besucher ermutigt, sich für ein Erstgespräch anzumelden. Denn das ist das vorrangige Ziel dieser Seite.
Hier kannst du dir die Startseite ansehen.
Was noch fehlt: Die Kopf- und Fusszeile
Nachdem mir Karin ihr wunderbares Logo geschickt hatte, konnte ich auch die Kopfzeile fertigstellen.
Üblicherweise setzt sich dieser Abschnitt aus dem Logo und der Navigation zusammen.
Um sicherzustellen, dass deine Webseite klar und gut strukturiert ist, solltest du dich auf 5-7 Navigationspunkte beschränken.
Das war bei dieser Website kein Problem.
Die Fusszeile hingegen kann sehr unterschiedlich gestaltet werden.
Da Karin vorhatte, einen Blog in ihre Website zu integrieren, haben wir uns entschieden, in der Fusszeile lediglich ihre Adresse und jeweils die neuesten 2 Blogartikel zu platzieren.
Darunter finden sich natürlich auch die erforderlichen rechtlichen Informationen, nämlich das Impressum und die Datenschutzerklärung. Zusätzlich haben wir Links zu ihren Social-Media-Profilen eingefügt.
Der Blog – Spannende Infos rund um die Hundeernährung
Um besser in den Suchergebnissen bei Google gefunden zu werden, hat sich Karin entschieden, einen Blog in ihre Website zu integrieren.
Es lohnt sich regelmässig Blogartikel zu veröffentlichen, denn es erhöht die Chance bei Google gefunden zu werden.
Ich habe zwei Artikel erhalten, die Karin verfasst hat, und diese für sie auf der Website veröffentlicht.
Bei einem Blog müssen verschiedene Seiten erstellt werden – eine Seite, auf der die Blogartikel in der Übersicht dargestellt werden, sowie einzelne Seiten für die Blogartikel selbst. Dies wird üblicherweise über sogenannte Templates, also Vorlagen, gesteuert.
Nachdem auch der Blog online war, war die Website fast fertig. Bevor ich alles abschliessend überprüfte, erstellte ich noch eine letzte Seite – die 404-Fehlerseite.
404-Fehlerseite
Hast du dich jemals gefragt, was es mit der mysteriösen "404-Fehlerseite" auf sich hat? Diese unscheinbare Seite erscheint, wenn jemand sich vertippt hat oder versucht, eine nicht mehr existierende Seite aufzurufen.
Die Standard-404-Seite lässt den Besucher nur ratlos zurück, während eine individuelle 404-Seite ihm weiterhilft. Sie ist mehr als nur eine Meldung über einen nicht gefundenen Link; sie ist eine Chance, dem Besucher ein Lächeln ins Gesicht zu zaubern.
Mit einer witzigen oder zu dir passenden 404 Seite kannst du den Besuchern Mehrwert bieten. Aber noch wichtiger ist, dass du sie nicht im Regen stehen lässt. Es ist unerlässlich, dass du ihnen sagst, wie sie weiterkommen.
Mit einer gut gemachten 404 Seite bleibst du im Gedächtnis deiner Besucher. Deshalb erstelle ich immer eine.
So sieht die 404-Seite von hundherumgesund.ch aus:
Letzte Kontrollen
Wenn die Website ganz fertig ist, muss sie nochmals kontrolliert werden. Es kommt häufig vor, dass uns Tippfehler entgehen oder eine Seite nicht korrekt verlinkt ist. Aus diesem Grund ist eine letzte, sorgfältige Überprüfung unverzichtbar, um sicherzustellen, dass die Website reibungslos funktioniert und einen professionellen Eindruck hinterlässt.
Während dieser abschliessenden Phase nutze ich auch den «Broken Link Checker», um sicherzustellen, dass alle Verbindungen ordnungsgemäss funktionieren. Beim manuellen Durchklicken besteht immer die Gefahr, den einen oder anderen Link zu übersehen. Deshalb ist das Tool für mich sehr wichtig.
Erst nachdem diese Überprüfungen abgeschlossen sind und ich von Karin das finale "Go" erhalten hatte, ging die Website online.
Die Website ist online
Das ist immer ein besonderer Moment und nun kann auch noch das Kontaktformular getestet werden. Wenn auch das funktioniert, ist die Website fertig.
Jetzt haben Karin und ich uns nochmals getroffen, damit ich ihr zeigen konnte, wie sie ihre Website selbst bearbeiten kann. So kann sie nun Texte und Bilder selbstständig austauschen oder anpassen.
Sie hat von diesem Meeting ein Video, auf das sie immer wieder zurückgreifen kann.
Und so hat Karin unsere Zusammenarbeit erlebt
Claudia hat genau gefühlt, was ich mir wünsche und alles perfekt auf die Seite gebracht.
Als ich mit Claudia in Kontakt getreten bin, war ich bereits Besitzerin einer Website. Diese Seite fühlte sich jedoch für mich überhaupt nicht mehr stimmig an – zu viel hatte sich rund um mich herum und in mir verändert.
Ich hatte jedoch grosse Bedenken, einem mir fremden Menschen noch einmal einen Auftrag für eine neue Website zu erteilen. Würde das wieder so enden wie beim ersten Mal? Was, wenn meine Wünsche und Ideen einfach wieder ignoriert werden?
Nach dem Kennenlerngespräch wusste ich, bei Claudia bin ich gut aufgehoben. Das Gespräch habe ich als sehr empathisch, nett, klar und bereichernd empfunden.
Die Zusammenarbeit war einfach toll und ich habe mich auf jeden Call gefreut. Es wurde diskutiert, Bedenken betreffend den Farben geäussert, erklärt warum was nicht optimal ist und anstelle optimal wäre, professionelle Tipps und Informationen ausgetauscht, kompliziertes auf Einfach runtergebrochen.
Claudia arbeitet sehr strukturiert, präzise, schnell und bringt alles punktgenau zur Sprache.
Claudia hat genau gefühlt, was ich mir wünsche und alles perfekt auf die Seite gebracht. Es herrschte eine wunderbare Symbiose zwischen unseren zwei Köpfen.
Nun zieht die Schönheit ihre Runden im Netzuniversum – ich finde meine neue Website wunderschön und absolut passend zu mir und meiner grossen Leidenschaft.
Danke Claudia für dein Sein und dein Wirken.
Karin Hosmann // hundherumgesund.ch
In diesem Artikel konntest du einen Einblick gewinnen, wie ich Kundenwebsites gestalte. Für mich steht an erster Stelle, meine Kundin aktiv einzubeziehen, damit sie bei jedem Schritt mitreden kann. Aus diesem Grund habe ich regelmässige Zoom-Meetings mit Karin arrangiert. Auf diese Weise war sie nicht nur Zuschauerin, sondern in die gesamte Website-Entwicklung einbezogen.
Wenn auch du möchtest, dass ich deine Website gestalte, lade ich dich herzlich zu einem kostenlosen Erstgespräch ein. Lass uns gemeinsam über deine Vision sprechen und wie wir sie am besten umsetzen können.