Advanced Interactive Final Project - Task 3

-

 Jason Antony

0356335

BDCM

Advanced Interactive design


Task 3 Final Project

Presentation Video
https://youtu.be/rRh_PHnY3Xk


I created the website according to my Figma design, and utilized Adobe animate to bring forth the animations and vision for my project to life. Reflecting on the journey of transforming my Figma design into a thematic website using Adobe Animate has been a profound and enlightening experience. As a designer, I’ve always wanted to create visually stunning and interactive user experiences. This project challenged me to push beyond static design and delve into the dynamic world of animation and interaction.


Starting with the Figma design, I was able to flesh out the aesthetic and structural aspects of the website. Figma’s robust prototyping tools allowed me to visualize the flow and interactivity of the site, giving me a solid blueprint to follow. However, transitioning from a design tool focused on static visuals to an animation tool like Adobe Animate was a significant shift. It required me to think about the nuances of movement, timing, and the user’s interactive experience in a more detailed and technical way.


One of the most exciting aspects of this process was bringing my design elements to life. In Figma, the website components were flat and static. But in Adobe Animate, I could infuse them with motion and personality. For example, buttons that simply existed in Figma could now have playful bounces or subtle hover effects. These animations added a layer of engagement that static designs couldn’t provide, creating a more immersive user experience.


A challenge I encountered was ensuring that the animations enhanced the user experience rather than detracting from it. It was easy to get carried away with the possibilities of movement and interactivity. However, I learned the importance of restraint and intention in animation. Each movement needed to serve a purpose—whether it was guiding the user’s eye, providing feedback, or simply adding delight. This restraint required a thoughtful balance between creativity and usability, something I had to constantly revisit and refine.


Another layer of complexity was introduced with the need for interactivity. Unlike in Figma, where interactions are predefined and limited, Adobe Animate allows for custom scripting to create unique user experiences. This required me to delve into basic scripting, a territory outside my usual comfort zone as a designer. Learning to write and implement scripts to navigate between different sections of the website was both challenging and rewarding. It gave me a greater appreciation for the technical side of web development and the intricate dance between design and functionality.


As I reflect on the overall experience, one of the most fulfilling aspects was seeing my initial static concepts evolve into a dynamic, interactive website. The thematic elements I envisioned in Figma—such as the whimsical transitions and atmospheric animations—became tangible realities in Adobe Animate. This transformation reinforced the power of animation and interactivity in enhancing a website's narrative and emotional impact.


In conclusion, this project was a journey of growth and discovery. It bridged my design skills with new technical capabilities, pushing me to think critically about the user experience beyond aesthetics. The process of turning a Figma design into a thematic website using Adobe Animate has not only expanded my skill set but also deepened my understanding of the digital medium’s potential. I am eager to continue exploring this intersection of design and animation, creating experiences that are as engaging as they are beautiful.



Comments

Post a Comment

Popular posts from this blog

Final Eportfolio - Games Development

-
Image
 Exercise Week 1 Adam's Nightmare  The concept of this game is similar to Limbo, by using silhouettes, and dreamlike design elements. The game is designed so that the users interpret their own stories. This creates a mystery that can be a profound experience for gamers. However, the gameplay could be drastically improved. For instance, the game basically revolves around jumping over obstacles and pushing or dragging different elements to progress within the "nightmare". However, the physics of the jumping is not responsive enough for the obstacle courses within the levels. the dragging and pushing are also designed in a way that causes the game to feel unrealistic. for instance, when the user tries to pull a box, the character seems to have the "force", so it could pull objects without actually touching them. The difficulty of the game is also a problem. Usually, difficulty levels scale within the game in a way where easier levels are
Read more

EXPERIENTIAL DESIGN - TASK 3 : CREATIVE EXPERIENCE DESIGN PROJECT PROTOTYPE

-
Image
EXPERIENTIAL DESIGN - TASK 3 : CREATIVE EXPERIENCE DESIGN PROJECT PROTOTYPE Jason Antony / 0356335 / Bachelor of Design in Creative Media Experiential Design Task 3 : Creative Experience Design Project Prototype November 5, 2023 TASK Instructions The prototype will enable the students to discover certain limitations that they might not have learnt about before. They’ll have to creatively think about how to overcome the limitations to materialize their proposed ideas. The objective of this task is for the students to test out the key functionality of their project. The output may not necessarily be a finished visually designed project. The students will be gauged on their prototype functionality and their ability to creatively think of alternatives to achieve the desired outcome.  Progression I started the project by looking at some 3D models for the cells on sketchfab, but then I found out there is a sketchfab plugin on unity. I then exported the 3d model into the AR Scene.  Once I exp
Read more

EXPERIENTIAL DESIGN - Final Task

-
Image
EXPERIENTIAL DESIGN - Final Task Jason Antony / 0356335 / Bachelor of Design in Creative Media Experiential Design Task 4: Creative Experience Design Project December 15, 2023 Coming from the prototype I've improved several parts of the app. **1. AR Scene:**    - In the AR scene, I experienced the heart of our educational AR app. Here, I harnessed the incredible capabilities of Unity's AR Foundation to bring cell biology to life. By simply tapping on the screen of my mobile device, I was able to place a 3D model of a cell into my real-world environment. It was awe-inspiring to see the cell model seamlessly blend with my surroundings. I used Sketchfab to import the 3d model and create the labels. Then I made the object able to rotate, zoom, and move using a plugin called Lean Touch.  **2. Notebook Scene:**    - The Notebook scene was like opening a digital textbook on my mobile device. It was designed to be viewed in portrait mode, offering a comfortable reading experience. The
Read more