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
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

We followed the lecturer's steps and I learned that tweening can be applied to different situations other than positions but also opacity or expansion. There's also options such as easing to make the animations smoother.


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

Presentation




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

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