Advanced Interactive Design: Task 1_Thematic Interactive Website Proposal
22 April 2025- 13 May 2025
CHONG CHENG TAO (0371072)
Advanced Interactive | Bachelor of Design in Creative Media | Taylor's
University
Task 1: Thematic Interactive Website Proposal
List
LECTURES
Week 1
Thematic Interactive Website (known as microsite), is a website that focuses
on a specific theme & concept. (E.G: Museum exhibit, virtual
experiment.) The aim is to keep the audience engaged through interactive
exploration.
For the final project of this module, we are needed to create a thematic
interactive website based on the following potential topics:
Potential topic:
-
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)
Reference website:
FWA
Week 2
In this week, we were giving tutorial for Adobe Animate.
Some takeways:
Some takeways:
- Adobe Animate is vector based software.
- Choose HTML canvas for the output to be HTML.
- Align canvas on center.
- Two options to import external assets:
- Import to Stage
- Import to Library
- Object Drawing (J)
- A mode that treats each shape you draw as a separate object,
Exercise 1_Boat illustartion
Week 3
Fluid Brush Tools (Shift + B)
- Fluid Brush provides different paint modes.
Insert Shape Tween
- To interpolate two shapes in different keyframes.
Break Apart (Ctrl + B)
- To separate grouped objects, bitmaps, or symbol instances into individual, editable elements.
Ease Effect
Keyframes
Shapes Tween
Count down
Week 4
Cel / Celluloid animation: A technique where images are hand-drawn or painted on transparent sheets (cels) and then photographed to create the illusion of movement.
*Registration point is the pivot point of the symbol (usually at middle).
Registration point
Convert to symbols > Graphic
- Essential for any graphic animation
- F8: Convert to Symbol
Convert to symbol
Classic motion guide
Right click layer > Add classic motion guide
- Draw a line using pen tool, create a motion curve.
- Go to the first frame, snap the obejct at the initial point.
- Go to the last frame, snap the object at the finishing point.
Timeline
Drawing motion guide using pen tool
Ball_Classic motion guide
Next, we are doing another motion guide exercise by creating the car movement path. Enable "Orient to path" for the car to rotate bsed on the guide.
Car_Classic motion guide
INSTRUCTIONS
This is the Module Information Booklet for this module:
Week 1
In this week, we were given some briefing and instruction by Mr. Shamsul.
The first thing I curious about is Adobe Animate. As a 2D animtor myself
(self-proclaimed💀), I'm not completely unfamiliar with Animate, but I was
curious about its limitations when it comes to developing websites.
Some youtube tutorial I found:
Adobe Animate Tutorial
Website reference: The FWA
Ideas:
- Manga artist, Taiyō Matsumoto
- Introduction and History of Traffic Sign
- Life Cycle of Star
Mr. Shamsul prefers idea 2 or 3. I would like to focused on some keyword
like "Evolution" and "Changes", incorporating with scrolling
effect to create seamlessly experience.
Draft Proposal
Week 2
I choose the second idea, "Introduction and History of Traffic Sign". I started working on the content and art direction.
Some resources:
To have a more depth research on a specific area, I focused on traffic sign/road sign in Malaysia, with some additional foreign road sign.
Content:
Here come with 2 directions, should I recreate the same design as the existing traffic signs? Or I add some customization on them to standardize the overall aesthetic.
To solve this, I got an idea of making it a GIF animation while displaying the sign, which mean it will be animated sign with different styles in frames.
Animated sign will change within:
- Different country
- Different art style
- Vector
- Hand draw
- Dot / pure line
- Pixel
- Photo
Reference website: 3oo
For the website overall aesthetic, I have take Cargo.site as the main reference. It is text and image focused, with limited decoration elements.
I found the minimalist and brutalist artstyle really interesting (with a lil bit of experimental too). The typography driven layout catch my attention.
Cargo.site template
Cargo.site template
Week 3
After consulting with Mr Shamsul, here are some insufficient part:
- The approach so far is less thematic.
- The topic/theme doesn't apply on visual aesthetic, user experience and operation of the website.
I start thinking at where people usually see traffic signs. It's ROADS.
I come up with the idea of a storytelling site:
- User will experience different types of road incidents while learning about traffic signs.
- At each key incidents, user will encounter traffic sign, featuring introduction and explanations.
This is inspired by papercut roads puzzle and the following websites:
Papercut road puzzle
Storytelling website: Every Last Drop
Storytelling website: Is the Love Song Dying?
After drawing some sketches/wireframes, I test the Asset Wrap Tool in Adobe Animate.
Final Proposal_Thematic Interactive Website Proposal
FEEDBACK
Week 2
- Ideas 2 and 3 are interesting, feel free to explore.
Week 3
- The approach so far is less thematic.
- The topic/theme doesn't apply on visual aesthetic, user experience and operation of the website.
Week 4
- The current idea is okay.
- Use more specific words/terms for the proposal. E.g. doodle art style.
- Proceed to create the the prototype.
REFLECTIONS
Within this few week, I have explored the basic function of Adobe Animte. Since I have some basic understanding in frame by frame animation and After Effect, I think it is pretty handy, besides some of the shortcut keys are different.
The concept of thematic interactive website is interesting. Incoporating the product's concept and the basic mechanism of website would be a big challenge, which is the most interesting part as well.
Comments
Post a Comment