LSP Magazine was verouderd en toe aan een frisse, nieuwe uitstraling. Nadat we duidelijkheid kregen over de structuur en het aantal pagina’s, konden we aan de slag met het design.
De instructies vanuit de klant waren helder: “Ga lekker los.” Die creatieve vrijheid hebben we dan ook volop benut.
Het enige waar we ons aan moesten houden, was het originele LSP Magazine-logo: een roze/paars logo dat we als basis voor het ontwerp hebben gebruikt. Alle designs zijn uitgewerkt in Figma, zodat we de ontwerpen gemakkelijk digitaal konden delen.
Het designproces hebben we opgedeeld in verschillende fases om efficiënt te werk te gaan. Om de twee weken planden we een afspraak in (soms online, soms op locatie) om een aantal pagina’s te bespreken.
Waar we normaal beginnen met het ontwerpen van een volledige homepage, kozen we dit keer voor een andere aanpak.
De klant gaf aan het fijner te vinden om een keuze te kunnen maken. Omdat de website zo'n unieke uitstraling krijgt hebben we ervoor gekozen om o.b.v de Hero's verschillende designs te maken.
Daarbij hebben we geëxperimenteerd in de volgende onderdelen:
Na het vaststellen van de basis, konden we verder gaan met het designen van alle andere pagina's. Ook hier moesten we alvast rekening houden met bepaalde technieken voor tijdens het bouwen.
Per pagina verschilt het kleurgebruik om zo de gebruikerservaring (UX/UI) te optimaliseren. Het verschil in roze heeft per pagina specifieke functie. We maakten onze design keuzes op basis van verschillende onderdelen:
Toen we samen met Michel alle pagina’s hadden doorgenomen en akkoord waren, konden we starten met de bouw van de website. Omdat we in het design al goed hadden nagedacht over de technische uitdagingen van dit project, konden we tijdens de ontwikkeling efficiënt te werk gaan.
De website is gebouwd in WordPress, waarbij we gebruik hebben gemaakt van het thema Breakdance. Een belangrijke wens van Michel was om in de toekomst zelf gemakkelijk aanpassingen te kunnen doen. Breakdance is daarvoor zeer geschikt, omdat het een gebruiksvriendelijke interface biedt.
De website bevatte een aantal onderdelen die technisch gezien een leuke uitdaging vormden. Hieronder licht ik die onderdelen één voor één toe.
Een van de beste features uit breakdance is dat je global blocks kan aanmaken. Dit zijn onderdelen op de website die op meerdere pagina's terugkomen. Waar je bij een normale editor al deze blokken handmatig moet aanpassen als dat nodig is, hoef je dat hier maar vanaf één punt te doen.
Dus pas je het globale block aan dan veranderd dit element op alle pagina's.
Zo voorkom je dat hetzelfde element wisselende informatie bevat en weet je zeker dat het overal gelijk staat.
Voor Michel een heel belangrijk onderdeel, omdat hij het zo heel makkelijk kan aanpassen.
Voor LSP Magazine hebben we binnen Breakdance gewerkt met losse templates voor verschillende onderdelen van de website. Deze templates zijn dynamisch opgezet en automatisch gekoppeld aan de juiste content.
Zo hebben we aparte templates gemaakt voor onder andere:
Door deze dynamische opzet worden de juiste ontwerpen automatisch toegepast op basis van het type inhoud, zoals een workshop of een product. Dit maakt het beheer overzichtelijk en zorgt ervoor dat nieuwe pagina’s of producten meteen in de juiste stijl worden weergegeven, zonder dat daar handmatig werk voor nodig is.
Deze aanpak sluit goed aan bij de wens om de website later zelf te kunnen beheren en uitbreiden, omdat alles logisch is opgebouwd en makkelijk aan te passen blijft.
In het webshop systeem hebben we extra functionaliteiten toegevoegd. Deze extra functionaliteitien zijn dan weer gekoppeld aan een membership plan. Voor de webshop hebben we drie "membership plans" opgesteld. In elk plan zitten bepaalde functionaliteiten gekoppeld.
Zo krijgen member:
