26.04.2023 - 14.06.2023 (Week 4 - Week 7)
Audrey Gracia Djohari / 0348120
Application Design II
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Project II: Hybrid Lo-Fidelity Mobile App Development
We were tasked to animate an app in Figma/Adobe Xd. We also had to use FigJam to describe the animation plan and details.
Chosen App: ColorPay E-Wallet (an imaginary & original app design
of mine)
I animated all of the pages, mostly using Smart Animate which I just
realized is indeed very 'smart'. I just had to determine the
placements of the elements's starting point and ending point, and the
Smart Animate knows exactly how to do the animation. I also had to
determine the animation time. Below is the setting I mostly used for
the animation.
Final Outcome
Application Design II
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Project II: Hybrid Lo-Fidelity Mobile App Development
PROJECT 2: HYBRID LO-FIDELITY MOBILE APP DEVELOPMENT
Instruction
We were tasked to animate an app in Figma/Adobe Xd. We also had to use FigJam to describe the animation plan and details.
Process
Created in Figma & FigJam
Sir granted us permission to utilize our previous design from the App
Design I module. However, I'm interested in exploring animation using
a different interface to apply more creative animations. I have a lot
of ideas in my head on how to animate an app, and I'm excited to bring
them to reality.
I decided to create my own imaginary e-wallet app called ColorPay and
use colors similar to Google color palette. I find their vibrant
colors adorable, and their simplicity combined with vibrant
colors effortlessly captivates the attention of anyone who lays eyes
upon it.
Fig 1.0-1.1: App Flow Prototype & Design in Figma
Fig 1.2-1.4: UI Design
Animating
Fig 2.0: Animation Settings
These are the pages that forms the animation. It's like designing a
frame-to-frame animation and an AI helps you to make the elements
smoother, we don't even need keyframes.
Fig 2.1: Splash Screen Animation
Fig 2.2: Home Animation
Fig 2.3: Wallet Selection Animation
Fig 2.4: Transfer Page Animation
FigJam
Fig 3.0: FigJam Animation Description
Fig 3.1: Figma Prototype
Fig 4.0: Full Animation Walkthrough
Fig 4.1: Presentation Video
FEEDBACK
WEEK 13:
General Feedback
Here's what Mr. Razif said: "Start working on your final project. Can start do the HTML and CSS already if you haven't. Anything specific you want to know, message me and I will record the video."
REFLECTION
ExperienceAnimating an e-wallet app in Figma was an exciting and new experience for me. I used to use Xd all the time for my previous projects so I wasn't that familiar with Figma. When I first started using Figma, I even had a hard time creating a button. But this project pushed me to learn Figma more seriously and turns out it was not difficult at all. Figma's UI/UX was kind of self-explanatory so navigating the app became intuitive. Overall, the experience of animating the e-wallet app in Figma was a rewarding one. I'm so happy I expanded my skill set!
Observation
During the process, I observed the remarkable potential of Figma's Smart Animate feature. This feature proved to be both helpful and cool, as it allowed me to create smooth and seamless transitions between different screens and elements within the e-wallet app. It made the animations feel polished and professional.
Findings
One important thing I learned from this experience is the significance of planning before animating. I realized that having a clear idea of the animations I wanted and thinking about how users would experience them made a big difference in the end. By taking the time to sketch out the animations and plan how they would happen and flow together, I was able to create interactions in the e-wallet app that were more interesting and easy for people to use.
Comments
Post a Comment