Case Study · Website-Relaunch
Ein Handwerk, das man vorher nicht gesehen hat
Stefan Wolfrum ist Hufbeschlagsmeister in Tirschenreuth. Die Inhalte waren da – verteilt auf sechs Unterseiten eines Standard-Themes, die niemand bis zum Ende gelesen hat. Der Relaunch bündelt sie zu einem Erzählbogen und macht aus dem statischen Kartenbild ein Einsatzgebiet, das man anfassen kann.
0
externe Requests – und deshalb kein Cookie-Banner
1
durchgehender Erzählbogen statt verstreuter Unterseiten
10
Orte auf der interaktiven Einsatzkarte, echt verortet
2003
selbständig – Erfahrung, die vorher nirgends stand
Der Unterschied
Zieh den Regler – und sieh den Sprung
Links die alte Startseite: ein gekauftes WordPress-Theme, ein großes Foto und vier Sätze, die auf Unterseiten verweisen. Rechts der Relaunch – als Aufnahme, damit du das Video in der Esse laufen siehst.
Regler mit Maus, Finger oder Pfeiltasten bewegen
Ausgangslage
Ein Meisterbetrieb, der wie ein Blog aussah
Die alte Seite lief auf einem gekauften WordPress-Theme von der Stange. Sie war nicht leer – Leistungen, Werdegang und Einsatzgebiet standen alle irgendwo. Nur eben hinter Klicks, ohne Gewichtung und in einer Form, die den Betrieb austauschbar wirken ließ.
Die Startseite sagte nichts
„Auf den folgenden Seiten möchte ich mich Ihnen näher vorstellen“ – vier Sätze, mehr stand dort nicht. Ausgerechnet die Seite, auf der fast alle Besucher landen, verwies nur weiter, statt selbst zu überzeugen.
15 Leistungen als nackte Liste
„Hufrehebeschlag“, „Spatbeschlag“, „Egg Bar“ – Fachbegriffe ohne ein Wort Erklärung, untereinander aufgezählt. Für Pferdebesitzer, die genau hier eine Antwort suchen, wertlos.
Die Karte war ein Bild
Das Einsatzgebiet steckte in einer alten Illustrator-Grafik: flach, blass, auf dem Handy unlesbar. Dabei ist gerade die Frage „Kommt er bis zu mir?“ die häufigste vor dem Anruf.
Dasselbe Foto auf jeder Seite
Das glühende Hufeisen war das einzige Bild – und wiederholte sich als Kopfbereich auf Start, Leistungen und Aktionsradius. Aus einem starken Motiv wurde reine Dekoration.
Zielsetzung
Das Handwerk sichtbar machen
Ein Hufschmied wird nicht über Preise gebucht, sondern über Vertrauen. Die stärksten Argumente lagen längst vor – Meistertitel, Ausbildung in Wien, über zwanzig Jahre Selbständigkeit, sieben Kundenstimmen über Geduld mit ängstlichen Pferden.
Sie standen nur nirgends. Die Aufgabe war nicht, etwas zu erfinden, sondern Vorhandenes endlich zu zeigen.
- Sofort verstehen, worum es geht „Der Huf ist das Fundament“ – ein Satz, der die Haltung des Betriebs trägt und gleichzeitig erklärt, warum die Arbeit wichtig ist.
- Die Reichweite beantworten, bevor gefragt wird Das Einsatzgebiet gehört auf die Startseite, nicht auf Unterseite fünf – mit Orten, die man wiedererkennt.
- Geduld als Alleinstellungsmerkmal Dass Pferde mit Panik vor dem Schmied bei ihm wieder Vertrauen fassen, ist das stärkste Verkaufsargument überhaupt. Es bekam einen eigenen Absatz und ein Zitat.
- Schlank und wartungsarm bleiben Kein CMS, das gepflegt werden muss, keine Plugins, die brechen – eine Seite, die in fünf Jahren noch genauso läuft.
Im Bewegtbild
Einmal komplett durchgescrollt
Die Seite wechselt beim Scrollen zwischen Esse und Weide, die Karte baut sich Ort für Ort auf, und in der Schmiede laufen echte Videoaufnahmen. Das lässt sich schlecht in Standbildern erzählen.
Ohne Ton · 20 Sek.
Umsetzung
Sechs Hebel, die den Unterschied machen
Weg vom CMS
Die Seite ist reines HTML, CSS und JavaScript – keine Datenbank, kein Login, keine Update-Pflicht. Veröffentlichen heißt: Ordner auf den Webspace kopieren. Für einen Betrieb, der selten etwas ändert, ist das die ehrlichere Lösung als ein WordPress, das verstaubt.
Die alte Karte wiederbelebt
Aus der Illustrator-Datei der alten Seite wurde ein aufgeräumtes SVG: jeder Ort mit eigener Kennung und seiner echten Entfernung zu Tirschenreuth. Beim Scrollen zeichnen sich erst der Radius, dann die Autobahnen, dann die Orte – nach Entfernung sortiert, von innen nach außen.
Leistungen, die erklären
Statt der Stichpunktliste eine Tabelle mit Kategorie, Leistung und einem Halbsatz dazu: „Hufrehebeschlag und Spatbeschlag – sowie Beschläge bei Sehnenerkrankungen“. Wer sucht, findet. Wer nichts weiß, versteht trotzdem.
Videos statt Stockfotos
Esse, Hufbearbeitung, das Aufbrennen des Eisens – kurze Aufnahmen aus der echten Arbeit, lokal eingebunden und stumm im Hintergrund. Sie zeigen in drei Sekunden, was zehn Zeilen Text nicht schaffen.
Kundenstimmen aus dem Bestand
Sieben echte Rückmeldungen, die schon vorlagen, bekommen eine eigene Sektion und ein Gesicht durch Ort und Initialen. Erfundene Sternebewertungen gibt es bewusst keine – stattdessen einen Link ins Google-Profil.
Alte Adressen aufgefangen
An den alten WordPress-Pfaden wie
/philosophie/
oder
/aktionsradius/
liegen Weiterleitungen. Bestehende Google-Treffer und Lesezeichen laufen so nicht ins Leere.
Kernidee
Zwei Temperaturen
Das Gestaltungsprinzip kommt aus der Werkstatt selbst: Die Farbskala ist die Temperaturskala von Eisen, das aus dem Feuer kommt. Die Seite wechselt im Scrollen zwischen der dunklen, warmen Esse und der hellen, kühlen Weide – zwischen dem Ort, an dem geschmiedet wird, und dem Ort, an dem das Pferd steht.
Esse
#171310
Ruß
#2a221c
Glut
#e24e12
Funke
#f0a93a
Horn
#e7dccb
Weide
#dde2dc
Schiefer
#2e3630
Von der kalten Esse über die Glut bis zum abgekühlten Horn – die Palette folgt einem Stück Eisen durch den Arbeitstag.
Dunkle Abschnitte
Die Esse
Hier passiert das Handwerk: Hero, Leistungen, Einsatzgebiet, Kontakt. Warmes Schwarz, glühendes Orange, Videos aus der Schmiede. Diese Abschnitte sollen nach Feuer und Werkstatt aussehen.
Helle Abschnitte
Die Weide
Hier geht es um das Pferd und den Menschen: Philosophie, Werdegang, Kundenstimmen. Kühles Grün-Grau, viel Luft, ruhige Serifenschrift. Der Gegenpol, der die dunklen Abschnitte überhaupt erst wirken lässt.
Schrift: Archivo in zwei Extremen derselben Breitenachse – weit gestellt für Überschriften, schmal für Beschriftungen. Dazu Newsreader für den Fließtext. Das einzige Ornament ist eine Haarlinie mit acht Punkten: den acht Nagellöchern eines Hufeisens.
Das Herzstück
Die Karte, die sich selbst zeichnet
Aus der alten Illustrator-Grafik wurde ein Vektorbild, in dem jeder Ort seine echte Entfernung zu Tirschenreuth kennt. Beim Scrollen erscheint erst der Radius, dann zeichnen sich die Autobahnen, dann poppen die Orte von innen nach außen auf. Probier sie aus – hier läuft dieselbe Karte wie auf der Website.
- Tirschenreuth
- Bayreuth
- Hof
- Weiden
- Grafenwöhr
- Amberg
- Nürnberg
- Ansbach
- Bamberg
- Regensburg
Einen Ort anfahren oder anklicken – mit Maus, Finger und Tastatur. Ohne JavaScript bleibt die Karte ein vollständiges Bild.
Einblicke
Die Seite in Abschnitten
Mit der Maus über eine Karte fahren, um durch den jeweiligen Abschnitt zu scrollen.
Detail am Rande
Schriften, Animationsbibliothek, Karte, Bilder und Videos liegen alle auf dem eigenen Server. Es gibt keinen einzigen Request an eine fremde Domain , keine Cookies, keine Analysedienste – und deshalb auch kein Cookie-Banner, das Besucher zuerst wegklicken müssen.
Ergebnis
Aus einer Visitenkarte wurde eine Werkstatt
Die neue Seite erzählt in einem Durchgang, was der Betrieb kann, wo er hinkommt und warum Pferdebesitzer ihm ihre Tiere anvertrauen. Sie kommt ohne Datenbank, ohne Plugins und ohne Cookie-Banner aus – und lässt sich mit einem Ordner-Upload veröffentlichen. Wartung: keine.
Kann deine Website mehr, als sie zeigt?
Oft liegen die besten Argumente längst vor – sie stehen nur an der falschen Stelle oder gar nicht erst da. Erzähl mir von deinem Betrieb, dann suchen wir sie gemeinsam.
Projekt besprechen