Canada Day eCard
Interactive Educational Greeting Card
The assignment was to create an interactive eCard on the holiday of our choice. The final product was to include a web application that celebrates the holiday, with a minimum of 10 interactive elements, as well as a fact about the holiday that is revealed upon each interaction.
Creating Vector Assets
Before coding, I first created each page using Illustrator. Each character and object is a scalable vector graphic that was drawn free-hand using Illustrator tools such as the pen tool and pathfinder tools. Each element was then translated into interactive code.
HTML and CSS Development
The first step in development was to put everything in place using HTML and CSS. This provided a basic structure to the page and made sure everything was scalable and in the right place to begin animating.
Many elements animate upon clicking on them. This required inputting precise coordinates to translate or rotate to. 10 key elements throughout the application unlock a fact box along the left side of the screen which activates a unique fact.
After coding a large portion of the application, I asked my peers to test and review the eCard. This step helped in any potential UI errors and crucial feedback in finalizing the application. Through this, I discovered issues with the animations on different browsers and platforms.