Tussen een mooi ontwerp en een werkende website zit een vertaalslag die vaak onderschat wordt. Een ontwerp is een stilstaand plaatje, een site is iets dat reageert op klikken, schermformaten en echte content. In die overgang sneuvelen details als niemand erop let. Deze gids legt uit hoe het omzetten van ontwerp naar code verloopt, waar het misgaat en hoe je controleert dat het eindresultaat klopt met wat je voor ogen had.

Waarom een ontwerp niet hetzelfde is als een site

Een ontwerp toont een of twee vaste momentopnames: hoe een pagina eruitziet op een bepaalde breedte, met voorbeeldteksten en een paar plaatjes. Een echte site is dynamisch. Teksten kunnen langer zijn dan de ontwerper aannam, een knop krijgt een hover-effect, een menu klapt op mobiel anders open. Al die toestanden staan niet in het ontwerp, maar moeten wel bedacht en gebouwd worden.

Daarom is het omzetten geen mechanisch overtrekken, maar een reeks kleine beslissingen. Goede vertaling betekent dat de ontwikkelaar de bedoeling achter het ontwerp begrijpt, niet alleen de pixels nameet. Dat onderscheid bepaalt of de site straks net zo goed aanvoelt als hij eruitziet.

Wat je aanlevert voor een soepele omzetting

De kwaliteit van de oplevering begint bij de aanlevering. Hoe completer en definitiever het materiaal, hoe trouwer het resultaat aan het plan blijft en hoe minder herwerk er nodig is.

Een goed vastgelegde huisstijl scheelt veel discussie. Lees hoe je dat technisch borgt in de gids over je huisstijl consistent in techniek vastleggen.

Hoe het omzetten stap voor stap verloopt

Een gezonde omzetting verloopt in herkenbare stappen, zodat je steeds weet waar je staat.

1. Ontwerp doorgronden

Eerst wordt het ontwerp uit elkaar gehaald in herbruikbare onderdelen: een knop, een kaart, een kop. Zo wordt de site consistent in plaats van een verzameling losse pagina's.

2. Structuur en opmaak bouwen

De onderdelen worden in schone code gegoten, met de juiste afstanden, kleuren en lettertypes. Dit is het skelet waar alles op rust.

3. Gedrag toevoegen

Menu's die openklappen, formulieren die reageren, animaties: de interactie die een ontwerp niet kan tonen, wordt hier ingebouwd.

4. Vullen en fijnslijpen

De echte content gaat erin en alles wordt nagelopen op schermformaten en randgevallen.

Waar de details sneuvelen

De grootste verschillen tussen ontwerp en site zitten zelden in de grote vlakken, maar in de kleine dingen die makkelijk over het hoofd worden gezien.

// een ontwerp toont het ideale geval; een site moet ook het rommelige geval netjes opvangen.

Dit is precies waarom het verstandig is om vroeg te testen voor livegang, met echte teksten en op echte apparaten, in plaats van pas op het einde.

Van vaste breedtes naar elk scherm

Een ontwerp toont meestal een desktop- en misschien een mobiele versie. Maar tussen die twee zit een heel spectrum aan schermformaten waar geen ontwerp van bestaat. De ontwikkelaar bepaalt hoe de pagina daartussen meebuigt: wat krimpt, wat verspringt, wat verdwijnt op kleine schermen.

Die keuzes maken het verschil tussen een site die overal prettig werkt en een die op een tablet plotseling uit elkaar valt. Hoe dat technisch werkt staat uitgelegd in responsive techniek. Het advies: kijk vroeg op je eigen telefoon mee, niet pas bij oplevering.

Controleren of het resultaat klopt

Voordat je akkoord geeft, loop je de site naast het ontwerp door. Niet om elke pixel te vergelijken, maar om te checken of de bedoeling klopt: zit de uitstraling goed, werkt de interactie soepel, is het op elk scherm prettig? Maak een korte lijst van punten die je opvallen en bespreek die in een keer.

Let vooral op de plekken waar het ontwerp zweeg: foutmeldingen, lege staten, hele lange titels. Een nette oplevering omvat ook die randgevallen. Hoe een gedegen oplevering eruitziet, lees je in de gids website laten bouwen: het complete stappenplan.

Zelf doen of uitbesteden?

Een ontwerp omzetten naar schone, responsive code is precies het soort werk waar ervaring loont. Een online bouwer kan een eenvoudige pagina dichtbij het ontwerp brengen, maar zodra interactie, snelheid en randgevallen meespelen, ontstaat het verschil tussen een plaatje en een werkende site. Wil je dat de techniek de bedoeling van je ontwerp recht doet, dan is uitbesteden vaak de zekerste route.

Ik zet ontwerpen om naar schone, snelle maatwerk-websites waarbij ook performance en techniek kloppen. Twijfel je of jouw ontwerp goed te bouwen is? Leg het kort voor en je krijgt eerlijk antwoord, zonder verplichting.

Veelgestelde vragen

Niet altijd. Voor een overzichtelijke site kun je direct in code ontwerpen, met de echte content erin. Voor complexere of merkgevoelige sites helpt een ontwerp om verwachtingen scherp te krijgen voordat er gebouwd wordt. Beide aanpakken zijn prima, zolang vooraf duidelijk is wat je kiest.

De bedoeling en de uitstraling wel. Op pixelniveau ontstaan kleine verschillen omdat een echte site reageert op schermformaat, lettertypes en interactie die een statisch ontwerp niet toont. Een goede ontwikkelaar bespreekt vooraf waar trouw aan het ontwerp eindigt en gezond verstand begint.

Een ontwerp toont meestal een of twee vaste breedtes, terwijl een echte site zich aan elk scherm aanpast. De ontwikkelaar bepaalt hoe het ontwerp tussen die breedtes meebuigt. Daarom is het verstandig om vroeg op echte apparaten te kijken in plaats van alleen naar het ontwerp.

De definitieve teksten, beeldmateriaal in goede kwaliteit, je huisstijl met kleuren en lettertypes, en het ontwerpbestand als dat er is. Hoe completer en definitiever de aanlevering, hoe minder herwerk en hoe trouwer het resultaat aan het plan blijft.

Verder in de kennisbank: Je huisstijl in techniek vastleggen · Website laten bouwen: het stappenplan · Een website testen en opleveren

Direct relevant: dienst maatwerk-website · artikel responsive techniek