Produce a simulated mobile app motion graphic. Follow the in class workflow using original or existing UI mockups.
For this assignment, I was challenged to create a UX motion graphic GIF. I used Adobe After Effects 2020 for the motion and Adobe Illustrator 2020 for the UI mockup screens. The most challenging part of this project was to create a seamless animation from start to finish.
The solution was to create a music app that would simulate user interactions and show animations such as Face ID, scrolling, and touching. The final result was a GIF that starts with an animated splash screen, then interactions of the user signing in to their account. Later on, I designed the main page and animated the sideways scrolling. Lastly, the user taps on the gear symbol and signs out of the app, taking the user back to the splash screen. For this project, we were required to keep the whole animation under 15 seconds and to adhere to industry motion standards, by making use of tools to smooth the keyframes and make it look professionally made.
The ideation process for this assignment was interesting because we as students had the opportunity to create any type of app, as long as the final project would simulate a 10 to 15 second seamless UX animation. I decided to design on Adobe Illustrator 2020 a music app called 'Musiqal'. The app would target music lovers and offer a variety of functionalities, like profile customization and signing in options.
The colour palette is fun, bright, and uplifting, using shades of purple, lilac and blue. A total of 5 screens were mocked up for the final composition, and the final render was completed in 14 days. Upon feedback received from the professor, a couple animations such as the tap animation and scrolling animation were smoothed out by using Adobe tools 'easy ease' and 'motion blur'.