Website voor een sportschool
Dit is een eigen ontwerp dat ik gemaakt heb rond Sportschool Vonk, een zaal die ik zelf verzonnen heb. Het is dus geen klantopdracht, maar een uitgewerkt voorbeeld van wat maatwerk voor een sportschool oplevert. Alles wat hieronder staat is echt gebouwd en staat online.
Waar een sporter op zoekt
Een sportschool wordt 's avonds vanaf de bank opgezocht, met twee vragen tegelijk: wanneer is er een les die mij past, en wat kost het per maand? Zo'n site is in de eerste plaats iets om iets in op te zoeken. Lukt dat niet meteen, dan kijkt diegene bij de zaal om de hoek verder.
Daar komt bij dat niemand meteen een abonnement neemt. De stap die mensen wel zetten is een keer meedoen met een les. In dit ontwerp staat het rooster daarom vlak onder de kop, binnen een scroll.
Vier pagina's, rooster vooraan
Vonk telt vier pagina's en een foutpagina. Het is geen plaatje van een ontwerp: je kunt de site openen op je telefoon en overal op klikken.
- Pagina's Home, trainingen, rooster en tarieven, contact. Plus een 404-pagina voor wie een oud adres intypt.
- Rooster De hele week per dag in een tabel, met de dag van vandaag gemarkeerd. Op de homepage staat een uittreksel dat alleen de lessen van vandaag laat zien.
- Tarieven Rijen met een prijs en een zin uitleg, en daaronder een zwarte balk met de regel dat alles maandelijks opzegbaar is.
- Trainingen Elke vorm een eigen stuk met foto, uitleg en de tijden waarop hij op het rooster staat.
- Contact Een formulier waarin bezoekers kiezen welke les ze willen proberen, met daarnaast het telefoonnummer, het adres en een knop naar Google Maps.
- Mobiel Zodra je 400 pixels gescrold hebt, schuift er een proefles-knop in beeld die blijft staan.
Een rooster dat op een telefoon leesbaar blijft
Het weekrooster heeft een eigen pagina en staat daar op een grijs vlak, zodat je het terugvindt zonder te zoeken. Een klein script kijkt welke dag het is en zet er in het rood "Vandaag" bij. Hetzelfde principe filtert het uittreksel op de homepage. Werkt JavaScript niet, dan blijft de volledige lijst staan en mist een bezoeker niets.
Op een telefoon schuift zo'n tabel binnen zijn eigen kader opzij. De pagina zelf blijft stilstaan, want een site die horizontaal wiebelt voelt kapot.
Het rooster en de tarieven zijn de twee onderdelen die echt onderhoud vragen. Verschuift er een les of gaat er een prijs omhoog, dan moet iemand dat bijwerken. Bij een klant spreek ik daarom vooraf af wie dat doet: jij zelf, of ik via het servicepakket.
De keuzes achter het uiterlijk
Een eerdere versie van dit ontwerp had een donkere achtergrond. Die heb ik omgedraaid. Nu draagt het licht de pagina, als een hal met hoge ramen, met zwarte lijnen eroverheen en een signaalrood dat alleen op interactie en markering staat: knoppen, de actieve menulink, de vandaag-markering, een foutmelding in het formulier en de punt in het woordmerk.
De koppen staan in Bricolage Grotesque, een zware letter die in kapitalen leest als de belettering op een zaalmuur. Daar hoort een rustige tekstletter naast, want het rooster bestaat uit kleine tabelcellen. Dat werd Public Sans. Allebei staan ze in de site zelf en niet bij Google, dus bij het laden gaat er geen verzoek naar buiten.
Verder beweegt er weinig. Knoppen en links reageren als je ze aanwijst, maar niets komt bij het scrollen in beeld gefaded. De site staat stil en de sporters bewegen. Alle foto's zijn zwart-wit, via een filter in de stylesheet. Dat maakt beeld uit een zaal met wisselend kunstlicht in een klap consistent en houdt het rood de enige kleur die opvalt.
Wat wordt het voor jouw zaal?
Stuur me een bericht met de naam van je sportschool en welke lessen je geeft. Ik bouw een voorbeeld van je homepage met je eigen rooster erin, zodat je op je telefoon ziet wat het wordt. Dat kost je niets en je zit nergens aan vast.
Liever eerst zelf rondklikken? Bekijk dit ontwerp live.