Web Design
One small step
A narrative web experience exploring the Space Race (1957–1969)
Year :
2022
Industry :
Web design
Client :
University project
Project Duration :
4 weeks
CONTEXT
One Small Step is a narrative single‑page website created for a university module, designed to tell the story of the Space Race (1957–1969) through a visually immersive, scroll‑driven experience. My goal was to create a site where each scroll revealed another milestone — using contrast, typography, movement, and imagery to guide the user through history in a way that felt cinematic and engaging.
The final site combines parallax fades, scroll‑triggered transitions, and high‑contrast storytelling to create a sense of momentum and discovery — much like the era it represents.
Skills: Visual Design, Interaction Design, Motion, Storytelling, Wireframing, Webflow
Tools: Webflow, Figma, Sketchbook, Photoshop
PROCESS
1. Early Research & Visual Exploration
I began with extensive mood‑boarding and collage work, gathering visual references from:
Historic NASA posters
Vintage magazine covers
Space photography
Mission patches and typography
This stage defined the retro‑futuristic aesthetic — mixing analogue textures with bold, modern type.
2. Story Structure
I mapped out the narrative using a simple user flow:
Intro sequence
Key missions (US and Soviet)
“Did You Know?” fact blocks
Final Apollo 11 moment
Reflection footer
This ensured the user’s journey was linear, cohesive, and paced like a documentary.
3. Sketching & Wireframing
Explored:
Page compositions and story beats
Scroll‑trigger wireframe sequences
Layout experiments and visual rhythm
4. Visual Design & Production
I translated sketches into a final Webflow build, focusing on:
High‑contrast typography (white/black alternation)
Smooth fade transitions
Fixed‑position headline sections
Image cards revealing per milestone
Subtle animation timing to enhance drama
The result is a clean, atmospheric long-scroll website with immersive pacing.
⭐ CREATIVE OUTCOMES
Rather than quantitative metrics, this project’s success lies in its creative and technical growth.
Key outcomes include:
Developed a cohesive narrative structure for interactive storytelling
Strengthened motion‑design and pacing skills within Webflow
Refined understanding of visual hierarchy and contrast for cinematic impact
Improved accessibility awareness through colour and typography adjustments
Gained confidence in translating complex historical content into engaging digital experiences
Reflection
One Small Step was my first fully custom interactive website — a milestone in my design journey. It taught me how to balance storytelling, motion, and accessibility within technical constraints.
If revisiting the project today, I would:
Pursue my original, more ambitious concept now that my Webflow and interaction‑design skills have matured
Apply stronger UX structure and responsive logic for smoother device performance
Refine animation pacing and accessibility standards to ensure clarity for all users
This project marked an important stage in my development — pushing me creatively and technically, and laying the foundation for my later work in interactive narrative design. Revisiting it now highlights how far I’ve grown — and how much more confidently I can approach similar projects today.
More Projects
Web Design
One small step
A narrative web experience exploring the Space Race (1957–1969)
Year :
2022
Industry :
Web design
Client :
University project
Project Duration :
4 weeks
CONTEXT
One Small Step is a narrative single‑page website created for a university module, designed to tell the story of the Space Race (1957–1969) through a visually immersive, scroll‑driven experience. My goal was to create a site where each scroll revealed another milestone — using contrast, typography, movement, and imagery to guide the user through history in a way that felt cinematic and engaging.
The final site combines parallax fades, scroll‑triggered transitions, and high‑contrast storytelling to create a sense of momentum and discovery — much like the era it represents.
Skills: Visual Design, Interaction Design, Motion, Storytelling, Wireframing, Webflow
Tools: Webflow, Figma, Sketchbook, Photoshop
PROCESS
1. Early Research & Visual Exploration
I began with extensive mood‑boarding and collage work, gathering visual references from:
Historic NASA posters
Vintage magazine covers
Space photography
Mission patches and typography
This stage defined the retro‑futuristic aesthetic — mixing analogue textures with bold, modern type.
2. Story Structure
I mapped out the narrative using a simple user flow:
Intro sequence
Key missions (US and Soviet)
“Did You Know?” fact blocks
Final Apollo 11 moment
Reflection footer
This ensured the user’s journey was linear, cohesive, and paced like a documentary.
3. Sketching & Wireframing
Explored:
Page compositions and story beats
Scroll‑trigger wireframe sequences
Layout experiments and visual rhythm
4. Visual Design & Production
I translated sketches into a final Webflow build, focusing on:
High‑contrast typography (white/black alternation)
Smooth fade transitions
Fixed‑position headline sections
Image cards revealing per milestone
Subtle animation timing to enhance drama
The result is a clean, atmospheric long-scroll website with immersive pacing.
⭐ CREATIVE OUTCOMES
Rather than quantitative metrics, this project’s success lies in its creative and technical growth.
Key outcomes include:
Developed a cohesive narrative structure for interactive storytelling
Strengthened motion‑design and pacing skills within Webflow
Refined understanding of visual hierarchy and contrast for cinematic impact
Improved accessibility awareness through colour and typography adjustments
Gained confidence in translating complex historical content into engaging digital experiences
Reflection
One Small Step was my first fully custom interactive website — a milestone in my design journey. It taught me how to balance storytelling, motion, and accessibility within technical constraints.
If revisiting the project today, I would:
Pursue my original, more ambitious concept now that my Webflow and interaction‑design skills have matured
Apply stronger UX structure and responsive logic for smoother device performance
Refine animation pacing and accessibility standards to ensure clarity for all users
This project marked an important stage in my development — pushing me creatively and technically, and laying the foundation for my later work in interactive narrative design. Revisiting it now highlights how far I’ve grown — and how much more confidently I can approach similar projects today.
More Projects
Web Design
One small step
A narrative web experience exploring the Space Race (1957–1969)
Year :
2022
Industry :
Web design
Client :
University project
Project Duration :
4 weeks
CONTEXT
One Small Step is a narrative single‑page website created for a university module, designed to tell the story of the Space Race (1957–1969) through a visually immersive, scroll‑driven experience. My goal was to create a site where each scroll revealed another milestone — using contrast, typography, movement, and imagery to guide the user through history in a way that felt cinematic and engaging.
The final site combines parallax fades, scroll‑triggered transitions, and high‑contrast storytelling to create a sense of momentum and discovery — much like the era it represents.
Skills: Visual Design, Interaction Design, Motion, Storytelling, Wireframing, Webflow
Tools: Webflow, Figma, Sketchbook, Photoshop
PROCESS
1. Early Research & Visual Exploration
I began with extensive mood‑boarding and collage work, gathering visual references from:
Historic NASA posters
Vintage magazine covers
Space photography
Mission patches and typography
This stage defined the retro‑futuristic aesthetic — mixing analogue textures with bold, modern type.
2. Story Structure
I mapped out the narrative using a simple user flow:
Intro sequence
Key missions (US and Soviet)
“Did You Know?” fact blocks
Final Apollo 11 moment
Reflection footer
This ensured the user’s journey was linear, cohesive, and paced like a documentary.
3. Sketching & Wireframing
Explored:
Page compositions and story beats
Scroll‑trigger wireframe sequences
Layout experiments and visual rhythm
4. Visual Design & Production
I translated sketches into a final Webflow build, focusing on:
High‑contrast typography (white/black alternation)
Smooth fade transitions
Fixed‑position headline sections
Image cards revealing per milestone
Subtle animation timing to enhance drama
The result is a clean, atmospheric long-scroll website with immersive pacing.
⭐ CREATIVE OUTCOMES
Rather than quantitative metrics, this project’s success lies in its creative and technical growth.
Key outcomes include:
Developed a cohesive narrative structure for interactive storytelling
Strengthened motion‑design and pacing skills within Webflow
Refined understanding of visual hierarchy and contrast for cinematic impact
Improved accessibility awareness through colour and typography adjustments
Gained confidence in translating complex historical content into engaging digital experiences
Reflection
One Small Step was my first fully custom interactive website — a milestone in my design journey. It taught me how to balance storytelling, motion, and accessibility within technical constraints.
If revisiting the project today, I would:
Pursue my original, more ambitious concept now that my Webflow and interaction‑design skills have matured
Apply stronger UX structure and responsive logic for smoother device performance
Refine animation pacing and accessibility standards to ensure clarity for all users
This project marked an important stage in my development — pushing me creatively and technically, and laying the foundation for my later work in interactive narrative design. Revisiting it now highlights how far I’ve grown — and how much more confidently I can approach similar projects today.