When companies are considering app development, they create mock apps using animation to give an idea of what the user interface would look like.
This week, I decided I wanted to create a mock app for Space Cadets. I have been using linktr.ee to connect all my social media platforms and side ventures, but it is limited to the bio on each social media app. This app would serve as a one-stop shop for consumers to find everything. I would also have more control over how I can share information without being limited to an existing app’s rules.
Chapter Ten: Animate! Big-picture thinking, frame by frame
I took to Liz Blazer’s, Animated Storytelling, for tips regarding how to manage my animation project and what pitfalls to avoid. Her first words of advice was to create a production calendar for my animation project. I was not surprised by this as Blazer has emphasized the importance of organization and structure during the animation process throughout her entire book.
Creating a production calendar was a familiar process as I use Asana to digitally plan out my social media projects. Blazer advised that we fill out our calendars working backwards from the due date which is something I’ve observed that animators also work backwards when creating animations. My mind however does not take to working backwards kindly, it takes a little more effort to keep track of myself moving backwards than forward. So for my calendar I set the due date on the top and then filled out my tasks moving forward to the due date. I knew that my starting point would be to read and research. My end point would be to review on the day before everything was due. Knowing the beginning and end of my project helped me fill in the middle of my calendar.
The differences I noticed after completing my written production schedule:
>I felt more at ease with what needed to be done; the mystery of what would be animated dissipated a bit.
> I held a deeper connection to my project due to handwriting out my calendar and physically checking off tasks as I went along. It gave me a sense of ownership to my project that digitally, though Asana has animations when a task is completed, they do not give the same payoff.
Planning & Organization Tips
These tips pertain to how we should approach pre-production of animations:
Save our work: To save ourselves from the mental break downs that occur from losing all of our work because we failed to save, just save everytime progress has been made. I in fact learned this hard lesson back when I was animating my personal intro. I lost a quarter of my work because Adobe After Effects crashed (I kept clicking buttons at a rapid pace). Now I save after every completed animation task has been completed so if I mess up or don’t like something, I have a checkpoint to return to.
Start with easy tasks: Self-management ensures the success of our projects. It is best not to start a project with the tasks that hold the highest demands. Completing the easiest sequences first means that we won’t be burnt out by the time we arrive at the harder sequences.
Allocate the hard tasks: Just because we leave the harder sequences for last does not mean we dive into them head first. Breaking up the harder tasks helps us pace ourselves in order to avoid fizzling out during animating tough sequences.
Don’t be afraid to let go: In life we learn that the quicker we let go, the better things will go for us. Letting go creates space for the things that need to be present to flourish. Holding on to everything creates clutter and confusion. Well animation is no different, being reluctant to edit out a sequence because it’s our favorite will be what holds our animations back.
This also applies to sound, just because you planned out a certain soundtrack doesn’t mean that you shouldn’t revise it during the production stage if it’s warranted.
Edit storyboards: Do not be afraid to cross out anything on your storyboard. They are meant to be an elaborate display of what your animation will hold. Do not limit it because something was already drawn.
Plan out poses: Sketching out the basic choreography of your character’s positions and movements will help bring your animation together. This is another part of taking out the guesswork of your animations. By being reflective up front and answering as many possible questions, when it is time to animate there will be a strong sense of understanding.
Anticipate and Follow Through: Realistic animations respect these two rules of motion. You can think of anticipate as the motion before an object or character goes into the main motion. Blazer gave the example that when a woman is ruinning for a bus, she does just start pumping her arms and legs. You will see her body lean back to gather the momentum for the run, this is anticipation. Follow through is the motion after the main motion is completed. Going back to our woman running for the bus, when she stops, her hair and dress will swing forward as a result of the gathered force of her running.
Planning out poses will help being able to add the appropriate anticipate and follow through to our animations. Another great tool is researching the motion in works created whether through animation or acting.
Thoughtful composition of directional movement: We can either create peace or chaos through our choices of how objects move in our sequences. Movement that is directionally consistent will feel calmer vs. movement that contrasts the predominant directions feel chaotic. Knowing our animations through storyboarding and reflections help us make the decision on how to compose the direction of our objects.
Production Tips
It’s best to keep these tips in mind during the production process:
Get out of center: We’ve learned to not have our characters or objects dead center as it takes away viewer interest. It is important to take the time to check that there aren’t too many things that are center-focused, shot after shot.
Mix up the shot length: Mixing up the scale of the subjects inside the frame and the amount of information included in the frame enhances the viewer’s experience. Viewer’s like to see a diversity of sizing in shots which will hold their attention.
Mix up the shot timing: It is important to be intentional about how long a shot is held and use a mix of timings for the best effect. Just as viewers like diversity of sizing, they like to experience diversity of timing.
Play with the visuals: Because we are animating in software, natural consequences of movement must be added in to exist. Exposure can be used to add realistic depth whether adding blur, grain, grunge or vignette. Super clean shots are not realistic, viewers want to see contrast in their visuals as well.
Mute your sound: Letting our animation play without sound shows us whether our animation is strong enough to convey what we want without using audio as a crutch. Utilizing this trick can show what more is needed for our animation and can show us what sounds need to be removed.
Research
Since the beginning of the internet we have had load progress bars. Amazon made theirs slimmer and connected to the search box so that users can see the app is working on finding their search results.
This fun animation whenever a customer adds an item to their cart mimics how our carts fill up when we physically go to the store. The falling item brings the user to their cart with a progress bar to show how much more is needed for free delivery gives users important information without overwhelming them.
The beginning of this video(0-38secs) shows how sounds can be incorporated to bring animations to life for viewers. Apple added in sound effects for their mouse clicks and keyboard typing to create the illusion that the viewer is watching someone in real time.
Between seconds 45-49 we see the UI animations for Apple Pay, Face & Touch ID. The transitions are smooth and flow into one another.
Duolingo rewards users for completing their language lessons by including a short animation of their mascot Duo or other characters cheering users on. They also share lesson information such as experience points, accuracy and speed through short animations that are supported by cheerful sound effects.
While a user waits for their game to load up, Farmville took advantage of this wait time by adding in a load screen. They change it according to current seasons(spring,summer,fall,winter), current in-app events, app anniversaries etc.
This is a great way to continue to build user experiences outside of their game.
Space Cadets App
Overall, I had fun creating my mock app for Space Cadets.
Creating my production calendar was a great addition to my pre-production planning because it kept me on track with what visuals needed to be made. At first the thought of creating a mock up to showcase my UI designs had me at a loss, I could not begin to think of what that would consist of.
Once I completed my pre-production tasks the ideas for my animations fell into place. Having a search bar that would bring users to content pertaining to what they searched felt like a perfect way to help them navigate the app. Another navigation tool that I created were the light blue indicator dots to show users where they are currently located in the app. The search result progress bar felt like a great addition for users to know that the app is working to provide them with what they need.
It was interesting orchestrating the balance between animation and sound. For the finger swipe across I included a whoosh sound effect to compliment the transition into my tok. It felt like overkill putting in the sound effect for the upwards finger swipe. My animation seemed to benefit more from having consistent push sounds because the app would have those sounds, versus the scrolling sounds which we do not hear when using apps.