Labels

ADVANCED INTERACTIVE DESIGN: TASK 1_THEMATIC INTERACTIVE WEBSITE PROPOSAL


||  22/04/25-13/05/25
||  Sun Jia Yi / 0370449
||  Advanced interactive Design / Bachelor of Design (Hons) in Creative Media
||  Task 1: Thematic Interactive Website Proposal

TABLE OF CONTENTS

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

LECTURES 

Week 1: 

A thematic interactive website, sometimes referred to as a microsite, is a website that centres around a particular theme or idea.  (For instance, a virtual experiment or museum exhibit.)  By encouraging interactive inquiry, the goal is to maintain audience interest. 

We must develop a thematic interactive website for this module's final project based on one of the possible themes listed below:

Possible subject: 
  1. The debut or special of a specific brand's product (for example, the new shoe from Nike)
  2. Beauty products (such as Sephora compact powder and movie advertising) 
  3. Game release promotion. 
  4. Gallery/Museum exhibit launch 
  5. Band/Artist latest release. 
  6. Or anything else you have in mind (subject to the module coordinator’s approval) 
 Website of reference:  FWA

Week 2 : 

This week, we provided Adobe Animate tutorials.

A few things to remember:
  •  Adobe Animate is a program that uses vectors. 
  •  Select HTML canvas if you want HTML as the result. 
  •  Centre the canvas. 

There are two ways to import external resources:
Bring to the Stage
Import to Library Object Drawing (J): This mode handles each drawn shape as an independent object.

Week 3 : 

Tools for Fluid Brushes (Shift + B)
  • Fluid Brush offers a variety of paint modes.
Variety of paint modes

Insert Shape Tween
  •  To join two shapes that are in different keyframes together. 

Break Apart
  • Press Ctrl + B to split grouped objects, bitmaps, or symbol instances into separate parts that can be edited.

Ease Effect

keyframes

Week 4 : 

The process of hand-drawn or painted pictures on translucent sheets (cels) and then photographing them to provide the appearance of movement is known as cel/celluloid animation. 

*Registration point is the pivot point of the symbol (usually at middle). 

Registration point

For any graphic animation
  • Convert to symbols > Graphic Essential.
  • F8: Convert to Symbol
Convert to Symbol 

INSTRUCTIONS 

This is the Module Information Booklet for this Module: 


Task 1:Thematic Interactive Website Proposal

In order to construct a thematic interactive website proposal, we had to come up with at least three concepts.  The selection of topics may be predicated on: 
  • A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder)
  • Movie promotion
  • Game release promotion.
  • Gallery/Museum exhibit launch
  • Band/Artist latest release.
  • Or anything else you have in mind (subject to the module coordinator’s approval)
Requirements :
  1. Completed UI/UX proposal document.
  2. All processes (concept, wireframes, mood-board, flow chart) have to be documented and posts in your E-portfolio as your reflective studies.
  3. A video presentation or Class presentation (to be decided by the module coordinator.
Proposal Ideas :
We ought to have generated at least three concepts before starting this endeavour.  Based on my interests and other relevant information, I have looked at 3 different concepts.  I have the following ideas:
  1. Kiss the Future – Rhode Lipstick Launch Website
  2. In the Mood for Love – Immersive Interactive Website
  3. BIBI Album Experience
Here is the docs that show my three ideas and contents of the idea:

All of the ideas can be seen in Figjam file below :

                                                                        Thematic Website Ideas Week 01 

Week 2 : 
Mr. Shamsul prefers idea 2. So I Choose the idea 2. Cuz for the idea 1 and 3 is quite normal that didn't let the website to become more unique and can't really explore the story and make the fun user interact. 

The website explores the atmosphere of In the Mood for Love through visual and interactive design—nostalgia, ambiguity, and Eastern aesthetics. It promotes the classic film to young audiences via an interactive webpage, combining imagery, sound, text, and motion design to deliver an immersive experience.

In the mood for love, Week 03
After that, I prepared the content of the website.I structured the website into 7 start  from home page, There will be home page, characters page, scenes page, qipao gallery page, quotes page, promotion page and credits page. Below is the document link for the website content. 

Web Content: 

Website Content Structure, Week 3

User Flow Chart
I made the user flow chart in Miro start from home pages until the end of the page by following the content structure in previous part. View my flow chart below:

                                                   User Flow Chart for In the Mood For Love , Week 03 

Wireframes / Prototypes 
Once my user flow chart was done, I began to do the wireframes. Following the flow chart, I started from home page.



Wireframe about "in the mood for love"

FINAL OUTCOMES TASK 1 : THEMATIC INTERACTIVE WEBSITE PROPOSAL
Canva link: Here

FEEDBACK 

Week 1
- For the idea I presented, Mr. Shamsul thinks Idea 2 is unique and good so I can choose which one I want to use.

Week 2
-Try to find more references about the theme and similar website and select which topic u want to choose and start the content structure . 

Week 3 
-No Feedback

Week 4 
-The wireframe is clear and good so far. Layout is consistent and clear. 

REFLECTIONS

Experiences
Engaging in this project has provided me with valuable insights into the functioning of thematic websites. Many of these sites feature seamless transitions and effects between scenes. I was truly impressed by how this can encourage users to continue exploring the website.

Throughout each week, we have begun utilizing Adobe Animate as our software. As I am not an animation student, mastering Adobe Animate has proven to be quite challenging for me. I am struggling to grasp the concept of keyframes and some animation terminology that is unfamiliar to me (such as tween, classic ease, and motion guide).

Observations
I noticed that Adobe Animate is a useful tool for those who are proficient in it. There are likely numerous features that I have not yet explored. With dedication and perseverance, I am confident that anyone can become an expert in it.

Findings
The process of creating proposals around topics of interest was thoroughly enjoyable. Not only did I gain insight into the specific narrative of In the Mood for Love, but I also mastered the cinematic techniques used in art-house films and learned how to cultivate atmospheric depth. The most memorable part was developing the prototype—it demanded creativity and extensive visual exploration.
Labels:

Comments

Post a Comment