Advanced Interactive Design: Project #1

23.08.2021 - 23.09.2021 (Week #1 - Week #5)

Seerat Tayyab Mukhtar Qureshi - 0345576 (BDCM)

Advanced Interactive Design

Project #1


Lectures:

Week #2:

Mr Razif showed us the basics of animating in Adobe Animate. We learnt about classic tween, shape tween and motion tween. We learnt how to create buttons and how to add basic scripts to them.


Fig 1.0: Basic animation

Instructions:

Module Information Booklet


Project #1:

For this project, we have to design an app with some sort of transaction. We need to design the interactive interface in Animate but are not required to do the backend coding. We can start off by brainstorming some ideas.

Fig 1.1: Some ideas

I liked the idea of the phone case application so I went on and created a flow chart for it. Customers will be able to customise the case with a few options and then purchase it. 



Fig 1.2: Flowchart


The next step is to create wireframes for each option

Fig 1.3: My wireframes

Fig 1.4: Making the layout in Animate

Fig 1.5: Adding the code to the buttons

Fig 1.6: Layout video

After receiving some feedback, I made some changes to my work.

Fig 1.7: Final Layout Video


Feedback:

Week #1: Mr Razif showed us what to expect of this module and told us about all the projects in this module.

Week #2: No feedback given.

Week #3: No feedback given.

Week #5: Mr Razif looked at my prototype when he helped me with the coding of the button. He said that I had a grasp of the program and the idea of the assignment. He said that once I submit it he will look back and see where we can all improve.

Week #6: I received some feedback on my prototype. I need to add pictures of the phone case and improve on the aesthetics a little bit. Right now there's not a lot of branding for my app so I need to improve on that and make it a bit more cohesive.

Reflection:

Week #1: This module looks a bit stressful since I was not a fan of Interactive Design last semester. I have never used Animate or Spark AR before either so it's going to be a lot to learn.

Week #2: Trying the basic exercises in Animate was kind of interesting. It is kind of like After Effects which I am familiar with. It seems easier to use than AE since the layout is simpler. 

Week #3: We looked at the coding part today that we would need to use for the buttons. It looks a bit confusing because it is not like the coding we learned last semester. However, Animate does help with the coding wizard part so that should make things a little better.

Week #5: I think I tried my best on this project, I know with some more practice I could create a better layout but unfortunately we were tight on time and if we push this project's deadline then all the others will get pushed back.

Week #6: I am glad we got an extra week because I really wanted to improve my submission. I think my redone one is definitely a lot better. It is not perfect but it is much better in my opinion. I also have got a good idea of the scripts and coding in animate now so that's good.

Comments

Popular Posts