Een ontwerp is een belofte: zo gaat je site eruitzien en zo gaat hij werken. Maar tussen dat goedgekeurde ontwerp en de site die uiteindelijk live staat, zit een stap die vaak onzichtbaar blijft. Het ontwerp moet worden omgezet in code, in echte, werkende techniek die in elke browser doet wat de bedoeling was. Juist in die stap gaan dingen mis als je niet oppast: afstanden die niet kloppen, een knop die anders reageert, een lettertype dat net wat afwijkt. In deze gids leg ik uit wat er in die fase gebeurt en hoe je voorkomt dat de details die je ontwerp goed maakten onderweg verloren gaan.
Wat er gebeurt tussen ontwerp en site
Het ontwerp dat je goedkeurt is in feite een gedetailleerde tekening. Het laat zien hoe alles eruitziet en wat er gebeurt als je ergens op klikt, maar het is nog geen werkende site. Om dat te worden, moet iemand het ontwerp vertalen naar code: de instructies die de browser vertellen hoe de pagina moet worden opgebouwd, hoe groot alles is, welke kleuren waar komen en wat er gebeurt bij een klik of een muisbeweging.
Die vertaalslag is vakwerk. Het ontwerp toont het wat, de code regelt het hoe. En net als bij een vertaling van de ene taal naar de andere kan er nuance verloren gaan als degene die vertaalt niet precies aanvoelt wat de oorspronkelijke bedoeling was. Daarom is deze fase belangrijker dan hij van buiten lijkt.
Waar het vaak misgaat
De klassieke valkuil ontstaat wanneer ontwerp en bouw bij verschillende mensen liggen. De ontwerper levert een mooi plaatje, de bouwer maakt er code van, maar de twee spreken elkaar nauwelijks. Het gevolg is een site die in de buurt komt van het ontwerp maar er net niet hetzelfde uitziet of voelt.
Het zijn meestal de kleine dingen: een afstand die net te krap is, een knop die niet reageert zoals bedoeld, beeld dat anders is bijgesneden. Apart lijken het muggenzifterijen, maar samen bepalen ze of een site verzorgd of slordig oogt. Hoe consistentie in die details het verschil maakt, lees je in de blog over consistentie in ontwerp.
Het voordeel van ontwerp en bouw in één hand
De zekerste manier om die overdrachtsfouten te voorkomen, is om ontwerp en bouw bij dezelfde persoon te leggen. Wie het ontwerp heeft bedacht, weet precies waarom elke afstand, kleur en knop zo gekozen is. Bij het omzetten naar code hoeft er niets te worden geraden, want de bedoeling zit al in hetzelfde hoofd.
Zo werk ik zelf: het ontwerp dat je goedkeurt, bouw ik ook. Daardoor is er geen kloof tussen plan en uitvoering en klopt de site met wat je hebt gezien. Het scheelt rondes, voorkomt teleurstelling en houdt het traject overzichtelijk. Meer over deze werkwijze lees je op de pagina over webdesign op maat.
De waarde van een ontwerp zit in de uitvoering. Een prachtig plan dat slordig wordt gebouwd, is alsnog een slordige site.
De details die het verschil maken
Bij het omzetten naar code komen een paar zaken extra nauw.
- Witruimte en afstanden. De rust in een ontwerp komt vaak van precieze afstanden. Wijken die af, dan voelt het meteen anders.
- Typografie. Het juiste lettertype, de juiste grootte en regelafstand bepalen de leesbaarheid. Hier mag niets verschuiven.
- Gedrag bij interactie. Wat gebeurt er als je over een knop beweegt of een formulier verkeerd invult? Dat hoort net zo doordacht te zijn als het uiterlijk.
- Snelheid. Een ontwerp goed bouwen betekent ook dat de site licht en snel blijft. Meer hierover in de blog over je website sneller maken.
Meekijken via een preview
Je hoeft niet af te wachten tot de site klaar is. Tijdens het bouwen zet ik de site op een tijdelijk adres, zodat je tussentijds kunt meekijken hoe het ontwerp werkende code wordt. Je beoordeelt het zoals je bezoekers dat zullen doen: ziet het er goed uit, werkt alles, voelt het prettig?
Die preview is je controlemoment. Klopt er iets niet met wat je in het ontwerp had gezien, dan passen we het aan voordat de site live gaat. Zo is de oplevering nooit een verrassing, maar de bevestiging van iets wat je al hebt zien groeien.
Zelf doen of uitbesteden?
Een ontwerp zelf naar code omzetten vraagt technische kennis die de meeste ondernemers niet hebben en ook niet zouden moeten willen opbouwen. Het is precies het soort werk waar uitbesteden loont, omdat een klein foutje in de uitvoering een mooi ontwerp alsnog kan ontsieren.
Werk je met iemand die ontwerpt én bouwt, dan houd je grip op het hele traject zonder zelf de techniek te hoeven begrijpen. Wil je weten hoe dat bij jouw project zou lopen? Bekijk de diensten of leg me je vraag voor via de contactpagina. Hoe het ontwerp tot stand komt voordat het gebouwd wordt, lees je in de gids over ontwerpen in Figma.
Veelgestelde vragen
Dat gebeurt wanneer ontwerp en bouw bij verschillende mensen liggen en details verloren gaan in de overdracht. Een verkeerde afstand, een net iets ander lettertype of een knop die anders reageert. Bij ontwerp en bouw in één hand blijft dat verschil minimaal omdat dezelfde persoon beide keuzes maakt.
Het betekent dat dezelfde persoon het ontwerp bedenkt en het ook omzet in werkende code. Er is geen overdracht waarin bedoelingen verloren gaan, want degene die bouwt weet precies waarom elke keuze is gemaakt. Het eindresultaat klopt daardoor met wat je hebt goedgekeurd.
Ja. Tijdens het bouwen krijg je een preview op een tijdelijk adres, zodat je kunt meekijken hoe het ontwerp werkende code wordt. Zo zie je het resultaat groeien en kun je tijdig reageren als iets nog niet klopt.
Nee. Je beoordeelt de site zoals je bezoekers dat doen: ziet het er goed uit, werkt alles, voelt het prettig? De techniek eronder is mijn zorg. Jij let op of het klopt met wat je voor ogen had.
Verder in de kennisbank: Ontwerpen in Figma · Wireframes en prototypes · Webdesign: de complete gids