Wat je écht krijgt bij een door een designer gebouwde Framer-site
Ik ben Sterre van Dijk, oprichter van Seven Purple Mangos. Ik heb te vaak gezien dat een Framer-site live gaat met een prachtige homepage, maar zonder mogelijkheid voor het marketingteam om een case study toe te voegen. De websitebouwer van Framer is het geld alleen waard als je na de bouw achterblijft met een site die bewerkbaar, snel en meetbaar is.
Daarom beoordeel ik elke oplevering op wat een jaar na livegang nog steeds werkt. Hieronder leg ik uit wat een door een designer gebouwde Framer-site daadwerkelijk bevat. Je leert hoe je voorbeelden van Framer-websites leest als een opleverchecklist, hoe een CMS eruitziet waar je marketingteam zelf aan kan toevoegen, en hoe formulieren en tracking vóór de overdracht moeten zijn ingericht.
Ik behandel ook animaties die de pagina niet vertragen, snelheidstests die je zelf kunt doen, en breakpoints die aansluiten op de telefoons en laptops van je kopers. Tot slot bespreek ik waar het Framer-design stopt en jouw aanpassingen beginnen, wat er op de laatste dag gebeurt, vragen die je over elke Framer-bouw moet stellen, en een oplevertest van één minuut.
Beoordeel een Framer-bouw op wat een jaar na de lancering nog werkt
Een Framer-bouw is makkelijk te bewonderen op de dag van lancering. De echte test komt zes maanden later, wanneer een prijs verandert of een betaalde campagne een eigen landingspagina nodig heeft.
Waar je mee weggaat, is de opleverinventaris. Dat betekent de CMS-collecties, formulierroutering, tracking, animatie-instellingen, breakpoints en de designbestanden achter de bouw.
Ik beoordeel elke pagina op het werk dat een ontwerp moet doen nadat het live is gegaan. Je marketing verandert van week tot week, dus de site moet je kunnen bijhouden. Een pagina die er alleen op de opleverdag af uitziet, is niet af.
Je krijgt een vaste prijs voordat je iets beslist. De lijst van wat is inbegrepen spreken we af voordat ik Framer open, zodat er later niets van giswerk afhangt.
Als de site niet kan worden bewerkt door degene die de advertenties beheert, heb je een plaatje van een website gekocht.
Voorbeelden van Framer-websites lezen als een opleverchecklist
Voorbeelden van Framer-websites zijn geweldig onderzoeksmateriaal, en de meeste mensen bekijken de hero image en stoppen daar. Open er eerst een paar op je telefoon. Als de tekst piepklein is of het menu niet lekker werkt met je duim, zijn de breakpoints nooit getest, en WCAG 1.4.10 reflow vereist content die werkt op 320 CSS-pixels zonder zijwaarts te scrollen.
Zoek daarna het blog of de werkpagina op. Als het nieuwste item van een jaar geleden is, is het merk gestopt met publiceren of kan niemand daar iets toevoegen.
Verstuur het contactformulier en kijk wat er gebeurt. Een bedankpagina geeft je advertentieplatform een URL om te tellen, wat een melding op het scherm niet doet.
Vraag welke delen van die pagina's worden gevoed door een collectie en welke handmatig zijn geplaatst. Dat antwoord vertelt je hoeveel je later zelf kunt aanpassen. Ik stel dezelfde vragen bij elke bouw die ik beoordeel.
Het CMS waar je marketingteam aan kan toevoegen zonder mij
Collecties bepalen hoeveel je zonder mij kunt aanpassen.
Herhaalbare content hoort thuis in collecties: blogposts, teamleden, case studies, veelgestelde vragen. De lay-out haalt data uit de velden, dus het toevoegen van één item werkt overal bij waar het verschijnt.
Vraag je dan dit af: kun je zelf een bericht toevoegen, de velden invullen en het publiceren? Als elk nieuw item via mij moet lopen, is het CMS puur decoratie.
Veldplanning bepaalt of je bewerkingen netjes blijven. Titel, slug, afbeelding, alt-tekst en een korte samenvatting moeten vóór de lancering bestaan, anders publiceren nieuwe berichten met kapotte voorvertoningen. Alt-tekst is een tekstalternatief voor afbeeldingen, en WCAG 2.1 vereist dit op Niveau A.
Wat een Framer-CMS sloopt, is content die rechtstreeks op de pagina wordt getypt in plaats van uit een collectie wordt gehaald. De overzichtspagina en het item lopen dan uit de pas.
Test het zelf voordat je akkoord geeft. Voeg één conceptitem toe, verander de titel, publiceer, en controleer dan de overzichtspagina, de mobiele weergave en het zoekresultaat.
Formulieren en tracking die vóór de overdracht zijn ingericht
Zodra je CMS staat, is de volgende vraag waar een formulierinzending terechtkomt. Vraag om een concreet antwoord: een inbox, een Google Sheet, je CRM of een combinatie daarvan. "Het gaat naar de site" telt niet als antwoord.
Een bedankpagina geeft je advertentieplatform een URL om te tellen, wat een melding op het scherm niet doet.
Vóór de lancering stel ik vier events in: formulierinzending, weergave van de bedankpagina, klikken op je belangrijkste call-to-action en een verborgen veld dat UTM-waarden vastlegt. Dat laatste vertelt je welke campagne de lead heeft opgeleverd.
Test het daarna op de live site, vanaf een telefoon. De e-mail moet binnenkomen, de rij in de sheet moet verschijnen en de conversie moet na de test zichtbaar zijn in je advertentieplatform.
Voeg een toestemmingsregel toe die vastlegt waar de persoon mee akkoord is gegaan. Gedocumenteerde toestemming betekent dat je bijhoudt wat hen is verteld en wanneer. Een honeypot-veld weert spam zonder dat iemand een puzzel hoeft op te lossen.
Hoe een Framer-websitebouwer animaties gebruikt zonder de pagina te vertragen
Een formulier kan netjes binnenkomen terwijl de pagina toch hapert, en daarom zijn animaties iets wat ik vóór de lancering controleer.
Entree-animaties, scroll-effecten en hover-states verdienen hun plek als ze verwijzen naar de volgende actie, zoals het formulier of de prijzentabel. Als een animatie nergens naar leidt, haal ik hem weg.
Lichte animaties gebruiken transform en opacity, houden entrees kort en beginnen pas nadat de content zichtbaar is.
Zware animaties zien eruit als een schermvullende video in de first fold, vier scroll-effecten gestapeld op één pagina, of een animatie die start voordat de koptekst überhaupt is geladen.
Stel een versie met verminderde beweging in, zodat iedereen wiens systeem om minder animatie vraagt alsnog een goed leesbare pagina krijgt.
Open de voltooide pagina op een echte telefoon via een normale verbinding. Als het scrollen hapert, doen de animaties te veel.
Snelheid die je na de lancering zelf kunt controleren
De animaties staan goed, dus nu de cijfers. Bij een Framer-bouw stuur ik op vier dingen die de snelheid beïnvloeden: afbeeldingsformaten en -extensies, lazy loading voor alles onder de first fold, hoeveel lettertypen er laden en hoeveel scripts van derden je toevoegt.
Namen van statistieken en drempelwaarden vind je in Google's eigen documentatie over Web Vitals. Check die pagina voor de actuele cijfers in plaats van te vertrouwen op een getal dat je ergens hebt gelezen.
Draai na de lancering PageSpeed Insights op de live homepage en op één betaalde landingspagina. Houd de weken erna het Core Web Vitals-rapport in Search Console in de gaten. Veldgegevens komen van echte bezoekers, dus die lopen achter op een live test.
Geen enkele bouw scoort op elke pagina hetzelfde. Een zware hero-video in de first fold kan de laadtijd van al het andere omlaag trekken, net als een chatwidget die je drie maanden later toevoegt.
Als iets traag is, los het dan in deze volgorde op: comprimeer de grootste afbeelding, verwijder of vertraag het zwaarste script van derden en kijk daarna pas naar lettertypen.
Breakpoints die passen bij de telefoons en laptops van je kopers
Snelheid is het halve verhaal. De andere helft is hoe de pagina overeind blijft op het scherm dat je kopers vasthouden.
Ik bouw drie lay-outs: desktop, tablet en telefoon. Ze moeten allemaal worden ontworpen, want het simpelweg verkleinen van een desktop-lay-out zorgt voor rare tekstgroottes en vreemde tussenruimtes. Dat is waar responsive design voor alle apparaten stopt een simpel vinkje te zijn.
Controleer op de telefoonly-out vier dingen:
Koppen die nog steeds goed leesbaar zijn
Knoppen die een duim makkelijk kan raken, minimaal 24 pixels volgens WCAG 2.2
Formuliervelden die groot genoeg zijn zodat de pagina niet inzoomt bij selectie
Een menu dat opent als je erop tikt
Een pagina die alleen op desktopbreedte is gebouwd, kan er uitgerekt uitzien op tussenliggende formaten, waar veel kopers browsen. Dezelfde ontwerpprincipes voor toegankelijkheid gelden voor elke breedte.
Ik open de breakpoints vóór de lancering op echte apparaten. Open dezelfde pagina's na publicatie op je eigen telefoon, want jouw browser, cookies en verbinding verschillen van die van mij. Een lay-out die het Framer-canvas nooit heeft verlaten, is een gok.
Wat je zelf kunt aanpassen en waar je mij nog voor nodig hebt
Zodra de breakpoints slagen op echte apparaten, moet er nog één ding worden vastgelegd: wie is waar verantwoordelijk voor?
Veilig om zelf te doen: tekst op een pagina, tekst in een collectie-item, een vervangen afbeelding, een nieuwe testimonial, het verschuiven van secties die gemaakt zijn om te verplaatsen, en het publiceren van een conceptbericht.
Nog steeds designwerk: een sectie die nog niet bestaat, een nieuwe paginalay-out, een wijziging aan het grid of een nieuw formulierveld dat verandert waar inzendingen naartoe gaan.
Als een verandering puur tekst of inhoud is, doe het dan gerust zonder mij; de lay-out blijft gewoon heel. Ik stel velden zo in dat een langere koptekst netjes afbreekt in plaats van de pagina te slopen.
Voor alles wat echt design vraagt, zorgen wekelijks overleg en vaste opleverdagen ervoor dat je aanpassing een plek krijgt in plaats van op een stapel te belanden.
Ik schrijf op welke wijzigingen van jou zijn en welke naar mij gaan, zodat niemand een gesprek van de opleverdag hoeft te onthouden. Dat overzicht zit bij de projectbestanden die je bij de overdracht krijgt.
Waar het Framer-design stopt en jouw bewerkingen beginnen
Framer-design omvat de lay-out, de typografie, de tussenruimtes en de componenten. Jouw bewerkingen vinden allemaal binnen dat kader plaats.
Een component met eigenschappen geeft je een menu met veilige keuzes. Pas het label, de afbeelding of de link aan en de vorm blijft zoals ontworpen. Geen geschuif, geen scheve uitlijning.
Wat de oplevering op de laatste dag inhoudt
Op de laatste dag sluit je af met:
Toegang tot het Framer-project op editor-niveau, plus de gepubliceerde site. Je logt in, opent het project en past zelf een pagina aan.
Elke CMS-collectie, met velden benoemd in duidelijke taal. Titel, afbeelding, alt-tekst, samenvatting. Niets cryptisch.
Bestemmingen van formulieren, de analytics-property, conversie-events en tracking voor advertentieplatformen, allemaal gekoppeld en getest vóór de overdracht. De analytics- en advertentiepixels vuren pas nadat de bezoeker een keuze heeft gemaakt, en elke derde partij die data ontvangt staat op de lijst.
Het Figma-bestand: merkkleuren, tekststijlen, logo's en de gebruikte lettertypen, met een notitie over waar de licentie ligt.
Een korte handleiding over wat je zelf kunt aanpassen, wat naar mij gaat en hoe je de snelheid en formulieraflevering na de lancering controleert.
Van het eerste gesprek tot het laatste bestand: deze lijst is afgesproken voordat het werk begint. Je weet precies wat er bij de site wordt geleverd.
Vragen om te stellen over elke Framer-bouw
Zodra je weet wat er in de overdracht moet zitten, vraag er dan om voordat je tekent. Hier zijn vijf vragen die werken bij elke Framer-bouw.
Kan ik zonder jou een CMS-item toevoegen en publiceren? Vraag om de velden te zien tijdens de bouw, niet pas achteraf. De veldnamen moeten duidelijk maken wat elk veld doet.
Waar gaat het formulier naartoe en wat triggert de conversie in mijn advertentieplatform? Vraag om een concrete bestemming en een event dat je kunt volgen. Een bedankje op het scherm geeft je advertenties niets om te tellen.
Welke breakpoints zijn ontworpen en zijn ze gecontroleerd op een echte telefoon? Desktop, tablet en telefoon hebben elk hun eigen lay-out nodig.
Wat laadt er en wat beweegt er in de first fold? Vraag daarna hoe dat zich gedraagt op een trage verbinding. Een zware hero-video in de first fold kan de laadtijd van al het andere omlaag trekken.
Krijg ik op de opleverdag het Framer-project zelf? En wat kost een aanpassing me een maand later?
Stel ze alle vijf zolang een aanpassing nog goedkoop is.
De oplevertest, in één minuut
Die vragen komen neer op één test. Doe vier checks achter elkaar. Voeg een bericht toe aan het CMS, verstuur het formulier, kijk of er een conversie binnenkomt in je advertentieplatform, pas dan een koptekst aan en publiceer.
Als je ze alle vier zonder mij kunt doen, heeft de bouw het werk gedaan dat een design hoort te doen. Als er voor een van de vier een developer nodig is, is dat de vraag die beantwoord moet worden vóór de laatste factuur.
Framer past perfect bij een groeiend merk dat snel vooruit wil met iemand die je merk al kent. Beoordeel het op de overdracht, want dat is waar je uiteindelijk mee moet werken.
Conclusie
Een Framer-bouw is maar zo goed als wat er een jaar na de lancering nog werkt. Doordachte breakpoints voor desktop, tablet en telefoon doen ertoe. Net als het daadwerkelijk krijgen van het Framer-project op de opleverdag. Dat is het werk dat een design hoort te doen.
Een bouw van iemand die je merk al kent, moet jou de sleutels overhandigen en je zelf aan het stuur zetten. De oplevering is waar je uiteindelijk mee moet werken.
Veelgestelde vragen
Hoe weet ik of een Framer-website gebouwd is om lang mee te gaan na de lancering?
Beoordeel de bouw op wat ongeveer een jaar na livegang nog werkt, niet op hoe het er op de lanceringsdag uitziet. De opleverinventaris moet de CMS-collecties, formulierroutering, tracking, animatie-instellingen, breakpoints en de designbestanden bevatten. Vraag of degene die je advertenties beheert de site kan bewerken; als dat niet kan, heb je een plaatje van een website gekocht.
Waar moet ik op letten bij een voorbeeld van een Framer-website voordat ik iemand inhuur?
Open eerst een paar voorbeelden op je telefoon om te zien of de tekst leesbaar is en het menu prettig werkt. Zoek daarna de blog- of werkpagina op en kijk hoe recent het nieuwste item is. Verstuur het contactformulier om te zien waar het terechtkomt, en vraag welke delen worden gevoed door een collectie en welke met de hand zijn geplaatst.
Wat heb ik nodig in een CMS zodat mijn marketingteam kan publiceren zonder de designer?
Herhaalbare content zoals blogposts, teamleden, case studies en veelgestelde vragen hoort thuis in collecties, met velden zoals titel, slug, afbeelding, alt-tekst en een korte samenvatting die vóór de lancering zijn klaargezet. Je team moet zelf een conceptitem kunnen toevoegen, de velden invullen en het publiceren. Content die rechtstreeks op de pagina wordt getypt in plaats van uit een collectie wordt gehaald, zorgt ervoor dat de overzichtspagina en het losse item uit elkaar gaan lopen.
Hoe moeten formulieren en tracking worden ingesteld vóór de overdracht?
Vraag om een concrete bestemming voor formulierinzendingen, zoals een inbox, een Google Sheet, je CRM of een combinatie hiervan. Gebruik de URL van een bedankpagina als de conversie die je advertentieplatform telt, in plaats van een melding op het scherm. Het artikel raadt aan om formulierinzendingen, weergaven van de bedankpagina, klikken op de belangrijkste call-to-action en een verborgen UTM-veld in te richten, en dit vanaf een telefoon te testen om te bevestigen dat de e-mail aankomt, de rij in de sheet verschijnt en de conversie zichtbaar is in je advertentieplatform.
Wat zit er in de overdracht en wat kan ik daarna zelf aanpassen?
Op de laatste dag hoor je toegang tot het Framer-project op editor-niveau te krijgen, elke CMS-collectie met helder benoemde velden, geteste formulierbestemmingen en tracking, het Figma-bestand met merkmiddelen en een geschreven handleiding. Tekstuele wijzigingen, collectie-items, vervangen afbeeldingen, nieuwe testimonials en het publiceren van conceptberichten kun je prima zelf doen. Aanpassingen aan de lay-out, het grid, een nieuwe sectie of een nieuw formulierveld dat de bestemming van inzendingen verandert, blijven designwerk.
