THE TASK
To transform a hypothetical text brief focused on a fictional "Golden Dome" missile defense system” into a compelling, interactive, and visually striking web experience.
MY ROLE
I was responsible for the full design and front-end development, from conceptualizing the narrative flow. I built a responsive and performant piece with custom animations and interactive elements. This project served as an exercise in demonstrating how a designer can use visual storytelling and technical skills to create an engaging digital narrative from a simple text brief.
TIMELINE: 5 days
SKILLS: HTML, CSS, JavaScript, GSAP Library, AI2HTML and Vibe Coding with Cline
LINK: GitHub Code
Discovery & Ideation
My process began with a deep dive into the subject matter and an analysis of how major news publications approach similar interactive data stories. I was given a story to create an immersive article experience with.
This research directly informed my initial sketches and storyboards, where I mapped out the narrative arc and planned how each piece of information would be revealed on scroll.
These early plans were crucial for visualizing the overall user experience and defining the key interactions.
I highlighted key words in the article relating to data and where I could visualise this to the audience.
I then compiled a moodboard of inspiring articles, focusing on effective use of data visualization, maps, and seamless user journeys.
Design & Asset Creation
With a clear plan in place, I moved into the design phase. I used Adobe Illustrator to create all the key visual assets, including the animated world maps that would serve as the backbone of the story's data visualization. The design aimed to be clean and minimal, allowing the interactive elements and data to take center stage.
To enrich the visual narrative, I sourced and integrated various multimedia components, including a Lottie animation for the missile launch sequence and striking, atmospheric AI-generated visuals created with Adobe Firefly which encouraged me to prompt with specific language. These diverse assets were all carefully curated to enhance the storytelling without overwhelming the reader.
Technical Implementation
Bringing the design to life required a robust front-end build. I wrote the code using HTML, CSS and JavaScript, ensuring the website was fully responsive and accessible on both desktop and mobile devices.
A key component of the build was the GSAP animation library, which I used to precisely control and trigger each animation, including the AI2HTML-exported artboards, as the user scrolled down the page.
This granular control over the scroll-based animations was essential for maintaining the narrative pacing. The project also showcased my ability to integrate different types of media, from static images to videos and vector animations, into a single, cohesive experience.
My full code for the project is available on my GitHub.
The Finished Article
DESKTOP VERSION
MOBILE VERSION
Limitations
Creating a responsive design using AI-generated "vibe coding" presented a unique set of limitations. While the tools excel at quickly generating a basic structure, I found that they lacked the control needed to create a polished, pixel-perfect design for both desktop and mobile.
The AI-generated media queries were often inconsistent, requiring me to manually refactor the CSS to ensure a clean and maintainable responsive system. I also faced challenges with multi-component layouts, as the AI's code for different elements would often clash or break on smaller screens. Debugging the AI's code was difficult due to its "black box" nature, making it hard to identify the root cause of responsive issues.
Ultimately, while vibe coding was a great tool for a rapid start, it was no substitute for my core development skills, which were essential for achieving a professional, production-ready result.
The Outcome
I'm incredibly proud of the final piece and what I learned while creating it. It was a fantastic opportunity to tackle a complex challenge and push my skills as a designer and developer.
Trust the process
My initial sketches and storyboards were key to the project's success. Sticking to the plan and focusing on a clear narrative made the development process much smoother.
Embrace new tools
Learning and integrating new tools like GSAP and AI2HTML was a challenge, but they were essential for achieving the high standard of animation and design I was aiming for.
Prioritise a strong user experience
The most important takeaway was the need to balance creative freedom with user-centric design. Every interactive element had to serve the story and enhance the reader's understanding.
The power of storytelling
This project reinforced my belief that powerful, engaging journalism can be delivered through innovative digital formats.
For more work inquiries, or if you want to chat,
email me at jasmindelac@gmail.com ☕️✨
Thank you for reading!
MORE PROJECTS
