Refto
Canal Club Wickside

Canal Club Wickside

Canal Club is a collection of rental apartments and townhouses spread across the Wickside development in East London.

Scrolling AnimationLarge TypeIllustrativeHorizontal ScrollingCustom CursorAnimationArchitectureHospitalityBig Background VideoReal Estate
5.0
11
Visits
Visit

Available Pages

Home

Version History

Design Analysis

Canal Club Wickside Home design analysis

Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty. Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation....

Key Takeaways

  • Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty.
  • Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation.
  • Use copy blocks and CTAs to support the place narrative, not to overwhelm it.
  • Favor architecture, interiors, landscapes, and lifestyle scenes with strong cropping discipline.
  • Use large-format imagery or video-like hero framing before relying on UI decoration.
  • Motion libraries detected in capture: gsap, ScrollTrigger. Treat them as sequence scaffolding rather than decoration.

Overview

  • Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty.
  • Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation.
  • Use copy blocks and CTAs to support the place narrative, not to overwhelm it.

Image Direction

  • Favor architecture, interiors, landscapes, and lifestyle scenes with strong cropping discipline.
  • Use large-format imagery or video-like hero framing before relying on UI decoration.

Entry & Arrival Motion

  • Motion libraries detected in capture: gsap, ScrollTrigger. Treat them as sequence scaffolding rather than decoration.
  • Keep arrival motion purposeful and short so the shell remains legible in its resting state.

Colors

  • Base the shell on E5DCD5 and keep 10162D as the primary reading color.
  • Use 54453F as the main emphasis color and keep it scarce enough to preserve hierarchy.
  • Let FFD3E0 and C9E7B5 separate secondary surfaces without introducing noisy ornament.
SpacePlay/Pause←→Seek 1sShift←→Seek 10s