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
INTRODUCTION
One Small Step is a narrative single-page website created for a university module, designed to tell the story of the Space Race 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 uses a combination of 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 moodboarding and collage work, gathering visual references from:
historic NASA posters
vintage magazine covers
space photography
mission patches and typography
This early stage helped define 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
Here I explored the following:
page compositions
story beats
scroll-trigger wireframe sequences
layout experiments
visual rhythm and spacing
4. Visual Design & Production
I translated the 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.
Outcome
The final website presents:
a clear narrative timeline
strong visual hierarchy
effective scroll-triggered interactions
smooth contrast-driven transitions
cohesive themes and storytelling
This project strengthened my confidence in designing for motion, pacing and visual drama — all within the limitations of Webflow (2022).
Reflection
Looking back, One Small Step was an important early project for me. It was my first time building a fully custom interactive website, and I’m proud of how much I achieved — especially the pacing, transitions and visual identity.
However, with the experience I have now, there are several things I would approach differently:
1. I would pursue my original, more ambitious concept
My initial ideas were more dynamic, immersive and design-driven, but at the time my technical skills in Webflow and web design were still developing. With the knowledge I’ve gained since — especially around interaction design, layout responsiveness and component structure — I now have the ability to bring those earlier ideas to life much more effectively.
2. I would apply stronger UX structure
Since 2022, I’ve developed:
a clearer approach to user flows
stronger content hierarchy skills
better responsive design understanding
a more robust design-systems mindset
This would allow me to structure the storytelling more intentionally and make the experience more accessible.
3. My interaction design skills have evolved
I now understand:
scroll-based animation pacing
performance considerations
motion for meaning, not decoration
balancing visual drama with clarity
This means I could build a smoother, more polished, more modern interactive experience today.
4. I have a stronger grasp of accessibility
If I revisited this project, I would:
improve colour contrast consistency
ensure typography scales correctly
apply semantic structure
reduce motion overload for sensitive users
5. I understand web standards and responsive design much better
I can now structure websites with:
responsive CSS logic
grid and flex systems
component reuse
more refined breakpoints
mobile-first planning
This would dramatically improve how the site behaves across devices.
Overall, this project marks an important stage in my design development. It pushed me creatively, taught me the fundamentals of interactive narrative design, and highlighted skills I’ve since strengthened — from UX structure to motion design and accessibility.
Revisiting it now, I can clearly see the progress I’ve made as a designer — and how much more ambitious I can be with 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
INTRODUCTION
One Small Step is a narrative single-page website created for a university module, designed to tell the story of the Space Race 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 uses a combination of 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 moodboarding and collage work, gathering visual references from:
historic NASA posters
vintage magazine covers
space photography
mission patches and typography
This early stage helped define 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
Here I explored the following:
page compositions
story beats
scroll-trigger wireframe sequences
layout experiments
visual rhythm and spacing
4. Visual Design & Production
I translated the 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.
Outcome
The final website presents:
a clear narrative timeline
strong visual hierarchy
effective scroll-triggered interactions
smooth contrast-driven transitions
cohesive themes and storytelling
This project strengthened my confidence in designing for motion, pacing and visual drama — all within the limitations of Webflow (2022).
Reflection
Looking back, One Small Step was an important early project for me. It was my first time building a fully custom interactive website, and I’m proud of how much I achieved — especially the pacing, transitions and visual identity.
However, with the experience I have now, there are several things I would approach differently:
1. I would pursue my original, more ambitious concept
My initial ideas were more dynamic, immersive and design-driven, but at the time my technical skills in Webflow and web design were still developing. With the knowledge I’ve gained since — especially around interaction design, layout responsiveness and component structure — I now have the ability to bring those earlier ideas to life much more effectively.
2. I would apply stronger UX structure
Since 2022, I’ve developed:
a clearer approach to user flows
stronger content hierarchy skills
better responsive design understanding
a more robust design-systems mindset
This would allow me to structure the storytelling more intentionally and make the experience more accessible.
3. My interaction design skills have evolved
I now understand:
scroll-based animation pacing
performance considerations
motion for meaning, not decoration
balancing visual drama with clarity
This means I could build a smoother, more polished, more modern interactive experience today.
4. I have a stronger grasp of accessibility
If I revisited this project, I would:
improve colour contrast consistency
ensure typography scales correctly
apply semantic structure
reduce motion overload for sensitive users
5. I understand web standards and responsive design much better
I can now structure websites with:
responsive CSS logic
grid and flex systems
component reuse
more refined breakpoints
mobile-first planning
This would dramatically improve how the site behaves across devices.
Overall, this project marks an important stage in my design development. It pushed me creatively, taught me the fundamentals of interactive narrative design, and highlighted skills I’ve since strengthened — from UX structure to motion design and accessibility.
Revisiting it now, I can clearly see the progress I’ve made as a designer — and how much more ambitious I can be with 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
INTRODUCTION
One Small Step is a narrative single-page website created for a university module, designed to tell the story of the Space Race 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 uses a combination of 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 moodboarding and collage work, gathering visual references from:
historic NASA posters
vintage magazine covers
space photography
mission patches and typography
This early stage helped define 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
Here I explored the following:
page compositions
story beats
scroll-trigger wireframe sequences
layout experiments
visual rhythm and spacing
4. Visual Design & Production
I translated the 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.
Outcome
The final website presents:
a clear narrative timeline
strong visual hierarchy
effective scroll-triggered interactions
smooth contrast-driven transitions
cohesive themes and storytelling
This project strengthened my confidence in designing for motion, pacing and visual drama — all within the limitations of Webflow (2022).
Reflection
Looking back, One Small Step was an important early project for me. It was my first time building a fully custom interactive website, and I’m proud of how much I achieved — especially the pacing, transitions and visual identity.
However, with the experience I have now, there are several things I would approach differently:
1. I would pursue my original, more ambitious concept
My initial ideas were more dynamic, immersive and design-driven, but at the time my technical skills in Webflow and web design were still developing. With the knowledge I’ve gained since — especially around interaction design, layout responsiveness and component structure — I now have the ability to bring those earlier ideas to life much more effectively.
2. I would apply stronger UX structure
Since 2022, I’ve developed:
a clearer approach to user flows
stronger content hierarchy skills
better responsive design understanding
a more robust design-systems mindset
This would allow me to structure the storytelling more intentionally and make the experience more accessible.
3. My interaction design skills have evolved
I now understand:
scroll-based animation pacing
performance considerations
motion for meaning, not decoration
balancing visual drama with clarity
This means I could build a smoother, more polished, more modern interactive experience today.
4. I have a stronger grasp of accessibility
If I revisited this project, I would:
improve colour contrast consistency
ensure typography scales correctly
apply semantic structure
reduce motion overload for sensitive users
5. I understand web standards and responsive design much better
I can now structure websites with:
responsive CSS logic
grid and flex systems
component reuse
more refined breakpoints
mobile-first planning
This would dramatically improve how the site behaves across devices.
Overall, this project marks an important stage in my design development. It pushed me creatively, taught me the fundamentals of interactive narrative design, and highlighted skills I’ve since strengthened — from UX structure to motion design and accessibility.
Revisiting it now, I can clearly see the progress I’ve made as a designer — and how much more ambitious I can be with similar projects today.