Advanced Interactive Design | Task 2: Interaction Design Planning & Prototype
21 Oct 2025
- 11 Nov 2025
(Week 5-8)
Justin
Cleon
(0375523)
Advanced
Interactive
Design | Task 2:
Interaction Design
Planning &
Prototype
Table
of
Contects
1. Instructions
Students are required to work on their visual design and start planning
their website's interactive design elements and features. Unlike
traditional static websites, when it comes to interactive design where
animations are present, the plan should not only include the layout
visuals but also the animation examples or references. 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. (Compulsory)
• Online posts in your E-portfolio as your reflective
studies with links to any resources involved in the
creation of the plan. (i.e.: Figma link, Miro link, etc.)
2. Lectures
Lecture : Bouncing Ball & Spider Practice
Mr. Shamsul introduced us to the "12 principles of Animation". Then, we created a simple animation of bouncing balls and spiders in Adobe Animate using keyframes.
.png)
Figure 2.1 Bouncing Ball Practice (Progress)
Figure 2.2 Bouncing Ball Practice
We were instructed to draw a spider and to animate the legs and eyes. This is the result of my experiment.
.png)
Figure 2.3 Spider Practice (Progress)
Figure 2.2 Spider Practice
3. Task 2: Interaction Design Planning & Prototype
Check the prototype on Figma here: https://bit.ly/CleonergyFigma
Google Drive:
I created the layout for my website based on my proposal. However, my design layout on proposal is not good and user-friendly. I started from Task 2: Interaction Design Planning & Prototype. I did not follow it and changed to a better design for my website and it ended up with the perfect design as I wanted it.
Here is the layout I made on Figma:
Figure 3.1 Figma
Home Page
The homepage I designed looks better than previous ones. The "Garet" font I used the most in my prototype because it is versatile and readable. It offers a modern aesthetic and works well across different platforms.
For interactive elements, I made hovering on the navigation bar. Later, I will create animations for the wind turbines and some moving clouds.
.png)
Figure 3.2 Home Page (Figma)
Types Page
On the types page, I will discuss the types of renewable energy and will also make animations such as solar panels.
.png)
Figure 3.3 Types Page (Figma)
Benefits Page
On the benefits page, I will create something that can pop-out when clicked so that when the user clicks on something, the information will come out, when they click again it will disappear.
.png)
Figure 3.4 Benefits Page (Figma)
Why Renewables Page
For the why renewables page, I will discuss why renewable energy is important with a design that will be attractive, user-friendly and easy to understand.
.png)
Figure 3.5 Why Renewables Page (Figma)
About Page
On the about page, I will discuss what renewable energy is with a user-friendly and easy-to-understand design.
.png)
Figure 3.6 About Page (Figma)
4. Feedback
No feedback are given for this task.
5. Reflection
As usual, Figma would not be as overwhelming as other Adobe Creative Cloud apps, so people can learned it in a very short time. The process went much better than I expected, resulting in a smooth prototyping process and almost exactly what I wanted!
Comments
Post a Comment