Advanced Interactive Design: Task 2

12/11/2024

ALTAIFI, LEEN MAAN A (0367698)

Bachelor of Design (Hons) in Creative Media, Taylor's University

Advanced Interactive Design

---

Table of Content

1. Lectures

2. Instructions & Tasks

        - Task 2 Submissions

3. Feedback

4. Reflections

---

1. Lectures

Week 8 (12/12/2024):

Independent Learning Week.

---

2. Instructions & Tasks

Module Information Booklet

Task 2: Design Planning and Prototyping

I first wanted to animate 'EL ALT' logo which is the website logo based on my initials. I used what I learned in adobe animate, using layers and shape tween, to animate the Logo.

Fig.2.10: 'EL ALT' Logo Animation

Fig.2.9: Animating Loading Page Logo

Then I wanted to add more to it by adding the main figure of the landing page illustration, the floating woman. It transitions in the same way the logo does, then it zooms out and shows the full illustration as it loses transparency.

Fig.2.12: Loading Page Animation pt.1

Fig.2.11: Animating Loading Page on Adobe Animate

After the illustration is revealed, I wanted to show animated movement in the illustration itself, so I created some movement using after effects and combined it with the loading page animation. The video on the right below shows the logo loading screen transitioning to the animated illustration.

Fig.2.13: Animating Illustration on After Effects

Now that I've settled how the design looks like, I added the page sections in the navigation bar and the main header of the landing page over the animated illustration background. The video on the right below combines all of the landing page progress so far.

Fig.2.13: Adding Page Sections
in Adobe Animate

Then, I roughly animated how I want my buttons to behave when it is hovered. For example, the 'Buy Print' button, when it is hovered, the circle extrudes from the button and an arrow appears.

Fig.2.13: Animating Button
in Adobe Animate

Fig.2.13: Button Hover Animation

Simultaneously, I've been working on the prototype and figuring out what type of transitions and animations I want to achieve for each section.

Fig.2.8: Prototyping Progress 1

Fig.2.8: Prototyping Progress 2

Prototype Video

Embedded Prototype

Prototype Link

Task 2 Presentation Slides Submission

Adv Int Design: Task 2 by ALTAIFI, LEEN MAAN A

Task 2 Presentation Walkthrough Video Submission

Presentation Youtube Link

 

---

3. Feedback

No specific feedback given by the lecturer, but he advised me not to use too many videos in case the file gets large. Other than that, he told me to proceed.

---

4. Reflections

Working with adobe animate was a pretty fun experience because I am a bit familiar with key frame animation using other software, but learning animate was quite fun and challenging. On top of the fact that the topic I chose was my personal art portfolio so it was like combining my hobby and work together.