Application Design II / Task 2: App Animations & Interactions

-

24.5.2023- 18.6.2023 (Week 8 - Week 11)
Britney Chow Pei Jun / 0350043 / BDCM
App Design II
Task 2: App Animations & Interactions

Task 2: App Animations and Interactions

In this task, we are required to plan out the animations and interactions of the app. Below is my progression: 

Fig 1.1; Logo Animation; 

This is the logo animation, initially I was planning to make the dot of the "h" to write the letter h out, basically it's like masking animation, however, after few hours of trying it and failed, I decided to go with a sliding in and bounce animation. 

Fig 1.2; Sliding Animation; 

In this part, I basically implemented sliding animation for when the page slides out and a new page slides in. 

Fig 1.3; Pop up Animation; 

Since the task of my application is to create a good habit, for the plus sign, I made it pop up and background will blur. Users then can choose to create a new habit from the pop up options.

Fig 1.4; Side Panel Animation; 

 
Fig 1.5; Sliding Animation 2; 

The sliding animation here also applies to the side panel and also for the choosing habit page and habit input page. 

I also made a master plan of the animation, below is my progression:

Fig 1.6; Master plan for animation; 

Fig 1.7;User map; 

Final Submission

Fig 1.8; Video Walkthrough of Interactions and Animations; (18/6/2023)

Fig 1.9; App Animations and Interaction Prototype in Figma ; (18/6/2023)


FEEDBACK

*none*

REFLECTION

I feel that I really need to do much research before I actually start executing my projects since research is very important. They provide you a guide and a direction on how you need to go about doing the project, or in this case, my application. At first, I thought I could just go with common animations that are seen in mobile applications, so as to make it so complicated that people feel it's just weird. However, I then thought that I should at least try to make things interesting at least a little. But then again, I thought that I might not want to spend too much time in the planning stage and should start to slightly change it a little when I'm coding to have clearer view on how the animations work. Overall, I think this is a nice project as it allows me to learn much on the planning, and also the importance of it. I also learned about doing masterplans for when designing mobile applications like these.

Comments

Post a Comment

Popular posts from this blog

Major Project // Final Submission

-
Image
Week 1 - Week 16 (22.04.2024 - 09.08.2024) Britney Chow Pei Jun / 0350043 / BDCM Major Project Progression INSTRUCTIONS PROGRESSION Week 1 - 2: For the first week, we started our class with Mr. Asrizal giving us a brief on what major project is. He told us that this time we're allowed to be in groups to work on our major project. Furthermore, Mr. Kannan also mentioned how we should brainstorm for our major project. After that I started to think how I should proceed with my major project while in the meantime, searching for partners. I then started to group up with Jia Yee for my major project. We then started to brainstorm for ideas, both of us have came up with all sorts of ideas, yet none of them feels like it would be best suited for us. After coming up with a few ideas we think could work, we started organizing it: Fig 1.1; Ideation 1; Week 1 Fig 1.2; Ideation 2; Week 1; ...
Read more

Game Development // Task 1: Game Proposal

-
Image
1.9.2023- 29.9.2023 (Week 1 - Week 5) Britney Chow Pei Jun / 0350043 / BDCM Game Development Task 1: Game Proposal LECTURES/EXERCISES WEEK 1 In this week's class, we are required to review a game made by our seniors. Fig 1.1; Reaper Test Game; sauce:  TDS Gamezone ; Although the graphic of this game does not feel as good as the other game in Gamezone. However, it is still nice as it uses simple shapes and design, the colors used in the game does not feel very out of place, the background also feels alright, but for my first time playing this game, I did not know about the environment of the game. Furthermore, the music chosen also able to fit in to the game itself. The story of the game is nice as there's a goal behind it. Due to the limitations the developer faces, there won't be more to the story. Moreover, the movement of the character is slightly "slippery" as it sometimes slipped even th...
Read more

Design Principle: Project 2

-
Image
11.10.2021 - 31.10.2021 (Week 8 - Week 10) Britney Chow Pei Jun / 0350043 / BDCM Design Principles Lectures and Project 2 LECTURES  Introduction A designer's role is to solve problems with effective visual communication. Ranging from personal goals to community events, and from corporate functions to world changing projects. Observation Be attentive to your surroundings Pay attention to the details and to be analytical about them Sources of observation can stem from artifacts, daily happenings, physical surroundings, and such.  An active act of acquiring information through the senses, of a subject matter in its natural setting. Senses are important for us to know, feel, understand, analyze and even plan what we want to do. Important to designers as it enables them t...
Read more