Advanced Interactive Design - Final Project: Completed Thematic Interactive Website

17/11/2024 - 8/1/2025 / Week 10 - Week 14
Cindy Clarissa Leslie / 0367677
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project: Completed Thematic Interactive Website

TUTORIAL

In this tutorial session we were generally introduced to using gsap and external codes into our work. This is to ensure that interactions are functional yet can be done within one frame that could save up space. The tutorial mostly used codes that allows the manipulation of an element's position.

Figure 1.1 Gsap tutorial file

Figure 1.2 Introductory codes

Next, we had to apply the knowledge that we got from this tutorial onto a new file, where we basically have to navigate onto specific different parts of the image we chose combined with the code 'scale' to zoom in and out.

Figure 2.1 Tutorial shown in class using gsap


INSTRUCTIONS




Final Project [Completed Thematic Interactive Website]

Design Process

Figure 3.1 Designing the homepage

In the loading and homepage, I initially wanted to try to animate using gsap immediately but I was met with issues that led to errors instead. So instead of further wasting my time, I utilised motion tween instead and layered both of them over each other to create the dissolve transition that I initially wanted. Though the animating process was easy, I found the classic way to be rather tedious as I had to create new layers for each elements and the timeline would get annoying instead.

Figure 3.2 Button designs

To keep it simple, I simply changed the colour when the button is hovered above.

Figure 3.3 Change in exhibition button

In the exhibition page, I encountered a problem where I figured I had to change the way the interaction should work since left or right buttons wouldn't definitely work when I want to showcase all the artworks. In comparison to the prototype, which I showed 3 artworks, I wanted to show all 10 of it. I eventually improvised and created small circular buttons on the left that users can individually click on to see the full artwork.

Figure 3.4 Using gsap codes

Since it is such a large element and the nature of the interaction itself, I knew I had to make it work with gsap. I referred back to the tutorial and found out why I've been encountering errors is because i didn't add 'this.' in front of the element of the timeline. Thankfully the codes worked in the end and I got a lot more confident in using gsap for the other pages.

Figure 3.5 Combining gsap and classic shape tween

In this page, I used gsap to change the position of when the articles enter the page, however I was unable to find a way to use gsap in order to directly change the shape (in this case extend) therefore I had to improvise and use shape tween instead. I copy pasted the tween and pages and simply changed it according to the content and coded so that the buttons work in showing specific articles chosen.

Figure 3.6 Gsap coding for ticketing page

Another struggle that I've faced is when I was trying to complete the ticketing page, I wanted to use gsap so that I can get a smooth infinite loop in the artworks showcase however I didn't know much codes aside from the extra basic ones. I eventually looked further into the gsap websites to learn, look at forums and was able to create the desired finish.

As a finishing touch, I searched up tutorials on how to add in music and successfully implemented it onto my design.


Final Project: Completed Thematic Interactive Website

Google Drive:

Figure 4.1 Final design showcase


REFLECTION

While i try and complete my work on animate, I've had a bunch of things I struggled with, especially in relation to coding and gsap. There was even a day where I wasted my time being frustrated over the coding and got nothing done. From this assignment, I learned to be more attentive and studied more about the nature of coding which I should definitely keep mind of in the future. I would say this is the less fun part in comparison to making the prototype, using a program that you are not used to could be frustrating, but again it is a learning process that also hones our skill of being adaptive towards different kinds of technology. 

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Task 3: Type Exploration and Application

Image
16/6/2024 - 22 /7/2024  / Week 9 - Week 14 Cindy Clarissa Leslie / 0367677 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 3: Type Exploration and Application LECTURES Link to  lectures 1 to 4 Link to lecture 5 INSTRUCTIONS In this task, we were required to propose specific problems and how we could design a font in order to solve them. These proposals were collected in slides format and proposed to the lecturer in order to decide which ones were good enough to do. Research Figure 1.1 Slides for proposal. Week 9, 16/6/2024 In the end, I chose to create an extension based on my old font and go with the final idea of creating a font for a band, I wanted to be able to present their metalcore music that showcases how different songs in the album is able to be loud and sharp, while some of their songs are on the softer side. Figure 1.2 Original logo/typeface for the band. Week 9, 16/6/2024 Setting the original typeface as a reference itself, I wanted to be ab...
Read more

Application Design - Final Project: High Fidelity App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Read more

Application Design - Project 3: Lo-Fi App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Project 3: Lo-Fi App Design Prototype LECTURES Week 11: Lecture 11 Usability testing Evaluate a product or service with representative users The aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Create scenarios for the participants, observe how they use it and gain insights. (3 different scenarios for 3 different users) Create a low fidelity wireframe first (does not contain graphics nor colours, just the main idea of the whole layout) UI Kit Should include aspects of the design: typography colour palette iconography INSTRUCTIONS Project 3: Lo-Fi App Design Prototype UI Kit As stated in the lecture, the UI kit should be created first to predetermine the design's typography, colour palette and iconography in order to ensure that it stays as consistent as possible. The kit will then be used as a f...
Read more