From figma to development: Studentzaken.nl

I recently wrapped up the development of Studentzaken.nl, a platform built to help students in the Netherlands navigate complex education law (onderwijsrecht) matters, like plagiarism disputes, fraud accusations, and BSA issues. The site is live, and I wanted to share a raw screen recording of the final build.

1. Bringing Static Design to Life

The original UI design was created by a friend of mine. My goal was to take those static frames and make them feel dynamic while keeping a clean, professional look fitting for a legal firm. As you watch the video, notice the interaction design:

• Parallax Elements: Subtle depth changes as you scroll to keep the legal content engaging.
• State Changes: Fine-tuned hover effects and precise enter/exit states on components to make the site feel highly responsive to user input.
• The Footer Easter Egg: Look closely at the very bottom of the page. I built a small, interactive judge’s gavel (hammer) hidden in the footer code as a fun nod to the legal theme.
• And across the website, there is a 'Dutch' design-reference to the word 'right' or 'correct' which means 'recht'. Notice the titles are tilted, as you scroll they become 'recht'.

2. Optimization and Speed

A major focus during development was performance. Websites with lots of micro-interactions often suffer from lag or layout shifts. I focused heavily on optimization to ensure the scrolling remains completely smooth and pages load instantly, which is crucial for retaining students who need quick answers to urgent legal questions.

3. Real-World Business Metrics

A beautiful portfolio piece is great, but a legal service website has to convert. The feedback from this launch has been incredible:

• The client receives occasionally compliments regarding the clean look and professional feel of the user interface.
• More importantly, she told me how happy she is with the website; the website is generating an increase of leads since going live, and the business is growing!

Happy stuff!

Cheers,
Ruben

▶ Watch on 3speak.tv