Advanced Interactive Design / Final Project

21.6.2023- 16.7.2023 (Week 12 - Week 15)
Cheryl Voo Yie Qi / 0349878
Advanced Interactive Design / Bachelor of Design in Creative Media
Final Project / Thematic Interactive Web Application

---

Week 3

We were introduced to Animate CC this week in class and learned about some simple animations: 

Fig 1.3, Square animation

Fig 1.4, Square animation

Fig 1.5, Square animation

Week 4
We learned the ball bounce effect and also a simple page navigation animation in Animate CC this week in class.

Fig 1.6, Ball bounce

Fig 1.7, Ball bounce

Fig 1.8, Ball bounce

Simple Page Navigation Animation

Fig 1.9, Simple page navigation animation

Week 12

This week we learned about simple animations and more about creating a thematic interactive website.

Fig 1.10, Simple animation (mouse click)

Fig 1.11, Simple animation (mouse click)

Fig 1.12, Creating simple page navigation (button works as nav bar)

Fig 1.13, Creating simple page navigation (button works as nav bar)

Fig 1.14, Navigating to different parts/pages on the picture

Fig 1.15, Navigating to different parts/pages on the picture (gsap)

Fig 1.16, Navigating to different parts/pages on the picture

FINAL PROJECT / Thematic Interactive Web Application

For the final project, I chose Oreo as the topic of my website as it just popped up in my mind. 

I searched for the Oreo assets or images and other related elements online to use on my website, and at last, I found some like these: 

Fig 1.17, Milk images

Fig 1.18, Oreo images

Then, I started to plan what to include on my website, and I found some limited-edition Oreos that are not common. Other than that, I also found an interesting website, is about a personality test based on how you eat Oreos, so I thought it would be interesting to include that in the website. And others are some Oreo recipes and an Oreo mobile game.

Oreo personality test:

https://www.people.vcu.edu/~rsleeth/OreoTest.html

For the font, I found a similar font to the one that Oreo used, which is the Pluto font. After getting all the images and material I need, I used Figma to plan my website layout before working in Adobe Animate: 

Fig 1.19, Pluto font

Fig 1.20, Pluto font

Fig 1.21, Planning in Figma (Drafts)

Fig 1.22, Planning in Figma

For the personality test page, there's a lot of text so at first I tried different layouts to try to fit them in, but it seems quite crowded.

Fig 1.23, Personality test page (Draft)

So I took 5 to 6 of them instead of fitting 10 of them on the website. I experimented with a few layouts as below. I like all of them but at last, I chose the bottom one because the other layouts look normal compared to the bottom one. And the others with Oreo in the middle, the text looks a bit messy if the text is all expanded out.

Fig 1.24, Personality test page (Drafts)

After all that, I started to work on that using Adobe Animate. Here are some of the processes in Adobe Animate:

Fig 1.25, Nav bar and social media layer is in scene 1 since it stays there for the whole website

Fig 1.26, Home screen

Fig 1.27, Limited edition screen

Fig 1.28, Recipes screen

Fig 1.29, Personality test screen

Fig 1.30, Download screen

FINAL OUTCOME

Netlify link:

https://oreo-cherylvooyieqi.netlify.app

Fig 1.31, Final video walkthrough

---

REFLECTIONS

For the final project, I spent less time than the effect filter, and the result was what I expected and was satisfied with. But I wouldn't say it is perfect, there is a lot of room for improvement in my projects, and I'm aware of that. Before this module starts, I don't even know if we can create a website using Adobe Animate. From this module, I learned a lot about Adobe Animate, especially the buttons and animations. For example, the button itself is not difficult, but I have been missing the part about the name of the instance, which makes the code I added unable to run. To tell the truth, from the first semester to now, there are always some modules that surprise me every semester, such as the Unity app in experiential design, which is really not what I expected to learn in college life (on the bright side, haha). I mean I knew our course is meant to be learning these, but it's not what I expected to learn in our course, maybe I'm those old-minded people who thought that design is just learning normal design kinds of stuff, but it's nice to learn all these different kinds of technology, it's just the process is a bit torturing.