Advanced Interactive Design - Interactive Web Application
Week 1-Week 14
Tan Pei Yun / 0345386
Advanced Interactive Design/Bachelor of Design in Creative Media
Interactive Web Application
Project 2 - Task 2 : Interactive Web application
Thematic Interactive Application Screen Design Prototype
An interactive application is an application that allows users to interact
with audiovisual information via effective screen design layout.
An interactive application is an application that allows users to interact
with audiovisual information via effective screen design layout.
//Progress
Proposal Idea
Why Choose New Jeans ?
New Jeans x PowerPuff girls
I decided to centered my project around New Jeans, a K-pop girl group that I truly admire recently. Whenever I have the freedom to choose a topic, I always opt for something that brings joy and avoids unnecessary stress, so naturally, I picked the recent girl group I love. Their aesthetic and music have captured my heart, making it the perfect focus for this project ! Where I plan to do a that considered a Fansite merchandise shop. It combines elements of a Fansite, where fans can access information, join the Fanclub, and engage in fan-centric activities, with an online merchandise store, providing a platform for fans to purchase official New Jeans merchandise.
Objective
The web application serves as a combining both fansite and merchandise shop where fans able to support and purchase New Jeans products , Also the website acts as an information hub for fans and visitors who want to get to know and more about New Jeans. Additionally act as a promotional tool for New Jeans, helping to increase their visibility and exposure.
Inspiration
 | ||
Scroll scroll pinterest time
|
 |
| Inspiration : the home page design |
 |
| Inspiration : the home page design |
 | ||
Official NewJeans Website
|
Official Website and Fansite Link :
I observed that the official website of New Jeans usually adopts a simple and minimalist design, while fansites tend to use colorful themes, which I also find appealing. As I explored the content within fansites, I noticed their primary goal is to introduce people to New Jeans. This inspired me to combine both approaches and create something unique – a New Jeans fansite merchandise shop.
Wireframe
I have done a basic wireframe, outlining the pages I want to design and focus on. The navigation buttons will be divided into four sections, each navigation button will lead to its respective page, allowing users to easily navigate through the website and explore the content they are interested in.
About
This page will provide information about New Jeans, giving visitors an insight into the group.
Song
Here, fans can explore and know about New Jeans' latest songs info immersing themselves in their captivating music.
Bunny
This section will be dedicated to inviting fans to join the New Jeans fanclub, becoming part of the Bunny community.
Shop
The merchandise page will showcase and offer New Jeans album for fans to purchase and show their support.
Figma
|
| Figma Progress |
After the wireframe , here I began doing the screen design with using Figma, the theme is mostly into pastel blue and pink that is inspired from NewJeans new song that collab with Powerpuff girl. New Jeans embraces the Y2K trend, which is evident in their album and overall style. Their concept consistently revolves around Y2K, also known as New-tro. This style has gained popularity recently, and New Jeans effortlessly brings a plain yet kitschy high-teen look to life with their fashion choices.
Just incase if not sure about y2k style :
 |
| Y2K aesthetic |
Hence, to experiment with this style, I opted to avoid an overly aesthetic approach. Instead, I aimed for an "New-retro" look while retaining the pastel colours and incorporating NewJeans elements that I obtained from their official website.
 |
| First Design of NewJeans |
At first the idea is to more focus onto to shop , however , I find it hard to do as I do not know how it will be works into Animate CC , when I started my first ever scene in Animate CC is was hard to animate and to make it interactive, therefore I have to rethink it and shorten it down the flow and make it easier
 |
| Finalise the design |
While finalise and redesign the design , I try to search for tutorials for relevant tutorials that able to works , I have changed into buttons that are on the top that are under the NewJeans logo.
 |
Final NewJeans Web Prototype Design  |
Final Figma New Jeans Design - Prototype
Final Figma New Jeans Design - Prototype in PDF
Animate CC Progress
 |
Animate CC Overall Progress .gif) First trials in Animate CC |
It was followed the tutorials where have to label and organised well all the layers, therefore when doing the actions it will be clear and easier to use the code snippets. I have label it into actions layers, content and nav
Classic Twins Animation in Animate CC
Most of the scene is where I do some simple animation that when clicks the button it will show up into the screen. When double click each content, it will showed up the content inside, where most of it I had used classic twins , ease in for animation.
Deploy to Netlify
 |
| Index.html file and fla file from animate cc |
 |
| Deploy to Netflity |
Is been awhile since I use Netlify again anyways ! time to submit and set my own domain ! At first I thought it as something error with my file as is blank and white , I uploaded for few times and end up it was just have to wait for awhile and need to refresh then they website will pop-up
Final Interactive Web Application
Final Video Presentation - NewJeans Merchandise Shop
Final Video Presentation - NewJeans Merchandise Shop
Reflection
Finally, I've reached the end of this semester, and completing this final task feels like a good ending achievement. I know and understand that I could done it better and well with adding more interactive animation to the web, however due to the time limit and is just really burn out my mental health, my shoulder pain are getting worse due to my own sit posture and of course lack of sleep. I should just done something simple and achievable for this task, However, is it still enjoy when being able to work on something I genuinely Even though it was challenging to use Animate CC, I persisted and watched numerous tutorials to figure things out. It was tough, but I'm proud that I managed to overcome the hurdles and solve the problems I encountered. This experience has taught me valuable skills and the importance of perseverance and need to done in SPEED. I'm grateful for the opportunity to explore my interests and learn new things in the process.
Findings
Comments
Post a Comment