Audience: General audience, nature lovers
Sass, Waypoints.js plugin, Codepen.io, Evernote, Adobe Color
Understand & Explore
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.
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.
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.
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.