03 · Studio site · Previous version · 2023

YWdesign v1 — your digital partner.

The first YWdesign studio site: frosted-glass panels floating over a drifting blue-teal gradient, a service grid, a fully transparent roadmap and a quote funnel. Built to make a one-person studio feel like a dependable partner.

Visit live site ↗Jump to the build
Role
Brand, design & build
Year
2023
Sector
Web studio · Freelance
Stack
Next.jsTailwind CSSSanityFramer Motion
YWdesign v1 home — “Your Digital Partner” over a blue-teal gradient with glass navigation
// The brief

Make a one-person studio feel like a partner.

Clients hiring a freelancer worry about one thing: what happens after launch. The site had to answer that before anyone asked — clear services, a visible process and a direct line to a human.

The look carried the message: light, layered glass over a living gradient. Nothing heavy, everything readable, and every panel a little window onto the brand behind it.

[ glass_system ]
Frosted panels, one recipe

White at 10% opacity, backdrop blur, a hairline border and a soft shadow — the same Tailwind recipe for the nav, cards, footer and buttons.

[ feature_icons ]
Six promises, six icons

Responsiveness, animations, performance, UX/UI, CMS and SEO — each a custom icon and a two-line promise.

[ roadmap ]
A process you can see

From project definition to maintenance, every step drawn out so the price and the timeline never surprise.

[ i18n ]
EN · FR

Bilingual routing and copy for clients across Belgium, France and Switzerland.

// Signature build

What makes a better website

The feature grid from the old services page, rebuilt in plain CSS: frosted cards over a drifting gradient, staggered columns, and a lift and border pulse on hover. Switch the glass off to see what the blur is doing.

components/FeatureCard.jsxhover · toggle the glass

  • Responsiveness

    Beautiful layout on all screen sizes.

  • Animations

    Dynamic interactions that bring your website alive.

  • Performance

    Tell your story using fast internet technology.

  • UX/UI Focused

    Users love an easy to use and lightweight design.

  • CMS

    You can manage the content yourself.

  • SEO Optimisation

    Organically reach new customers.

// How it converts

Transparency as the sales pitch

The roadmap page does the selling: every step from first meeting to handover is laid out, so a quote request feels like the natural next step.

01 / definition & contract

Scope, timing, budget

The first meeting fixes goals and resources; a contract proposal follows before any work starts.

02 / ideation & iteration

Two rounds, then code

Values, branding and style preferences become ideas, then two iterations on structure and design before sign-off.

03 / handover & maintenance

You own all the code

The finished product is handed over in full, with a maintenance plan to keep it healthy.

“
An apple a day keeps the doctor away. A maintenance plan is crucial for the health of your product.
// YWdesign v1 — the roadmap, last step
// Gallery

Through the site

Projects — recent work under a glass navigation bar and skill ticker
Feature grid — six glass cards with custom icons
Roadmap — the collaboration visualised step by step
About — “Hi, I am Yolan”