Task 2 - Advanced Interactive Design

 22/9/2024 - 12/11/2024 (Week 5 - Week 8) 

Aisya Diva Anwagodsa (0365505)

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media

Task 2 - Interaction Design Planning and Prototype 

---

Table of Content

1. Instruction
2. Task 2
• Process
3. Presentation & Prototype
4. Feedback
5. Reflection

---

Instruction

---

Task 2

In task 2, students started to make a prototype for their website.  Based on my proposal on task 1, I decided to make a website about Zayn Malik.  Below is my presentation video regarding the plan of how I will do the website.

Process

I intended to use a minimal design with red, black, and white color themes.  Each content will have a different color.  Before the main menu, I decided to add a short intro that mainly utilized fade in transition.  Initially, I wanted to have a start button before or after the picture entered the stage, but instead of a start button, Mr. Shamsul suggested having a loading bar.

Fig. Intro
(29/10/24)

While for the main menu, it will be in a button form with a little bit of explanation about the contents.  At first, the picture was small like in Figure (), then Mr. Shamsul gave a suggestion to make the pictures bigger. 

Fig, Main menu before
(29/10/24)

Fig. Main menu after
(29/10/24)

The first content would be career, this section will give a little bit of explanation about Zayn's career throughout the years as a band member to a solo career singer.  For the design, I want to maintain it to be simple and not have a lot of elements in it.

Fig. Career section
(29/10/24)

Moving on to the second content which is discography, this section mainly will show Zayn's first solo album to his newest album.  I planned to place the picture of the album and make the picture the button, so when it's clicked a vinyl will appear underneath of it along with the information about the album.

Fig. Discography
(29/10/24)

For the third content, it will be music videos.  Which will display Zayn's most watched music videos.  The pages will display different pictures that will function as buttons as well to direct users to the music videos.

Fig. Music Videos
(29/10/24)

Next is the gallery, which shows pictures of Zayn.  I plan to use a continuous carousel concept, so when we press the next button the picture will reveal the rest of the picture.

Fig. Gallery
(29/10/24)

Last content is merchandise, in this sections, I will show some of the merch and then direct user to the official website of the merch.

Fig. Merchandise
(29/10/24)

---

Presentation & Prototype

Design by Aisya Anwagodsa

---

Feedback

Week 3

The topic was limited, content-wise there should be more than one content that can be expanded from the selected topic.  The topic of HALE skincare was unsuitable because there was little information about the item.  However, making a website to promote an album has potential, but instead of focusing on the album, better to focus on the artist and make it a theme.

Week 4

The wireframe should be clearer and give a vision of how the website.  Need to look for more references.

Week 6

- Use the principle of proximity to display the picture in the main menu

- Give a page and footer at the end of the website

- Replace the start button with the loading bar

---

Reflection

Experience:

I have a lot of fun designing and planning the website.  Besides enjoying the process, I also learned to think about the design function better in order to provide an interesting experience for users.

Observation:

Interactive design is not only about aesthetics but also about the functionality and effectiveness of the overall design so that users can browse the website comfortably.  Also, as a beginner, starting with simple animations is helpful.

Findings:

I learned to understand how interactive design affects users, especially in website design.  It's all about how we plan the way a website works to make the process easier.