Jonathan Babinard’s Website
Complete design and development of a personal website on Framer, from concept to launch.
The project covered the full creative process - from visual identity to responsive integration - with the goal of building a refined, coherent, and easy-to-navigate platform that reflects the client’s universe and expertise.
Client
Jonathan Babinard
Service Provided
Branding · Wireframing · UI design · Figma · Framer · CMS · SEO
Project Overview:
I designed and developed the personal website of Jonathan Babinard, a film director, entirely from scratch - from visual identity to Framer development. The goal was to create a refined, minimalist, and artistic platform that reflects his creative universe, showcases his versatility across different types of projects, and helps him attract new clients such as producers, agencies, and brands.
1
The Challenge:
Jonathan already had significant online visibility through his production company, but no dedicated platform representing him as an individual director.
He needed his own space - separate from the collective - to establish a personal brand, highlight his versatility across commercial, narrative, and experimental projects, and directly address producers, agencies, and brands looking for directorial talent.
2
The Research & Discovery
I started by analyzing portfolio websites of established directors and creative professionals in the film industry. This competitive analysis revealed clear patterns: the most effective director portfolios prioritize visual storytelling over text, use generous white space to let the work breathe, and organize projects in a way that makes versatility immediately apparent.
Through conversations with Jonathan, I identified his core need: demonstrate range without losing his artistic identity. I also researched the browsing behaviors of creative decision-makers - producers, agencies, casting directors - who typically review portfolios quickly across multiple devices. This confirmed the importance of fast loading, intuitive navigation, and a mobile-first approach that preserves the cinematic quality of his work.
3
The Design Process
I started with a moodboard to define the artistic direction, then moved to low-fidelity wireframes to establish the information architecture and user flow. I explored several layout options - grid, masonry, full-screen carousel - before selecting a clean grid system that balances visual impact with browsing efficiency.
For the visual identity, I built a restrained color palette around black, white, and subtle grays, ensuring Jonathan's colorful and dynamic work remains the focal point. Typography was central to the desired elegance: I chose a modern sans-serif with a carefully considered hierarchy to guide users through content without visual clutter.
Interactive elements were kept intentionally subtle - hover states, smooth transitions, and micro-interactions that enrich the experience without distracting from the work. I iterated closely with Jonathan throughout, refining the design based on his feedback to ensure the final result authentically represents his creative vision.
Once the design was finalized, I developed the entire site on Framer, handling responsive integration across all devices to deliver a seamless experience whether browsing on desktop or mobile.
4
The Result
Jonathan now has a strong online presence that reflects his artistic identity and positions him as a versatile, high-caliber director.
The site clearly communicates his range across project types, making it easy for producers, agencies, and brands to quickly understand his work and reach out. The minimalist aesthetic lets his films speak for themselves - elegant, cinematic, and fully aligned with his creative universe.
5