Case 03 — Website voor een jeugdhuis
Jeugdhuis Wollewei
De website van Jeugdhuis Wollewei in Turnhout: alles wat je er kan doen, de gratis ruimtes en de ticketshop op één plek, in de kleuren en de toon van het jeugdhuis.
ADe uitdaging
Een jeugdhuis doet veel meer dan je zou denken: baravonden, Dry Tuesday, prikkelarme kroegavonden, lunch op schooldagen, workshops, gratis ruimtes voor muziek en creatief werk, een artistiek platform en hulp om je eigen event te organiseren. Dat moest overzichtelijk worden voor jongeren die vooral op hun telefoon zitten, zonder dat het saai of zakelijk aanvoelt.
BDe aanpak
Een statische website in HTML, CSS en JavaScript, gebouwd op een Bootstrap-template en helemaal aangepast aan Wollewei: eigen teksten, de felle kleuren van het jeugdhuis, een opvallend lettertype voor de titels en de foto's van de ruimtes. Elke activiteit en elke ruimte kreeg een eigen pagina, en op de startpagina filter je de ruimtes op wat je wil doen.
CWat het doet
-
01
Alles op één plek
Acht activiteiten, van baravonden en Dry Tuesday tot workshops, elk met een korte uitleg en een eigen pagina.
-
02
Gratis ruimtes
Zes ruimtes, van de opnamestudio tot de creatieve zolder, te filteren op creatief, muziek, productief of chillen.
-
03
MIKS en ik.organiseer
De twee programma's van het jeugdhuis, voor jonge artiesten en voor wie een eigen event wil organiseren, springen eruit.
-
04
Ticketshop
Feestjes en events verwijzen meteen naar de ticketshop van het jeugdhuis, met een vaste knop in de menubalk.
-
05
Contact en openingsuren
Een contactformulier, een kaart en de uren van het bureau, de ruimtes en de baravonden in de footer.
-
06
Wat er binnenkort is
Bovenaan typt de site afwisselend slogans en aankomende events uit, zoals de volgende fuif.
DIn beeld
EOnder de motorkap
- 01Statisch en snel
- Voor de inhoud is geen database of servercode nodig: gewone HTML-pagina's laden snel en zijn goedkoop te hosten.
- 02Filteren zonder herladen
- De ruimtes worden met Isotope gefilterd en herschikt in de pagina zelf, zonder dat die opnieuw laadt.
- 03Gemaakt voor de telefoon
- Het raster van Bootstrap en een uitklapmenu zorgen ervoor dat alles even goed werkt op een klein scherm.
- 04Beweging met mate
- Secties schuiven zacht in beeld tijdens het scrollen (AOS) en de hero typt slogans en events uit (Typed.js).
- 05Huisstijl in variabelen
- Roze, paars, cyaan en groen staan als CSS-variabelen in één stylesheet, zodat de kleuren overal dezelfde zijn.
FIn cijfers
- pagina's
- 17
- activiteiten
- 8
- ruimtes met een eigen pagina
- 6
- filters voor de ruimtes
- 4