I created the illustration and imported it into Principle or After Effects. Keeping the design file well-organized can significantly speed up the importation.

Step 3: Create illustration (40 mins)

During the first two weeks, I illustrated in Sketch and then imported it into Principle for animation. <ul><li>Sketch : A lightweight vector editing tool that is intuitive and affordable. I find it a handy tool to create simple illustrations. </li><li>A lightweight Prototyping tool that generates interactive animation. It works with sketch Seamlessly.</li></ul>

Sketch + Principle

After the first two weeks, I switched to Illustrator and After Effects for more advanced control. <ul><li>Illustrator : The most powerful vector editing tool. The illustration created in Illustrator can be imported into After Effects seamlessly. </li><li>After effects: the most powerful animation tool.</li></ul>

Illustrator + After Effects

Creating animation is time-consuming. I broke the creative process down into four steps and aimed to complete them in two days.

Creative Process

I collect motion design inspiration from Dribbble, Behance, and Instagram on a daily basis. My <a href="https://www.pinterest.com/tiantianxu/ui-motion/">growing Pinterest board </a>has been my go-to place for inspiration.

Step 1: Look for inspiration (15 mins)

I animated the illustration and exported the final animation as a short video. I posted the video to Instagram with the hashtag #100daysofmotionbytx

Step 4: Create animation (60 mins)

I created my first animation by watching <a href="https://youtu.be/qYCPoqwmQK4">Principle—Simple Character Animation (Jumping Donut </a>).

Day 1–14: Start with the basics

I watched the video tutorial in 1.5x speed and tried to create the animation from memory.

Method 1: Watch tutorial and create from memory

I studied other people’s work on Dribbble frame by frame and then came up with my own idea.&nbsp;I rebounded <a href="https://dribbble.com/shots/2542570-Bouncy-Fruits" target="_self">Bouncy Fruits</a> by Deekay. I deconstructed his work to study the “Squash and Stretch” animation principle.

Method 2: Rebound other people’s work

Repetition is the key to reinforce a newly learned skill. I intentionally re-applied the skills I learned to create new animation.

Method 3: Re-apply learned skills intentionally

Halfway through the 100-day-project, I took a day to read &lt;Adobe After Effects CC Classroom in a Book&gt;. I was able to connect the dots by revisiting the learned skills in a more systematic way. I also discovered new techniques that I wanted to try.

Method 4: Read book to connect the dots

Some of my work was inspired by my favorite games and movies. Some of my work was inspired by other people’s illustrations. I created artwork to promote type Thursday Seattle — a monthly design Meetup that discusses Work-In-Progress projects.

Day 71–100: Create from the heart

The Idea-Driven approach has kept me motivated and pushed me to discover new techniques. To make my idea of flipping book come true, I found a Tutorial on Openyourbook. To make a cup of Pumpkin spice Latte, I found a Tutorial on flat 2d smoke clouds.

1. Driven by ideas

The Dunning-Kruger effect describes the cognitive bias in which people of Low-Ability have illusory superiority. The more I became aware of my own incompetence, the humbler I became.

2. Stay humble

In Internet culture, there is a “1% rule” that describes the participation rate of an internet community: only 1% of the participants of a community actively create new content, 9% of the participants edit content, and 90% of the participants only view content.

3. Be the 1%

It was a summer night in Seattle. I ate some ice-cream, watched a Youtube tutorial, and downloaded a free trial of Principle. Several months later, I completed my 5th 100-day-project — 100 Days of…

Step 4: Create animation (60 mins)

Similar ideas to Step 4: Create animation (60 mins)

Motion Usability is not UI Animation

A form of manipulation

5. Retelling stories through a new format