ADVANCED INTERACTIVE DESIGN - TASK 2 Interaction Design Planning and Prototype

This week, we started creating simple animations to practice what we had learned so far. Before the practical session, Mr. Shamsul showed us several video examples demonstrating how proper animation should look and move. After that, we began working on short exercises, including a line animation that moved like a guitar string, a bouncing ball, and a shape transformation where a square smoothly changes into a circle. Through these exercises, I started to understand Adobe Animate more clearly and became more comfortable using its tools and timeline features.

Function+f5 : To add frames

Shift+function+ f5: Remove frames

Figure 2.1 Bouncing ball (15/10/2025)

Figure 2.2 The square that changes (15/10/2025)

Final class work

Figure 2.3 final class work (15/10/2025)

Figure 2.4 final class work (15/10/2025)

Figure 2.5 final class work (15/10/2025)

I also tried to do it with numbers.

Figure 2.6 final class work (15/10/2025)

Week 5

This week, we focused on creating and animating a symbol.

First, enable Object Drawing and draw your shape, then convert it into a Graphic symbol.

After that, double-click the symbol to enter Isolation Mode, where you will create the animation.

Go back to Scene 1, add a new layer with a Classic Motion Guide, and use the Pencil tool with Object Drawing turned on (set to Smooth).

Figure 2.7 Spider Animation / Week 5 (22/10/2025)

Attach your object to the guide using Snap, so it follows the path accurately.

Finally, enable Orient to Path in the Properties panel to make the spider rotate naturally as it moves along the guide.

Final class work

Figure 2.8 Final work Spider Animation / Week 5 (22/10/2025)

Week 6

This week, we were assigned to create a countdown animation from 10 to 0. Before achieving the final version, I attempted several times to animate the numbers properly.

Figure 2.9 Animation of numbers / Week 6 (29/10/2025)

Week 7

Mr Shamsul continued guiding us through the process of creating a welcome information page in Adobe Animate. He explained additional techniques, such as organising layers more effectively, setting up simple transitions, and preparing the layout so that the page looks clean and interactive.

Figure 2.10 Animation welcome / Week 7 (29/10/2025)

Final class work

Figure 2.11 Animation welcome / Week 7 (29/10/2025)

Week 7

This week, Mr. Shamsul introduced us to stopping the timeline in Adobe Animate using Function + F9. He also demonstrated how to turn an object into a Button symbol, where each state has a purpose:

Over – hover response

Down – click reaction

Hit – defines the clickable zone

Figure 2.12 Animation welcome / Week 7 (29/10/2025)

Once the button is pressed, it should disappear.Then we insert another keyframe and apply a classic tween with an ease-out effect.

We also create a blank keyframe on the actions layer and assign a frame label . Without giving the button an instance name, it won’t appear in the Actions Wizard.

Week 8

No class

TASK 2 : Interaction Design Planning and Prototype

Description
Students will start shaping the visual direction of their project while planning the interactive elements of their website. Since this task focuses on interactive design, the planning should include not only the layout but also examples or references of the intended animations. These can be created by the student or taken from existing sources to illustrate the interaction concept clearly.
Requirements
Prepare animation examples or references that demonstrate how the interactions will work.
Create a walkthrough video explaining the plan and showcasing the animation samples (compulsory).
Publish reflective online posts in the e-portfolio, including links to all tools and resources used (e.g., Figma, Miro).

Prototype Process

Ariana Grande Tour

Illustrations

I created a detailed illustration of Ariana Grande on my iPad using the Procreate app. I worked on the drawing step by step, experimenting with brushes, colours, and shading to capture her likeness and overall aesthetic. The process allowed me to explore digital illustration techniques and develop my drawing style further.

The Illustration Process

Figure 3.1 The process of illustration on an iPad/ Week 7 (29/10/2025)

To create the second poster, I was inspired by the style of Ariana Grande's “Eternal Sunshine" tour. I focused on conveying the vibrant theme of the tour, the color palette, and the overall mood, while keeping in line with the style of illustrations I had developed.

Figure 3.2 The process of illustration on an iPad/ Week 7 (29/10/2025)

Figure 3.3 The process of illustration on an iPad/ Week 7 (29/10/2025)

The finished illustration

Figure 3.4 The final illustration/ Week 7 (29/10/2025)

Figure 3.5 The final illustration/ Week 7 (29/10/2025)

After completing my illustrations in Procreate, I transferred them to Adobe Illustrator to create a new piece featuring Ariana Grande flying, inspired by her latest music video from the “Eternal Sunshine” album.

Figure 3.6 The process of illustration in Adobe Illustration/ Week 7 (29/10/2025)

I decided to animate my first illustration so that when users enter the website, they are greeted by Ariana Grande. Initially, she doesn’t look at the viewer, but then she notices them and winks.

Figure 3.7 Animation process/ Week 7 (29/10/2025)

In Procreate, I created multiple frames of the illustration to prepare for the animation, capturing the subtle changes in her expression and movement to make the interaction feel natural and engaging.

After completing the frame-by-frame animation in Procreate, I exported it as a GIF so that I could insert it into my website prototype. This allowed the illustration to become interactive and animated within the design, enhancing the user’s experience when they first visit the site.

Figure 3.8 Final animation GIF / Week 7 (29/10/2025)

Prototype

Moving on to the prototype, I imported my animated GIF and illustrations into the website design. This allowed me to position the interactive elements and visual assets, ensuring that the animations and layout work seamlessly together. In the prototype, users can experience the initial greeting animation of Ariana Grande, along with other planned interactive features, giving a clear preview of the final website.

Figure 3.9 Preloader Processing / Week 8 (29/10/2025)

For the Homepage, I decided to animate Ariana Grande flying across the screen, inspired by her “Eternal Sunshine” theme. To make the scene more dynamic and visually appealing, I added stars around her. The stars are animated as well, glowing brighter and moving slightly to create a harmonious and engaging atmosphere. This combination of character and environmental animation helps make the homepage more lively and immersive for users.

Figure 3.10 Home Page Processing / Week 8 (29/10/2025)

Next, I moved on to the Tour page, which shows the cities Ariana Grande will visit. I decided to create an animated globe that rotates, and as it turns, images of the specific cities appear in sequence. This interactive animation helps users visually understand the tour locations in an engaging and dynamic way, adding movement and interest to the page.

Figure 3.11 Old tour page / Week 8 (29/10/2025)

After receiving feedback from Mr. Shamsul, I realized that the original design didn’t align well with Ariana Grande’s branding and the tour’s aesthetic. He suggested keeping the animation concept but adapting it to a cosmic theme. This change allowed me to maintain the rotating globe idea while making the overall design more consistent with the artist’s style and the tour’s visual identity.

Figure 3.12 New tour page / Week 8 (29/10/2025)

I revised the design and incorporated the illustration of the planets I had created in Procreate. I used each planet to represent different countries, animating them to rotate around Ariana Grande, in a style that fits her “Eternal Sunshine” album theme. I could see that this new approach greatly improved the page, making it more visually appealing and cohesive compared to the original design.

After presenting the updated design to Mr. Shamsul, he commented that it looked much better and expressed that he liked the improvements. This feedback confirmed that the revisions aligned well with the intended style and concept of the project.

Figure 3.13 Old album page / Week 8 (29/10/2025)

Additionally, I revised the section of the website that displays all of Ariana Grande’s albums in different styles. Mr. Shamsul also suggested updating this part to better match the overall design and maintain consistency with the theme of the site.

Figure 3.14 New album page / Week 8 (29/10/2025)

The updated design was well-received by Mr. Shamsul. His feedback helped me understand which areas needed improvement and guided me in refining the website to achieve a more cohesive and engaging result.

Walkthrough Video

Final Outcome

Figure 3.15 Final Prototype / Week 8 (29/10/2025)

FEEDBACK

Week 6

General feedback

In Week 6 the instructor reminded us to create our prototypes. This feedback helped me focus on developing my prototype for Task 2. I have started working on it and will continue refining it, using Microsoft Teams to ask questions if needed. This guidance reinforced the importance of hands-on prototyping and seeking support when necessary.

Week 7

Specific Feedback:

The instructor liked the beginning of my project but suggested improving the Homepage and continuing the same approach on the following pages.

General Feedback:

I was reminded to focus on alignment, visual hierarchy, and layout, ensuring the design is clear, not overcrowded, and contains the main information.

Week 8:

There was no lesson this week.

Week 9

Specific Feedback :

Mr. Shamsul advised that the Homepage, Tour page, and Album page need to be revised, as they do not match Ariana Grande's style. He encouraged me to continue refining these pages while keeping the overall design consistent.

General Feedback :

During this week, I learned how to use Adobe Animate. The instructor emphasized that I should not follow the instructions exactly but instead apply the techniques creatively to my final project. This guidance helped me understand how to adapt new tools to fit my own design vision.

REFLECTIONS

Experience
In this project, I focused on creating a consistent visual and interactive style for a website based on Ariana Grande’s aesthetic. Designing the Homepage, Tour page, and Album page required careful consideration of layout, colour schemes, typography, and imagery to maintain brand consistency. Developing the prototype in Adobe Animate allowed me to explore interactive elements, such as transitions and clickable components, while adapting techniques creatively rather than following tutorials exactly. Managing multiple pages, animations, and user interactions helped me improve my planning, organisation, and time management skills, as each adjustment often affected the overall flow of the project.
Observations
Throughout the process, I noticed that alignment, spacing, and visual hierarchy are crucial for a polished look. Pages initially did not match Ariana Grande’s style, especially the Homepage, Tour, and Album pages, which required multiple revisions to achieve coherence. I also observed that interactive elements must be intuitive and consistent, otherwise the user experience feels confusing. Using references from Ariana Grande’s visual branding helped me maintain the correct mood, colour balance, and composition. Additionally, setting up animations in Adobe Animate revealed the importance of balancing complexity and clarity to avoid cluttered screens.
Findings
I found that achieving a cohesive design requires iterative refinement and constant attention to detail. Revising pages based on feedback improved both the visual style and usability. Planning interactions in advance and applying design principles intentionally led to smoother transitions and a more engaging user experience. I also learned that applying technical tools creatively, rather than copying instructions, enhances the originality and effectiveness of a prototype. Finally, clear organisation, consistent visuals, and structured experimentation significantly contributed to producing a final project that aligns with both the brand style and interactive design principles.

Search This Blog

Aidina Begimbaeva (0380489)