Skip to main content

Advanced Interactive Design

October 15, 2023

29.08.2023-15.10.2023 (week1-week7)

Song Yang/ 0355576

Advanced Interactive Design 









Instruction



LECTURES 

Week 1: We were briefed about the module outline and our lecturer showed us some examples of works that we have to do for our tasks. We were also tasked to do some research on existing TikTok / IG filters and try them out. For our TikTok Filter ideas, we have to think of 3 that fits into 1 of the 4 categories, including Interactive Game, Randomiser, Fashion & Beauty and also 3D AR. 

Week 2: We tried exploring TikTok Effect House today, a software that we will have to use to create our TikTok filters. It was difficult to navigate without watching a tutorial, so we went to the Effect house website and followed a worded tutorial on how to create mini clones. 

Week 3:
For this week, we began to explore Adobe Animate and learned the basics of
 how to use the software. Our lecturer guided us step-by-step in class, and it became easier to manage after more practice.

Week 4:
Our class was held online today and we resumed practicing animation using Adobe Animate. Our lecturer taught us how to animate a bouncing ball and web animation, which would be useful for future projects.

Week 5: We had a TikTok workshop for this week and were briefed about the TikTok filter contest requirements. It was a very insightful sharing and we also got to create our own TikTok filters using TikTok Create. 

Week 6-8: We began working on our finalized TikTok filter ideas and had consultation sessions with our lecturer through physical and online modes. In weeks 6-8, it was more of exploring Effect House and seeing whether or not our TikTok filter can be made. In 
weeks 9-12, we were all having individual consultations so that we can solve any problems that we have faced while making the filter.

TASKS 1

Exercises


Week 1: TikTok Filter Ideas

The first special effect I chose was pink beaver, a 3D sunglasses on my head, and the overall theme was pink. I think this theme with a unified tone is worth learning.



Fig 1.1 Special Effects Inspiration 1






The second one is a Tom and Jerry themed special effect. The makeup for this special effect is very interesting. Tom’s blue eyeshadow color is chosen, and Jerry’s zong color is chosen as the blush color.




Fig 1.2 Special Effects Inspiration 2
  





This special effect is a 3D modeled black kitten headgear. The black kitten looks very cute. The modeling features are relatively rounded and worth learning.



Fig 1.3 Special Effects Inspiration 3



My Tik Tok Filter ideas



The inspiration came from my deep understanding of the Stitch Game, especially the tense and exciting atmosphere in the film, which gave me a lot of inspiration. When designing the special effects, I chose the classic Stitch image, so that the audience can feel the tension of the game more deeply.




Fig 1.4 Stitch





Week 2: TikTok Filter Tryout

For this week, we began exploring TikTok Effect House, a software that we will have to use to create our TikTok filter. It was quite challenging to navigate at first, but we managed to make a basic face distortion filter and test it out on TikTok. 



Fig 1.5 Screenshot of effects





FINAL OUTCOMES








The visual:The lovely Stitch




TASKS 2

Final Project: Thematic Interactive Website



First of all, we know that the costumes and props in the Stitch Game have unique designs and iconic looks. This inspired me to create a dedicated shopping platform that allows fans to own their favorite characters' costumes, props, and merchandise in reality. When it comes to website design, we strive for a simple, intuitive user interface to ensure that users can easily and quickly find the products they like.

The goal of Stitch Shopping is to provide a unique, fun and interactive shopping experience for Stitch Games fans. We hope that every visitor can find their favorite products here and feel our love for this classic work. Thank you all for your support and look forward to seeing you on this special shopping trip!


Fig 2.1 Stitch





1. Website Design


The original intention of the project was to combine the unique atmosphere of Stitch Games with the convenience of shopping to provide fans with a new shopping experience.

I dug deep into Stitch's themes and elements to ensure that the site remained true to its unique atmosphere. In Figma, we used a series of carefully designed ICONS, colors, and interface elements. Each page in the shopping site is endowed with a unique element of Stitch, making users feel as if they are in Stitch's world


Fig 2.1 Screenshot of figma page



2. Website Animation


Create the graphic elements of a shopping site using Adobe Animate. Include Stitch's theme colors, iconic elements, and the merchandise you want to display.


Fig 2.2 work place of Adobe Animate


Use Adobe Animate's timeline and animation tools to animate graphic elements. This includes transitions, fade-ins, fade-outs, rotations, etc.


Fig 2.3 work place of Adobe Animate



Shopping sites require users to interact with them, using the interactive elements and action scripts of Adobe Animate. This includes buttons, links, and hover effects.



Fig 2.4 work place of Adobe Animate



FINAL OUTCOME



Fig 2.5 Final Website 


Click here to access the website Stitch website



Video presentation and walkthrough of your project








REFLECTION


Experience

I have always been intrigued by the diversity of TikTok filters, but I have never imagined myself to be creating one from scratch. It was my first time hearing Effect House and using the app to create a filter. When I first downloaded it, I was really lost with all of the unfamiliar panels and visual scripting nodes that we have to use. It was not easy to learn within a few days, but watching tutorials did help me get more comfortable with the app. There were many challenges faced when doing this assignment of course, but I am glad there was a solution to most of it. It gave me a lot of headaches, but I enjoyed the process of learning how to create a TikTok filter. 

Observation

During production, I encountered some technical challenges, especially when adjusting the effect to fit the original film more closely. But through trial and learning, I managed to overcome these problems and became more proficient in some special effects techniques.

Findings
In order to increase the audience's sense of participation, I added some interactive elements to the special effects, hoping that the audience will be better integrated into Stitch's world. At the same time, I also added some innovative points, combining other pop culture elements to make the special effects more personal.





Labels:

Comments

Post a Comment

Popular posts from this blog

INTERCULTURAL DESIGN | PROPOSAL, DATA COLLECTION AND FINAL PROJECT

  Februray 8, 2024 - March 22, 2024 08.02.2024 –  / Week1 – Week7 Song Yang / 0355576 Intercultural Design / Bachelor of design (Honours) in Creative Media MIB Project 1   Proposal   (2. Proposal Presentations Slides) For this module, we are required to create a study based on the theme "Cultural Sensitivity in Design". We are to study a cultural phenomenon or a particular subculture that is perceived as 'sensitive' and frame our study within the chosen theme. We decide to propose about 3 ideas. ・Chinese Calligraphy ・Red packets ・Oil-paper Umbrellas Project 2 Data collection (3. Data collection presentations slide) After getting feedback from Mr. Azrial as Oil-paper Umbrellas as our chosen topic, we started to do further research into the topic. We decided to frame our research into 4 different cultural aspects and meanings behind the oil-paper umbrellas; Chinese, Japanese, Malaysian, and Indonesian culture. Here, we conducted two things: online research an...
Post a Comment
Read more

Major Project

 25/09/2024 - 08/01/2025 / Week 1 - Week 15 Song Yang / 0355576 Major Project / Bachelor of Creative Media / Taylor's University Major Project INSTRUCTIONS Process Explored the cultural significance of Tang Dynasty tea attendants, focusing on their elegance and rituals. Brainstormed key brand values: tradition, refinement, and modern integration.  Logo Design and Brand Visuals Fig 1.1 Logo in Black Fig 1.2 Logo in Color Fig 1.3 Image Sketch Fig 1.4 Image Color Fig 1.5 Image Color Fig 1.6 Image Color Fig 1.7 Image Color Packaging Design Exploration - Paper Bag Fig 2.1 Paper Bag 1  - Design Fig 2.2 Paper Bag 2   - Design Fig 2.3 Paper Bag 3  - Design Fig 2.4 Paper Bag 4   - Design - Milk Tea Cup Fig 2.5  Milk Tea Cup 1 - Design Fig 2.6  Milk Tea Cup 2  - Design Fig 2.7  Milk Tea Cup 3  - Design Fig 2.8  Milk Tea Cup 4  - Design - Tote Cup Holder Fig 2.9  Tote Cup Holder  1 - Design Fig 2.10  Tote Cup H...
Post a Comment
Read more

Information Design - Project 1

 26.1.2023 - 23.2.2023 (Week 3 - Week 7) Song Yang (0355576) Bachelor of Design (Hons) in Creative Media  Information Design Instructable Infographic poster & Motion graphic INSTRUCTIONS For this project, we were assigned to create a teachable poster infographic and an animated infographic video from a video recipe, explaining how to cook/bake our chosen dishes from the Pasta Grandma YouTube channel. I started this project by binge-watching multiple videos from the pasta Granny and decided to make this video on how to make flake bread. Flatbread is found all over Italy, and Enrica shares her recipe for "crostoli" (it's plural and singular is crostolo) here. Lard is a key ingredient, and the way it's made makes delicious pancakes. Fig 1.1   Enricas' video recipe on how to make flake bread https://www.youtube.com/watch?v=XzY3uoMCgtE After watching the video, I recorded in my notes the ingredients and steps of how to make the flake bread. Fig 1.2 Ingredie...
Post a Comment
Read more