Advanced Interactive Design - Project 2: Planning and Prototype
20/10/2024 - 17/11/2024 / Week 6 - Week 10
Cindy Clarissa Leslie / 0367677
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2: Planning and Prototype
TUTORIAL
During the tutorial session, we were taught on how to make a basic animation after learning mostly about tweening instead of changing the position of an element one by one. This serves as a basic skill we can apply onto the final project after on.
Figure 1.1 Making enter animation
Figure 1.2 Learning how to input actions by coding
To make actual interactive elements, the 'actions' feature was introduced. The codes that I learnt were mostly used to click on elements and taking users to go to a specific frame which will especially be useful when designing a website. The codes were generally essential as it allows the file to be functional as a website prototype.
Figure 1.3 Animation tutorial video
INSTRUCTIONS
Project 2 [Planning and Prototype]
Design Process
Figure 2.1 Homepage design
While designing the homepage, I added elements that I should be consistent with, not only the colours but I've added in rounded borders to give the website a more modern look that feels rather 'sci-fi'. I also decided to change the main font for the title to the one on the left since it gives off a cleaner yet scientific look that goes along with the computer engineered aspect of TeamLab as a museum.
Figure 2.2 First layout for exhibition page
I initially struggled with searching for a good layout in this page as I wanted to present both information and image clearly. If I followed the wireframe I figured that readablity will be difficult.
Figure 2.3 Final layout for exhibition page
I figured I could use gradient like I did in the home page, which eventually become one of the main elements of my design aside from the border. This way I could potentially showcase all the artworks that TeamLab has to offer fully.
Figure 2.4 Full figma wireframe and prototype
In the end, when I finally figured out the reocurring elements I applied them easily onto other pages including: home page, exhibition page, news page, artists page and lastly ticket page. After the design itself, I created added in animations to make the prototype as interactive as possible.
Project 2: Planning and Prototype
Figma Prototype
REFLECTION
Since I was already somewhat familiarized with Figma, I didn't struggle much in creating the prototype. However, I was more mindful in finding the animations. I had to find transitions/animations that would be fitting but also be simple enough for me to replicate in Adobe Animation especially since I'm newer to the program. Though I found that this wouldn't be a huge problem since it would go with the minimalistic concept. Overall, this task highlights how essential prototypes are before final designs.
Comments
Post a Comment