This is how we designed and developed a $20,000 client website — from Figma to Webflow.
In this full case study, I walk you through our entire process: from client brief, wireframing, UI design in Figma, to final development and animations in Webflow. If you’ve ever wondered what it’s like to build a high-end website for a real client, this video breaks it all down.
Link to the website we made:
https://forfx-kabarza.webflow.io/
———————————————
In this case study, we break down our entire process:
✅ Client onboarding & scope refinement
✅ Figma wireframing & style exploration (mood boards, design systems)
✅ Solving complex challenges: Dynamic pricing calculator, SVG animations, Lottie integration
✅ Webflow development with custom interactions (stagger animations, hover effects, sticky nav)
✅ Real-world client feedback loops & scope management
Key highlights:
✨ Creating generative star animations with SVG + JavaScript
✨ Building a live-updating pricing calculator (custom JS)
✨ Implementing performance-first animations (Lottie, Webflow native)
✨ Mobile QA testing on real devices (even old phones!)
✨ Client communication strategies that prevent revisions
📝 Video Timestamps
00:00 Series introduction: ForFX website
00:13 Client onboarding & project scope
01:01 Figma design process
04:45 Style exploration: Mood board and design system
06:26 Hero section design exploration
09:02 Designing the rest of the homepage
11:34 The pricing section challenge
14:16 Webflow development: Custom animations & interactions
15:49 Generative star animations
20:19 Multi-page showcase: Affiliate system & sticky navigation
25:39 Behind the scenes: Quality assurance
26:44 Device testing strategy
27:25 Client communication framework
28:51 Full process recap
30:14 Key takeaway!
Tools used:
• Figma (Wireframing, Design Exploration)
• Webflow (Development, CMS)
• Lottie (Micro-animations)
• JavaScript (Custom interactions)
👉 Watch the series:
Case Study 01 “Peak”: [https://youtu.be/FvrNfuJDz24]
Want to see a tutorial on any specific element?
→ Comment below which technique interests you most! (Pricing calculator? SVG stars? Lottie workflow?)
#webdesigncasestudy #webdesign #webdevelopment #webdesigntips
