The UI design production was created by mennmi, and this time we will write an article about UI animation.
We briefly introduce the considerations and methods used when creating UI animations.
First, create a concept of movement, then proceed with part division.
This time, after creating 2D movements first, we will add 3D animation to them.
PSD Data Organization
First, arrange it in After Effects and organize the PSD so that layers are easy to manipulate.
We will create a PSD as data for editing in AE without using folders, just with layers.
At this time, it is good practice to change names to make them easier to understand.
After Effects Data Organization
Import the PSD into AE and use Grupico to group elements for easier editing.
The grouping method involves dividing them by major components such as Header, Footer, Main Button, BG, etc.
Adding 2D Movement
The movement concept is an animation where the list enters from right to left.
We will first apply a simple version of this, and then build up the animation from there.
Converting to 3D
To create a sense of depth when converting to 3D, first enter from an angle and adjust the perspective so it becomes like a 2D illustration.
Display desired content in front rather than just the Header and Footer, emphasizing the content while strengthening the sense of depth.
Entering from an angle and slightly tilting the X-axis up and down strengthens depth while adding a CLAIM mark to emphasize receiving login bonuses.
Furthermore, by rotating the initial card group along the Y-axis so they move while spinning, we eliminate flatness during movement.
Here, since the ticket was dark after acquisition, we make it look like a monitor to emphasize an SF-like feel.
To further strengthen the impression of acquisition, we position everything slightly in the background and then expand them forward simultaneously with acquisition for impact.
This might be a small detail, but when adding animations, it is common to consider motifs like this one or elements desired during movement and make slight design adjustments.
In this case, since we wanted the ticket for today’s login bonus to stand out more than other cards, we slightly lowered their brightness, added flooring, introduced depth of field, and made further adjustments to create a sense of depth.
We are creating in After Effects as a V-concept (visual concept), so it will be developed based on proposals and refined again during Unity production.
Bonus
Moving the camera around after arranging things in 3D is fun, isn’t it?
Thank you for reading until here.