Loading ...

Responses by SavoirFaire.

Background: The purpose of the Naked City Films website is to present the studio’s work in a way that reflects how it approaches filmmaking: with confidence, rhythm and a strong sense of control. The primary audience includes agencies, brands, creative partners and collaborators who are already visually literate and looking for a production partner with a clear point of view. Rather than explaining what the studio does, the site focuses on showing how they think and work through pacing, motion and structure.

Design core: The site is built around motion as a structural element rather than a decorative one. A restrained, brutalist-inspired layout; a monochromatic, electric blue palette; and large-scale typography create a bold visual system that stays out of the way of the work itself, while subtle Easter eggs reward exploration, such as a screensaver moment and a hidden footer hover. Page transitions, hover states and scroll behavior are treated as part of the narrative, giving the site a sense of momentum that mirrors film editing rather than traditional web navigation.

Challenges: Finding the right balance between movement and restraint. The site needed to feel active at all times without becoming distracting or overwhelming. Every animation, transition and interaction had to justify its presence and contribute to the overall rhythm of the experience. Achieving this required close collaboration between design and development from the start.

Navigation structure: The navigation was designed to feel intuitive without relying on conventional patterns, with movement through the site feeling closer to moving between scenes than clicking through pages. From the outset, the structure was conceived as a scalable system, built to support portfolio and talent growth as the studio expands beyond film directors into additional disciplines such as photography and animation. Clear hierarchy, strong visual cues and carefully designed transitions guide users through the experience while allowing the navigation to evolve without losing clarity or momentum.

Technology: The site was custom-built using a full-stack Vue.js framework with Nuxt, allowing design and development to evolve together from the start. A bespoke Nuxt module was developed to integrate three.js, smooth scrolling and scroll-based animations into a single system, giving precise control over motion, timing and interaction behavior. We used custom shaders for image hover and reveal effects, while GSAP handled complex animation sequences where detailed choreography was required. Sanity manages the content, which we structured to support flexible layouts and intuitive reordering. This approach let the interactions feel intentional and responsive across devices, with mobile behavior designed specifically for touch rather than adapted later.

nakedcityfilms.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In