Advanced Interactive Exercises

 24th April 2024 (Week 1)  - 15th July 2024 (Week 13th)

Insha Thahirah Rajab - 0360671

Advanced Interactive Design - Section 04

Bachelor's Degree  in Creative Media (Honors) - Taylors University

Exercises


CONTENTS

Lectures

Instructions

Task 3

        Exercise 1

Feedback

Reflection

Further Reading


LECTURES

Lecture playlist: https://www.youtube.com/playlist?list=PLZk01iRkmnlUF8tRLTTAogutYcraV6DFR

refer to task 1 & task 2

Text Formatting & Typography Letterforms

As taught during the course of Task 1, I went through a refresher course on the Anatomy of a Typeface in order to create my own font.


INSTRUCTIONS


TASK

Task 1 - Proposal

Thematic Interactive Website Proposal for Brand Engagement.


Requirements

Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:

1. A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder,

2. Movie promotion

3. Game release promotion.

4. Gallery/Museum exhibit launch

5. Band/Artist latest release.

6. Or anything else you have in mind (subject to the module coordinator’s approval)


Submission

1. Completed UI/UX proposal document.

2. All processes (concept, wireframes, mood-board, flow chart) have to be documented and posts in your E-portfolio as your reflective studies.

3. A video presentation or Class presentation (to be decided by the module coordinator.


: week 2 tutorial

During week 2, Mr Shamsul taught us the basics of using Adobe Animate. For our first exercise, we were to use basic shape tools and colour to recreate this picture of this sailing boat:


I started off by using a black outline to trace the boat. I later realised this was inefficient in getting color and separating the shapes.


By using layers, I divided the shapes and kept the Template locked and at 50% opacity. This helped get the form better.






This was my final outcome without the template: 


: week 3 tutorial

During week 3,



: week 4 tutorial

 In week 4, we learnt tweening effects and how to use a guided path for easy motion. We started off by making a simple beach ball bouncing animation. 


This effect was created with tweening and ensuring the points were clipped to the pathway, making motion tweening much easier.





This was the final outcome with all effects combined:



: week 5 tutorial

For week 5, we started off by animating a spider crawling. I started off by tracing the simple spider design, making sure to catogerize the head, body, legs, etc into separate layers and then grouping them into a graphic object.







Next, I moved the spider from one point to the next. After double clicking the spider, I was able to adjust the motion of each section individually, such as moving the legs and eyes around as the spider bounced.




After adding some basic tweeing effects, the animation was complete:



Our second exercise was a bit more complex, and involved using real-life images to animate a transition. We picked a living room setup from pixelbay and followed Mr Shamsul's instructions.


With some simple tweening using the line and box tool, we were able to create a smooth transition to the image.



This was the final result:




: final poster 


This is the poster i was happy with. It had the perfect balance between black and white space, had interesting composition, and the perfect sizing of fonts. It also looked visually appealing both closeby and at a distance.


Figure 3.7 Final Font Design


REFLECTIONS


Experience: Thise sketched un-thought-of drafts was selected by Mr. Max and I found it slightly challenging to take my own font seriously.

Observations: While observing, I observed that 

Findings: I understood the different types of fonts and their purposes.


Comments

Popular posts from this blog