Advanced Interactive Design / Task 2 - Interaction Design Planning and Prototype

on
22 / 10 / 2024 —  10 / 11 / 2024 (Week 05 — Week 07)

Kim Seoyoon / 0357755

DST 60804 / Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 2 / Interaction Design Planning and Prototype 

TABLE OF CONTENT

TUTORIAL / PRACTICAL 

INSTRUCTIONS

TASK 2  

FEEDBACK

TUTORIAL / PRACTICAL

WEEK 5– Masking Animation

In week 5, Mr Shamsul taught us how to create a text animation using the masking tool and shape tween.

When masking an element on Adobe Animate, the number of frames should be the same.
Use the same ease effect on the same animated elements so that the animation looks consistent 
  • Fn F5 for insert layer
  • Fn Shift F5 for removing a layer
Fig 1.1 Text animation on Adobe Animate, Week 5 (22/10/2024)

WEEK 6– Adding Buttons to Animation

In week 6, we proceeded to animate the text animation we created in week 5 and applied a button tool to the text elements using the classic tween and action tools.

Fig 1.2 Text animation on Adobe Animate, Week 6 (29/10/2024)

WEEK 7– Button Animation 2 

In week 7, we continued to animate further on the button animation we did in the previous week.

Week 7 Outcome: http://127.0.0.1:8090/ADINTD%20W5.html?30178273

Fig 1.3 Week 7 Exercise, Week 7 (5/11/2024)

Lecture Notes
  • In order to apply classic tween, the object needs to be converted as a graphic. 
  • When converting a graphic to a button, add another keyframe before converting.
  • Graphic and button from the same element are linked (If you change the colour of graphic, button colour also changes)
  • Use cmd B to break apart the keyframe
  • Insert skip button if the intro animation is too long.
  • Add a blank keyframe after a keyframe that has ended to avoid the element staying there when it's not supposed to be.

INSTRUCTIONS

Module Information Booklet

Task 2 – Interaction Design Planning and Prototype 
Timeframe: Week 5 – Week 7

Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.

Requirements:
  • Walkthrough Video presenting the plan and showing the animation examples and/or references.
  • Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)

TASK 2 

After proposing my idea, we were instructed to further create slides on the planning and prototype of our thematic interactive website. This included creating detailed wireframes with clear layouts, showing visual examples of gif animations for each page, and a walkthrough presentation video explaining each stage. Below is my proposal presentation from Task 1 (Proposal). 

Fig 2.1 Task 1 Proposal Slides, Week 4 (15/10/2024)

Based on my proposal, I began creating the outlines of my plans and prototype:
  • Art Direction (Background images/ Icons & elements/ Typefaces/ Colour Scheme)
  • Loading Page (GIF animation examples, wireframe layout)
  • Home (Starting Page) (Wireframe layout/ Video etc)
  • 'The House' Page (Page that features the three chapters/ buttons leading to smaller pages) 
  • Chapters I, II, and III (Colour Palette, layouts)
  • Flowchart & Wireframes
I used Figma to create wireframes for the website. I also used Adobe Photoshop to edit some assets needed for the wireframes. 

Fig 2.2 Wireframes, Week 7 (5/11/2024)

Fig 2.3 Editing Assets on Ps, Week 7 (5/11/2024)


Final Submission


FEEDBACK

Week 6
  • Make sure each colour palette in the chapters links to the next chapter smoothly (i.e. adding gradient colour for the following chapter to the current chapter's background).
  • Window as elements could easily be hard to spot as a button tool, ensure the buttons stand out from the background itself. 

Week 7
  • Show the completed main page design with animations after ILW. 
  • Build components and assets (Ui). Use the same dimension as Animate File size when creating the elements on Adobe Illustrator.

Comments

Post a Comment