WHIMSY STUDIO
INTERIOR DESIGN

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

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.
• Perfect implementation of 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.
• Portfolio content management API design: Design data models and API specifications for Headless CMS integration to manage content such as 'Latest Stories', 'ARTICLES', and 'DIRECTORIES'.
• Dynamic navigation/CTA system construction: Design dynamic logic that allows navigation and CTA (Call-to-Action) button content and links to be controlled from the backend according to the agency's business flow (inquiries, recruitment, etc.).
• Search engine optimization (SEO) structure: Design a dynamic generation structure for meta tags and establish an architecture foundation considering SSR/SSG methods so that 'Stories' content can be effectively exposed to search engines.

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
• Design/Planning: Definition of agency brand mood and overall UX/UI design proposal, and section composition planning considering content's visual flow
• 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