Van Concept naar Implementatie
Het volledige proces van design thinking tot live website — inclusief de cruciale stappen die veel teams overslaan.
Waarom veel websites mislukken
Veel bedrijven denken dat een mooie website genoeg is. Ze spenderen maanden op het ontwerp, kiezen de perfecte kleurenpalet, en brengen alles in Figma tot leven. Maar dan komt het moment van implementatie — en plotseling lijkt niets meer op wat ze hadden gepland.
Het gat tussen concept en werkelijkheid is groter dan je denkt. Responsive design werkt anders dan verwacht. Animaties voelen traag. De typografie ziet er op mobiel helemaal anders uit. En het ergste? Je hebt pas tegen het einde van het project door dat je een fundamenteel probleem hebt.
In dit artikel gaan we door de stappen heen die je echt nodig hebt — niet wat ontwerpers je in cursussen vertellen, maar wat developers en designers in praktijk doen.
Fase 1: Discovery en Strategie
Je kan niet beginnen met ontwerpen. Echt niet. Het eerste wat je doet is luisteren.
Discovery gaat niet over kleuren of lay-outs. Het gaat om vragen stellen. Wat willen gebruikers echt? Welke problemen los je op? Wie zijn je concurrenten en wat doen zij anders? Deze fase duurt meestal 2-3 weken en het voelt soms alsof je niets doet — maar je legt de fundering.
We hebben gezien dat teams die 30% van hun tijd in discovery steken, uiteindelijk 60% sneller gaan bij implementatie. Geen herwerk, geen “oh wacht, we hadden dit anders afgesproken.”
Specifieke dingen die je moet bepalen:
- De 3-5 core user flows (wat doen mensen op jouw site?)
- Performance targets (laadtijd, Core Web Vitals)
- Accessibility requirements (WCAG 2.1 AA minimum)
- Browser support (hoeveel % Internet Explorer nog?)
- Content strategy (hoeveel pagina’s, hoe veel tekst?)
Fase 2: Design met Implementatie in Gedachten
Dit is waar het interessant wordt. Je kan een prachtige website in Figma maken, maar als de developer die moet omzetten in CSS die op 15 verschillende browsers werkt — je bent in problemen.
Goed design voor web betekent dat je de constraints van het medium begrijpt. Geen 47 verschillende font-sizes. Geen 8 soorten buttons. Geen animaties die 3 seconden duren op mobiel.
We gebruiken nu “design tokens” — het idee dat je kleur, spacing, typografie niet zomaar invult, maar volgt uit een systeem. Je zegt niet “deze titel is 48px” maar “deze titel is heading-1” en heading-1 is gedefinieerd in je design system.
Wat echt helpt: designers en developers zitten samen aan het design system. Niet na, maar tijdens. De developer zegt “een CSS-klasse voor elke knop-variant is werkbaar, maar 12 soorten is te veel.” De designer zegt “oké, we doen er 4 en dat is genoeg.”
Fase 3: Development — Waar het Echt Telt
Dit is niet meer over hoe het eruitziet. Het gaat over hoe het werkt. Performance, accessibility, SEO — dit zijn geen nice-to-haves. Dit bepaalt of je site slaagt.
De 3 dingen die het meest fout gaan:
1. Responsive design wordt pas testend ontdekt — Je hebt het ontwerp voor desktop en mobile, maar alle in-between sizes (tablet, large mobile) zijn improviserend. Beter: maak je design fluid van start.
2. Images zijn te groot — Een fotograaf levert je 8MB bestanden en niemand compress ze. Je laadtijd gaat van 1.2s naar 4.8s. Oeps.
3. Geen planning voor content — Je design is prachtig voor “Lorem Ipsum” of korte teksten, maar echte content is 3x langer. Alles breekt.
Een sterke development fase betekent: testing op echte devices (niet alleen Chrome DevTools), performance audits na elke sprint, en regelmatig feedback van de designer “ziet dit er nog goed uit?”
Fase 4: Testing en Optimalisatie
Je denkt dat je klaar bent, maar je bent nog niet klaar. Testing is niet iets dat je aan het einde doet — het gebeurt doorlopend.
Wat we doen: performance testing (Lighthouse audits elke sprint), accessibility testing (WAVE scanner, keyboard navigation), en browser testing (ja, nog steeds Safari en Edge).
Een echte performance optimalisatie: we hadden een site met 5MB CSS. Vijf megabyte! Drie maanden werk in CSS die niemand gebruikte. We schudden het af tot 40KB en de site laadde 3x sneller.
Wat echt helpt: set performance budgets van start. Zeg “deze site mag niet groter dan 200KB core assets zijn” en houd je eraan. Het dwingt betere keuzes af.
Fase 5: Launch en Beyond
Je site gaat live. Maar dan? Veel teams denken dat het klaar is. Maar web design is nooit echt klaar. Er komen altijd verbeteringen.
Monitoring is cruciaal. Hoe snel laadt je site echt voor gebruikers (niet in je ideale wifi)? Welke pagina’s hebben bounce rate issues? Waar klikken mensen niet waar je verwachtte?
We rollen uit in fases: 10% gebruikers krijgen het nieuwe design, we checken metrics, dan 50%, dan iedereen. Geen big-bang launches. Risico is te groot.
En na launch: je maakt een backlog van kleine verbeteringen. Niet alle bugs zijn kritiek, niet alle optimalisaties zijn urgent. Maar ze stapelen op. Over 6 maanden heb je 20 kleine wins die samen een grote verbetering zijn.
Je Launch Checklist
Voordat je live gaat, check deze dingen:
Performance
- Lighthouse score minimaal 85
- First Contentful Paint onder 1.8s
- Cumulative Layout Shift onder 0.1
- Images optimized en lazy-loaded
Accessibility
- WCAG 2.1 Level AA compliance
- Keyboard navigation werkt
- Contrast ratio 4.5:1 minimum
- Alt text op alle images
Cross-Browser
- Chrome, Firefox, Safari, Edge
- iOS Safari en Chrome Android
- Breakpoints: 320px, 768px, 1024px+
- Touch gestures op mobiel
SEO & Monitoring
- Meta tags op alle pagina’s
- Sitemap.xml en robots.txt
- Google Analytics geïnstalleerd
- Error tracking ingesteld
Het Echte Werk Begint na Launch
“Design is nooit af. Het moment dat je denkt klaar te zijn, krijg je feedback dat iets niet werkt. En je hebt gelijk. Daarom werken we in sprints, niet in grote projecten.”
De reis van concept naar implementatie is niet lineair. Het is cyclisch. Je leert, je optimaliseert, je verbetert. De beste websites zijn niet die in een sprint gebouwd zijn, maar die voortdurend refined worden op basis van real user data.
Start met discovery. Ontwerp met implementatie in gedachten. Build met performance en accessibility als first-class citizens. Test voortdurend. En na launch? Kijk naar je analytics, luister naar gebruikers, en verbeter wat nodig is.
Dat is hoe je websites maakt die echt werken — niet alleen mooi eruitzien.
Over Dit Artikel
Dit artikel biedt informatie en richtlijnen over het webdesign- en implementatieproces. De beschreven best practices en processen zijn gebaseerd op ervaring in de industrie en kunnen variëren afhankelijk van projectspecificaties, teamgrootte en organisatorische behoeften. Elke project is uniek en vereist aanpassingen aan de hier beschreven methodologieën. Dit artikel is bedoeld ter ondersteuning van uw leerproces en dient niet als volledig handboek voor alle mogelijke scenario’s.