Scrollytelling Project About Teen Vaping
Course: Information Design Studio III: Designing Interactive Systems
​
We were tasked with creating a website where scrolling is used in multiple ways to effectively convey a message. Using Webflow and Adobe Illustrator, I built a website about the problematic rise of teen e-cigarette use. To convey this message in a compelling way, I implemented horizontal scrolling to mimic the look of vapor being blown, used the parallax scrolling effect for a smokey background, and had "smoke rings" with facts come across the screen while scrolling.
Check out my site here, or click play on the video below to see how the site works.
The Design Process
​
Initial Design Idea
​
I initially considered creating a site where you scroll up to see statistics on teen e-cigarette use.
Sketches of Design Variations
​
After receiving feedback from friends suggesting that the smoke rings should go sideways, I sketched variations of my initial design idea.
DESIGN
VARIATION
CHOSEN
Building the Website
​
Using Adobe Illustrator, I created smoke for the background and fact smoke rings. I then added all my images to Webflow, where I implemented the various scrolling effects.
​
​
Adobe Illustrator - Creating smoke for the background of my website.
Webflow - Since I'm using horizontal scrolling, all of my elements are shown stacked on top of each other in the Webflow editing window.
Feedback and Final Product
​
After presenting the website to my class, I got the following feedback:
-
Slow down the smoke rings when they get to the reading area
-
Make the background lighter
-
Rather than using words for the statistics, create visuals
​
I did not have enough time to implement the 3rd suggestion, but I did implement the first two.
Before adjusting the background and scroll behavior
After adjusting the background and scroll behavior
Click here to check out my live site,
or click play below to watch a video of the complete scrolling experience!
