Een nieuwe site voor Breskens Rigging Service, en een ontwerpwedstrijd met mezelf

Breskens Rigging Service, het tuigbedrijf in Breskens, had een site op WordPress (opent een externe site). Vandaag heb ik de opvolger opgezet: een eigen site, gebouwd met Next.js (opent een externe site). En voordat ik ook maar één kleur koos, hield ik eerst een wedstrijdje.

Eerst de inhoud, dan het ontwerp

Het eerste wat ik deed was de inhoud overzetten: de diensten, de partners, de contactgegevens. Pas daarna kwam het ontwerp. De inhoud staat los van de vormgeving, zodat elk ontwerp dezelfde teksten en foto's gebruikt. Daardoor kon ik verschillende ontwerpen maken zonder alles telkens opnieuw in te tikken.

Dat maakte een ontwerpwedstrijd mogelijk, met mezelf als enige deelnemer en jury. Ik bouwde 5 ontwerpen, elk met een eigen idee, en kon er met een schakelaar tussen wisselen. Op de echte pagina's, met de echte tekst.

• Duo: de twee riggers staan centraal, als gezicht van het bedrijf.
• Werf: rustig en degelijk, als een goede werkplaats, op een grid dat net uit het midden staat.
• Spec: tuigwerk als techniek, met maten en specificaties voorop.
• Zeegang: de fotografie is de baas, als in een tijdschrift.
• Direct: alles in dienst van contact opnemen.

Waarom zo omslachtig?

Een ontwerp als los plaatje, een mock-up (opent een externe site), ziet er altijd prachtig uit. Tot de echte tekst erin moet. Die is langer, een foto valt anders uit, een knop past niet waar hij zou moeten. Door elk ontwerp op de echte inhoud te bouwen, zag ik dat soort dingen meteen, en niet pas nadat de keuze al gemaakt was.

En de winnaar is

Werf, met de redactionele opmaak van zeegang op de binnenpagina's. Rustig op de voorpagina, en meer ruimte voor foto's waar dat past.

Daarna kwamen de details. De kleuren komen uit het logo: marineblauw, met rood als accent. Er kwamen echte foto's uit Breskens in, de laatste logo's van partners, en op de contactpagina de gezichten van de riggers, Sacha en Pieter. Wie belt, weet zo meteen met wie hij praat.

Meer over de site lees je in de case study.