Whimsy Studio
DESCRIPTION
Interior Design
DURATION
Aug 2023 - Oct 2023
MY ROLE
- Architecture/Design: Data structure design for interior portfolio content (CMS integration), and technical stack and module design considering website performance and scalability.
- Frontend/Interaction: Development of spatial interaction using GSAP/ScrollTrigger, development of minimal and structural UI components based on Figma, and perfect implementation of cross-browser compatibility and responsiveness.
- Optimization/Deployment: Image/video loading optimization and Lighthouse performance score management, establishment of a Git-based automatic deployment environment (CI/CD), and server stabilization work.
TECH
HTML5 · CSS3 (Flex/Grid) · JavaScript (ES6+)
GSAP · ScrollTrigger · Locomotive Scroll
Headless CMS · Strapi/Sanity · JSON
Figma · Adobe Photoshop · Adobe Illustrator
Project Purpose
Build a website system that emphasizes WHIMSY STUDIO's delicate and sophisticated interior design expertise, maximizing the delivery power of portfolio content within a non-complex structure. • Maximize Spatial Expression: Express the spatial sense and texture, which are the essence of interior portfolios, through premium scroll-based interactions to secure visual immersion. • Content Management Flexibility: Design a stable backend integration structure so that portfolio sections like 'Latest Stories' can be easily added/modified without developer intervention. • Structural Clarity: Reduce information exploration fatigue and optimize user experience (UX) through clear grid alignment and minimal typography.
Scope
- · Complete UI Design and UX/IX Planning
- · Frontend Development
- · Architecture Design for Interior Portfolio Management System (CMS) Integration
Key Technical Features
Maximize Spatial Expression
- · Express the spatial sense and texture of interior portfolios through premium scroll-based interactions to secure visual immersion.
Content Management Flexibility
- · Design a stable backend integration structure so that portfolio sections like 'Latest Stories' can be easily added/modified without developer intervention.
Structural Clarity
- · Reduce information exploration fatigue and optimize UX through clear grid alignment and minimal typography.
Design Points
GSAP-based Spatial Direction
Implement scroll-based parallax or screen transition effects using interior images with GSAP/ScrollTrigger, providing users with an immersive experience as if walking through a space.
Structural and Minimal UI
Implement structural UI based on grid alignment using CSS Grid and Flexbox, and write responsive code that perfectly maintains minimal typography and spacing-centered layout across all resolutions.
High-quality Image Loading Optimization
Maximize initial loading speed and scroll performance through lazy loading and WebP format application, as interior portfolios typically contain many high-capacity images.