Advanced Interactive Design - Task 3: Final Project and E-portfolio

20/6/2024 - 7/8/2024
Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media
DST 60804 / Advanced Interactive Design
Task 3

Task 3: Final Project and E-portfolio


Adobe Animate Process

Once the Figma design is completed, I imported the assets into Adobe Animate and arranged the layers accordingly to create a seamless user experience. Here's an image of the Figma wireframes design from the previous task.


Fig 1.1 - Figma Wireframes Design 

Adobe Animate has plenty of features that aid with interactive website creation such as the tweening effects and its likeness compared to Adobe After Effects, making it easy to transition into using the software. Personally, I enjoyed the Code Snippets under Window > Code Snippets as it provides you with common scripting codes with easy instructions which streamlines the development process.

A general list of features & tools used in the creation of the website:
  • Hover pop-up effect on buttons
  • Linking buttons to external websites
  • Linking buttons to different pages
  • Tweening
  • Ease In/Ease Out effects
  • Adjusting Alpha effect (opacity)
  • Transform tool


Landing Page


Fig 2.1.1 - Landing Page


Fig 2.1.2 - Landing Page Timeline


Fig 2.1.3 - Landing Page Variations

The timeline arrangements for the rest of the landing page variations uses similar timeline structure of the first landing page. 



Pre-order Menu


Fig 2.2.1 - Pre-order Menu


Fig 2.2.2 - Pre-order Menu Timeline


Story Menu


Fig 2.3.1 - Story Menu (Introductory page)


Fig 2.3.2 - Story Menu Timeline


Fig 2.3.3 - Story Menu Variations


Characters Menu

Fig 2.4.1 - Characters Menu (Introductory page)


Fig 2.4.2 - Characters Menu Timeline


Fig 2.4.3 - Characters Menu Variations



Final Submission for Advanced Interactive Design





Fig 3.1 - Final Interactive Website Presentation


Fig 3.2 - Final Interactive Website Walkthrough


Reflection

As a first time experience using Adobe Animate, having prior After Effects knowledge does help with transitioning into the new workspace as they share similar aspects. One thing Adobe Animate has differently is the ability to do scripting, which is the backbone of website development in Adobe Animate. 

Using the software was not easy, as there were plenty of features and tools to learn and test, which took a while before I managed to get the hang of it. After multiple trial and errors, I figured out the technicalities and intricacies of the software and it was then when I can improve the production speed of my website. It was quite satisfying to see the animations play out in Adobe Animate as per what I envisioned using Figma. 

In conclusion, Adobe Animate is quite unique as its a software that bridges design and code to create interactive websites smoothly. With this newfound experience, I look forward to future website designs using this software and exploring the limits and potential that lies in interactive website design.

Comments

Post a Comment

Popular posts from this blog

Collaborative Design Practice - Task 1: Empathy Map & Problem Statement

25/09/2024 - 9/10/2024 | Week 1 - Week 3 Edwin Choo Quan Rong | 0348305 GCD62204 Collaborative Design Practice | Bachelor of Design (Hons) In Creative Media Task 1: Empathy Map & Problem Statement Instructions Task 1: Empathy Map & Problem Statement Week 1: Project Briefing & Group Formation (25/9) The first week of class with Ms Li Lian introduced us to the module of Collaborative Design Practice (CDP for short) by discussing about the contents and project goals we are taking this semester. Unlike any other modules that we have taken before, CDP provides us the opportunity to work with students from other departments of the campus, namely students from Business and Food Science majors. We as the Design students, were to form a team and select one project to collaborate on.  Introducing my design team members and their respective specializations: Arnusha Arnaz Khan (Group Leader) - Ent...
Read more

App Design II - Task 2: Interaction Design Planning & Prototyping

Image
 26/5/2025 - 9/6/2025 Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media DST 61004 / Application Design II Task 2 Task 2: Interaction Design Proposal and Planning Process Wireframes User Flowchart Diagram Animation Prototypes Animation Description & Rationale I utilized  Figma  to plan out the flowchart for the app. Here below is an overview of the flowchart as well as the animations used for the app. These animations were selected with simplicity, comfort, and ease of use in mind as people want to spend lesser time on simple information apps such as weather apps. Fig 1.1 - Flowchart Preview Fig 1.2 - Map Menu Flowchart Fig 2.0 - Video Presentation
Read more