Microsite
Samarkand
What I was designing for
An immersive, scroll-driven microsite exploring the history of Samarkand, Uzbekistan - known as the jewel of the Silk Road trade network.
Design an engaging microsite experience exploring a topic of your choice with flair, innovation and great interaction design.
The brief asked to design an engaging microsite with visual interaction design.
I chose Samarkand, the beating heart of the Silk Road as my topic. A story about a city where civilisations met, traded and transformed each other. Three main routes originating from China are passed through Uzbekistan, making it impossible to trade between East and West without crossing these lands.
The goal was to tell the story immersively, letting the images and design do the talking, actively responding to feedback from my tutors.
Initial Ideation & Topic Selection
Domain & Visual Research
Content Planning & Information Architecture
Framer Design & build
Usability testing & Iteration
Building in Framer for the first time
Figma - wireframing
Miro
An interactive High Fidelity Prototype Microsite
CHALLENGE
CHALLENGE
THE BRIEF
KEY PHASES
METHODS
OUTPUT
Laying the
foundation
My research was extensive, covering domain history, visual inspiration from other immersive and engaging microsites, colour palettes drawn from Uzbek tilework and textiles and typography exploration.
A major consideration was finding fonts that abide by WCAG standards, dyslexia friendly and convey the historical character of Samarkand without looking dated.
RESEARCH
Bringing it
to life
DESIGN & BUILD
Built entirely in Framer for the first time, across multiple pages. Key design decisions: tiles shaped navigation, arched image frames, scroll-triggered animations, were shaped by research, tutor feedback and validated through usability testing with participants.
The Islamic inspired arch became the recurring motif for image containers and hero sections throughout the site. It gave the microsite a distinctive, culturally-grounded identity rather than a generic web layout.
I set up a dedicated sandbox page to experiment with scroll interactions, component variants and transition logic, testing ideas there before moving them into the live pages. Scroll-triggered reveals, image scaling as you scroll down, and horizontal text movement were all prototyped in the sandbox first. This kept the live pages clean while I figured out what Framer could and couldn't do.
BIO
PROJECTS
CONTACT
