Advanced Interactive Design: Final Task
| 26.11.2024 - 31.12.2024 (WEEK 9-WEEK 14)
| Tang Chin Ting [ 0366473 ]
| Advanced Interactive Design/ Bachelor of Design in Creative Media
| Completed Thematic Interactive Website
| Tang Chin Ting [ 0366473 ]
| Advanced Interactive Design/ Bachelor of Design in Creative Media
| Completed Thematic Interactive Website
INSTRUCTIONS
SUBMISSION
Final Project: Completed Thematic Website
In the final task, we were required to complete the website in Adobe Animate, and we finished the task 2 website prototype in Figma. The website needs to complete the animation, transition, and add sound to the website.
Figma Prototype Link:
Instructions
- Students will synthesize 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
Loading Page
I would like to do a loading page using different typefaces to make it more interesting. The font that I found on Google is called "Megrim", it is quite unique, so I used it as a logo. On the loading page, the "Faouzia" text and line will appear in each keyframe.
Figure 1.1 Progress of Loading Page
Figure 1.2 Progress of Loading Page
Figure 1.3 Progress of Loading Page
Home Page
On the home page, I decided to place Faouzia's portrait in the middle, and there is also a text of "Faouzia" in the background. So, everything that comes into the screen will appear during the transition animation. I first adjust them into the color effect of alpha as 0, and at the end, will turn it into 100.
Figure 1.4 Progress of Home Page
Figure 1.5 Progress of Home Page
I also added an About page and Contact Us page on the home page, so when we arrive at the homepage, we can click the screen, and then it will transit to the About page and Contact Us page. I also added the call to action button for Faouzia's Instagram, Twitter, and Facebook on the Contact Us page.
Figure 1.6 Progress of Home Page
Figure 1.7 Progress of Home Page
Singles Page
On this page, I will include Faouzia's singles and make it play and pause the song. I first download a vinyl image and place it at the center, the biggest one is the current song which is playing, and there is a play and stop button.
Figure 1.8 Progress of Singles Page
Figure 1.9 Progress of Singles Page
Tour Page
This page is more simple than the previous page. I found 4 images of Faouzia's previous tour and placed them on this page. The user can click each image and go to the tour detail page to get more about the information. When their mouse arrives at each image, the image will be brighter.
Figure 1.10 Progress of Tour Page
Figure 1.11 Progress of Tour Page
Merch Page
This page is quite similar to the tour page, I placed 2 items on this page, and the same thing happens when the user's mouse arrives at the item image, it will be brighter. Besides, there is also a cta button that links to the Faouzia official merchandise website.
Figure 1.12 Progress of Merch Page
Final Submission
Website Walk-Through Video Link: https://youtu.be/Y0IsE0QxJ-c
Figure 1.13 Final Website Walk-Through Video on YouTube
REFLECTION
Experience
The final project in the Advanced Interactive Design module marked a point in my education that furthered my skills in web design and animation. My thematic interactive website for the artist Faouzia allowed me to incorporate a suite of elements into one seamless experience, including loading animations, interactive home pages, and multimedia content. Further, this furthered my education in Adobe Animate and confirmed the necessity behind detailed planning and consideration of every minor detail in interactive design.
Findings
Throughout the project, I find that subtle animation, for example, on the dynamic loading page with the "Megrim" typeface, speaks volumes in bringing life to user engagement. Incorporating interactiveness, for example, a vinyl record player on the Singles page, showed me the use of considered design in making user interactions both intuitive and delightful. Moreover, incorporating responsive design principles, such as images that lighten up on hover, made me realize the importance of feedback in guiding users' behavior.
Observations
The whole progress of this project really showed the importance of user-centered design in developing meaningful digital experiences. Iterations in design, testing, and refinement on every page created the need to match design elements against user expectations and preferences. More than that, aesthetic appeal had to be balanced with functionality to make the website not just look pretty but also easy to navigate. This experience encouraged my interest in the constantly developing field of interactive design and oriented me to create innovative and inclusive user experiences.
Comments
Post a Comment