Advanced Interactive Design: Task 2 Interaction Design Planning and Prototype

on

14.10.25 - 16.11.25

Celine Christabelle Patricia / 0374872 

Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media / The Design School

Task 2: Interaction Design Planning and Prototype

Table Contents

  1. Lectures
  2. Instructions
  3. Proposal 
  4. Feedback
  5. Reflection

Lectures

12 Principles of Animation 
  • Squash and Stretch → Week 5, learnt the basic of Squash and Stretch with Ball
  • Anticipation → Action before the character does the "real" action
  • Staging
  • Straight Ahead Action and Pose to Pose
  • Follow Through and Overlapping Action
  • Slow In and Slow Out → (In Adobe Animate, you can use Ease In Ease Out)
  • Arc
  • Secondary Action
  • Timing
  • Exaggeration
  • Solid Drawing
  • Appeal

Ball Animation:

Fig 1.1 - Ball Animation

How to Animate Object?

  • Keyframe → Fn F6 (For Mac)
  • Have two keyframes, don’t forget to move the objects from point A to point B 
  • Right Click → Create Shape tween (For the in between, no need to draw manually)
  • Properties → Effects → Ease In Ease Out (don’t forget to click the clip)
  • Onion Skin →  To see how the animation goes

Fig 1.2 - Ball Animation based on Animation Principle


Graphic elements

Fig 1.3 - Drawing Spider in Adobe Animate


After illustration make it into graphic element by:

  • Modify, convert to symbol, graphic, center
  • Fn F8
  • You can see it in your library now

Edit per frame in library, double click the element:

  • to quit the from the library click the back arrow button, edit per frame

Pivot button:

  • to rotate, determine the pivot button

Fig 1.4 - How to determine pivot point


Making Website in Animate

Fig 1.5 - Making Website

  • text → convert to symbol → graphic
  • using mask to make animation, turning it "invisible" 
Fig 1.6 - Website 1 Result


Adding the "Code"
  • add Actions
  • Add wizard
  • add stop action for like so the the animation stops

Fig 1.7 - Adding Wizard in the website


Fig 1.8 - Website 2 Result

Instructions


Task 2: Interaction Design Planning and Prototype

The approved idea was The Coffee Website, added with more historical elements, So I decided to have more in-depth research to what art style and story suits my website.

Art-style and References:

Animation Reference
Fig 2.1 - Good Coffee, Great Coffee

Good Coffee Great Coffee is a mobile game about coffee. The objective of the game is simply on running a coffee shop, making various drinks, and interacting with customers in a cozy, simulation environment. It shows interactive ways on how to make a coffee and serve it to customers. For some of the animation to my website, I am inspired by this game. 

Fig 2.2 - Coffee Animation

It shows a simple animation filling up the coffee. Hence, I'm applying this for my loading page.


Fig 2.3 - Brewing Coffee Animation

As I have a page of brewing coffee, using my fundamental coffee making knowledge, added with this reference, I decided to make a animation somewhat like this video, having coffee to drip from the filter. The difference is I will add a water flow from the top because that plays an essential part in Coffee making.


Fig 2.4 - Boat Animation

The boat seems a bit out of place in a coffee website, though I am inspired by the history of coffee in Indonesia, where the travellers from Europe travel by boat. I reckoned that this animation can be used while explaining the history of Coffee.


Fig 2.5 - Coffee animation 

Though this is an animation for application pop up, through this video I got inspired to make an idea of making pop up animation to introduce the coffee tastes. 

Visual Reference: 

Fig 2.6 - Visual reference
Fig 2.7 - Visual reference 2.0


Fig 2.8 - Watercolor Art style - https://pin.it/6TICS695g

As mentioned in the previous proposal, I am referring to a historical website that looks minimalistic. As most of historical paintings have texture, I decided to go on a watercolor art style since it has the most obvious texture, which enhances the "historical" visual in the website. 

Fig 2.9 - About page reference

As look for reference on how to animate, I am inspired by the layout of this page, and decided to use this as the visual reference of my about page. At first I wanted to use the same animation as well, but it turned out to not really suit the style that I'm going for. 


Below are the images and elements I have drawn/taken for the website:

Drawn:
Fig 3.1 - Water jug

Fig 3.2 - Latte art process

Fig 3.3 - Steam milk

Fig 3.4 - Latte Art



Fig 3.5 - Coffee extracting

Fig 3.6 - Boat

Fig 3.7 - Indonesian Map

Fig 3.8 - Boat illustration 

Fig 3.9 - Coffee Brewing


Fig 3.10 - Filling Up Coffee 



Fig 3.11 - Background

Fig 3.12 - Digital Drawing Footage 

Taken through Pinterest: 
(Refer to the caption for reference)
Fig 4.1 - Grapefruit - https://pin.it/4uArEUW39

Fig 4.2 - Citrus - https://pin.it/40lTSqx0D

Fig 4.3 - Caramel - https://pin.it/JsNmSLHKf

Fig 4.4 - Molasses - https://pin.it/tYPvRwkHi

Fig 4.5 - Black tea - https://pin.it/3AoWMBwzY

Fig 4.6 - Coffee Illustration - 



Fig 4.7 - Latte Art - https://pin.it/4azSui7bN

Fig 4.8 - Chocolate - https://pin.it/5J6a5Mb06

Fig 4.9 - Butterscotch - https://pin.it/1Xxlh7H93

Fig 4.10 - Black Coffee - https://pin.it/1kQ9MBr7L

Fig 4.11 - Cinnamon (spices) - https://pin.it/4iLLnLv9b

Fig 4.12 - Coffee Bean - https://pin.it/7KGNm82hW

Prototype:

Presentation:

Feedback

Week 7

Need to add logo for the website

Week 8

- online session - 

Reflection

From this website making, it gives me an eye opening experience to have more in depth learnings about coffee. As someone who drinks coffee quite often, I realize that coffee gives a deep experience, shares more than just a taste but also has its own cultural uniqueness. Moreover, through thorough research, I understand how animations in website can be made, although limited time, this assignment still can be conducted properly, getting new interesting findings. However, I do feel quite exhausted and experienced "art-block" at certain phases due to limited time on making this prototype. I had to brainstorm for quite a while to make sure the website appears as what I expected. Furthermore, I do fear that I won't be able to execute the website properly because it was pretty challenging here. I do hope that lecturers won't put too much expectations on me because I am still learning through this! Overall, I do enjoy this project though the process is quite difficult. 

Comments

Post a Comment