Application Design II - Task 03: Interactive Component Design and Development

Week 08 - Week 12

Ahmad Firas Bin Ahmad Fisal | 0345121

Application Design II | Bachelor of Design (Hons) in Creative Media

Task 03: Interaction Component Design and Development


INSTRUCTIONS


Task Brief  (Status: Completed)

The output of this task is a working animation element ready to be integrated into their final app. Meaning it’s no longer a visualisation like how it was in Task 2. This will be created using HTML/CSS and JavaScript with an animation framework if necessary. Interactive Components/Elements can be: • Navigation Menu with interactive icons. • Side Menu interaction • Pop Up boxes • Call to action buttons. • Page/Screen transitions • Etc. (discuss with the module coordinator for further clarification) 

Progression:

- - I've decided to work on the HTML and CSS of most of my frames first before touching on the Javascript to activate such animation or transitions. Below is my current progression for both HTML and CSS.

HTML File:


CSS File:


Current Screens Showcase:

Screen #1

Screen #2

Screen #3

Screen #4

Screen #5

These are my current raw buildup from HTML and CSS for all five screens in visual form. Further progression would be finishing up the rest of the screens and implementing the usage of Javascript to enable the animation/transition of the design elements. 

Video Presentation:





Reflection

Since we don't have enough time for all of the modules, I decided to go with a different approach where I will complete the HTML and CSS first before starting with the JS for this Application Design II project. It was challenging getting the organisation done. I have a feeling that everything will be revised upon reaching the final project stages. As of right now, even with the progress I have so far, it is definitely very much challenging.

Comments