Xplore DMS
Website Design - UI/UX
A responsive landing page featuring a continuously rotating oval shape with a video and content inside. Achieved this using CSS clip-path, canvas, and CSS rotate transition, ensuring the oval remained perfectly shaped and responsive.
The project began with an exploration of how to incorporate branded visual elements — specifically the “O” from the One Development logo — into an interactive, motion-driven layout. I studied various approaches for embedding media within non-standard shapes, with a strong emphasis on maintaining responsiveness and visual clarity across screen sizes. Inspiration was drawn from motion design trends in luxury and real estate branding, paired with an audit of how motion affects attention and user flow on high-traffic landing pages.
The design centered around a continuous rotating oval that housed both video and textual content, acting as a centerpiece for the brand’s identity. I focused on crafting a fluid, visually engaging hero section where the oval motion reinforces brand recognition while drawing the user’s attention. The challenge was to maintain its precise shape, visual balance, and legibility across all devices. Through prototyping and visual experimentation, I refined the pacing of motion and content layout to ensure it enhanced rather than distracted from the messaging. The final design delivered a responsive, animation-rich experience that felt premium and clean, in line with the company’s architectural and development ethos.
This landing page was designed as a visual homage to the company’s identity — using the letter “O” as a central, interactive motif. The idea was to bring a static logo element to life, transforming it into a living part of the UI that could carry both video and content in a single fluid space. The result was a concept that merged branding with function, offering users an immediate sense of innovation, motion, and elegance upon landing on the page.