Stichting IVAK – Herdefiniëren van de nieuwe rol in het nieuwe culturele landschap
De uitdaging: Het ontwerpen en bouwen van een passende website in een gebruiksvriendelijk platform voor de nieuwe rol van Stichting IVAK.
Het IVAK in Delfzijl moest zichzelf opnieuw uitvinden. Met het uitblijven van subsidie vanuit de overheid heeft er een soort cultuuschok plaatsgevonden in de cultuursector. Landelijk zijn er vele protesten geweest, maar dit heeft helaas weinig opgeleverd. In eerste instantie veranderde er niet zo veel, muziekscholen en orkesten bleven gewoon open en spelen en kunstonderwijs bleef kunstonderwijs. Echter na een aantal jaren werd toch duidelijk dat er iets moest veranderen. De oude manier van het runnen van een culturele instelling zoals IVAK was niet meer haalbaar en moest anders. In heel Nederland zijn daarom veel muziekdocenten noodgedwongen als ZZP-er gaan werken. Ook in Delfzijl, Appingedam en Loppersum. De muziekschool zoals we die kenden bestaat niet meer. Muziekscholen die er nog wel zijn, bestaan zonder subsidie en zijn veelal docenten-collectieven waar eenieder verantwoordelijk is voor zijn eigen inkomen.
Om tóch een eenduidig aanbod te kunnen behouden binnen Delfzijl, om het nieuwe werkgebied van de nieuwe grotere gemeente Eemsdelta (waarin ook Appingedam en Loppersum worden opgenomen) te kunnen bedienen en om te voorkomen dat het cultuuraanbod verdwijnt heeft het IVAK een nieuwe rol aangenomen. IVAK is geen culturele instelling meer, maar meer een verbindende, coachende en faciliterende instelling. Het nieuwe IVAK maakt kunst en cultuur zichtbaar en beschikbaar voor iedereen. VIA IVAK kun je als kunstenaar je publiek bereiken, cursussen volgen en ondersteuning krijgen bij jouw vraagstukken. Als inwoner kun je al het aanbod inzien, subsidie krijgen en je inschrijven voor Naschoolse cursussen. Als vereniging kun je gebruik maken van regelingen, kennis en connecties via het IVAK. Bottomline is: alle kunst en cultuur gaat VIA IVAK!
Het probleem van IVAK was daarbij vooral: Hoe maken we deze nieuwe rol nou inzichtelijk. We worden nog wekelijks gebeld met de vraag wat muziekles kost. We geven zelf geen lessen meer, maar kunnen wél doorverwijzen. Gedurende een jaar hebben we intensief samengewerkt met het IVAK team en een aantal prachtige digitale implementaties van deze nieuwe visie mogen realiseren.
Een nieuwe website die de nieuwe rol duidelijk maakt. Plek voor alle activiteiten van het IVAK en het nieuwe IVAK team technisch ondersteunen bij de implementatie van de nieuwe tools.
De website draaide voorheen op een verouderd en nogal onvriendelijk CMS. Ook was het ontwerp van de site te conceptueel. Mensen raakten de weg kwijt op de website en er was te weinig ruimte voor de rubrieken en groei van het IVAK. Er moest een site komen die zou meegroeien met de ambitie van IVAK: Heel Eemsdelta in contact brengen met ál haar eigen prachtige cultuuraanbod.
Een aantal wensen stonden voorop:
- Een makkelijk door IVAK zelf in te vullen website
- Een filterbare cultuurkaart & lijst met al het aanbod in de gemeente
- Een eigen inlog voor onderwijs & ICC-ers
- Alle gastdocenten inzichtelijk en benaderbaar op de site
- Een aanpasbare winkel voor al het naschoolse aanbod dat elk voor- en najaar zou veranderen.
- Een eigen agenda + IVAK academy agenda
Oh, én er moest binnen 1 maand iets te zien zijn voor de belangrijke presentatie voor gemeenten en aandeelhouders…
Project details
Klant Stichting IVAK
Datum januari 2019 tot oktober 2019
Skills design, development
Tools Sketch / Invision / GIT / WordPress
Bekijk live project »
Kickoff
Allereerst hebben we samen met Irene van Wijhe, marketing & communicatie eindbaas bij IVAK alle wensen en eisen voor de nieuwe website op een rijtje gezet. Na een aantal sessies waren we er uit en lag er een blauwdruk voor de nieuwe site.
Nadat de inhoud globaal bekend was (veel moest nog worden bepaald dus een flexibele site was zeer gewenst) zijn we begonnen de vorm te schetsen. Op basis van deze schetsen is het ontwerp in SketchApp gezet en begonnen de feedbackrondes met Irene en haar team.
Redesign Website
Omdat de website volledig op de schop ging en we ook niet konden bouwen op eerdere versies van de structuur en inhoud van de site hebben we een uitgebreid ontwerptraject gestart. De ontwerpen werden uitgevoerd voor desktop, tablet en mobiele schermen en waren voor het hele IVAK team inzichtelijk via InVision. Via deze tool kon alle feedback gemakkelijk worden verzameld en verwerkt. Zo waren wij (en ook Irene) er zeker van dat iedereen werd gehoord. Ook hebben we er op deze manier voor kunnen zorgen dat er met het prototype binnen een maand een presentatie gegeven kon worden aan de aandeelhouders.
Een huisstijl met 8 kleuren
Voor het ontwerp maakten we dankbaar gebruik van de reeds ontwikkelde nieuwe huisstijl voor het IVAK. De maar liefst 8! heldere huisstijl-kleuren en het speelse logo zorgden ervoor dat wij lekker uit konden pakken qua kleur, vorm en ontwerp. We hebben de verschillende onderdelen van het IVAK in verschillende kleurstellingen vormgegeven. Ook het logo verandert dynamisch afhankelijk van welk onderdeel je op de IVAK website bekijkt.
Ook hebben we geprobeerd de keuze aan de voorkant van de site wat te beperken en er een site van gemaakt waarin je, als je tijd hebt, lekker nieuwe cultuur kunt ontdekken, maar ook een site waarin je snel kunt vinden wat je zoekt.
Fotoshoot
De lang gekoesterde wens van Irene was om een fotoshoot te organiseren waarin bekende elementen van het landschap en de drie gemeenten naar voren komen in combinatie met cultuur. De achterliggende wens was zeer helder en door Irene al duidelijk onder woorden gebracht. Wij benadrukken altijd het voordeel van eigen fotografie op een website dus we waren zeer zeker enthousiast voorstander van dit plan.
Onze briefing was daarom vooral technisch: hoe breed moet een foto minimaal zijn, waar hou je rekening mee met plaatsing van het onderwerp op een foto op een website of advertentie? Hoe behoud je voldoende ruimte voor tekst in je foto?
In samenwerking met hun fotograaf Lesanka Honing heeft IVAK een aantal fotoshoots georganiseerd. Zonder het materiaal van deze shoots was de website een stuk minder origineel geworden.
© Alle Fotografie: Lesanka Honingh en Stichting IVAK
Ontwikkeling custom WordPress website
Voor de ontwikkeling hebben we de website op een development, een acceptatie en een live-omgeving laten draaien. Elke wijziging die af was werd als aparte GIT-commit live gezet. Grote wijzigingen kwamen in een GIT-branch en voor de ontwikkeling van de Custom Plugins is er een aparte omgeving opgezet om deze apart te kunnen ontwikkelen en testen.
Ook hebben we de website voorzien van een Semantic versioning systeem; elke wijziging moet dan een afgeronde feature of fix moet zijn bij de livegang en we bepalen dan opnieuw het versienummer.
Mobile First Development
De website is opgebouwd volgens het Mobile First principe.
Dit wil zeggen dat de CSS is opgebouwd vanuit het principe dat je begint te stylen voor alle kleinste schermen. Die stijlregels zet je in een base.scss bestand. Deze stijlregels gelden voor alle schermen vanaf het kleinste scherm (in de praktijk vaak nog 320px als minimum breedte).
Vervolgens maak je voor elk breekpunt een nieuw bestand, in deze bestanden komen de uitzonderingen voor elk scherm dat een maatje groter is. Dus minimaal heb je tablets&up (768px en hoger) en desktops&up (1025px&up) nodig.
Daarnaast heb je nog een aantal scss bestanden nodig voor wordpress, normaliseren van je browsers en voor je mixins en kleuren. (Zie codepen voor een voorbeeldje van de mixins die we gebruiken voor flexbox.)
See the Pen Flexbox Mixins by Vita (@vitavanderlijke) on CodePen.
CSSGrid & Flexbox samen
Voor de responsive weergave hebben we gebruik gemaakt van de mogelijkheden van cssgrid en flexbox. De kolommen worden opgebouwd volgens het cssgrid en op basis van de viewport worden de onderdelen verdeeld over het grid. De flexibele elementen worden gestyled middels flexbox. Dit zorgde op sommige plekken voor wat IE11 problematiek, maar dit hebben we overwonnen door de styling voor IE wat explicieter te maken. D.w.z IE ondersteunt helaas nog geen grid templates, deze moeten apart per rij worden aangeduid met CSS Grid.
Wil je hier echt meer over weten? Kom stage lopen!
WordPress Plugin 1: De Cultuurkaart
Gedurende de ontwikkeling van de website speelden er een aantal andere projecten die gelijktijdig met de site werden ontwikkeld. De cultuurkaart was een van de wensen van het IVAK. Ze wilden graag ál het cultuuraanbod in de gemeente inzichtelijk maken middels een zelf te beheren cultuurkaart.
Op de kaart moet je kunnen filteren, klikken en navigeren naar lesaanbod, kunstenaars, verenigingen, en instellingen zoals theaters, bibliotheken en galeries. Ook culturele bezienswaardigheden moesten een plekje krijgen op de kaart. Middels een oproep in de pers wordt iedereen aangeroepen om zich aan te melden voor een plekje op de kaart. Eind 2020 moet al het aanbod er op staan. Wij hebben een custom WordPress kaart plugin gebouwd met Leaflet. Lees meer over dit project »
WordPress Plugin 2:
Na Schools Aanbod
De tweede custom plugin die we voor IVAK hebben ontwikkeld was het na schoolse aanbod. In de vorm van Toefkes en NSA/Appingedam biedt het IVAK een uitdagend naschools programma aan op verschillende basisscholen in de drie gemeenten. Ouders kunnen hun kinderen hier voor gratis inschrijven. Een kleine drempelvergoeding van 1 euro wordt vervolgens gevraagd bij deelname aan de cursus.
Het aanbod moest inzichtelijk op de website. Per half jaar in te vullen door het IVAK team en ook via de back-end inzichtelijk wie zich waarvoor heeft ingeschreven, welke cursussen er allemaal vol zitten, welk kind van welke school komt en op welke scholen ze aangemeld zijn. Deze informatie kan vanuit onze WordPress plugin worden ge-exporteerd naar een overzichtelijk excel document.
Ouders met meerdere kinderen moeten in 1 procedure hun kinderen kunnen aanmelden voor meerdere cursussen. Zonder steeds opnieuw hun gegevens in te hoeven vullen.
Ook deze plugin moest responsive kunnen worden ingezet en het IVAK team wil zelf de cursussen kunnen beheren en de plugin na de inschrijfperiode de-activeren.
WordPress Plugin 3:
Gastdocentenlijst
De derde custom plugin die we voor IVAK hebben ontwikkeld is de weergave van de gastdocenten. Deze filterbare en responsive lijst van docenten kan door het IVAK team worden beheerd en naar eigen inzicht middels een shortcode op een pagina naar keuze worden ingezet. In de lijst kunnen scholen gemakkelijk een docent zoeken wanneer zij een gastles of workshop op hun school willen organiseren.
WordPress Custom Post Type: IVAK Academy & Agenda
De vierde modificatie die we hebben doorgevoerd is een custom post type voor de IVAK Academy en agenda. Voor de nieuw opgezette academy is het belangrijk dat IVAK data kan invoeren voor de bijeenkomsten en dit makkelijk kan communiceren naar geïnteresseerden. De academy-bijeenkomsten worden op een eigen template getoond op de homepage in WordPress.
Voor het ICC gedeelte is er nog een aparte weergave voor de academy gebouwd, hier kunnen ingelogde gebruikers zich direct aanmelden voor een bijeenkomst zodat voor IVAK duidelijk is wie zich heeft aangemeld.
Custom WordPress: Apart Dashboard voor ICC-ers en scholen
De vijfde modificatie die we hebben doorgevoerd is een eigen Dashboard voor ICC-ers en scholen. Informatie die hier wordt gedeeld zijn bijeenkomsten, vergaderingen, landelijk ICC nieuws en interessante regelingen in informatie speciaal voor scholen binnen de drie gemeenten.
Het Dashboard wordt beheerd door het IVAK onderwijs-team en zij plaatsen hier verslagen van de bijeenkomsten, het interessante nieuws voor het onderwijs wordt hier doorgeplaatst alsook de gastdocenten plugin. De pagina is volledig naar hun eigen inzicht aanpasbaar. Alle scholen hebben een eigen login.
Ook een Custom Implementatie laten bouwen?
We luisteren graag naar je wensen en geven vrijblijvend een advies voor jouw nieuwe project.
