Advanced Interactive Design: Task 2_Interaction Design Planning and Prototype
22 April 2025- 13 May 2025
CHONG CHENG TAO (0371072)
Advanced Interactive | Bachelor of Design in Creative Media | Taylor's
University
Task 2: Interaction Design Planning and Prototype
List
LECTURES
Week 5
Edit Symbol (Ctrl + E)
- Edit symbol in Library.
- Keyframe can be added to the graphics.
Edit symbol
Masking
- Two layers, clipped content and mask.
- Use Shape Tween to animate mask size.
Mask
Masking exercise
Week 6 & Week 7
Movie Clip
- Movie clip does not require specific number of frames on the main timeline to work.
- Movie clip has a nested timeline inside the main timeline.
Make a Button
- Using graphics to do aniamtion for button.
- To stop the animation, adding a new Action layer > Add using Wizard > Stop > This Timeline > Next > With this frame
Stop
- To add click activity, name the instance name of the button, go to Action layer > Add using Wizard > Go to frame label and Play > This Timeline > change label name > With mouse click
Go to frame label and Play
- Edit in Place to edit the button.
Edit button
.gif)
Button
After understanding the logic of button and the codes, the execution is quite straightforwards. I did an exercise on the navigation using the button.
Timeline
Actions codes
.gif)
Exercise: Navigation using Button
INSTRUCTIONS
This is the Module Information Booklet for this module:
TASK 2: (DEADLINE: WEEK 8)
Week 4
The previous idea was approved by Mr. Shamsul. Thus, I start working on the prototype.
Firstly, since the website is graphic based, I need to decide the tools & software to create the graphics. I try out Adobe Illustrator with the Retro Brushes, which I think its pretty handy.
Random graphic using Retro Brushes
Later, I try to use the new Figma features, Drawing Mode. I found this method is more handy and simple, and most importantly the it's not as heavy as Illutrator
https://land-book.com/websites/42301-humankind
Week 5
This week, I have started to create a low fidelity design and also the prototype.
Wireframes
Following is the wireframe/sketches.
Wireframes
Sign Illustration
I illustrated the signs using Figma, I try to keep the "doodle" feeling by making the lines jitter.
Sign illustration
Sign illustration
Sign illustration
Sign illustration
Doodle Style
To further capture the doodle aesthetic, I use Dynamic Stroke to adjust the frequency, wiggle and smoothen of the lines.
Dynamic Stroke
Doodle lines
Navigation elements
Chevron Sign and U-Turn sign are main naviagtion elements in the prototype.
- Chevron sign: Next (left and right)
- U-Turn: Return to homepage
Navigation elements
Animation & Reference
To make some light animation, I use Prototype: After Delay, by connecting variants with different stroke weight.
This is inspirated by this reference, frame by frame loop aniamtion fits the aesthetic of a doodle style website.
For transition and onboarding animation, I take reference from https://electrafilmworks.com/, with smooth color slides and logo swapping animation.
Week 6 & Week 7
Prototype
I made the first 3 pages to set up the art direction for the website.
Homepages
Later, I make the main journey page.
In the journey, user will experience different road incidents, simultaneously learn the respective sign. User can click on the sign to see a pop out card with details explaination about the sign.
4 Signs page reveal 4 main types of traffic sign:
- Regulatory Signs
- Warning Signs
- Information Signs
- Construction Signs
4 Signs
Each card will navigate to individual page for the signs.
Regulatory Sign page
Evolution page stated the 4 different periods of traffic sign in Malaysia history.
- Ancient Road Markers
- Early Automotive Signs
- National Standardization Era
- International Standardization
Evolution page
Ancient Road Markers
Final Prototype (Figma)
Final Prototype
Presentation Video
Presentation Video
Comments
Post a Comment