The Beertenders

Een digitaal platform voor content van the Beertenders.

Klant:
The Beertenders
Tech-stack:
Next.js / CSS modules / Contentful / Javascript
Rol:
Front-end Engineer / UI Designer
Jaar:
2022
mockup van het home scherm van The Beertenders

Opdracht

Uitbreiding van de bestaande website met content van de klant en vernieuwing van de UI.

De klant wilde verschillende nieuwe functies aan de website toevoegen, zoals leeftijdscontrole, het tonen van blogs op een aparte pagina en een speler voor hun podcasts.

De vorige site werd snel ontworpen en sloot niet aan bij de visuele identiteit van de klant. Ik kreeg de vrijheid om de UI beter te laten aansluiten en de UX waar mogelijk te verbeteren.

een pagina met verschillende blogposts

Met Next.js maakt de site gebruik van een combinatie van Incremental Static Site Generation (ISSG) en Server Side Rendering (SSR). De blogs en podcasts worden bijvoorbeeld gerenderd met ISSG, omdat deze inhoud niet regelmatig verandert en de prestaties daardoor enorm verbeteren.

De blogs worden ingeladen via het headless Contentful CMS. De klant heeft hier volledige controle over. De podcasts worden geüpload op een speciaal platform en worden via RSS ingeladen en getoond op de website.

De styling is gedaan met CSS-modules om de functionaliteit van de componenten te scheiden van het uiterlijk. E-mails en nieuwsbrieven worden verzonden met Mailjet in een speciaal ontworpen sjabloon dat dezelfde huisstijl heeft als de website.

De vorige website had een lichte, witte uitstraling. Met de vernieuwde gebruikersinterface heb ik voor een andere aanpak gekozen. De achtergrondkleur is nu een donkere grijstint, overgenomen van het visitekaartje van de klant. De knoppen zijn veranderd van oranje naar bruin, als verwijzing naar een bierflesje.

een podcast speler op de website van the Beertenders

Werkzaamheden

Als ZZP'er was ik zelfstandig verantwoordelijk voor zowel de UI als de Front-end. Het bureau dat eerder aan de website werkte, had het grootste deel van de back-end al opgezet, en ik kon van daaruit verder werken. Met hen kon ik overleggen over de toepassingen en ontwerpkeuzes.

Bekijk meer