Wong Kai Yi (0340236)

Advanced Interactive Design 11.11.2021 - 02.12.2020  (Week 12 - Week 15) Wong Kai Yi (0340236) Advanced Interactive Design Final Project 1. LECTURE Week 12  (11.11.2021) Final project briefing  The final project consists of the use of Adobe Animate and Spark AR to make a Website and Filter for a campaign (can include selling products). The website is to promote the campaign and the filter (download app) Signifier to let users know that they can click it: when hover over; drop shadow, dot, underline, glow (with pulse), outline around the button What if it is too busy? It creates a cognitive load Layout design: everything is in grids, properly aligned Spacing to categorize 3-5 font size minimum 3 colors: background, foreground, accent most important content > element Content organization: grouping (through spacing) more important: more spacing  W rule for button: 2 Ws left right, 1 W up down (use the same font used in the button) 2. INSTRUCTIONS F...

Advanced Interactive Design 07.10.2021 - 04.11.2021  (Week 7 - Week 10) Wong Kai Yi (0340236) Advanced Interactive Design Exercises 1. LECTURE Spark AR  1. Brand experience 2. User experience 3D object and face mask. For 3D effects like glasses, use face decoration.  Here are 2 examples I did for tutorials: Example 1 Example 2 Example 2 was a failure because I used face mesh instead of face decoration. Additionally, Mr Razif also showed us how to use particle emitter, UI picker etc. 2. INSTRUCTIONS Project 2 Idea Business: Travel agency / airline  Sketch There will be three filters: Beachside, snorkeling, Paris 1. Beachside Sunglasses Interaction: open mouth, coconut water / a drink will appear Background: beach Additional: Color correction 2. Snorkeling Snorkeling set: mask and mouthpiece Interaction: open mouth, seahorse / fish swim by Background: underwater Additional: Color correction (bluish) 3. Paris On the head Heart or beret (artist hat)...

Advanced Interactive Design 26.08.2020 - 14.10.2020  (Week 1 - Week 8) Wong Kai Yi (0340236) Advanced Interactive Design Project 1 1. LECTURE Week 1 - Week 8 Mr Razif did a brief on the MIB, we have 3 projects to work on.  Senior blog reference: Joe Piyaphon Project 1 (App for a business) Wireframe: determining the content (what needs to be there), separate design and wireframe Detailed wireframe e.g. image icon in the box etc E-commerce Example: restaurant, online shop, clothes store Requirements:  buy, payment pop ups in a page to give more confirmation (complete experience) order status Ideas, flowchart, wireframe Using Adobe Animate to make app animations: Move / fade: Create classic tween  Fade in or out: alpha value 0%, 100% Nested animation (animation in movie clip) Ease in, ease out for better transition effects Use scripting for buttons,  stop the animation from looping / continuing: this.stop buttons navigate to  somewhere in the nested ani...