April Fools E-Card

For my Dynamic Content Design course, I was tasked to create a Holiday E-Card that implemented our use of SVGs in Adobe Illustrator and coding them dynamically using JavaScript. The objective of my E-Card is to find 10 objects, which unlocks an April Fool’s fact. After finding all 10 objects, a secret prize is revealed.

ClientBCIT Term 2Year2017Tools UsedAdobe Illustrator, HTML, CSS, JavaScriptLinkcard.alynnaalcira.ca

My Role

  • Designed assets using Adobe Illustrator and SVGs
  • Developed animations and interactions using HTML, CSS, and JavaScript


Game Design

Design-wise, I wanted to make the most of using the Pathfinder tools from combining basic shapes. Minimizing the use of the pen tool also ultimately resulted in having a less complex SVG code to work with later on. With this in mind, I thought that having a flat design will be the easiest to accomplish.

Game Development

When it came to developing the e-card, I used several conditional statements, variables, and functions. The development itself was truly a trial and error process. It was my first time developing a project using JavaScript, so it definitely tested my patience when the code would break then figuring out how to fix it. However, solving such challenges are a blessing in disguise because now I have improved in de-bugging JavaScript code. 

Final Thoughts

This was a challenging project because of the many bugs and errors I encountered along the way. However, accomplishing my final goal in the end was very satisfying!