Advanced Interactive Design - Task 2 Interaction Design Planning and Prototype
Bachelor of Design (Honours) in Creative Media
Liang Lina 0347076
Advanced Interactive Design - Task 2
INSTRUCTIONS
Lecture & Activities：
Week 5:
This week we learned how to draw symbols.
First, we need to use object drawing to create the desired shapes, and
then convert them into symbols.
Then right-click and double-click to enter the isolation mode (my
understanding is that this is another layer of action, involving the
movement of the spider's legs)
Return to the previous level and create a classic motion reference layer
(draw freely using the pencil)
Attach the spider to the beginning and the end of the thread.
Select "Along Path Direction", and then the spider will move along the
route you have drawn with your pencil. (At the same time, the legs of the
spider are also moving.)
Week 6:
In the week 6, Mr. Shamsul assigned us a task where we were required to
create a countdown animation from the number 10 down to 0.
Week 7:
This week, Mr. Shamsul taught us a rather complex and troublesome operation. He demonstrated it carefully several times during the class. How to stop the timeline in Adobe Animate. (Use the shortcut key + F9)
This week, Mr. Shamsul taught us a rather complex and troublesome operation. He demonstrated it carefully several times during the class. How to stop the timeline in Adobe Animate. (Use the shortcut key + F9)
At the same time, we continue to carry out the operations on the
welcome interface that we started last week.
First, we need to convert "enter" into a symbol, create a new button,
and give it a name.
We need to achieve the effect as demonstrated by Mr. Shamsul, that is,
to create a hover effect. When I click on the "enter" area with the
mouse, the animation will be triggered.
Then, Mr. Shamsul moved on to the next step. When you click the
button, the button needs to disappear. So we need to add a new
keyframe. We will copy the previous one and convert it into a
graphic. Change the graphic from looping playback to single-frame
playback. Add a keyframe, and add a classic tween animation with
fade-out effect and quadrilateral transition.
Add a blank keyframe to the action layer and add a label name. The
label name is "Home". (Properties > Frames > Label Name)
If the instance name is not added (below the button), it will not be
displayed when performing the operation (using the wizard to perform
the operation).
Also, within the "actions" section, we can add JavaScript code? This
will make our later web page production more convenient and efficient.
Task 2：Interaction Design Planning and Prototype
Description
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:
Requirements:
- Walkthrough Video presenting the plan and showing the animation examples and/or references. (Compulsary)
- 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.)
Week 5 - Week 8
Prototype section：
Website Structure and Navigation：
The website follows this path: Loading Page → Landing Page → Home
→ About → Journey → Recipes → Contact
1.Loading page
Initially, I designed several versions for this page, but in the end,
I chose the version where the egg falls and opens, revealing a baby
chicken. This version better aligns with my theme.
2. Landing page
After the loading page shows the baby chicken, the next screen is
switched to, and then a small animation is performed. The baby chicken
drops out of the bag, and the previous broken egg baby chicken
appears. Then, clicking on the baby chicken will make it larger. When
the mouse hovers over the baby chicken, it will also become larger.
3.Home Page
Regarding the home page, I hope to convey certain ideas, such as that
the Qingyuan chicken lives in a beautiful and scenic location. First,
watch a simple animation, then proceed to the next step. Click the
button in the middle or the navigation bar at the top to move to the
next page.
4.About Page:
This page is about the introduction of Qingyuan chicken. Therefore,
it is made relatively simply, mainly aiming to draw people's
attention to the content. The interaction effect is just a simple
click to enlarge.
5. Journey Page
Regarding this page, I agree that it is important for people to learn
and understand the growth process of the Qingyuan chicken, as this is
very famous throughout China. The Qingyuan chicken is from
Guangdong Province in China, and here there is a saying: No
Qingyuan chicken can survive and leave Guangdong.
6.Recipes Page:
Here, I don't have the ability to provide detailed instructions on how
to specifically cook a particular dish. Therefore, I have listed the
four most classic ways of cooking qingyuan chicken, and attached links
on the buttons to facilitate people clicking on them to browse external
YouTube videos for learning how to cook.
7.Contact Page:
This page was originally intended to provide links for selling Qingyuan
chicken and a place for consumers to contact the merchants. This would
have been a good feature for a relatively complete small website.
However, since I couldn't find a particularly good online seller, this
page instead redirected to an external YouTube video introducing
Qingyuan chicken.
Final Outcome Task 2：Interaction Design Planning and Prototype
Final figma submission:
REFLECTION
Experience:
While developing the website structure and navigation, I experienced a continuous process of trial, adjustment, and decision-making. Designing the overall flow from the loading page to the contact page required careful planning, as each page needed to connect logically while maintaining visual and interactive consistency. I spent a considerable amount of time experimenting with different versions of certain pages, especially the loading page, before selecting the final design that best matched the theme of Qingyuan chicken.
Throughout the process, I also had to consider how users would interact with each page. Some pages focused more on storytelling through animation, while others emphasized content clarity and simplicity. Balancing interaction, animation, and usability was challenging, particularly given my technical limitations and the complexity of implementing interactions in Adobe Animate.
Observations:
During the design and implementation of the website navigation, I observed that a clear and linear structure greatly helps users understand the website’s narrative. The step-by-step progression—from the loading page to the landing page and then to the content pages—allowed the story of Qingyuan chicken to unfold gradually. Pages with heavier animation, such as the loading and landing pages, were more engaging, but they also required more development time and testing.
I also noticed that simpler interactions were more effective for content-focused pages like the About and Journey pages. Overly complex animations were not necessary to communicate information and could even distract users. In contrast, interactive elements such as hover-to-enlarge effects worked well on visually driven pages like the landing page and home page, helping to guide user attention without overwhelming them.
Findings:
From this project, I learned that website structure and navigation play a crucial role in shaping user experience. A well-defined path helps users move through the website intuitively and reduces confusion, especially in animation-heavy designs. I also realized that not every page needs complex interactions; choosing appropriate levels of animation based on content purpose leads to a more balanced and effective design.
Additionally, this project helped me understand the importance of flexibility during the design process. Some original ideas, such as the contact page functioning as a sales and communication platform, had to be adjusted due to practical limitations. Despite these compromises, the final structure still supports the overall theme and narrative of the website. This experience strengthened my ability to evaluate design decisions critically and adapt my ideas based on technical feasibility and user experience considerations.
Comments
Post a Comment