Advanced Interactive Design

30.08.2022 - 29.11.2022 (Week 1-Week 14)

Hussain Waheedh / 0344802

Bachelor of Design (Hons) Creative Media

Advanced Interactive Design

INSTRUCTIONS:

Figure 0.0 - MIB

We didn't have class on the first week as it was a public holiday. On the first class, Mr.Razif briefed us on the module and the tasks via the MIB and showed us some sample senior works. We were instructed to use Adobe animate to design a mobile application and a web application for a brand and also to use Spark AR to make an interactive filter all for the same brand. He told us to install the applications and get familiarised with the applications for the next week.

On the next class, Mr.Razif introduced us to Adobe animate and taught us how to do basic animations. We did a few versions of different animations in class.

Mr.Razif gave us an excercise to do on animate. We were told to animate a ball to go from one corner to the other till it completes the four sides and then go to the middle, fall down and bounce back, and then turn into a rabbit.  My attempt is shown below.

Figure 0.1 - Animate exercises

Figure 0.2 - Animate exercises 

The next class was about managing content on different pages. This was important because it deal with the structures that will be used on the main assignments. Mr.Razif showed us how to design content as well as interactive buttons on different pages and how to animate each of the elements. 

Figure 0.3 - Animate exercises

Afterwards we learned deeper into designing and coding different pages with navigation and coding. It was difficult to follow but managed to get by watching videos.

Figure 0.4 - Animate exercises

It was particularly difficult for me to do coding but Animate has a wizard feature that makes it easier to input and generate the commands.

Figure 0.5 - Animate exercises

Later Mr.Razif showed us how to make digit counters in Animate.

Figure 0.6 - Animate exercises

TASK 1: Interactive web application

The fist task was to design a mobile app that contains more than 5 screens, transitions, animations and scripted buttons. For this we were required to come up with a brand (existing or our own make. 

I decided to make my own brand for an online bookstore. I checked for some inspiration and ideas online for the brand and UI design.

Figure 1.0 - references

After getting some ideas, I designed the brand logo and came up with the typography adn colour theme.

Figure 1.1 - logo design

I used a some visual references and started designing the app interface.

Figure 1.2 - UI design references

Figure 1.3 - UI design

After getting the first two pages, the rest was fairly easy because I had the direction sorted out. 

Figure 1.4 - App design

Figure 1.5 - App design

Figure 1.6 - App design

I finished designing all the UI and then started designing in animate.

Figure 1.3 - App design in animate

I used the design assets from illustrator file and designed everything remaining on Animate. I learned a huge deal about adobe animate while doing this task.

Figure 1.8 - App design in animate

Figure 1.8 - App design in animate

The scripting was really problematic. I had to restart 3 times because my script make the whole file bad. I couldn't make it work so started again and again.

Figure 1.8 - App design in animate

Figure 1.9 - App design in animate

I finally managed to get the codes right by putting the navigation buttons on a single layer. But it took a lot of effort to make it work using one layer and so many buttons.

Figure 1.9 - App design in animate

SUBMISSION

Here is the video playthrough of the final submission for Task 1.

Task 2: Spark AR Filter

For the second project, we were instructed to design an interactive instagram/facebook filter for the brand we designed for Task 1, using Spark AR. 

I had previously used Spark AR to make a filter but it wasn't easy to work with for a beginner. I looked at some filters for inspiration and decided to do a filter-game that will show two books at a time and asks the user to pick a book they want to read.

I watched some youtube tutorials and made the filter in spark AR. I made the graphic assets in adobe illustrator.

Figure 2.0 - Assets from illustrator

 I made the graphic assets in adobe illustrator.and then imported them into Spark AR.

Figure 2.1 - Filter design in Spark AR

I don't fully understand how all of the tools work in Spark AR so I strictly followed youtube instructions and it worked. But I still need to get more familiarised to the app.

Figure 2.2 - Filter design in Spark AR

SUBMISSION

Here is the video playthrough of the final submission for Task 2.

FINAL PROJECT: Interactive Web Application

For the final project, we were instructed to make an interactive website for the brand including the filter and a link for the application fpr task 1.

I browsed for some UI inspiration and started designing some ideas on illustrator. I kept the design theme fairly consistent to the app design.

Figure 3.0 - Webdesign mockup

 I used a mockup to replicate the app design on an iphone and i used various screens from the initial app design for Task 1, as assets for the final project.

Figure 3.1 - Webdesign illustrator

I redesigned the website using the style of the app but made it more interesting and also more room for animations.

Figure 3.2 - Webdesign illustrator

Figure 3.3 - Webdesign illustrator

After getting all the pages designed, I exported the assets into Adobe Animate and designed the final website in Animate.

Figure 3.4 - Webdesign Animate

By this time, I was more confident with Animate and scripts. It was easier than the first task and I only did it once this time.

Figure 3.5 - Webdesign Animate

SUBMISSION

Here is the video playthrough of the final submission for Final project.

FEEDBACK:

Task 1: Mr.Razif said that the app is okay but some adjustments could improve the interactivity such as button animations.

Task 2: Mr.Razif said the filter is okay.

REFLECTION

This module was already the toughest module I've gone through so far and Advanced Interactive turned out to be one of the toughest modules. It had a lot to do with so many classes being missed and having to work on a completely new application with very little consultation and feedback. I had to follow a lot of youtube to do my tasks and it was really difficult to do. Coding and scripting is one of my weakest areas so I struggled a lot with this module. But I'm glad I managed to complete all the tasks.