Vroeger ontwierp je een website in een grafisch programma, stuurde je een plaatje per mail en hoopte je dat de klant zich kon voorstellen hoe het zou werken. Tegenwoordig gebeurt het werk in een ontwerptool als Figma, en dat verandert het proces ten goede. Je krijgt geen plat plaatje meer, maar een ontwerp dat je kunt aanklikken en doorlopen alsof de site al bestaat. In deze gids leg ik uit hoe zo'n modern tool het ontwerpproces inzichtelijker maakt, het samenwerken vereenvoudigt en je uiteindelijk sneller bij een resultaat brengt waar je achter staat. Je hoeft er niets voor te leren: het is mijn gereedschap, jij plukt er de vruchten van.
Wat is een ontwerptool als Figma?
Figma is een programma waarin webontwerpers hun werk maken. Je bouwt er de pagina's van een site in op, met de echte teksten, kleuren, knoppen en beelden, precies zoals ze er straks uit gaan zien. Het verschil met een gewoon tekenprogramma is dat alles draait om schermen en interactie: je ontwerpt niet één plaatje, maar een hele site met al zijn pagina's en de verbindingen ertussen.
Voor jou als ondernemer is het vooral belangrijk te weten dat dit het stadium is waarin het ontwerp vorm krijgt nog voordat er ook maar één regel code is geschreven. Wat je in Figma ziet, is wat je krijgt. Daardoor kun je vroeg meekijken en bijsturen, op het moment dat aanpassen nog eenvoudig is.
Waarom het in de browser zit
Een groot voordeel van een tool als Figma is dat het in de browser werkt. Je hoeft niets te installeren en geen zware software te draaien. Ik stuur je een link en je ziet het ontwerp direct, op je laptop of je telefoon. Dat klinkt als een detail, maar het haalt een hoop gedoe weg.
Het betekent ook dat we altijd naar dezelfde versie kijken. Geen verwarrende reeks van bestanden waarvan niemand meer weet welke de laatste is, geen screenshots die per mail rondzwerven. Er is één plek waar het ontwerp leeft en groeit, en jij hebt daar gewoon toegang toe. Die helderheid voorkomt veel van de ruis die een ontwerptraject anders rommelig maakt.
Van statisch beeld naar klikbaar prototype
De grootste sprong is dat een ontwerp niet langer een stilstaand plaatje is. In Figma kun je de knoppen aan elkaar koppelen, zodat een klik op de menubalk je naar de juiste pagina brengt. Het resultaat is een klikbaar prototype: je doorloopt je toekomstige site alsof hij al online staat.
Dat is waardevoller dan het lijkt. Een plat ontwerp beoordeel je op het uiterlijk, maar een klikbaar prototype laat je de route ervaren. Je merkt of de stap van de homepage naar een aanvraag logisch voelt, of je snel bij de juiste informatie komt en of er nergens een doodlopend pad zit. Hoe een prototype dure misverstanden voorkomt, lees je verder in de gids over wireframes en prototypes.
Een ontwerp dat je kunt aanklikken vertelt je in vijf minuten meer dan een plaatje in een half uur. Je voelt de site in plaats van hem te bekijken.
Samenwerken zonder misverstanden
Feedback geven op een ontwerp gaat veel soepeler wanneer je het op de juiste plek kunt achterlaten. In plaats van een mail met "die knop bovenaan mag groter" zet je je opmerking precies bij die knop. Ik zie meteen waar het over gaat en niets raakt verloren in de vertaling.
Dat scheelt rondjes en misverstanden. Je hoeft niet te omschrijven waar iets staat, je wijst het simpelweg aan. Goede feedback maakt een ontwerp sterker, en dit soort tools maakt het makkelijker om die feedback helder te geven. Hoe je als opdrachtgever bruikbaar commentaar formuleert, behandel ik in de gids over feedback geven op een ontwerp.
Wat dit voor jou als opdrachtgever betekent
In de praktijk merk je vooral rust en duidelijkheid. Je ziet je site groeien, kunt op elk moment meekijken en weet precies wat je goedkeurt. Geen verrassingen bij de oplevering, omdat het eindresultaat overeenkomt met wat je in het prototype hebt gezien.
Het tool is dus geen technisch obstakel maar een brug. Het vertaalt het abstracte idee van een website naar iets concreets dat je kunt bekijken, doorklikken en bespreken. Daardoor staan we sneller op één lijn en wordt het bouwen een kwestie van uitvoeren wat al klopt. Hoe het ontwerp daarna foutloos in code terechtkomt, lees je in de gids over van ontwerp naar code.
Zelf doen of uitbesteden?
Je zou Figma zelf kunnen oppakken, en voor wie graag knutselt is het een mooi programma. Maar het tool maakt nog geen goed ontwerp; dat doet het oog en de ervaring van de ontwerper. De waarde zit in de keuzes over indeling, kleur en route, niet in het kunnen bedienen van de software.
Werk je met een vaste designer, dan hoef je je over het gereedschap geen zorgen te maken. Je krijgt een klikbaar ontwerp om te beoordelen en houdt de regie zonder zelf te hoeven leren ontwerpen. Bekijk de pagina over webdesign op maat om te zien hoe dat in zijn werk gaat, of leg me je plannen voor via de contactpagina.
Veelgestelde vragen
Nee. Figma is het gereedschap van de ontwerper, niet iets wat je als ondernemer hoeft te beheersen. Je krijgt een link waarmee je het ontwerp kunt bekijken en aanklikken, zonder dat je iets hoeft te installeren of te leren. Het werk gebeurt aan mijn kant.
Een prototype is het ontwerp waarin de knoppen al werken. Je klikt van de homepage naar een dienstpagina alsof de site al live staat, terwijl er nog geen regel code is geschreven. Zo ervaar je de route door je site voordat er gebouwd wordt.
Ja, dat is juist het voordeel. Je ziet het ontwerp in dezelfde versie waarin ik werk en kunt opmerkingen achterlaten op de plek waar ze over gaan. Geen losse screenshots of verwarrende versies, maar één plek waar het ontwerp leeft.
Het maakt het proces inzichtelijker en voorkomt misverstanden, wat onnodige rondes scheelt. De tijd zit nog steeds vooral in het nadenken en bijschaven. Een goed tool versnelt de samenwerking, niet de denkkracht die een sterk ontwerp vraagt.
Verder in de kennisbank: Wireframes en prototypes · Van ontwerp naar code · Een goede designbriefing opstellen