Cinematic Webflow Website for Noir Studio by Andre FerreiraCinematic Webflow Website for Noir Studio by Andre Ferreira

Cinematic Webflow Website for Noir Studio

Andre Ferreira

Completed work

Webflow Developer

Web Designer

GSAP

JavaScript

Webflow

Digital Media

Noir Studio – Webflow Design & Development

Client: Noir Studio Role: Lead Designer & Webflow Developer Services: UI/UX Design · Webflow Development · CMS Architecture · SEO Setup · GSAP & JavaScript Animations Timeline: 2025

1. Overview

Noir Studio is a Brazil-based digital studio focused on high-end Webflow development, UI/UX design, and motion-driven digital experiences. The goal of this project was to create a modern, cinematic website that showcased the studio’s capabilities with clarity, personality, and technical precision.

I was responsible for the entire digital experience, from initial design to final implementation building a website that communicates expertise through thoughtful structure, motion, and visual rhythm.

2. Challenges

Full-site creation

Unlike client projects with predefined brand guidelines, Noir Studio required building every layer from scratch: identity, system, layout logic, and expression.

Motion as identity

The site needed motion that felt intentional and premium, using GSAP and JavaScript without compromising performance or responsiveness.

Scalable CMS foundation

To support future case studies and content updates, a clean and maintainable Webflow CMS structure was essential.

3. Objectives

Build a fully custom Webflow website with a strong visual personality.

Integrate high-quality motion (GSAP/JS) as a core layer of storytelling.

Create a scalable CMS for projects, services, and studio information.

Ensure strong SEO foundations, including metadata, schema, and performance.

Deliver a fast, polished interface across all breakpoints.

4. Process & Solutions

(a) Design System & UI/UX

Developed a minimal yet expressive visual direction.

Defined typography, spacing tokens, and grid logic for consistency.

Designed all layouts in a modular structure to support flexible scaling.

(b) Webflow Development

Built from scratch using a BEM-inspired class system for maintainability.

Implemented CMS Collections for:

Projects

Services

Insights (opcional)

Configured dynamic Open Graph, sitemap, and SEO fields directly via CMS.

(c) Motion & Interactions

Added subtle micro-interactions across navigation, cards, and sections.

Used GSAP for scroll-based transitions, stagger reveals, and timeline effects.

Integrated custom JavaScript for refined control over animation flow and easing.

Ensured all animations remained performant across devices.

(d) Optimization & Launch

Optimized images, minified scripts, and applied lazy loading.

Achieved strong performance scores while keeping motion depth.

Set up structured metadata and semantic HTML for SEO clarity.

5. Results & Impact

✅ A premium, motion-driven website that communicates expertise and taste. ✅ Scalable CMS that allows the studio to add future case studies with ease. ✅ Smooth transitions and GSAP animations that strengthened brand perception. ✅ Strong SEO baseline and clean performance structure.

6. Conclusion

The Noir Studio website reflects the studio’s philosophy: design and development with intention, clarity, and motion-driven storytelling. This project showcases my end-to-end capability from conceptual design to advanced Webflow development blending creativity and technical precision.