Final Assignment: Thematic Website

 

Assignment Brief

In this assignment, we are to create a thematic website using Adobe Animate, using the proposed idea from assignment 2. The webpage must consist of at least 5 functional pages. 

Progress

Assets

Firstly, I need to improve my assets, including my drawings, buttons, and any elements needed. I did not redraw my drawing for the story page, but I follow lecturer's advice to take out some of the effect, and I also listen to my classmates' advice to choose a better colour palette. I need to have some brighter, more colourful colour palette. I found some interesting colour palette online, and I pick one that I think can really help with my drawings and overall website design. 

Colour palette:

With this colour palette, I change my drawings. I also add more details. 

Latest drawings:

Besides that, I done some Photoshop works, editing the image that I need to use. I also create more diverse background, according to the product, I adjust the colour of the background. 

For the button, I exported them from the Figma, from the prototype I done before. 

Adobe Animate Progress

Font

Title: Lobster

Paragraph: Lucida Bright

Landing Page & Story Page

I started with the landing page, I create simple animation with my assets. The assets will fade in and out and the enter button allow the user to enter the book, going to the story page. For the story page, I also apply simple fade in and out transition for every page turn. I add the button function using code snippet. 

Landing page:

Storypage:

Landing Page + Story Page walkthrough

Main Menu Page

For this page, I originally want to make the button move horizontally with all of the elements. But unfortunately, if I did like that, I can't press the button. So, at the end, I change it to placing the button in the middle, while the elements are moving horizontally above and below the buttons. 

Old version

Main Menu walkthrough

Product Page

I created all the pages in the illustrator, then use back the same technique taught by lecturer in class, by using gsap. I also add in some piano note for each button, some when the user interacts with it, there will be piano notes playing. 

I met some error here, because I was using the wrong coordination. 

Old version

Product Page Walkthrough

About Page - Our Story

I start with animating the envelope floating and edit it as a button, it has hover, hit button animation too. Then, I start to add in the open envelope animation. When the user clicks on the envelope, it will open the envelope, and a letter will appear besides it. 

Our Story Page Walkthrough

Patch Designer Page

I first start with creating the first page, with start button, animation and back button. 

Next, I start to create the question page. The options are also the button, they have slight animation like floating up and down. The questions are put on the right side of the page just like the description of the first page. The question has fade in and out animation only when the page turn next or back to previous page. 

Patch Designer Page Walkthrough

Compiling process

This is the hardest part. I work in individual files for every different pages. After I finish all these, I need to connect them all in one single working file.  First, compile the layers in the individual working file into a folder. One page, one folder. Then, I paste the folder one by one into a newly opened working file, to compile them all. Next, I need to readjust the timeline, duplicated button with the same names and also the some of the codes to make it run smoothly in a sequence it should have. Until here, everything was going normally. 

Now, I need to connect every page to the menu page, using buttons. I apply similar steps for creating buttons function, using Wizard. But, somehow, some of the button works, while some don't. I try for so many times, deleting and creating several times, yet nothing is solved. I even go ask from help from my classmates, Sze Ching. After a very long meeting and discussion, still, it cannot be solved. The only method might be me redoing all of the buttons which cannot work while compiling, which is numerous, since most of my animation requiring clicking buttons. Don't even mentioned this would mess up the names of the new and old buttons, mess up the timeline and etc. 

I then try for another method that lecturer taught in class, but it wasn't successful too, I think it's because all of my buttons are different, none of them share buttons together, which makes it impossible to do so. In the end, I weren't managed to solve the problem. But it can work individually in each of the working file. I am very sorry that I couldn't do it in a complete form. I have done my best. 

Final website link:

https://superb-sherbet-f33e7d.netlify.app/

Google drive link:

https://drive.google.com/drive/folders/1X5yq8n-CEwuLlkF8I40amU3fPDRCNnT-?usp=sharing

Final Walkthrough Video:

https://drive.google.com/file/d/1rlmvhOryzT5Pp9doCaBV3WVx5AvyEOQy/view?usp=sharing

Reflection

This assignment is really tough for me, I am not good in coding or etc, and UI/UX design is not my strong suit. But at least I did try to create something from the lesson I learn in class. I was using code snippet at first then remember that we use wizard before, which helps a lot and speed up the process. In the middle of the journey, I struggle a lot, and I really just want to give up. But I still want to give it a try even though I am not doing a good job. When I see the animation or the transition works, I was satisfied already. I think this is a very challenging assignment for me, I did my best already. Some buttons need to be refresh to be able to work. It might takes some time, takes a few refresh to work. I am not sure whether this is because of file too big or any problem else. But, I did try to fix it. 

This assignment train my problem-solving skills, UI/UX design skills, Adobe Animate skills and more. I would like to thank my lecturer and my friends who guide me through this assignment. I receive a lot of guidance and help. Without your help, I would not be able to finish this assignment. I think this is a hard lesson for me, that I am not good at some thing, but, I will try to keep up with the others and try to do better next time.