Ontwerp en bouw
Renderink Techniek
Een tweetalige website voor een metaalbewerker in Oldenzaal die inkopers en nieuwe vakmensen allebei moet overtuigen.
Wat de opdrachtgever is
Renderink Techniek bestaat niet.
Het is een verzonnen metaalbewerker in Oldenzaal, een toeleverancier die in opdracht draait, freest, lasersnijdt en monteert voor machinebouwers in Nederland en Duitsland. Ik heb dit bedrijf bedacht om één ding te laten zien: hoe ik een website ontwerp en bouw voor een technisch MKB-bedrijf dat zijn werk niet aan consumenten verkoopt, maar aan inkopers die snel willen weten of je kunt leveren, en dat tegelijk vakmensen zoekt.
Alles op de site is verzonnen: de naam, het machinepark, de certificeringen, het adres en de contactpersonen. De keuzes eronder zijn echt. Twente telt veel van dit soort bedrijven, en ze laten online zelden zien hoe goed hun werk is.
Het ontwerpprobleem
Een toeleverancier heeft twee bezoekers die elkaar in de weg zitten. De inkoper of werkvoorbereider van een machinebouwer, vaak in Duitsland, wil eerst weten of het bedrijf in aanmerking komt: welke machines, welke werkstukmaat, welke toleranties, welke certificering, welke levertijd, en of er iemand Duits spreekt. Daarna wil hij een tekening uploaden en een offerte aanvragen. De vakman die een baan zoekt, wil iets heel anders: hoe het er in de werkplaats aan toegaat en wie hij kan bellen. Eén homepage die beide tegelijk bedient, bedient geen van beide. En de site moet in twee talen bestaan, met een eigen Duitse kant voor klanten over de grens.
Beslissingen
-
01
Twee ingangen, direct onder de kop
De homepage splitst binnen het eerste scherm: "Offerte aanvragen" leidt de inkoper naar het werkformulier, "Werken bij Renderink" leidt de vakman naar de werkplaats en de vacatures. Twee knoppen van gelijk gewicht, zodat geen van beide bezoekers zich tweede keus voelt. Daarna zijn het twee paden met elk hun eigen tempo. De inkoper scrolt niet door een verhaal over de werkplaats heen om bij een formulier te komen.
-
02
Een kwalificatiestrook boven de vouw
Voordat een nieuwe inkoper iets leest, ziet hij op desktop boven de vouw de vijf feiten die bepalen of hij verder leest: het aantal CNC-machines, de maximale werkstukmaat, de kleinste tolerantie, de certificering en de levertijd van een serie. Het is de eerste rij gegevens op de site en een van de belangrijkste. Of het aanbod past bij de wensen van de bezoeker is meteen zichtbaar.
-
03
Het machinepark als tabel, niet als kaarten
Een machinepark is een lijst met specificaties, en een lijst met specificaties is een tabel. De verleiding is om er kaarten van te maken met een foto per machine; dat ziet er beter uit in een ontwerp en slechter in gebruik, omdat de inkoper vergelijkt in plaats van kijkt. Vanaf 1280 pixels breed is het een echte tabel. Daaronder wordt elke machine een korte opsomming met dezelfde drie gegevens in dezelfde volgorde: assen, maximale werkstukmaat, aantal. Niets verdwijnt in een uitklapper, en een filter op discipline, aantal assen en werkstukmaat maakt de lijst kort.
-
04
Tweetalig, ook waar het Duits langer is
Het ontwerp is in het Nederlands gemaakt, met een Duitse homepage als test: breekt de opmaak als de woorden langer worden? In de bouw heb ik elke pagina ook met de Duitse tekst gecontroleerd, en waar het Duits niet paste, gaf de opmaak toe: de twee knoppen in de hero stapelen, en het contactpaar staat pas vanaf 1024 pixels naast elkaar. De taalwissel staat op elke pagina op dezelfde plek en wisselt naar dezelfde pagina, niet naar de homepage.
-
05
Contact en offerteaanvraag zijn twee pagina's
De offerteaanvraag is een werkformulier: tekeningen, aantal, materiaal, gewenste leverdatum. Contact is voor een algemene vraag: een contactpersoon voor Nederland en een voor Duitsland, het adres van de werkplaats en een kort formulier. Wie ze samenvoegt, krijgt een formulier dat voor de ene bezoeker te lang is en voor de andere te leeg. Ik heb dit onderzocht voordat ik het ontwierp, omdat het de meest gemaakte fout op dit soort sites is.
-
06
De grens tussen prototype en bouw is benoemd
Het klikbare ontwerp verstuurt geen formulieren. In plaats daarvan zijn de lege, de ingevulde, de foute en de bevestigde staat van de offerteaanvraag als vier schermen ontworpen, zodat de opdrachtgever weet wat er moet gebeuren zonder dat er iets gebeurt. Dat is ook hoe ik het bij een echte opdracht doe.
Hoe het eruitziet
Koel wit, twee schreefloze letters (Archivo voor de koppen, Inter voor de lopende tekst), één gele accentkleur als markering, hairlines en lichte vlakken als scheiding tussen de secties. Dicht, feitelijk, industrieel. Het is bewust het tegendeel van De Bleekhoek.
Waarmee het is gebouwd
WordPress met ACF op Bedrock, Tailwind, Alpine.js en Vite, Polylang voor de twee talen en Gravity Forms voor de formulieren. Het machinepark, de kwalificatiestrook en de certificeringen zijn contentblokken die de opdrachtgever zelf bijhoudt. Tweetaligheid via twee gespiegelde paginasets met één gedeelde set componenten. Van de 33 beeldplekken zijn er 26 gevuld met rechtenvrij materiaal zonder herkenbare gezichten of merknamen, en van elk beeld is vastgelegd waar het vandaan komt. De zeven plekken voor mensen zijn bewust een getekende tegel gebleven: een stockfoto zou een echt gezicht aan een verzonnen persoon geven.
Resultaat
Bij de meting van oktober 2026 met axe-core leverden de homepage, Machinepark en Verspaning nul toegankelijkheidsovertredingen op, en Lighthouse gaf de toegankelijkheid 100 op mobiel. Gemeten op de bouw vóór livegang. Hoe ik meet, staat in de styleguide.