ADVANCED INTERACTIVE DESIGN - TASK 2: INTERACTIVE DESIGN PLANNING & PROTOTYPE

on
15/10/2024 - 17/11/2024 (Week 4 - Week 8)
Lee Wing Kie / 0364251
Advanced Interactive Design/ Bachelor of Design (Hons) in Creative Media
Task 2: Interactive Design Planning & Prototype


INSTRUCTION

Task 2 - Interactive Design Planning and Prototype

Students need to develop both the visual design and the interactive elements of their website. Unlike a static site, an interactive design requires planning for animations. This includes creating layout visuals as well as providing examples or references for animations. Students can either build their own animations or use existing ones as references to illustrate their intended design concept.

Loading Page Animation


I decided to use a can illustration to represent the real can cake on the loading page, with the brand name text below it. I applied auto-filling animation inside the text. The can will jump onto the screen and open with the animated text during the loading phase, leading to the Home Screen.

Home Page Animation


Text bold with a linear animation.


For the cake photo and layers, I introduced the ingredients, photo or tasting notes of the can cake. When the user clicks or hovers over the area, a graphic illustration of the notes will appear.


Product Page Animation


For the Product page, I decided to keep the design as simple as possible. Users can view all the product flavors on the same page at once. If they’re interested in a particular flavor, they can simply hover over the category or picture of that flavor. This will trigger an animation that changes the photo to show each layer of the cake.

About Us Page
For the About Us page, since it’s focused on providing information, I decided not to include animations to keep it user-friendly. This way users who are interested in reading the content won’t be distracted.

Contact Us Page

For the Contact Us page, the focus is on providing information and connecting users with the brand on social media. This page is designed for users to click buttons that link to places like social media, contact and email. To keep it user-friendly and simple I decided not to add animations, only a color change on hover for the buttons.

FINAL SUBMISSION
Figma

Prototype Walkthrough Video

REFLECTION

This task was challenging for me at first, as I didn’t have any ideas for the animation. I wanted the website to feel simple and clean, so I tried to limit the use of animations. However, I believe these challenges have been beneficial, pushing me to improve my work. In the next stage, I’ll start using Adobe Animate, which I’m not very familiar with, to turn my prototype into a fully interactive webpage. I’m looking forward to it, despite the challenges. To prepare, I’ll focus on improving my Adobe Animate skills, and if there’s anything I don’t understand, I’ll ask the lecturer in class. I hope everything goes smoothly for my final task.

Comments

Post a Comment