Advanced Interactive Design - Task 3
24/09/2024 - 27/12/2024 (Week 1 - Week 13)
Aisya Diva Anwagodsa (0365505)
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Task 3 - Thematic Website
Table of Content
Lectures
Task 3
In task 3 students have to create a complete thematic website using skills taught since the beginning of the class. The theme for the website itself was taken from the student's proposal in the previous task.
For this task, I made a fan website for Zayn Malik, a singer known for the singing contest X-Factor. For the website, I made 5 content about Zayn This content will be about his journey as a singer and his albums.
Process
Process
Doing this website requires a lot of time and patience. I was skeptical at first because using Adobe animate is new and during the learning process I faced some errors in operating this software (it happened to other students as well). However, I tried to maintain the original idea that I applied in my prototype.
Before I start explaining the process, the concept is minimalist and utilizes red and black color, below is my color palette.
 |
| Fig. 1.1 Color palette (26/12/24) |
The fonts that I used in this project are Libre Caslon (heading) and Didact Gothic (body copy). For a detailed explanation of my concept refer to this link.
1. Intro
First, I started with making the intro for the website. Before placing all of the pictures in Adobe Animate, I edited them in Photoshop first. For the intro, I divided the layers for each element as I'm planning to create a loading bar in the intro. The intro started with a transition to Zayn's picture and for that, I changed the picture and text into graphic elements so that I could apply classic tween to make the transition smoother. At first, I planned to use sound and add it to my intro, turned out not to work. I ask this to Mr. Shamsul, but unfortunately, this error happened to him as well and still trying to find the solution. At the end, I decided not to use sound consider that this software could have unnexpected errors.
 |
| Fig. 1.2 Intro (26/12/24) |
After the picture enters the stage, It will fade out and change into a loading bar. For making the loading bar, I used shape. To make the bar running, I masked the shape of the loading bar and used shape tween to animate the loading bar.
 |
| Fig. 1.3 Loading bar intro (26/12/24) |
2. Landing Page
For 5 content, I have prepared all of the landing pages as introductions for each content. For the landing page animation, I extend the background and move the picture to the side of the page. All of my landing pages have the same technique applied to create the animation, below is an explanation of how the transition works.
 |
| Fig. 1.4 Main content (26/12/24) |
 |
| Fig. 1.5 Landing page animation (26/12/24) |
 |
| Fig. 1.6 Landing page animation (26/12/24) |
 |
| Fig. 1.7 Landing page animation complete (26/12/24) |
3. Career
For the career section, I applied fade to transition from the landing page to the main content, and for the main content itself, I used pictures and applied animation so the picture could change every second. There are two sections that talk about Zayn's career when he was in One Direction and his current career as a solo singer.
 |
| Fig. 1.8 Career Section (26/12/24) |
 |
| Fig. 1.9 Career section (26/12/24) |
4. Discography
This section shows all of Zayn's albums during his solo career. The section displays buttons in the form of a picture. When the pictures are pressed they will provide information on Zayn's album.
.png) |
| Fig. 1.10 Discography (26/12/24) |
5. Music Videos
- This part is tricky because I had to create 3 different labels to make the transition look good. The first label named 'mv', is an indicator for displaying the button that will lead to the music videos, this section contains 4 pages (3 pages for the music video button and 1 page for the button that will lead to Zayn's YouTube channel). under the label 'mv' I included timelines that show buttons made from pictures (then I convert them to buttons), and when we press them, it will lead to a new page.
.png) |
| Fig. 1.11 'mv' label (26/12/24) |
- Next are labels that I created based on the music video title, there are 3 music videos and I named the label based on the title of the music video (for example: Dusk Till Dawn short into 'dtd', applies to all mv's). This page will appear when the user clicks the buttons from the previous label ('mv') and directs users to the YouTube platform to play the music video. Picture 1 shows the transition between the label 'mv' to the label 'dtd' when the user clicks the button it will sink and reveal the text. This transition is applied to the rest of the label in music video content.
.png) |
| Fig. 1.12 Animation of the music video page (26/12/24) |
- The last label consists of pages to animate the elements so when users press the previous button the animation will return all the elements in the same position as on the previous page. It can be seen in Figure (1.13) that picture 1 is the original position in label 'dtd2' and when we press the previous button all the elements will be restored like in label 'mv' (picture 2).
.png) |
| Fig. 1.13 Return to the previous page animation (26/12/24) |
6. Gallery
The gallery is one of the contents where the website provides pictures of Zayn Malik. For this section, I am using Gsap to help me create a smoother transition from gallery page 1 to gallery page 3. This method was taught by Mr. Shamsul during the learning process. So basically, I used the gsap document that I downloaded added it into the action frame, and inserted a particular format to make the screen move. Additional information, the gallery section on this website is different from the prototype because removed the text because it feels too much and unnecessary. I also made changes to the navigation bar. Initially, I supposed to have a complete navigation that appear in a form of a text button, but i decided to simplify it by using a home button in the top corner.
.png) |
| Fig. 1.14 Gallery appearance, prototype vs final (26/12/24) |
7. Merchandise
This section displays Zayn's official merchandise, each page contains a picture of the merch with a button that will direct users to the official website where users can purchase the product.
.png) |
| Fig. 1.15 Merchandise page (26/12/24) |
 |
| Fig. 1.16 Extend page of merchandise (26/12/24) |
Figure 1.16 shows the last page of the website, this page will lead to a wider selection of merchandise and to Zayn's social media platform.
8. Trial & Errors (this is just a story about how grateful I am)
I stayed up until morning on campus with my friend to finish this project, when I was finally done I looked at my friend with relief that I was finally free from this, I looked around me it looked bright and my eyes felt tired. I took a minute to appreciate myself, I checked the time, and it was 1 am. Then I rechecked the website before I uploaded the file to Netlify. *HEARTACHE* The buttons are acting weird, it won't direct me to the page and started being wild. I cried (in my heart), and I looked again in disbelief. Tried to undo everything, but nothing. It's just painful to see the buttons not working properly. Below is the clip where my button suddenly faces an error. My energy was drained from staring at the screen, so I deleted some parts.
Fig. 1.17 Error buttons
(24/12/24)
After that, I tried to figure out what was wrong by checking my timeline and action frames. All good, so I think that maybe I should change the code from usingthe label to play I changed it into using frame to play, which means that I have to enter the frame number.
 |
| Fig. Action frame (24/12/24) |
But it still did not work, so I decided to wrap it up and continue the next day. Then I remembered I had a duplicate file, I checked it, and it has 80% of my website done. I am so grateful that day because I did not have to redo the website from zero. Since then I duplicated my file, just in case : ). Not only me, some of my friends facing error like some elements are blurry when the viewed it, or some elements suddenly deleted when editing, etc.
Final Outcome
Fig. 2.1 Recording of the whole website
(28/12/24)
Feedback
Week 9
Sound applied on the website cannot be heard when reviewed in Google: check the file type of the adobe animate and the sound's file as well.
Reflection
Experience:
This project is fun and challenging as well. I still remember what Mr. Shamsul said, that we need to be realistic. Realizing what I'm facing right now, I know that it was good advice. I honestly have an interest in making more complex animation or expect that my website could be better and have a smoother transition, but I faced some errors during my process when my website was almost finished all of the buttons suddenly errors and it was exhausting to figure out which element has a problem, I really want to cry and just want to finish this task with peace. However I am still proud of myself, even though I know what I've done was not the most perfect, but I made it to finish this website.
Observation:
The using of Adobe Animate is kind of tricky, which is why time planning in doing the website is crucial. This software sometimes has an unpredictable error and sometimes the solution is not found yet, or we just need to try all over again. By having a good time planning, it helped me to do my work. Also, duplicate files are helpful for me when I'm trying to figure out new features or trying tricks I have learned from class because when I get one of my file errors I still have backups so I don't need to do all of the things.
Findings:
This module not only taught me to be skilled in making interactive designs, but also to be patient and always duplicate my file so I can feel secure while doing the work. Making a thematic website is not easy at all, but I love the process of it, it grows in me.
.jpg)
Comments
Post a Comment