Advanced Interactive Design: Task 1

 24/9/2023 

ALTAIFI, LEEN MAAN A (0367698)

Bachelor of Design (Hons) in Creative Media, Taylor's University

Advanced Interactive Design

---

Table of Content

1. Lectures

2. Instructions & Tasks

3. Feedback

4. Reflections

---

1. Lectures

Week 1 (24/9/2024):

We did not have a class for our first week due to lecturer being unavailable, however, the module information booklet was shared, so I went through it to know what to expect from this course.

Week 2 (1/10/2024):

In this class, we were introduced to Adobe Animate's interface, and played around with the tools. specifically the drawing tools. 

Fig.1.0: In-class Drawing using Animate

Week 3 (8/10/2024):

We practiced more on adobe animate and learned how to use the timeline to do 2d animations. We first tried out keyframing animation to learn the basics, then we moved on to twinning which uses significantly less frames.

Fig.1.0: Animating Using Guide Path

Fig.1.1: First Attempt at Animating Ball

Week 4 (15/10/2024):

We learned other ways of animating which includes shape tweening which morphs the shapes into another, and practiced more  keyframe animations. 

Fig.1.4: Letters Morphing by Shape Tweening

The shape tweening can be used in countdowns and transitions for a more interactive feel.

Fig.1.3: Spider Crawling Animation

Fig.1.2: Stickman Walking Animation

Week 5 (22/10/2024):

In today's class, we animated word transition animation using keyframe animation and shape tween. We also learned how to use mask layers by overlaying it on top of certain parts of the animation to hide and reveal.

Fig.1.4: 'Welcome' Animation

Week 6 (29/10/2024):

In today's class, we learned how to add actions to buttons to replicate a user interface using built-in Java script code. 

Fig.1.4: JavaScript in Adobe Animate

Fig.1.5: 'Enter' Button Animation

Week 7 (5/11/2024):

We built on week 6's file and added more pages after the loading page.

---

2. Instructions & Tasks

Module Information Booklet

Task 1: Thematic Interactive Website Proposal

A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have interactive components that provoke the user. This dynamic experience is meant to keep the user interested in addition to the thematic concept. Themes in such websites vary from educational, cultural, promotional campaigns to product launch.

Submission
1.     Completed UI/UX proposal document.
2.     All processes (concept, wireframes, mood board, flow chart)

Before choosing a final topic, we had to provide several potential topics and visual references for what our final project could be. My topics were:

1. Development of my final project in interactive design

2. Personal Brand Website

3. Dune info-page

Potential Topics Proposal:

adv interactive proposal by ALTAIFI, LEEN MAAN A

  

I showcased the lecturer my potential topics for the final project proposal. He advised me to go for the third topic, which was the Dune info-page, because there was the most content there. However, I wanted to go with my first idea but build more on it.

I chose to go with a portfolio website that showcases my work, the process, and my products.

Concept:

I will be creating an art portfolio website. The theme is dark, surreal, and deep ocean. It exudes eeriness and mystery, yet intrigues the viewer to see more. I will Add immersion inside the artworks as they are animated subtly.

Fig.2.0: Mood Board

Page Sections:

Fig.2.1: Page Sections for My Art Portfolio Website

Wireframing:

For the layout, I wanted to make it so all the website sections are seamlessly integrated; meaning, you can jump from section to section through buttons inside the sections themselves.

Fig.2.2: Process of Wireframing

Fig.2.3: Landing Page Wireframe

An example of seamless integration is how in the portfolio page, for each artwork, there is a button that links it to its respective merchandise/product. 

Fig.2.5: Products Page Wireframe

Fig.2.4: Portfolio Page Wireframe

The navigation bar will be always in place, except when an overlay page pops up. Such as in the products page; once a product is clicked, an overlay page will show that can link you back to the previous page.

Fig.2.6: Products Page > Prints Wireframe

Fig.2.7: Products Page > Prints >
Design title Wireframe

Final Proposal Submission:

adv interactive final proposal by ALTAIFI, LEEN MAAN A

 

---

3. Feedback

Week 3 (8/10/2024):

I showcased the lecturer my potential topics for the final project proposal. He advised me to go for the third topic, which was the Dune info-page, because there was the most content there. However, I wanted to go with my first 2 ideas which were almost similar.

Week 4 (15/10/2024):

I showed the lecturer my final proposal and my wireframe. We discussed about the layout of  the website and he gave me feedback on my design. He mentioned that the dropdown menu on my navigation bar is too basic and that I should find another creative way to do it.

Week 5 (22/10/2024):

I submitted my proposal and my lecturer noted that my wireframes were a bit unclear to see since the borders were too light, he suggested I'd shade the boxes with grey so it would be clearer.

Week 6 (29/10/2024):

The lecturer advised not to use too many videos because of Netlify's limitations; the website will not deploy if it is too big. Otherwise, my progress is good and I can move forward to making the presentation video.

---

4. Reflections

Experience

Observations

 

Findings

back to top