Ric The Coach Webseite

Für einen Kinderfussball-Trainer entwickelte ich einen professionellen Webauftritt, der sein Coaching-Angebot klar zeigt und Eltern überzeugen soll, ihre Kinder bei ihm zu trainieren. Was dieses Projekt besonders gemacht hat, ist die enge Zusammenarbeit mit dem Coach und seine Vision in Realität umzusetzen. Währned des Prozesses hatte er immer wieder neue Ideen, weswegen es zu vielen Änderungen während des Prozessees kam.

Ein weiterer zentraler Bestandteil der Website war auch die Integration eines Terminbuchungssystems. Kund*innen können damit direkt über die Website einen Termin anfragen oder buchen. Das Tool wurde gezielt an die Anforderungen des Coachs angepasst: an sein Angebot, seine Verfügbarkeiten und eine Nutzerführung, die für Eltern (und etwas älteren Kinder) intuitiv funktioniert.

Die Website ist erreichbar unter ricthecoach.ch

(Da der Trainer nach der Abgabe noch ein Fotoshooting für die Bilder Galerie hat,
habe ich hier die Version bis zur Abgabe zwischengespeichert: fussball.buserthomas.ch)

Konzept & gestalterische Ausrichtung

Zu Beginn des Projekts stand ein ausführliches Gespräch mit dem Coach. Gemeinsam klärten wir, was die Website leisten soll, welche Zielgruppe angesprochen werden soll und wie er sich als Trainer nach aussen präsentieren möchte. Erst auf dieser Grundlage begann ich mit der konzeptionellen Arbeit.

Das gestalterische Ziel war klar: eine Website, die Professionalität und sportliche Energie verbindet, ohne dabei überladen zu wirken. Als Inspirationsquellen dienten verschiedene Auftritte aus dem Bereich Sport-Coaching sowie Mockup-Ideen, die ich mithilfe von ChatGPT visualisierte. Das Farbkonzept vom Mockup von chatGPT hat dabei mich wie auch den Coach sehr überzeugt. Weswegen dies in die WordPress Seite übernommen wurde. Dem Trainer war eine bildstarke Website wichtig, weshalb ich den gestalterischen Schwerpunkt auf Parallax-Scrolling-Effekte gelegt habe.

Hauptwebsite & Ballzauber – zwei Welten, eine Plattform

Die Website gliedert sich in zwei klar unterschiedliche Bereiche.

Die Hauptseite präsentiert den Coach als Trainer: sein Profil, seine Philosophie, seine Angebote und die Möglichkeit, direkt einen Termin zu buchen. Der Auftritt ist klar, professionell und direkt. Ein Besucher soll in wenigen Sekunden erfassen, wer dieser Coach ist und warum er der Richtige ist. Gestalterisch dominieren dunkle Flächen mit gelben Akzenten, was dem Auftritt Gewicht und Seriosität verleiht.

Die Unterseite Ballzauber richtet sich an Eltern, die ihre kleinen Kinder in einer spielerischen Schule an den Fussball heranführen möchten. Hier war eine andere Ansprache gefragt: leichter, einladender und wärmer, ohne die Markenwelt zu verlassen. Der Hintergrund kommt leicht heller daher, in einem dunkelblau statt schwarz. Die Inhalte sind bewusst einfacher und zugewandter formuliert. So entsteht eine Unterseite, die sich eigenständig anfühlt, aber auf den ersten Blick klar zur selben Marke gehört.

Wireframe & iterativer Entwicklungsprozess

Bevor eine einzige Zeile produktiver Code geschrieben wurde, erstellte ich einen interaktiven Wireframe. Er war kein fertiger Entwurf. Er diente als gemeinsame Arbeitsgrundlage. Mit ihm konnten Ideen sichtbar gemacht und früh echtes Feedback eingeholt werden. Figma Link

Genau das war entscheidend. Erst als der Coach den Wireframe live vor sich sah, wurden viele Vorstellungen konkret. Im Gespräch waren sie noch abstrakt geblieben. Was zunächst stimmig klang, wirkte im Entwurf teilweise anders als erwartet. Daraus entstanden Rückmeldungen, die grössere Anpassungen nötig machten.

Layout, Inhaltsstruktur und Seitenaufbau wurden mehrfach überarbeitet. Vieles wurde im Laufe des Prozesses neu gedacht und umgesetzt.

Auch als die Website fertig schien, war der Prozess nicht abgeschlossen. Der Coach brachte neue Ideen ein. Er wollte Inhalte ergänzen und Bereiche anders strukturieren. Auch diese späten Änderungswünsche flossen in die Umsetzung ein.

Der Wechsel zwischen Entwurf, Feedback und Überarbeitung prägte den gesamten Projektverlauf. Genau dieser enge Austausch hat das Endprodukt massgeblich geformt.

Technische Umsetzung

Die Website wurde mit WordPress umgesetzt. In diesem Projekt arbeitete ich mit einem selbst entwickelten Child Theme, um individuelle Anpassungen flexibel vornehmen zu können.

Die Umsetzung umfasste unter anderem:

• HTML, CSS, JavaScript und PHP
• WordPress Child Theme
• Responsive Layouts für Desktop und Mobile
• Plugin-Anpassungen und -Erweiterungen
• Individuelle Gestaltung einzelner Seitenbereiche

Besondere Aufmerksamkeit galt dabei der mobilen Darstellung, da ein Grossteil der Zielgruppe – junge Sportler*innen sowie deren Eltern, die Website voraussichtlich hauptsächlich über das Smartphone besuchen werden.

Fazit

Dieses Projekt hat mir gezeigt, wie selten ein Endprodukt dem ersten Plan entspricht und wie wichtig es ist, damit konstruktiv umzugehen. Die gestalterische Herausforderung, zwei unterschiedliche Bedürfnisse & Angebote unter einer gemeinsamen Identität anzusprechen, war ebenso lehrreich wie die Erfahrung, dass Anforderungen oft erst konkret werden, wenn man etwas wirklich vor sich sieht. Und manchmal entstehen die besten Ideen erst dann, wenn eine Website schon fast fertig ist. Die Fähigkeit, flexibel auf Feedback zu reagieren, auch grössere Kursänderungen umzusetzen und dabei den Gesamtüberblick zu behalten, war bei diesem Projekt genauso entscheidend wie das technische Handwerk.

(mbi)