Het webdesignproces, stap voor stap
Webdesign is niet het deel waarin iemand kleuren uitkiest. Het is een reeks beslissingen die versmalt van «waar is deze site voor» tot «deze knop, deze grootte, dit label», en elke stap is goedkoper te wijzigen dan de volgende.
Deze gids behandelt de fasen op volgorde, wat elke fase oplevert, en de twee punten waarop ontwerpprojecten steevast vastlopen.
Verkenning: wat het ontwerp moet bereiken#
Vóór al het visuele heeft de ontwerper hetzelfde nodig als de ontwikkelaar: het hoofddoel, het publiek, de paginastructuur en de randvoorwaarden. Begint zij zonder die, dan krijg je een ontwerp dat goed staat in een portfolio en faalt zodra de echte content arriveert.
Deze fase levert overeenstemming op, geen documenten. Een samenvatting van één pagina die beide partijen aanvaarden volstaat.
- De ene handeling die de site moet aanjagen, en hoe die gemeten wordt.
- Twee of drie bezoekersgroepen en de vraag waarmee elk aankomt.
- Merkkaders die echt bestaan: logo, kleuren, lettertypen, toon.
- Technische randvoorwaarden: het CMS, het platform, de apparaten die er werkelijk toe doen.
- Voorbeelden van sites die de klant goed vindt — en, nuttiger, waarom.
Structuur en wireframes#
Wireframes beslechten indeling en hiërarchie zonder de discussie over kleur. Ze beantwoorden wat er op elk sjabloon staat, in welke volgorde, en wat de bezoeker geacht wordt te doen — terwijl wijzigingen nog minuten kosten.
Maak wireframes van de sjablonen, niet van elke pagina. De meeste sites hebben vier tot acht verschillende sjablonen en tientallen pagina's die daarop zijn gebouwd.
| Sjabloon | Vraag die het beantwoordt | Hoofdactie |
|---|---|---|
| Homepage | Wat is dit en is het voor mij? | Naar de juiste sectie gaan |
| Sectiehub | Wat zit hierin? | Een item kiezen |
| Artikel of detail | Het eigenlijke antwoord | Lezen, dan de volgende stap zetten |
| Product | Is dit de juiste en wat kost het? | In het winkelmandje leggen |
| Contact of formulier | Hoe begin ik? | Versturen |
| Zoekresultaten | Heb je het gevonden? | Een resultaat openen of verfijnen |
Maak wireframes met realistische tekstlengtes. Een opmaak die om een kop van zes woorden is gebouwd, breekt zodra een echte kop er veertien telt.
Visueel ontwerp en het ontwerpsysteem#
Visueel ontwerp brengt het merk aan op de wireframes: typografische schaal, kleur, witruimte, toestanden en componenten. Bij alles wat groter is dan een brochuresite loont het een klein systeem te maken — een set componenten met gedefinieerde toestanden — in plaats van een verzameling losse paginaplaatjes.
De reden is niet netheid. Het is dat een systeem de ontwikkelaar vertelt wat er gebeurt in de gevallen die de mockups niet tonen, en die gevallen vormen het merendeel van de site.
- Een typografische schaal en een witruimteschaal, zodat geen enkel getal een eenmalig geval is.
- Kleurtokens waarvan het contrast tegen de werkelijke achtergronden is gecontroleerd.
- Componenttoestanden: normaal, hover, focus, actief, uitgeschakeld, ladend, fout, leeg.
- Responsief gedrag per component, niet alleen een mobiele versie van de homepage.
- Wat er gebeurt bij te veel content, en bij geen.
Waar ontwerpprojecten vastlopen#
Twee fouten verklaren het merendeel van de vertraging, en beide zijn procesproblemen in plaats van smaakkwesties.
- Feedback zonder eigenaar. Zes mensen reageren, twee spreken elkaar tegen, en de ontwerper mag arbitreren. Wijs één persoon aan die feedback bundelt en de knoop doorhakt.
- Content die niet bestaat. Ontwerpen worden goedgekeurd op opvultekst, daarna komt de echte tekst twee keer zo lang en wordt de opmaak overgedaan. Ontwerp met echte content, ook met ruwe echte content.
- Onbeperkte correctierondes. Spreek het aantal vooraf af — meestal twee of drie — en wat een extra ronde kost. Zonder grens zwalken projecten in plaats van af te komen.
- Goedkeuring die geen goedkeuring is. «Ziet er goed uit» in een vergadering is geen goedkeuring. Vraag haar schriftelijk, per sjabloon, met een datum.
De nuttigste vraag in een beoordeling is niet «vind je het mooi» maar «helpt dit de bezoeker bij datgene waarvoor we hebben afgesproken dat de site bestaat». Smaakdiscussies eindigen nooit; doeldiscussies wel.
Veelgestelde vragen
Hoeveel correctierondes moet ik verwachten?
Twee of drie is normaal bij een sjabloonproject. Belangrijker dan het aantal is dat het schriftelijk is afgesproken samen met de kosten van een extra ronde. Onbeperkte correcties klinken royaal en betekenen in de praktijk dat het project nooit tot een beslissing komt, omdat niets tot vastleggen dwingt.
Moeten ontwerp en ontwikkeling dezelfde persoon of hetzelfde team zijn?
Bij kleine projecten is één persoon die beide doet efficiënt en scheelt een overdracht. Bij grotere zijn het werkelijk verschillende vaardigheden en levert scheiden meestal beter werk op — mits het ontwerp een systeem met toestanden en responsieve regels oplevert in plaats van een reeks plaatjes. Het risico zit in de overdracht, niet in de scheiding.
Heb ik een volledig ontwerp nodig voordat de ontwikkeling begint?
Je hebt de sjablonen ontworpen nodig, niet elke pagina. De ontwikkeling kan starten zodra het ontwerpsysteem en de twee of drie complexste sjablonen vastliggen; de rest kan afkomen tijdens de bouw. Beginnen zonder iets vast te hebben betekent overdoen, en tot de laatste pagina afmaken voordat er code wordt geschreven betekent stilstand betalen.
Welke opleveringen hoor ik aan het eind te krijgen?
Bewerkbare bronbestanden voor elk sjabloon en elke component, een vastgelegde typografische en kleurschaal, geëxporteerde bestanden in de formaten die de bouw nodig heeft, en de responsieve regels op schrift. Vraag vóór de start of je de bronbestanden krijgt of alleen exports — het verschil telt bij de eerste keer dat je een kleine wijziging nodig hebt zonder de oorspronkelijke ontwerper.
webdesignprocesstappen webdesignwireframesontwerpsysteemwebsite mockupswebdesign workflow
