L'ART DE LA
DESCRIPTION
Brutalist Architecture & Art Studio
DURATION
Dec 2025 - Jan 2026
MY ROLE
- Concept & Identity: Derived 'Modern Brutalism' concept to visualize L'ART DE LA's brand philosophy. Layout design considering the harmony between French-based menu names (Étudier, Réaliser, etc.) and typography.
- Visual Design: Responsive layout design balancing oversized typography and images. Built an asymmetric grid system (Asymmetric Grid System) with clear information hierarchy.
- Interactive Development: Implemented high-level scroll interactions and text animations using GSAP. Applied image optimization and Lazy Loading. Cross-browser and performance optimization across various devices.
TECH
React.js · Next.js · TypeScript · Tailwind CSS
GSAP · ScrollTrigger · Lenis · WebGL
Sanity.io
Figma · Vercel
Project Purpose
"Digital Monumentalism." Beyond simple information delivery, the website itself was designed to feel like a 'contemporary art museum'. By adding depth and structural aesthetics to the flat screen, we extended the boundary between art and architecture that 'L'ART DE LA' pursues into a digital space. • Architectural Layout: Structural grid and layout design that resembles viewing architectural blueprints. • Kinetic Typography: Utilizing text not as simple information, but as sculptural elements that occupy space. • Seamless Flow: Providing an organically connected content experience (Narrative) that responds to scroll.
Scope
- · Complete UI/UX Design
- · Interactive Web Development
- · Brand Identity Establishment
- · Interaction Implementation
- · CMS Construction
Key Technical Features
Architectural Layout
- · Structural grid and layout design that resembles viewing architectural blueprints.
Kinetic Typography
- · Utilizing text not as simple information, but as sculptural elements that occupy space. Marquee effects where texts like 'L'ART DE LA', 'DESIGN ART ARCHITECTURE' move in response to scroll.
Seamless Flow & Interaction
- · Lenis Scroll for heavy yet smooth scrolling; parallax and subtle scale changes to maximize spatial sense and depth in the flat web environment.
Design Points
Brutalist Typography & Scale
Used massive sans-serif typefaces that fill the screen to visually represent the brand's confidence and grandeur. Applied kinetic effects (Marquee Effect) where texts like 'L'ART DE LA', 'DESIGN ART ARCHITECTURE' move in response to scroll, injecting dynamic energy into static images.
Monochromatic & Structural Grid
Used a thoroughly restrained black and white (Monochrome) color palette to build a perfect background where portfolio images (works) stand out most. Used thick and clear dividers to separate sections, giving an impression of viewing the skeleton (Structure) of a building.
Immersive Interaction
Applied Lenis Scroll to provide a heavy yet smooth scrolling experience, making users feel as if they are walking through an exhibition hall rather than a website. Added parallax effects and subtle scale changes to images to maximize spatial sense and depth in the flat web environment.