Date: February 2017 - March 2017
Category: Web Development, Asset Creation
Technology: HTML, CSS, JS, Photoshop, Illustrator
Duty: Ideation, Lead Developer
Process / Skills Learned
When starting this project, I initially chose a holiday to base the e-card on. The holiday I chose was St. Patrick's Day. I proceeded to research facts to determine which specific parts I would be able to animate and make interactive. The first major step I took was creating an initial sketch as seen below. Click to view the enlarged image.
At the same time I was drafting the sketches, I noted possible animations and interactions on the sketches themselves. I decided which parts should be clickable, movable, or animated. After the sketches were made, I began carefully creating the visual assets through Adobe Illustrator. I had to make sure each layer was named properly for use when transferring it to code. I exported these assets into a single SVG chunk of code.
Lastly, I learned to implement a wide range of simple CSS animations such as rotations, transitions, and transparency.