-

ADVANCED INTERACTIVE DESIGN | FINAL PROJECT: COMPLETED THEMATIC INTERACTIVE WEBSITE 

17.06.2025 - 22.07.2025 Week 09 - Week 14 Tyra Franchesca Valerie Anthony / 0368223 / Bachelor of Design (Honors) in Creative Media Advanced Interactive Design / Taylor's University

FINAL PROJECT: COMPLETED THEMATIC INTERACTIVE WEBSITE

LECTURES & ACTIVITIES 

Week 9 

This week, we had consultation with Mr. Shamsul regarding on our project and regards on the prototype task 2. 

Week 10

Thise week, we learned about GSAP which is a new thing. we used when we want to control the button by adding instance name, so we do not have to animate the scroll and button to play and also stop.

Fig 1.1 Timelines Preview Week 10

Fig 1.2 

Fig 1.3 GSAP Preview Week 10


This is the result for this exercise.

Fig 1.4 GSAP Exercises Week 10

Week 11

No exercises given for this week, there was no class 

Week 12 - 14 

Final Project Consultation
INSTRUCTIONS
MIB BOOKLET:
 
FINAL PROJECT 
Completed Thematic Interactive Website

Students will synthesise the knowledge gained in tasks 1 and 2 for application in task 3. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience, a minimum of 5 working pages.
Deploy the final website to Netlify or GitHub. Add the link to your blog (e-portfolio). As a backup plan, upload the project folder to Google Drive as well. Make sure that the Google Drive link is set to public. No video walk-through is required for this submission.


Fig 1.5 Imported Assets Week 10

Web Page Progress in Adobe Animate
I imported all my assets inside the library and name all my file as index. I started the background, text elements, I started with my loading page.

1. Loading Page 
For this page for the background, contains the cookie photo, loading with the circle loading on the side with increase of size effect on it. It took a bit of time to do it.

Fig 1.6 Loading Page Progress Week 11 

I copy and place the frame after that to make the duration until 40 frames. it has there is three loop frames that shows the circle increase size and decrease.  

Fig 1.7 Loading Circle Timeline Week 11

2. Home Page
Fig 1.8 Home Page Week 11 

Fig 1.9 

FINAL OUTCOMES FINAL PROJECT: COMPLETE THEMATIC INTERACTIVE WEBSITE

Netlify Link: https://cookiesstore.netlify.app/

Fig Website Preview Week 12 

Google Drive Link: https://drive.google.com/drive/folders/182eroQVPCGjgpIZkGMerOy36ipxxFfQj?usp=drive_link

Fig Drive Folder View Week 12

Web Showcase Video:
Fig final Walkthrough Video Week 13 
REFLECTIONS

Working on the Task 3 end project was a worthwhile and educational experience. I built a site based on sharing a collection of stuffed cookies recipes, and in the process, acquired valuable lessons in web design as well as user experience.

From the very beginning, I aimed to create an appealing, easy-to-use site that evoked the cozy, welcoming feeling that accompanies home baking. I specifically selected color schemes, fonts, and design structures that would be attractive to dessert fans and weekend bakers. One of the biggest challenges I faced was balancing looks and functionality. I had to ensure the site wasn't only pleasant to look at but also easy to use, especially with recipes and steps being easy to read and well-structured.

I also incorporated feedback from peers and users, which helped me improve the clarity of my instructions and simplify navigation. This iterative process taught me the importance of testing and refining a product based on real user input.

Overall, this project enhanced my skills in layout planning, image optimization, responsive design, and content presentation. It also deepened my understanding of how design choices can affect the user’s emotional connection to a product. I’m proud of how the website turned out and believe it successfully communicates the joy and creativity behind making stuffed cookies.







Comments

Post a Comment

Popular posts from this blog

Packaging and Merchandising Design/Exercise

-
Image
  Packaging and Merchandising Design / Exercise 23 Sep 2023 - 2 Oct / week 1 - week 4  Tyra Franchesca Valerie Anthony Packaging & Merchandising Design / Bachelor of Design (Hons) in Creative Media / Taylor's University  INSTRUCTION EXERCISES Exercise 1: Case Study Analysis final case study Exercise 2: Box-Making Fig 2.2 Hand Cream Fig 2.3 Toothbrush box Fig 2.5 Box # 1 Hand Cream  fig 2.6 box #2 Sun Cream REFLECTION  FEEDBACK week 4  make a new design of the cream packaging for week 5 to come and show the design  week 3  make measurements simple as the design  make everything align do not make anything larger than the design  continue and submit in drive week 2  do not just create a design choose one is easy to do and work with week 1  update the google drive  OBSERVATION During this design process learning something new that would be helpful for me to learn as taking a cream and toothpaste to create a new box for the...
Read more

Publishing Design: Task 3 (B)

-
Image
 Publishing Design: Task 3 (B) on December 19, 2024 05/12/2024 - 02/01/2025 (Week 1- Week 14) Tyra Franchesca Valerie Anthony (0368223) Publishing Design | BDCM | Taylor's University Task 3B: Brand Guideline Interactive PDF LECTURE All lectures are in Task 2 and Task 3  INSTRUCTIONS Task 3B was a collaboration with Brand Corporate Identity where we are to create and make an interactive brand guideline. Process  We started the guideline, i want to still keep the same as my task 3 positioning PPT, i started by creating m y grids and guidelines for my layout especially in the first page. Fig 1.1 grid guideline From the contact time class with miss Lilian said that the structure for the second layout is better than the first one with the 4 columns will be better for my type of layout with adding photo and text. When adding the buttons and the rest of the aspect i see that is starting to come together and well aligned with one another. Fig 1.2  I also made design my color...
Read more

Publishing Design: Taks 3 (A)

-
Image
 Publishing Design: Taks 3 (A) 24/09/2024 - 11/09/2025 Tyra Franchesca Valerie Anthony (0368223) Bachelor of Design (Hons) in Creative Media Publishing Design: Exercises and Task 1  1. Lectures 2. Progress 3. Final Outcome 4. Feedback  5. Reflection Task 3 (A): Book Visual Content Fig 1.1 Book Contents | PDF Format + Grid System  While working on exercise 02 in Task 01, I decided to use the dimensions 240mm x 200mm Fig 1.2 Book size Mockup Book binding style  For my binding of the book, i have chosen to use a staple binding style that will open up the book fully. Fig 1.3 Book Size Mockup (Staple Binding) Reference Layout style  Most of my references are from Pinterest. I have chosen a few that i like and suit the storyline and style Fig 1.4 Book layout idea # 1 & # 2 Book Progression Fig 1.6 Layout Progression Fig 1.7 Revision and Refining Progression Mockup Printout Video of the Mockup Book PDF The PDF need some little arrangement with the typeface so ...
Read more