Advanced Interactive Design: Task1 / Thematic Interactive Website Proposal
22/4/2025 - 13/5/2025 (Week1-Week4)
Amber Tan Jing Jing (0372746)
DST60804 / Advanced Interactive Design / Bachelor of Design in Creative Media
Task1 / Thematic Interactive Website Proposal
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task 1: Thematic Interactive Website Proposal
4. Feedback
5. Reflection
LECTURES
Week1
This week, Mr. Shamsul briefed us on the module. He also asked us to download Adobe Animate for use next week. Besides, he suggested a website, thefwa.com, so that we can explore other animated websites and get some ideas. We also need to come up with three thematic website ideas.
Week2
This week, Mr. Shamsul introduced us to Adobe Animate and its tools. We then learned how to draw a boat by tracing a picture from Google.
INSTRUCTIONS
Task 1: Thematic Interactive Website Proposal
Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:
- A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder)
- Movie promotion
- Game release promotion.
- Gallery/Museum exhibit launch
- Band/Artist latest release.
- Or anything else you have in mind (subject to the module coordinator’s approval)
Week1 (Ideation)
This week, we need to come up with three ideas. I am interested in doing a product topic, so I started brainstorming ideas for each specific theme.
1. Oatside milk
My first idea is the milk I really love to drink, which is Oatside milk. It has its own character, which is a bear, and I really love its color palette. It is very colorful.
2. BT21 (Character Brand)
BT21 is a brand and character series created in collaboration between LINE FRIENDS and the South Korean pop group BTS. Each BTS member designed a character that reflects their personality, and an additional character, VAN, was added to protect them. The characters—KOYA, RJ, SHOOKY, MANG, CHIMMY, COOKY, TATA, and VAN are known for their charming designs and are a global phenomenon, particularly popular among young people.
The overarching concept of BT21 is a group of characters who come to Earth from Planet BT with the goal of spreading love and becoming "UNIVERSTARS".
*BTS, also known as the Bangtan Boys, is a South Korean boy band formed by Big Hit Entertainment. They are a seven-member group consisting of RM, Jin, Suga, J-Hope, Jimin, V, and Jungkook. They debuted in 2013 and have since gained international recognition for their music, performances, and positive impact on their fans and the world.
3. Pocky
Week2 (Proposal)
Include:
- Concept
- Wireframes
- Moodboard
- Flow Chard
I have decided to choose BT21 as my project topic and started working on my proposal. Overall, my website will consist of six pages: Landing Page, Home Page, About Page, Character Page, Merchandise Page and Behind BT21 Page.
Week3 (Proposal)
Landing Page: This is the first screen the user sees when entering the website. It features a large Earth in the center, surrounded by small planets and a starry sky. BT21 characters do not appear yet, as they are still on their journey from Planet BT. When the user clicks the button "Welcome to BT21 Universe", it leads them to the Home Page.
Home Page: In this scene, BT21 characters stand on earth, and there are four floating planet buttons around them. Each planet links to one of the following sections: About, Character, Merchandise, and Behind BT21.
About Page: This page introduces the background story of BT21. I divided it into three sections which are BTS & BT21 Collaboration, The story of BT21 and the Brand Impact. At first, I tried putting all the text and images on one page, but it became too crowded. So I hided each section behind a button. When clicked, the section expands to show more content. This helps keep the layout clean.
Character Page: This page introduces each BT21 character. Users can view character names and their personality.
Merchandise Page: This page shows popular BT21 products like plush toys, stationery and clothes. There is a "Explore BT21 products" button that links to an external shopping page.
So maybe something like the image below.
FEEDBACK
Week2
- First think about the content when choose a topic.
Week3
- Since the concept is cute, the typeface can be adjusted to something more bubbly or playful.
- The About page lacks consistency. The arrangement of images and text needs to be more structured and visually balanced.
- For the wireframe, remember to include key components like the logo.
- For the buttons, can explore more references online for inspiration and ideas.
- No feedback
REFLECTION
At first, I didn’t know that BTS personally participated in designing BT21 and were involved in the whole process. I only knew it was a collaboration. After learning more about it, I found it much more interesting, which is why I chose this topic. Through this proposal, I learned how animated websites look. Not just the layout, but also how the animations move. I found some references on websites and Pinterest to get ideas. When I saw some nice animations, I realized some were too difficult for me to create, so I had to consider what was realistic for my skill level.
I found that this project is harder compared to last semester. Now, I have everything in my mind, like how the animation should move and transition, but I am afraid that in the end, things might not go the way I expect. I hope it will go well.
Comments
Post a Comment