Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal

-

25.4.2024 - 19.5.2024 (Week 1 - Week 4)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design
Task 1: Thematic Interactive Website Proposal


INSTRUCTIONS



TASK 1 - PROPOSAL

Instruction

We are required to create a thematic interactive website proposal with the topic of our choice. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have interactive components that provoke the user. This dynamic experience is meant to keep the user interested in addition to the thematic concept.

Requirements

  • Completed UI/UX proposal document.
  • All processes (concept, wireframes, mood-board, flow chart) have to be documented in blog.
  • A video presentation.

Selected Theme: AESPA

Who are Aespa?
Aespa is a South Korean girl group known for their innovative and futuristic concept that merges the real world with a virtual universe called "æ-KNOW." The group consists of four members: Karina, Giselle, Winter, and Ningning. What makes Aespa unique is their concept of "avatars" or digital counterparts known as "æs", which interact with the real-life members. This concept allows them to explore themes of identity, technology, and connectivity in a visually striking and futuristic manner.

Why choose Aespa?
Their concept aligns perfectly with the vision of creating an interactive website with animations and futuristic 3D elements. Their blend of real and virtual worlds offers a rich and dynamic canvas for creative storytelling, immersive experiences, and engaging interactions. By using Aespa's concept, I can create a website that transports visitors into a captivating digital realm, where they can explore the group's universe, interact with virtual avatars, and delve into the futuristic themes that Aespa represents.

Aespa's Music Video
Below is one of their song "Savage" tells the whole story of their fight with Black Mamba. The girls team up to strike down a reptile with translucent scales before breaking it down alongside their ae friends.


Objective

The primary objective of the website is to create an immersive, engaging digital experience that enhances the connection between Aespa and their fans. It seeks to enhance fan engagement by providing an interactive platform for exploring Aespa's universe, participating in exclusive events, and connecting with other fans. The website aims to promote Aespa’s content by showcasing their music, videos, and concept innovatively, leveraging their unique blend of real and virtual worlds. Additionally, the website aims to expand Aespa's digital presence by creating a state-of-the-art platform that reflects their futuristic and technologically advanced brand.

Flowchart

Link to Miro:

Fig. 1.2 - User Flowchart

Inspiration Board


Wireframe

FINAL SUBMISSION

FEEDBACK

16.5.2024- Week 4

  • For the website content, just focus on the top two sections. Other sections, like merchandise, can be removed since the project is more focused on creating an interactive website with animation.
  • On the home page, in the nav bar, make the "Merch" link direct to their official website.
  • Indicate in the proposal the purpose of that section in the wireframe.
  • For the album page, focus on promoting one of their albums only, and try to think how the page can look interactive, animated, and engaging.

REFLECTION

When we were first introduced to the module, I started to have a lot of ideas for the theme of the website. However, once I read the requirements and objectives carefully, which were to create an interactive website, I began to sort out how I could utilize the theme in conjunction with animation and interactive elements to create an engaging website. This was my first experience using Adobe Animate to create an interactive website. Initially, I questioned myself and worried that I might not complete it as well as I hoped for the final project. But after learning from tutorials on using Adobe Animate, doing more research, and viewing some references, I started to have a clearer direction. This was my first time incorporating a futuristic theme into my project, and I was excited to see how the final outcome would look.

Comments

Post a Comment

Popular posts from this blog

Application Design I - Project 2: UI/UX Design Document

-
Image
29.9.2023 - 29.10.2023 (Week 5 - Week 9) Tan Yi-Tyng (0353327) Bachelor of Design (Hons) in Creative Media Application Design I    Project 2: UI/UX Design Document   LECTURE   Week 5 (29.9.2023): Introduction To User Experience Research INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1nxyvAjMX46s2ZEC2w2n8V9ghiu2ezfLI/preview" width="640" height="480" allow="autoplay"></iframe> PROJECT 2 UI/UX Design Document After final...
Read more

Application Design II - Task 2: Interaction Design Proposal and Planning

-
Image
23.5.2024 - 13.6.2024 (Week 5 - Week 7) Tan Yi-Tyng (0353327) Bachelor of Design (Hons) in Creative Media Application Design II  Task 2: Interaction Design Proposal and Planning INSTRUCTIONS TASK 2 - PROPOSAL Instruction Students are required to develop a comprehensive interaction design plan for their final web-based mobile application, including detailed wireframes, user flow diagrams, and prototypes of both micro and macro animations. The goal is to visually and conceptually prepare the interaction design and animations that will enhance the user experience of their application. Master Plan & Storyboard Based on the previous Task 1, I have completed redesig...
Read more

Typography - Task 1: Exercise 1 & 2

-
Image
28.3.2022 - 25.4.2022 (Week 1 - Week 6) Tan Yi-Tyng (0353327) Bachelor of Design (Hons) in Creative Media Typography  Task 1: Exercise 1 & 2 LECTURE   Typo 0 – Introduction Typeface: refers to the entire family of fonts/weights that share similar characteristics/styles, I.e.: Georgia, Arial, Times New Roman, Didot and Futura. Font:  more specific way of defining the kind of text you’re using, it refers to the individual font or weight within the typeface, I.e.: Georgia Regular, Georgia Italic and Georgia Bold. Fig 1.1 Font & Typeface Typo 1 - Development 1. Early Letterform Development: Pheonician to Roman ...
Read more

Application Design I - Project 1: Mobile Application Proposal

-
Image
1.9.2023 - 22.9.2023 (Week 1 - Week 4) Tan Yi-Tyng (0353327) Bachelor of Design (Hons) in Creative Media Application Design I    Project 1: Mobile Application Proposal   LECTURE   Week 2 (8.9.2023): Usability: Designing Products  for User Satisfaction Week 3 (15.9.2023): Card Sorting Method INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1nxyvAjMX46s2ZEC2w2n8V9ghiu2ezfLI/preview" width="640" height="480" allow="autoplay"></iframe> PROJECT 1 Mobile Application Proposal  For the first project, we are required to create a proposal document for our mobile application project. We must redesign an existing mobile application that we find unsatisfactory in terms of the user experience or interface design, and this project ...
Read more

Application Design I - Final Project: High Fidelity App Design Prototype

-
Image
19.11.2023 - 08.12.2023 (Week 12 - Week 15) Tan Yi-Tyng (0353327) Bachelor of Design (Hons) in Creative Media Application Design I    Final Project: High Fidelity App Design Prototype   INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1nxyvAjMX46s2ZEC2w2n8V9ghiu2ezfLI/preview" width="640" height="480" allow="autoplay"></iframe> FINAL PROJECT High Fidelity Prototype Instruction In this final project, we are assigned to create a high-fidelity prototype for our mobile application. This prototype should show...
Read more