Task 3: Thematic Interactive Website
05.11.2025 - 11.01.2026 (Week 7 - Week 14 )
Diane Sani Alexander Wan / 0378712
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Task 3: Final Project - Thematic Interactive Website
TABLE OF CONTENT
INSTRUCTIONS
FINAL PROJECT
For this task, we are required to use our knowledge in task 1 and 2 for application for our task 4. We have to create an interactive website and refine the prototype to produce a completed working website.
Web process in Adobe Animate
After the feedback from my prototype, I can start working on it in Adobe Animate. I moved all the assets into one file. I did a few changes for my final since the layout wasn't the way I wanted it to be and it looked messy.
1. The homepage
In this page it has the navigation bar on top and also tells you already what the website is all about. I included cutout pictures of the sourdough bread and made it to follow what I was inspired by so make it visually like a stop motion animation.
Figure 2.1 Homepage timeline.
For the slices of bread, I made it like come in from the top like its falling down and eased out so the fall becomes smoother. Then I masked it, so it doesn't collide with the navigation bar and looks neater.
Figure 2.2 The action for navigation bar.
This is the action preview for the navigation bar, I just made sure it went to the right frame when navigating to a certain page.
I did have trouble figuring out how to make the navigation bar work on every page, I just had a few trial and errors to make it work. I used the wizard to help me on the actions.
2. The About page
In this page it includes what sourdough is about, I decided to keep it simple as the other pages have much of a loader information. But for the animation I made it simple as well, like the the word 'about' I just made it slide in and I used masking to make it look neater.
Figure 2.3 About page timeline.
3. The Ingredients page
The ingredients page is where all the instructions on how to make the bread is at. The animations I did in here were also just slide ins for the main text, to make use of my knowledge on the masking that I learnt in class. I'm still unsure about the layout for this page, but I tried to make it look neat and organized.
Figure 2.4 Ingredients page timeline.
4. The Sandwiches page
In this page it has 2 other pages in it that shows the recipe for each of the sandwiches. So for the first page I made the main header that says 'stay crusty, bake bold' slide in from the top for the animation. Then for the buttons there are the view buttons, which leads to the recipe that are relating to the sandwiches.
Figure 2.5 Sandwich page timeline.
For the view buttons, when you hover over then it changes its visual, so the user knows when it is able to be clicked. For the buttons, it goes to where I set the page at in a certain frame.
Figure 2.6 Actions for the view button.
This the grilled cheese page, where it showcases the ingredients and instructions on how to make it. The animation I added is also the slide in text that comes from the top. There are next buttons to go through the other recipes for sandwiches.
Figure 2.7 Grilled cheese timeline.
Figure 2.8 Italian Panini timeline.
In this page, it has arrows that leads to the same page that is under sandwiches since it is under the same category. Then below is the actions I used for the arrows and made sure it landed on the right frame for where the pages is at.
At first, I did have some struggles on how to make the move the next page instead of it playing and moving automatically, I needed to add a stop action until a button is clicked.
Figure 2.9 Action for arrows.
5. The Benefits page
For the benefits page, I put a few cutout pictures of the sourdough bread and wheat, and it explains all the benefits of the sourdough bread. For the word 'benefits' I made it slide in from the top as well to follow the theme of the other pages.
Figure 2.10 Benefits page timeline.
To go back to the homepage, just click the 'All Bread' which is the title that leads you back to the start.
After I have done most of it, I added a music to complete the overall website.
Netlify link: https://sourdough-diane.netlify.app/
Google Drive link: https://drive.google.com/drive/folders/1m__Kr30G4S7pzKxOvyp-V-qgkBvaA-i3?usp=sharing
FEEDBACK
Week 10: In the prototype, the layout wasn't so great and it had unnecessary shapes as the background, so I took it out and just make it simple and not so overwhelming.
REFLECTION
Throughout this module, I wasn't sure on how it was going to be and was interested in learning how to make animations for a website. It was confusing and tough at first but with the lectures and help it made me gain knowledge in how to animate a button. Learning the actions in JavaScript was interesting too. I did have to refine my prototype at first because my layout seemed to messy and needed to apply some of my knowledge from previous semester to be put in here.
I had to look through some inspiration on Pinterest and other sites to see what I wanted to go for and looking for button animations that I wanted to apply in my website. Also by looking at other classmates work has helped me a little into making my work better. This module would help me in future possible module as I already have basic knowledge on how to animate for a site.
Comments
Post a Comment