Planning
Define the page as a focused leasing story: the building, the location, the facts, and the path toward contact all need to be visible without making the experience feel administrative.
Case study / OstStern 121
Modernes Arbeiten im Oststern
A process-led portfolio presentation for a responsive real-estate microsite: planning, design thinking, customer integration, motion, frontend delivery, and deployment.
OstStern 121 is presented as a clean commercial experience where location, architecture, planning facts, and contact moments work as one guided story.
Process map
From project intent to deployed page.
Design Thinking
Translate a commercial real-estate offer into an experience that feels clear, premium, and easy to scan for decision makers comparing spaces.
Customer Integration
Keep the customer perspective close to the interface: location advantages, workplace quality, architecture, floor plans, equipment, and contact routes stay in a practical order.
Information Architecture
Structure the microsite around discoverable chapters so visitors can move from atmosphere to concrete facts without losing orientation.
Visual Direction
Use a restrained editorial system with large imagery, direct typographic hierarchy, and strong contrast to make Ostend and the building feel tangible.
Interaction & Motion
Support the page rhythm with motion that clarifies transitions, gives the visual material weight, and keeps long content sections from feeling flat.
Frontend Architecture
Break the experience into robust sections, reusable visual patterns, asset-led layouts, and animation hooks that stay manageable during iteration.
Responsive Experience
Preserve the hierarchy across desktop, tablet, and mobile so maps, tabs, plans, and image sequences remain usable on smaller screens.
QA & Performance
Balance rich imagery with predictable loading behavior, stable layouts, accessible links, and reduced-motion support.
Deployment
Ship the finished microsite as a Netlify-hosted page with direct access to the live customer-facing experience.
Page moments
Real project visuals, staged as a slow editorial reel.
Customer integration
The page keeps business needs and user questions in the same frame.
Leasing pages need atmosphere, but they also need evidence. The Oststern flow brings together urban context, commute information, image-led proof points, floor plans, key facts, equipment, and contact paths.
Delivery notes
Motion only works when the basics hold.
Live Site
The case study links directly to the deployed Oststern 121 page.
Motion System
Scroll-triggered reveals, progress, pinned passage, and parallax are handled client-side.
Responsive UI
Desktop gets a cinematic reel; compact screens keep the content scrollable and calm.
Deployment