ADVANCED INTERACTIVE DESIGN - EXERCISES

29/08/2019 - 03/09/2019 ( Week 1 - Week 6 )

Chong Siong Loong Ron ( 0334452 )

Advanced Interactive Design  

Exercises

---

LECTURE NOTES

---

05/09/2019 (Week 2)

Micro Interactions
In this class, we were introduced to microinteraction. Microinteractions are defined as the contained product moments that do one small task. It is essentially small moments where the user and design interact. It can also be considered as events which have one main task and they’re found all over your device and within apps. Their purpose is to delight the user, to create a moment that is engaging and welcoming.

---

Week 1
For this week, we was brief on what are the expected on or the outcome that we have to produce throughout this subject.

After Mr Shamsul brief us, we started out with some simple drawing as this is to get us familiarise with the new application that we have not used before "Adobe Animate". This 1st exercise we have to draw a vase with adding in some shading to the vase.

Fig 1.1 Process of drawing 

Fig 1.2 Final outcome 

Week 2 

For this week we was told that we will be doing some simple animation as its to show the tools on creating animation in animate. For this week we have 2 exercise to do as the 1st one is used as tool called "shape tween" as from square will changing smoothly to a circle and the 2nd exercise we have to draw a ball and make it looks like its bouncing down from a tall surface. 

Practice 1 

Fig 1.3 Process ex 1

Gif 1.4 Final outcome ex 1 

Practice 2 

Fig 1.5 Process ex 2

Gif 1.6 Final out come ex 2 

After all the exercises we did for the pass two week, for now we ask assigned to do a simple layout animation with the basic knowledge that we learn, as we want to see the transition and the timing of each item coming in or going out of the screen. Submission is on week 3 

Week 3 - Exercise 1

Micro interaction 

For this week's exercise, we are required to create a simple interface. We got to learn about micro-interactions in class, and view some examples that would give us some idea on what we can design. I decided to design a food app interface. I stated out what assets in need for this exercise food app. where this is a interface off ordering our food in the app and u can see other food that is in the app. 

Fig 1.7 Process of animation exercise

Fig 1.8 Process of animation exercise

Fig 1.9 Final outcome of animation exercise 

Fig 2.0 Final Gif

Week 5 - Exercise 2

Button Scripting

For this week we got to learn how to create buttons by using Animate. for the second exercise, we are required to come up with an interface with around minimum of 3 screen, by making use of buttons as well as some simple micro-interaction. 

I that I thinking off doing a shopping kind of app where u can click and see the reward u have, click and see what kind of promotion are they having now and etc... from there I start listing down all the assets I need and the things that needed to place in the interface. After that all is done I started in AI as I am much more familiar in drawing and using AI.

Fig 2.1 Process of exercise 2 in AI

Fig 2.2 Process of exercise 2 in AI

Fig 2.3 Process of exercise 2 in AI

After all the asset is done in AI, I started to export those asset as png to be moved into animate to start animating the interface. 

Fig 2.4 Process of exercise 2 in Animate

Outcome of the static screen:

Fig 2.5 Static Screen 1

Fig 2.6 Static Screen 2

Fig 2.7 Static Screen 3

On Web:

https://ronchongex2.000webhostapp.com/ex2/index.html

---

FEEDBACK

---

12/09/2019 (Week 4)
Specific Feedback - Overall the layout for exercise 1 and timing is good but the only thing that is the over lapping of text on the buttons below the screen, besides that every things looks good. 

03/10/2019 (Week 6) 

Specific Feedback - For the 1st page animation is fine but for the second page there should be more animation that we have learn in the previous practice. 

17/10/2019 (Week 8) 

Specific Feedback - Overall the, all the pages is good and I have apply most of the animation that we have practice on class which is good. 

---

REFLECTION 

---

EXPERIENCE 

I had never used Adobe Animate before so I was a little nervous at 1st but with all the practice that we had in the class, after all its not so complicated after all but is a much more complicated version of Adobe Dreamweaver. I faced a lot of confusion as sometimes a simple step like putting in a extra space in the text it will also affect the work that we are doing, so we should be very precise in all out our coding and titles we put for everything. 

OBSERVATION

After all the practice and exercise I observed that Adobe Animate seems to be more useful as I guess is an extended version of Adobe After Effects because we can simply add in motions by juts clicking and drag it to what we want it to look like. But after all I still prefer Adobe After Effects because it can animate things without coding hahaha. But is a good knowledge to know how to use another application.

FINDINGS 

I found out that I was very frustrated when I work with Adobe Animate because with a simple step by accidentally put in a space in-between a title or coding, with the space between it will not work when we export out to see our work in browser. I also found out that if we transfer the drawing from AI to Animate sometimes there will have some problems that we won't find our the problem that we face, so sir recommend us to draw straight in Animate so it will be much more easier for us to work with the project.