Zo is dit ontwerp gemaakt
Dit proefdesign is gemaakt op basis van je eigen site, je logo, je merkgroen en je eigen foto's. Elke keuze op de pagina heeft een reden en die staan hier op een rij, zodat je kunt beoordelen wat je ervan vindt.
7 kleuren, elk met een eigen taak
Zeven kleuren met elk één taak. Je merkgroen blijft de hoofdrol spelen, het amber uit je eigen site krijgt de signaalfunctie terwijl staal en beton de rustige basis vormen. Het rood uit de kleurfamilie van de richting is bewust weggelaten, omdat rood naast groen als een stoplicht leest.
Beton
#f2f3f0
Het canvas. Een licht betongrijs in plaats van het harde wit van de huidige site, zodat de witte kaarten en de foto's ruimte krijgen.
Staal
#16202a
Alle lopende tekst en het verloop over de foto in de hero. Een diep staalblauw, geen puur zwart.
Merkgroen
#0a9e12
Je eigen groen, een fractie gedempt. Voor de lijn bovenaan de pagina, de knop in de header, de merkband, de voortgangslijn bij de stappen, de plaat achter de pandfoto en de pijlen.
Donkergroen
#0b6b14
Het donkergroen van je iconen, voor het contactblok.
Staalblauw
#2b4a66
De nummers van de vier stappen en de lijnen op het donkere vlak. Komt uit de kleurfamilie van de richting.
Amber
#f2a900
De kleur van vuur en signaal, afgeleid van het amber dat al in de instellingen van je site zit. Voor de cijfers, het telefoonnummer en de blokjes in de merkband.
Donker staal
#1b2a36
Het brekende vlak met de cijfers en de normen, als een typeplaatje op een machine. Ook de footer staat erop, met een groene bovenlijn erboven.
2 letters, 2 rollen
Anton
Koppen
Een smalle, zware letter die groot gezet leest als een stempel op een blik. Hij past bij minuten, laagdiktes en staal en vervangt de zachte Poppins-koppen van de huidige site.
Work Sans
Lopende tekst
Een robuuste sans met open vormen die lange technische zinnen leesbaar houdt, ook op een telefoon op de bouwplaats.
Vormen en randen
Geen rondingen. De hero loopt onderaan schuin af en het contactblok begint met dezelfde schuine lijn, zodat de pagina in staal gesneden lijkt. De foto van het pand en de meetfoto zijn scherp gesneden met een gekleurde plaat die er rechtsboven achter uitsteekt (groen bij het pand, amber bij de meting); de stapkaarten zijn scherp en wit met een groen stapnummer.
Beweging die ondersteunt
Eén moment bij het laden: de kop komt regel voor regel op, dan de intro, dan de foto van de staalhal en als laatste de groene merkband. Daarna beweegt alleen wat een functie heeft: de merknamen lopen rustig door de band, de voortgangslijn boven de vier stappen loopt groen vol terwijl je scrolt en de stapnummers kleuren mee, de foto in de hero schuift langzaam mee, de cijfers tellen op zodra ze in beeld komen en kaarten tillen op als je eroverheen gaat.
Keuzes per sectie
- Header
Transparant over de herofoto met een dikke groene lijn langs de bovenrand, de navigatie in Anton en rechts een groene knop naar het laagdikteadvies.
De balk hoort bij het beeld in plaats van erboven te hangen; de groene lijn is de eerste streep van je huisstijl die je ziet en de knop rechts is voor wie meteen advies wil.
- Hero
Eén kop over de volle breedte met daarachter de foto van een staalconstructie, onderaan schuin afgesneden.
Een werkvoorbereider met een eis in minuten leest eerst wat je doet en ziet daarachter het materiaal zelf. De hero is bewust niet schermvullend, zodat de merkband al in beeld begint.
- Merkband
Een groene band over de volle breedte waarin de zeven productmerken die je levert rustig doorlopen, met een amber blokje tussen elke naam.
Je hebt geen klantlogo's op de site, maar de merken Nullifire, Hensotherm, Hempel, Promapaint, Teknos, Firetex en Perlifoc kent elke applicateur. Die namen zijn het vertrouwen.
- Diensten
Vier stappen die oplopen naar rechts, met een voortgangslijn erboven die groen volloopt terwijl je scrolt en nummers die één voor één meekleuren.
Advies, levering, controle en certificaat volgen elkaar op in een vaste volgorde; de trap omhoog en de lijn die volloopt laten zien dat je ergens naartoe werkt, zonder vier gelijke tegels met dezelfde knop.
- Over ons
Tekst over het familiebedrijf links met een open plek voor portretten, rechts de foto van het pand met een groene plaat erachter.
De site toont geen gezichten. Het pand is nu het gezicht en de lege plek laat eerlijk zien wat er nog nodig is.
- Cijfers
Donker staalvlak met links de kop, de intro en de normen per materiaal, rechts vier cijfers van je eigen site in amber, twee bij twee.
Zonder reviews zijn de getallen het hardste bewijs: 120 en 240 minuten, 3 jaar geldig certificaat, bestellen voor 11:00. De normen ernaast vullen de linkerkolom en zeggen waar het certificaat op rust.
- Kennisbank
Het ene artikel groot met zijn foto, ernaast twee plekken voor de volgende artikelen.
De kennisbank is in augustus 2026 gestart met één stuk. Dat verdient de ruimte en de twee plekken ernaast laten zien dat er meer komt.
- Contact
Donkergroen blok met links de meetfoto op een amber plaat en rechts het telefoonnummer als grootste element.
Iemand op de bouw belt. Het nummer staat groot in amber, met het mailadres, het magazijnadres en één knop naar het laagdikteadvies.
- Footer
Donker staal met een dikke groene bovenlijn, je naam groot in Anton met de slogan links en drie kolommen rechts.
De footer staat los van het contactblok, in een eigen kleur. Met de naam groot, adres, de pagina's van deze site en je huidige pagina's is het een sectie met leven in plaats van een regel tekst.
Wat er met de huisstijl is gedaan
Overgenomen: je logo, het losse groene beeldmerk, je merkgroen als hoofdkleur, je donkergroen voor het contactblok, de je-vorm en je eigen foto's van de staalhal, de laagdiktemeting en het pand. Verrijkt: het groen is een fractie gedempt zodat witte tekst erop leesbaar blijft, het wit is betongrijs geworden en het amber uit de instellingen van je site is naar voren gehaald als signaalkleur. Niet overgenomen: Poppins, de kapitalen en de vier gelijke tegels met een knop eronder.
Proefdesign door SHD Services. Terug naar het proefdesign