03 · Studiosite · Vorige versie · 2023

YWdesign v1 — je digitale partner.

De eerste studiosite van YWdesign: matglazen panelen die zweven boven een bewegend blauwgroen verloop, een dienstenraster, een volledig transparante roadmap en een offertetrechter. Gebouwd om een eenmansstudio als een betrouwbare partner te laten voelen.

Bekijk de live site ↗Spring naar de build
Rol
Merk, design & bouw
Jaar
2023
Sector
Webstudio · Freelance
Stack
Next.jsTailwind CSSSanityFramer Motion
Homepage van YWdesign v1 — “Your Digital Partner” op een blauwgroen verloop met glazen navigatie
// De briefing

Laat een eenmansstudio voelen als een partner.

Wie een freelancer inhuurt, maakt zich zorgen over één ding: wat er na de lancering gebeurt. De site moest dat beantwoorden vóór iemand het vroeg — duidelijke diensten, een zichtbaar proces en een directe lijn naar een mens.

De look droeg de boodschap: licht, gelaagd glas boven een levend verloop. Niets zwaar, alles leesbaar, en elk paneel een klein venster op het merk erachter.

[ glass_system ]
Matglazen panelen, één recept

Wit op 10% dekking, achtergrondvervaging, een fijne rand en een zachte schaduw — hetzelfde Tailwind-recept voor navigatie, kaarten, footer en knoppen.

[ feature_icons ]
Zes beloftes, zes iconen

Responsiveness, animaties, performance, UX/UI, CMS en SEO — elk met een eigen icoon en een belofte in twee regels.

[ roadmap ]
Een proces dat je ziet

Van projectdefinitie tot onderhoud is elke stap uitgetekend, zodat prijs en planning nooit verrassen.

[ i18n ]
EN · FR

Tweetalige routing en teksten voor klanten in België, Frankrijk en Zwitserland.

// Signature build

Wat maakt een betere website

Het featureraster van de oude dienstenpagina, herbouwd in pure CSS: matglazen kaarten op een bewegend verloop, verspringende kolommen, en een lift met pulserende rand bij hover. Zet het glas uit om te zien wat de vervaging doet.

components/FeatureCard.jsxhover · glas aan/uit

  • Responsiveness

    Een mooie lay-out op elk schermformaat.

  • Animaties

    Dynamische interacties die je website tot leven brengen.

  • Performance

    Vertel je verhaal met snelle internettechnologie.

  • UX/UI-gericht

    Gebruikers houden van een licht en eenvoudig design.

  • CMS

    Je beheert de inhoud zelf.

  • SEO

    Bereik organisch nieuwe klanten.

// Hoe het converteert

Transparantie als verkoopargument

De roadmap-pagina doet de verkoop: elke stap van eerste gesprek tot oplevering ligt open, zodat een offerteaanvraag de logische volgende stap wordt.

01 / definitie & contract

Scope, timing, budget

Het eerste gesprek legt doelen en middelen vast; een contractvoorstel volgt vóór er gewerkt wordt.

02 / ideeën & iteratie

Twee rondes, dan code

Waarden, huisstijl en stijlvoorkeuren worden ideeën, gevolgd door twee iteraties op structuur en design vóór goedkeuring.

03 / oplevering & onderhoud

Alle code is van jou

Het afgewerkte product wordt volledig overgedragen, met een onderhoudsplan om het gezond te houden.

“
Voorkomen is beter dan genezen. Een onderhoudsplan is cruciaal voor de gezondheid van je product.
// YWdesign v1 — de roadmap, laatste stap
// Galerij

Door de site

Projecten — recent werk onder een glazen navigatiebalk en een skill-ticker
Featureraster — zes glazen kaarten met eigen iconen
Roadmap — de samenwerking stap voor stap gevisualiseerd
Over mij — “Hi, I am Yolan”