23.04.2026 - 21.10.2026 / Week 1- Week 5
Angelique Svetlana Pekasa / 0377365
Advanced Interactive Design / Bachelors Of Creative Media / Taylor's University
Task 1: Exercise 1
Table of contents
Lectures
Link to Lectures week 1-7: https://angeliquesvetlanapekasa.blogspot.com/2026/04/advanced-interactive-design_27.html
week 8:
First import all the images into adobe animate and save the whole thing as ONE movie clip symbol.
Go to the publish settings, make sure that all is checked as shown below.
Then go to gsap website and download the file, unzip it and then move the file to the GSAP folder that is already made, after that press F9 Global script > Include > Add a File. Search the file name below in the file the gsap file before.
After that go back to the GSAP website and copy the code.
Go back to adobe animate paste it and delete the "box" change it into this.(name of the movie clip image that will move). delete the rotation as it's not needed.
Then go back to the images, drag it to the further end (align to the right) and see the X coordinate of the last page, copy the X-coordinate, replace the initial one.
Week 9:
Actions > Add using wizards > Go to Web page > change the link into the targeted link
Then change the "_blank" to "_parent" > then select the button, repeat the process in all the files.
Instructions
Task 1
After getting approval on my topic on week 5 (refer to week 5 feedback), I started to sketch out my ideations in procreate, I also rewatched the movie to refresh my mind and get inspirations for my website. I made a file and put sketch in it, the research done, and also the information I want to put on each page. Shown below is the document.
To make the homescreen's background I also used ChatGPT to help me generate the background of the homescreen as I need it to be clean. Shown below is the original image.
I uploaded the image, and ask ChatGPT to remove all the unessasary wordings and characters present to give me the plain background. I also used it to generate me arrows and the "Find Out More" in the style of "The Boxtrolls" title. I then go to photoshop to separate everything and put it in order, to make it easier to be exported later on for task 2.
Next, I went into Figma in order to make the prototype, shown below is the screen grab of the process. The characters shown will be different (right now it is AI for reference, the final one will be made by myself on Illustrator).
Link to Figma Prototype: https://www.figma.com/proto/3o4QvoIo0xfEri7sWgOyib/The-Boxtrolls?node-id=0-1&t=gzEUITpu0yoTiMTp-1
Shown below is the final presentation proposal.
Feedback
Week 9: The assets right now for the characters are too rough, make it more refine. You don't need a loading page if it's not needed.
Week 7: In the proposal define the color palette, write down which
color is used for the background, which is used for the buttons, and
what the hover effect is going to be. It is ok to use AI but make sure
that the AI is 40% of the work not 100%, for the character assets make
it yourself, don't use AI. The characters could be in the style of the
book (rough sketches like in the book), but it's ok to use AI for the
background in the first page. In addition to that you need to only
make at least 3 working pages in the prototype, make a bit of
animation. Put also references of the characters in the proposal
slides. In the Behind The Scenes page you could add short description
in the bottom of the pictures, and also add arrows on the bottom of
the frame to go to the next page of pictures (or englarge the pictures
when it is clicked). In addition to that right now the font is too
large for the body text, (make it 16 instead), also add white spaces,
too dense right now. The hover effect for the navigation bar from
white to beige could work.
Week 6: Online Class
Week 5: I proposed on the idea of making the website about The
Boxtrolls, Sir Shamsul agreed on it. Another alternative I proposed is
about the studios behind Boxtrolls, which is LAIKA studios, it is an
animation movie studio that does stop motion, it is also approved
however the movies they make have different themes, different color
palletes so the website might be inconsistent, which is why sticking
with The boxtrolls is better.
Reflection
Experience
During the proposal stage, I focused on planning how the Boxtrolls website would look and function, I do this by making a prototype in Figma and experiment with the layout, colours, typography, images, and overall flow of the website. Since the website is based on The Boxtrolls, I wanted the color scheme to be a bit dark to reflect the world of the Boxtrolls and the frames to fit the themes of the movie. Creating the prototype helped me see my idea more clearly and gave me a guide that I could follow when developing the real website.
During the proposal stage, I focused on planning how the Boxtrolls website would look and function, I do this by making a prototype in Figma and experiment with the layout, colours, typography, images, and overall flow of the website. Since the website is based on The Boxtrolls, I wanted the color scheme to be a bit dark to reflect the world of the Boxtrolls and the frames to fit the themes of the movie. Creating the prototype helped me see my idea more clearly and gave me a guide that I could follow when developing the real website.
Observation
While designing the prototype, i observed how some of my earlier layouts have too little spacing and the fonts are too big, based on the weekly feedbacks. I also realised that using too many decorative elements could make the pages feel crowded and distract users from the main information. This made me pay more attention to the hierarchy, placement of buttons, consistency between pages, and how each interaction would guide users through the website.
While designing the prototype, i observed how some of my earlier layouts have too little spacing and the fonts are too big, based on the weekly feedbacks. I also realised that using too many decorative elements could make the pages feel crowded and distract users from the main information. This made me pay more attention to the hierarchy, placement of buttons, consistency between pages, and how each interaction would guide users through the website.
Findings
From this proposal, I learned that creating a prototype is useful because it allows me to test and change my ideas before finalizing everything and placed it in adobe animate. It helped me find problems with the layout earlier, when they were still easy to fix. I also learned that the final website may not look exactly like the prototype as I might get better ideas while im building the website. However, having the prototype gave me a clearer direction and helped me better understand how visual design and user experience need to work together.
From this proposal, I learned that creating a prototype is useful because it allows me to test and change my ideas before finalizing everything and placed it in adobe animate. It helped me find problems with the layout earlier, when they were still easy to fix. I also learned that the final website may not look exactly like the prototype as I might get better ideas while im building the website. However, having the prototype gave me a clearer direction and helped me better understand how visual design and user experience need to work together.
Comments
Post a Comment