OUGD504 - Studio Brief 02 - Animation

To present the application, a series of animations were produced to demonstrate how the application functioned. The software that was used to design the application, Adobe XD, is still in its Beta stage and is very limited in terms of what can be achieved. To give the application more life and make it more professional, certain pages had to be animated.

The first to be animated was the home screen. Often when applications open they display a short animation when it is loading. To keep with this trend and make the application more engaging, The login page was animated in Adobe After Effects. To begin with, the buttons and login bars along with the text were edited in Illustrator to create layers. The file was then imported into After Effects to be edited. The ticket logo was incorporated by creating the effect of tickets being printed off, before one is ripped off and formed into the Stub logo. To ensure that this animation was kept within the phone image, a track matte was used which creates a similar effect as a clipping mask. To do this the animation had to be pre-composed into a separate composition.

Applications often incorporate small animation throughout the application to make the experience more captivating than if the pages just navigated with fades. When creating the navigation video that demonstrates the application being used, a combination of an Adobe XD animation and editing ensured that certain aspects, such as the navigation bar to stay static at the top when scrolling and when the search button is pressed, the search bar bursts out to the user, could be achieved. This gives the application professional and keeps up with application trends.

Adobe XD includes a feature to record the application being used which is incredibly useful. Once a video was made from XD, it was then imported into After Effects and imposed over a royalty free mock up image of a phone. To create a static navigation bar when scrolling, the page was exported before being edited down in Photoshop. It was then simply laid over the top of the video to create the effect. This was done in every example of scrolling pages and would be continued throughout the application where scrolling takes place with navigation bars on both the top and bottom of the screen. To animate the search bar, the page was recreated in Illustrator before being saved as layers to be imported into After Effects. The type, shapes and keyboard are animated to snap out and appear. These little features make the app professional and fitting to application trends. The loading screen when a ticket purchase has been made also is animated to make the loading process more engaging for the user. To create the red highlight when a user presses a button was simply created by placing a red shape over the top of the image and making it appear when the cursor clicks on the image.

These techniques of creating a more immersive experience for the user are successful by making the experience inviting. Small features such as these that continue throughout the application both form the branding and subtly enhance the experience for the user making it more exciting.