18/5/2024 - 8/6/2025 (Week 4 - Week 7)
Shawn Wong Kai Hen / 0375372
Application Design 2 / Bachelor of Design (Hons) in
Creative Media
Application Design 2 - Task 2
INTRUCTIONS
Task 2: App Animations Prototype
- Create micro-interactions and animated micro-interactions for our app.
Progression
I started by structuring out the app flow start from
the starting page and all the way to the features of the
"Dadi Cinema" app. I created a Figjam workfile and
started to do my app flow for my app, this section
mostly focused on the marco animation of each page and
large movements across the screen.
After that, i copy and paste all the flow pages that will be
shown for the animation to the Figjam and start to connect
page to page following the flow with an arrow line. Then i
added each line with what animation that i will apply from
this page to the next page, and i also added an explanation
about what will be animated on that.
Fig 1.1 Overview of App "Dadi Cinema" Flow Mapping
App flow Figjam Workfile
Master Planning
After completing the app flow mapping, i started
to proceeded with the master plan, which delved
into the detailed micro animations and
interactions for each page. This comprehensive
plan provided a detailed overview of three
distinct stages for every page which is Onload, In
App and Offload.
Within the "Onload" stage, i Focused on the animations and
transitions that when a pages is initially loaded or entered.
This stage is aim to create a simple movement across the screen
by animating elements to either slide form up, down, left and
right bt using ease-in or ease out style.
For "In App" stage of the masterplan delved into the
animations and interactions that take place while users are
actively engaged with the app's features and functionalities.
This included elements like scrolling, tapping buttons,
sliding sections, or triggering the modal dialogues. Each
interaction was designed to be intuitive, responsive, and
visually coherent, enhancing the overall usability and
enjoyment of the app.
Lastly, the "Offload" stage accounted for the animations and
transitions when users navigate away from a page or complete a
specific action. Whether it was returning to the home page,
dismissing a dialogue, or transitioning to a new section,
these animations were crafted to provide a smooth and seamless
departure, ensuring a cohesive and fluid user
experience.
Summary of Critical Points:
- Masterplan for micro animations
- Onload Stage
- In App Stage
- Offload Stage
Fig 1.2 Overview of App "Dadi Cinema" Master Planning
Fig 1.3 Description Onload of Starting Screen
Fig 1.4 Description In App of Register Screen
Fig 1.5 Description Offload of Movie Details Screen
MasterPlan
Workfile
Conclusion, the micro interactions incorporated into all
pages encompass loading indicators, scrolling animations
(horizontal and vertical), and various other dynamic
elements. These interactions not only introduce movement and
unique characteristics to the app but also contribute to
shaping its overall identity.
By meticulously planning and executing the micro animations
and interactions across these three stages to add visual
interest and responsiveness to the UI, I aimed to create an
app that not only functioned flawlessly but also delivered a
visually compelling and engaging user experience.
Animation Create
Progression
For the animation part i decided to do in
figma, but i not trying to apply to much
animation because is a cinema app, so keep
it some simple animation can make it
smoother and clean. First animation i
started to create is for the starting page
logo, the animation logo i created using
Adobe After Effect and i exported in GIF
File and import into figma and apply at
the starting page.
Fig 1.6 Dadi Cinema logo animation for starting
screen
I try to make it fade out at the middle by adjusted the
opacity and using position to let the text and logo slide to
up and bottom to the position i want. While the logo moving,
i decided to adding some rotation to the logo and make it
while spinning when the logo is moving. After done, i
thinking maybe still can adding some effect for the logo, so
i trying to add some light sweep effect on the logo like a
light sweep across the logo. Lets view the outcome at below:
Logo GIF
Animation
Fig 1.7
Dadi
Cinema
logo
animation
- GIF
There having some issue
for the logo GIF, that
have a little blurry.
But at least we can saw
the animation. Is just a
simple app starting
animation. 👀
Then after that, i
startedto designed the
transition animation for
each page to page, i
decided just animate
everything using figma.
I start playing around
with the slide in/out or
fade in/out animation
that suitable for each
page to page animation.
I also adjust the ease
in/out value make the
animation went need to
going fast or slow to
look clean and simple
for user.
I also playing some
different animation like
dissolve and after delay
by setting the time
frame example auto
transition current page
to the next page.
Fig
1.8
Animation
Progress
Pages
Fig
1.9
Overall
Animation
View
Pages
Animation Workfile
Animation
Prototype
Access Figma For
Better View
👉👉👉 Dadi Cinema
Presentation
Video
REFLECTION
Comments