ATÉLIER
Art Exhibition Web Magazine

Project Purpose

Build a website that contains core information of an art atelier such as 'Lisbonne', 'Programme', and 'Installations', providing a unique and poetic user experience through refreshing visuals inspired by nature and scroll interactions.

• Emotional Immersion: Perfectly implement the poetic atmosphere created by sky-blue backgrounds and natural images through smooth and delicate interactions based on GSAP/ScrollTrigger.

• Program Information Management: Design a backend integration structure that allows efficient updates of highly variable content such as regular programs (Programme) and installation art (Installations).

• Balance of Minimalism and Information Delivery: Clearly design information flow without complexity within minimized typography and layout to enhance user understanding.

Scope

Complete UI Design and UX Planning, Emotional Frontend Development and Publishing, Architecture Design for Program and Content Management System (CMS) Integration

Design Points

• GSAP-based background and content synchronization: Implement GSAP and ScrollTrigger logic that synchronizes background textures (sky-blue noise/texture) and image appearances with scroll, adding depth and spatial sense to the website.
• Smoothness using Locomotive Scroll: Provide a smoother and more fluid scrolling experience than default browser scroll using Locomotive Scroll, enhancing the poetic atmosphere of the website.
• Responsive image and typography control: Provide high-quality natural images at optimal ratios on all devices, and implement precise CSS design and @media queries so minimal typography does not lose readability according to resolution.

My Role

• Architecture/Design: Data modeling for program and installation art content, API Contract specification for CMS integration, consideration of website functional scalability
• Frontend/Interaction: Development of poetic/emotional interactions using GSAP/ScrollTrigger/Locomotive Scroll, implementation of dynamic background texture and image placement logic, completion of responsive web publishing
• UI/UX Design: Color mood board and UI draft design incorporating natural sensibility, typography and layout design for clear information delivery
• Optimization/Deployment: Web performance optimization (scroll delay and image loading management), deployment to cloud environments (Vercel/Netlify, etc.) and securing initial operational stability
• Content Management: Initial content JSON data structuring for program/installation art and preparation of administrator guide materials