ICM 504: Module 5 Project - Interface Motion

ICM 504: Module 6 Project - Interface Motion

The Project

After doing some reading and researching on the subjects of animated storytelling and the user interface animations, we were tasked with creating a user interface animation of our own:

  • Use After Effects to animate the elements.
  • Your animation should loop seamlessly (i.e. start and end with the same visuals so that there is no jump).
  • Depending on complexity, you might want to create a series of buttons or a sequence of actions.
  • OPTIONAL: Create a device mockup so that we see your animation play on a device or screen of some kind (for example, we see your animation play on an iPhone screen).
  • Render your animation out as a video file, then use Photoshop to create a looping GIF file.
  • OPTIONAL: You may also post the video to YouTube so that we can hear your audio.

The Interface

Character Information Mockups

I recently had to create two different versions of a website [landing page] for my ICM502: Information Design class, and those mockups can be found here. Given that I wanted the character information logs to actually load out and have a "live type" effect inspired by the "Decode Fade In" preset in After Effects, I naturally thought that bringing life to this mockup would be the best course of action and choice for this animation project.
Nonetheless, I have provided the mockup for quick reference below:

C0deysseus Logo - 2018

Character Information Mockup - Bio, Shikyo

The Interface Animation(s)

Shikyo - Bio

As previously mentioned, the idea behind this animation came from the character design mockups I had created for another QU graduate course (which were designed in Sketch). I then took the bio page for my character Shikyo, re-created it in Photoshop, then imported the .psd file into After Effects with editable layers (thank god for this feature or this project would've been a bust for sure). Since this is a web page, I wanted to animate the gallery and show that it is indeed interactive and contains more than one image, and any good web/UI/UX designer knows that proper links have hover states—which I made clear by the extended view of the hover states (dark gray arrows; hot, vaporwave red hamburger menu). I had to split up the text into three separate segments, each animated and hand-positioned individually, and I added a separate overlay layer at the top to give the same "there's more to read past here" notion as at the bottom. I plan on coding this site up at some point in the future, and I definitely want to produce more artwork for the character gallery, but here are the animations and videos for now. I've included a looping mockup GIF, a video with proper sounds of the interface by itself, and a video of the mockup(with the proper sound as well) below. (The animation itself is pretty long, so I sped the GIF up to give a general idea of what's going on.)
I used the same sound pack that I had previously purchased: the Lesser Vibes pack (which can be found/purchased at Sonniss.com).

Character Information User Interface Animation

Related Reading: