Case
Figma-designs omgezet naar beheersbare Webflow-site voor TED Summer School
Take the first step towards a unique summer experience.
- Klant:
- TED Summer School
- Doorlooptijd:
- 4 weken
- Jaar:
- 2025
.avif)
11
pagina's gebouwd
4
weken doorlooptijd
In het kort
TED en Immerse Education lanceerden een gezamenlijk zomerprogramma en hadden een dedicated website nodig. De Figma-designs waren klaar, wij vertaalden die naar een werkende Webflow-site met 11 pagina's. CMS-structuren, HubSpot-formulieren en GA4-tracking zijn ingericht zodat het team de site zelf beheert. De site ging live op ted.immerse.education binnen een doorlooptijd van vier weken.
Uitdaging
Bestaande designs, nieuwe omgeving
De ontwerpen voor de site waren al uitgewerkt in Figma. De uitdaging was niet het ontwerp, maar de implementatie: elk detail moest kloppen op desktop, tablet en mobiel, zonder dat de designs als uitgangspunt konden worden aangepast.
Strakke deadline
De site moest klaar zijn terwijl parallel ook de hoofdsite van Immerse Education werd gemigreerd. Dat vroeg om een gestructureerde aanpak en heldere prioriteiten.
Vertraging door brand guidelines
Kort voor de start van de bouw waren TED's definitieve brand guidelines nog niet beschikbaar. Om de deadline toch te halen, zijn we begonnen met de core build op basis van de bestaande Figma-bestanden, zodat de guidelines later konden worden toegepast zonder de planning te verstoren.
Beheerbaarheid voor het team
Het Immerse-team moest de site na oplevering zelf kunnen beheren en updaten. Dat stelde eisen aan de opzet van de CMS-structuren en de manier waarop content, programma's en formulieren zijn ingericht.
Aanpak
Webflow-omgeving opzetten
We zijn gestart met het inrichten van de Webflow-omgeving: globale stijlen vastleggen, het design system consistent doorvoeren en de basis leggen voor alle pagina's. Zo konden we daarna efficiënt pagina voor pagina bouwen zonder inconsistenties.
Pixel-perfect bouwen vanuit Figma
Alle 11 pagina's zijn zorgvuldig vertaald vanuit de Figma-designs naar Webflow. Daarbij is voor elke pagina gecontroleerd of de responsive werking op desktop, tablet en mobiel klopte. Animaties en micro-interacties zijn toegevoegd om de beleving van de designs te behouden.
CMS-structuren en integraties
Voor programma's, locaties, vakken en formulieren zijn CMS-structuren opgezet. HubSpot-formulieren voor aanmeldingen en financiële ondersteuning zijn gekoppeld, en GA4 is geïntegreerd voor tracking.
QA en overdracht
Na de bouw is een volledige testronde uitgevoerd op verschillende apparaten en browsers. Bevindingen zijn verwerkt voor overdracht. Het team van Immerse Education kon de site daarna direct zelf beheren en aanvullen met content.
Highlights
- Highlight 1Ontbreekt
Programma's en locaties beheerbaar in CMS
Programma's, locaties en beurzen zijn ondergebracht in overzichtelijke CMS-structuren. Het team van Immerse Education kan deze informatie zelfstandig aanpassen en uitbreiden zonder technische kennis.
- Highlight 2Ontbreekt
Aanmeldformulieren gekoppeld aan HubSpot
Bezoekers kunnen zich direct aanmelden of financiële ondersteuning aanvragen via formulieren die zijn gekoppeld aan HubSpot. Aanmeldingen komen zo automatisch op de juiste plek terecht.
- Highlight 3Ontbreekt
Responsive op elk apparaat en elke browser
Alle 11 pagina's zijn getest op desktop, tablet en mobiel in meerdere browsers. De designs uit Figma zijn pixel-perfect overgenomen, inclusief animaties en micro-interacties.
Resultaat
Binnen vier weken werd de Figma-designs omgezet naar een volledig responsieve, live Webflow-site op ted.immerse.education.
Het Immerse-team kan programma's, locaties en beurzen zelfstandig beheren en updaten via de opgezette CMS-structuren.
Alle 11 pagina's zijn pixel-perfect geïmplementeerd en werken consistent op desktop, tablet en mobiel.
Na de livegang zorgde een TED-videolancering voor een flinke toename in webverkeer, die de site zonder problemen opving.
In de case
- Screenshots ontbreken