19th November 2024 - 3rd January 2025 (Week 9 - Week 15)
Sin Jun Ming 0364638
Advanced Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Final Project – Completed Thematic Interactive Website
INSTRUCTIONS
Final Project – Completed Thematic Interactive Website
In this final project, 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.
Requirements:
- Upload the website to a web server.
- Online posts in your E-portfolio as your reflective studies
- Make sure to embed or provide a link to the website and the video from the blog post.
1. Prototype
Prototype link: https://www.figma.com/design/HLHldYmGfkL2kOIhYCjdHy/task-2-prototype?node-id=0-1&t=UJx12klvVRVh5e0y-1
2. Process in Adobe Animate
After finishing the prototype using Figma, now it is time to complete the thematic interactive website in Adobe Animate.
Welcome Page
The welcome page is created to enhance the user experience and give a brief introduction to the user before entering the homepage. For the animation, I animate the fade in transition on the text by controlling the alpha value.
The hover effect on the cta button have an animation of arrow moving to the right when mouse is hovering.
The click of explore button (call-to-action button) will lead to the second welcome page which shows the introduction of the Rolex 2024 new watches. The animation here is the same with the last page which is fade in transition.
The second welcome page is quite different to what shown in the prototype. Since the gif will occupy a large amount of keyframes in the timeline, so I remove the gif and create a text-based content.
Home Page
A total of three products will be showcased in the center of the home page. The three products can be clicked to let the users get into the product pages. After clicking the "Learn More" button from the last page, the background dissolved from green to the beige color in homepage and the content is faded in.
The three sections of watches are buttons that can be clicked to further get into the product pages.
Product Pages
Since the three products all have different background colors, so the animations need to be done accordingly. For example, the first product, the color of background is dissolved from beige to light brown. The other products are done accordingly to their background colors.
The details button "+" and the color selection buttons have delay fade in effect which shows up after the content is faded in.
Each color selection button also has the dissolve transition effect once clicked. The transition animations were made according to different background color variations.
Product Details Pages
The "+" buttons at the product pages can lead to the product details page once clicked. The background content turns blur using the MovieClip blur effect and the details section is faded in.
3. Final Submission
Netlify link: https://advinteractive-final-sinjunming.netlify.app/
Walkthrough Video link: https://youtu.be/3DHTHP_hOSU
Reflection
During this module, I gained valuable insights into the world of web design, with a specific focus on using Adobe Animate as a creative tool. The journey was both challenging and rewarding, offering opportunities to explore technical skills, creative expression, and user-centered design principles.
This module is another experience to me as for the Interactive Design module I have taken in the last semester, the final project was to create a single-page website using HTML, CSS and JavaScript. However, in this module, I have learnt to use Adobe Animate to create a deployable website that has different actions like cta buttons to be clicked to get to the next page, this makes the website more interactive to the next level.
Overall, this module deepened my appreciation for the role of animation in web design. It taught me the technical and conceptual skills needed to create engaging digital experiences and reinforced the importance of balancing creativity with user-centricity. I am eager to apply these skills in future projects, further exploring how motion design can elevate web experiences.
Comments
Post a Comment