Advanced Interactive Design - Exercises

Ng Jia Jin (0331589)
Advanced Interactive Design
29/8/2019 - 3/9/2019 (Week 1- Week 6)
Exercises


Lecture Notes


Micro Interactions

For our first lesson of the module, we were introduced to micro interactions. Micro interactions is basically the animation and movements on applications that enhance the user's journey and experience. It's the small moments that lets the user to understand their actions better and also have a better experience while clicking on it.

Here are some examples:

 Micro-interaction #1

 Micro-interaction #2

 Micro-interaction #3

Exercises

5/9/2019 (Week 2)

For this week, we are to complete an exercise which is to create a simple interface using shapes and classic tween effect. Since Mr Lun and Mr Shamsul has taught us about micro-interactions in class the same week, they want us to apply some micro-interactions in our first exercise.

For the exercise, I decided to create a website for my photography works. I looked out for some examples and then I started with the exercise.

I decided to go with the style of this example because the interaction is simple and clean. It suits the website I'm going to design as well.

Process #1

Process #2

I got a little confused when it comes to classic tween since I have never used Adobe Animate before but I managed to complete the exercise.

Here is the final outcome for EXERCISE 1 in GIF format:

26/9/2019 (Week 5)

For this week, we learned about creating clickable buttons by coding it in Adobe Animate. For this, our next exercise required us to come out with an interface with at least 3 pages, with clickable buttons to be able to move on to each pages.  

I decided to create a shoe website for people to choose their shoe sizes and to purchase it. I focused on Adidas Continental as my shoe choice at the website. I started off by creating a layout design for the website and I also looked for some reference.

Reference #1

Reference #2

After that, I started to create my layout design and also coding the button in Adobe Animate.

Process #1

Process #2

Static Outcome

Page #1

Page #2

Page #3

On Web: https://exercise2adidas.000webhostapp.com/index.html

Reflection

I certainly learned a lot from the exercises that I did and I will certainly apply it to my final project. I observed how Mr Lun Adobe Animate and it really helped me a lot. Although I'm still pretty unfamiliar with the software, I'll keep on learning.