Labels

ADVANCED INTERACTIVE DESIGN｜Interactive Web Application

 -

Feng weijie | 0349058

Advanced Interactive Design | B' in Creative Media

03.04.2023 -28.6.2023 (Week 14 -Week 1)

Interactive Web Application






Advanced Interactive Design Project 2 # Interactive Web Application

Operating instructions
 
Students need to create a (prototype) interactive application for the online store. For example, an online booking system for a movie/football match, a restaurant reservation system with an online menu, or a pizza ordering system. Students only need to develop front-end interactions, UI design, scripts, and animations. No back-end programming is required because it's just a prototype. An interactive application can communicate the purpose and objectives of the website to the audience. Users should be able to navigate and use the application without any difficulty.

Thematic Interactive Application Screen Design Prototype

An interactive application is an application that allows users to interact
with audiovisual information via an effective screen design layout.


Proposal Idea

Why Choose Bubble Milk Tea?

The reason I chose to create a website related to bubble tea is because I'm a bubble tea enthusiast myself, and I also make my own bubble tea. My passion and love for bubble tea have driven me to put the concept of this bubble tea brand into action. As a bubble tea lover, I understand the bubble tea culture and flavor, and I want to share this passion with more people, allowing them to enjoy the deliciousness of bubble tea. My experience and love for bubble tea will be the inspiration for this website, and I look forward to sharing my creativity and unique recipes with fellow bubble tea enthusiasts.


Objective

I plan to develop a web application that will emulate the official website of a virtual milk tea brand. In this virtual bubble tea website, users can browse the bubble tea merchandise store, browse a variety of bubble tea products, view detailed information, and select their favorite products in the shopping cart. In addition, users can also play with milk tea filters and apply them to their own photos to feel the unique charm of virtual milk tea. Let users better understand the inheritance and innovation of virtual milk tea brands. This project will provide a unique and fun experience for milk tea lovers, and you are welcome to contact us at any time for more information.

Wireframe


I have created a basic wireframe that outlines the pages I want to design and focus on. The navigation buttons will be divided into four sections, with each button guiding users to their respective pages, allowing them to easily navigate the website and explore the content that interests them.

About

This page aims to provide comprehensive information about Meowbobo, allowing visitors to delve into various aspects of the brand.

Menu:

Here, users can explore and delve into the latest product information from Meowbobo, understanding various details about the products.

Home:

This serves as a showcase for the brand's milk tea products, featuring the mascot of the Meowbobo brand, providing users with a holistic brand experience.

Download:

Through this feature, users can personally experience the augmented reality (AR) effects of the Meowbobo brand, offering them a more immersive brand interaction.


Brand Image Design

I would like to create an image closely associated with the brand — envisioning a cute little black cat. The idea is to keep it simple, not overly complex, and easy to animate. Haha!



Figure 1.0 Brand image design

I made some changes to the login loading animation, and now it features the brand's adorable mascot personally welcoming users.



Figure 1.1 Intro animation

To maintain this style, I have seamlessly integrated interactions with the brand's image throughout the subsequent pages—ensuring thematic consistency and cohesion.


Figure 1.2 Web design



Figma 



Animate CC Progress

An attempt to load an animation

"I'm thinking of a cat slowly walking in from a distance, then greeting warmly~"


Figure 1.3 Load the animation process



And then, I started designing the animation for the second page, depicting a cute little cat wagging its tail and squinting its eyes. At this point, my cat animation was complete, and I proceeded to add text. 



Figure 1.4 Load the animation process

Finally, after loading the entire introduction, the end product looks like this.

Figure 1.5 Load the animation process


In addition, I added animated effects to the buttons, causing the text to change color upon interacting with the buttons. Furthermore, I wrote interactive code for transitioning to the second page, allowing users to click the button to navigate between pages.


Figure 1.6 Code diagrams



Figure 1.7 Interaction button animation


Regarding the interactive design of the homepage, I envision the cat gradually wandering to the edge of the screen, accompanied by the start of background music. To make the overall theme more engaging, I incorporated a small detail into the loading animation: when users click on the cat, it triggers a "meow" sound, providing interactive enjoyment for the users.


Figure 1.8 Code diagrams


Figure 1.9 Home page process diagram


Click on the results that appear after the page is redirected.

Figure 2.0 Home page process diagram

Regarding the animation design for the navigation, I aim to incorporate a hover effect.

Figure 2.1 Hover effect

In most scenarios, I create simple animations where, upon clicking a button, it will appear on the screen.

Figure 2.2 Folder arrangement.


Deploy to Netlify



Figure 2.3 Index.html file and fla file from animate cc

Figure 2.4 Deploy to Netflity


link to: https://meowbobo.netlify.app/

Meowbobo website demo video





FINAL VIDEO PRESENTATION - MEOW BOBO MIKE TEA




reflection

Finally, I've reached the end of this semester, successfully completing the last task and putting a delightful period into the entire term. Through online instructional videos, I've acquired skills in adding more interactive animations. However, the constraints of time presented some challenges to my performance. With more time, I believe I could have done even better. The process of using Animate CC was indeed challenging, but I persevered and consulted numerous tutorials to overcome issues. The experiences of dealing with glitches during code edits were frustrating at times but also made me more attentive to details. I take pride in the hardships of this project, as I managed to overcome various obstacles and solve problems that arose. This journey not only imparted valuable skills but also deepened my understanding of the importance of perseverance and the necessity of swiftly completing tasks.




















Labels:

Comments

Post a Comment