Design a one-page interactive website that tells a meaningful story. Starting in Figma and built in Webflow, it focuses on narrative structure, responsive design, visual consistency, and user interactivity to create an engaging digital experience.
I selected “City of Victoria” as the theme, focusing on the colonial and urban development of Hong Kong from 1841 to 1940. After research, I began sketching layout ideas for each section, planning the scroll-based narrative flow and grid system to structure the one-page website clearly.
In this step, I developed a mood board using a Victorian-era colour palette: gold, sand, bronze, brown, and olive green. For typography, I selected Cinzel for headings and Times New Roman for body text and buttons to reflect the historical theme accurately.
I built the low-fidelity prototype in Figma by arranging all visual elements in position, including images, maps, and text blocks. I also defined interaction details like slide-ins, fade effects, and scroll-triggered transitions to guide the user smoothly through the story.
In this stage, I finalized the high-fidelity prototype in Figma with full colors, images, and typography. After refining interactions based on feedback, I developed the site in Webflow. Adapting the design for mobile was most challenging due to layout and vertical scroll adjustments.
