Er is een gesprek dat elke bouwer kent. De site is af, je levert hem op, en dan begint het pas. Dit had ik me anders voorgesteld. De kleur is te fel, de indeling klopt niet, mijn diensten staan te laag. Op dat moment is alles al gebouwd.
Verbouwen kost dan drie keer zoveel als vooraf tekenen. En het levert zelden een beter resultaat op, want je repareert in plaats van ontwerpt.
Bij Energy 4You Consultancy hebben we die stap wel gezet. Ik maakte daar het logo, het webdesign en de vindbaarheid. Een nieuw merk betekent dat er nog niets vaststaat.
Ik heb eerst het ontwerp maken laten zien in Figma. Homepage, dienstenpagina en contactpagina, op desktop en mobiel. De klant kon erin klikken en aanwijzen wat niet klopte. Pas daarna is er een regel code geschreven.
Eerst tekenen, dan bouwen. Dat scheelt verbouwen.
Wat is Figma?
Figma is ontwerpsoftware die in je browser draait. Je hoeft niets te installeren en je klant ook niet. Je opent een link en je zit in hetzelfde bestand.
Dat laatste is de kern. samenwerken aan een ontwerp gebeurt live, zoals je gewend bent van een online tekstverwerker. Je ziet elkaars aanwijzer bewegen.
Waarom dat uitmaakt
Vroeger ging een ontwerp als afbeelding over de mail. Dan kreeg je feedback in een los document en raakte je het spoor bijster. Nu staat de opmerking op de knop waar hij over gaat.
Ontwerp of prototype
Een ontwerp is een plaat. Mooi, maar stilstaand. Een klikbaar prototype is klikbaar: je drukt op een knop en je gaat naar de volgende pagina.
Dat verschil is groter dan het klinkt. In een prototype merk je dat je menu onlogisch is. Op een plaat zie je dat niet.
Ik lever daarom altijd een klikbare versie op. Ook je collega’s kunnen dan meekijken zonder uitleg vooraf.
Werken met bouwstenen
In Figma bouw je met componenten. componenten hergebruiken betekent dat je een knop een keer maakt en overal hergebruikt.
Wijzig je die ene knop, dan verandert hij op elk scherm mee. Dat is precies dezelfde gedachte als in een design system, alleen dan in de ontwerpfase.
Zo blijft het ontwerp consistent, ook als het project maanden loopt.
Van ontwerp naar website
Er bestaan knoppen die beloven een ontwerp om te zetten naar een werkende site. Ik gebruik ze niet, en daar heb ik reden voor.
Zulke code is vaak onleesbaar, zwaar en slecht aanpasbaar. Bij de overdracht naar de bouw neem ik het ontwerp daarom als leidraad, niet als bron.
Wat ik uit het ontwerp overneem
De kleuren en typografie, als vaste waarden in CSS.
De afstanden, als een schaal in plaats van losse getallen.
De contrastwaarden, zodat accessibility vanaf het begin klopt.
De opbouw zelf maak ik daarna in Elementor, zodat jij er later zelf bij kunt.
Feedback geven die werkt
Bij het feedback verzamelen vraag ik klanten om te beschrijven wat er niet klopt. Dus niet wat de oplossing is.
Dus niet: maak die knop groter. Maar: ik zie niet waar ik moet klikken. Dat eerste is een opdracht, het tweede is informatie. Met informatie kan ik een betere oplossing bedenken dan de eerste die opkomt.
Verzamel feedback in rondes
Stuur je opmerkingen in een keer, niet in losse berichten door de week heen. Anders maakt wijziging drie de eerste wijziging weer ongedaan.
Betrek daarbij de mensen die er straks mee moeten werken. Je collega die de teksten bijhoudt, ziet dingen die jij niet ziet.
Wat een ontwerpfase oplevert
Je weet vooraf wat je krijgt, en je kunt nog schrappen zonder dat het geld heeft gekost. Dat laatste is het echte voordeel.
Is iets eenmaal gebouwd, dan blijft het vaak staan omdat het er nu eenmaal is. Zo raken pagina’s vol met onderdelen die niemand meer kan verantwoorden. In het ontwerp haal je ze er zonder pijn uit.
Meer vragen over Figma
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is Figma?
Waarom ontwerp je eerst voordat je bouwt?
Kun je een Figma-ontwerp omzetten naar een website?
Wat kost een ontwerpfase?
Hoe geef je goed feedback op een ontwerp?
Wat is het verschil tussen een ontwerp en een prototype?
Wat is Figma?
Omdat verbouwen drie keer zoveel kost als vooraf tekenen. Dat is de kortste samenvatting.
Er is een gesprek dat elke bouwer kent. De site is af, je levert hem op, en dan begint het pas. Dit had ik me anders voorgesteld. De kleur is te fel, mijn diensten staan te laag.
Op dat moment is alles al gebouwd. Je gaat dan repareren in plaats van ontwerpen, en dat levert zelden een beter resultaat op.
In een ontwerp kost een wijziging vijf minuten. In een gebouwde site kost dezelfde wijziging soms een dag, omdat alles eromheen meeschuift.
Er is nog een reden. In de ontwerpfase durf je te schrappen. Als iets al gebouwd is, blijft het vaak staan omdat het er nu eenmaal is. Dat is precies hoe pagina’s vol raken.
Reken de ontwerpfase mee in je planning en je budget. Wie die stap overslaat om tijd te winnen, verliest die tijd vrijwel altijd verderop in het traject.
Waarom ontwerp je eerst voordat je bouwt?
Figma is ontwerpsoftware die in je browser draait. Je hoeft niets te installeren, en je klant ook niet. Je opent een link en je zit in hetzelfde bestand.
Dat laatste is de kern van waarom het zo breed gebruikt wordt. Samenwerken gebeurt live, zoals je gewend bent van een online tekstverwerker. Je ziet elkaars aanwijzer over het scherm bewegen.
Vroeger ging een ontwerp als afbeelding over de mail. Feedback kwam terug in een los document en na drie rondes wist niemand meer welke versie de laatste was.
Nu staat de opmerking op de knop waar hij over gaat. Dat scheelt vergissingen en het scheelt tijd.
Je gebruikt het voor websites, maar ook voor apps, presentaties en huisstijlen. Voor mijn werk is het vooral de plek waar een site bestaat voordat hij gebouwd wordt.
Je hoeft er zelf niet in te kunnen werken om er profijt van te hebben. Meekijken en aanwijzen is genoeg, en dat kan iedereen met een link.
Wat is het verschil tussen een ontwerp en een prototype?
Een ontwerp is een plaat. Mooi om naar te kijken, maar stilstaand. Je ziet hoe een pagina eruitziet en verder niets.
Een prototype is klikbaar. Je drukt op een knop en je gaat naar de volgende pagina. Je menu klapt open, je formulier gaat naar een bedankscherm.
Dat verschil is groter dan het klinkt. In een prototype merk je dat je menu onlogisch is ingedeeld, of dat je drie klikken nodig hebt voor iets simpels. Op een plaat zie je dat niet.
Ik lever daarom altijd een klikbare versie op. Je collega’s kunnen dan meekijken zonder dat iemand erbij hoeft uit te leggen wat de bedoeling is.
Test een prototype ook op een telefoon. Wat op een groot scherm logisch lijkt, voelt op een klein scherm vaak anders. Meer daarover lees je bij breakpoint.
Klik je prototype ook een keer door op een telefoon. Wat op een groot scherm logisch lijkt, voelt op een klein scherm regelmatig anders.
Kun je een Figma-ontwerp omzetten naar een website?
Er bestaan knoppen die dat beloven, en ik gebruik ze niet. Daar heb ik een duidelijke reden voor.
De code die daaruit komt is vaak onleesbaar, zwaar en slecht aanpasbaar. Je krijgt een site die er op het eerste gezicht goed uitziet, maar die niemand later nog fatsoenlijk kan wijzigen.
Ik neem het ontwerp daarom als leidraad, niet als bron. Wat ik er letterlijk uit overneem zijn de kleuren en de typografie, als vaste waarden in CSS.
Daarnaast de afstanden als een schaal in plaats van losse getallen, het gedrag per schermbreedte, en de contrastwaarden zodat toegankelijkheid vanaf het begin klopt.
De opbouw zelf maak ik daarna in Elementor. Zo kun jij er later zelf bij zonder mij te bellen voor elke tekstwijziging.
Vraag altijd om leesbare code en om toegang tot je eigen ontwerp. Zonder die twee zit je vast aan de partij die het gemaakt heeft. Leg die afspraak vast in je offerte, dan kan er achteraf geen discussie over ontstaan.
Hoe geef je goed feedback op een ontwerp?
Beschrijf wat er niet klopt, niet wat de oplossing is. Dat is de belangrijkste omkering en hij voelt in het begin onwennig.
Dus niet: maak die knop groter. Maar: ik zie niet waar ik moet klikken. Het eerste is een opdracht, het tweede is informatie.
Met informatie kan ik een betere oplossing bedenken dan de eerste die opkomt. Misschien is de knop niet te klein, maar staat er te veel omheen.
Verzamel daarnaast alle feedback in een ronde in plaats van in losse mailtjes. Zo voorkom je dat wijziging drie wijziging een weer ongedaan maakt.
En betrek de mensen die er straks mee moeten werken. Je collega die de teksten bijhoudt, ziet dingen die jij niet ziet. Dat scheelt een verbouwing achteraf.
Geef ook aan wat je wel goed vindt. Anders haalt een ontwerper in ronde twee per ongeluk het onderdeel weg waar je juist blij mee was. Dat kost je een zin en het scheelt een hele ontwerpronde.
Ga je binnenkort een nieuwe website laten maken en wil je vooraf zien wat je krijgt? Beschrijf je plannen via het formulier hieronder. Ik leg uit hoe een ontwerpfase eruitziet en wat het je oplevert aan tijd en zekerheid. Je zit nergens aan vast. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Ontwerptool, designtool, prototypesoftware
