Overview
I came up with this idea when I was thinking about how to convey information to people through interactive infographics, using my technical writing background to create step-by-step documentation. It was also a chance for me to practice drawing graphics using 100% pure HTML/CSS/Javascript.
Audience: General audience, nature lovers
Result
Internet research was pretty simple for this project, since most how-to articles outlined similar steps. Of course, in true paper-writing fashion, I collected the links to compile into a bibliography. Citing sources is important!
Define & Ideate
Once I broke down the steps, I sketched a scene for each one, keeping them similar to create visual continuity throughout the tree-planting process. I explained them to people I knew, to make sure the steps made sense.
Implement
Coding time! I realized I could create drafts of each graphic using Codepen.io so I could focus on each one before integrating them into the site.
It was tricky to find a way to activate animations when users scroll to a certain "trigger points" on the screen, so I searched for a plugin and eventually found Waypoints.js.
Test
I had to make sure the site worked on mobile, that colors were compatible, and that the site was browser compatible. Not perfect, but I had a working site.
Conclusion
In the research phase, I wish I had time to drive to Osh Kosh and interview someone or watch someone actually plant a tree.
I discovered how useful Codepen.io was as a learning tool and enjoyed using Sass for the first time. Variables and mixins save so much time and headache. Unfortunately, CSS was still quite a headache, so I wish I could have used a framework to make my life easier. With more time, I also could have found a technical solution to incorporate my original animation design.