Application Design II / Exercises
05.04.2023 - 26.04.2023 (Week 1 - Week 4)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Application Design II
Exercise
 |
| Fig 1.0: Thumbnail |
INSTRUCTIONS
Exercise 1
On the very first meeting, we were brought to recall the HTML, CSS, and JavaScript that we. have learnt in the previous semester. The lecturer also introduced us to an AI chatbot called ChatGPT, which is an AI tool to help us write code. It was my first time hearing of that tool so I wasn't so familiar with it on my first trial. After introducing ChatGPT, the lecturer assigned us to create a simple website to recall our memories of coding things. We were asked to create 4 pages such as Home, About, Portfolio, and Contact Me.
Here is my attempt to build a portfolio website.
https://exercise-1-lulu-4.netlify.app/
Exercise 2
We were given a second exercise to build a mobile site according to the Figma design below.
 |
| Fig 2.1.0: ibandsnet UI Design |
I tried to recall my memory about HTML and CSS so I can proceed with creating this site. It was surely difficult at first, but as I recall things by googling and watching tutorial videos, I can finally manage to create almost the same layout as Mr. Razif's one from Figma.
During the tutorial session, we learnt how to make a style change when we click on a particular item.
 |
| Fig 2.1.1: Script for changing style |
Next, we were introduced to GSAP, a JavaScript animation library. Before starting anything, attach this script below in the <head> section in our HTML file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
We can add animation to our site by putting the gsap animation script in the <body> section of our HTML file.
 |
| Fig 2.1.2: Script to hide and open panel |
 |
| Fig 2.1.3: Script for animation after page load |
 |
| Fig 2.1.4: Script for Splash Screen |
https://exercise-2-lulu-4.netlify.app/
Exercise 3
To enhance our skills in animating, we were given another exercise to animate the app logo. In this case, Mr. Razif told us to create a circle and star in Illustrator and save it as .svg as it is easier to animate an image if it is in .svg. Here's my logo.
 |
| Fig 2.2.1: App Logo |
FEEDBACK
REFLECTIONS
Even though I have done building a website for Interactive Design module in Semester 2, I have forgotten how to do this and that, but not completely forgotten. At first, I was so confident with myself. I was like, "Ah, there's no way I can't do this. I have done this in the previous semester." However, after I started to build this into HTML I got choked. Why is it so difficult? As I remember it is very enjoyable why I can't do it now? But then I tried to recall everything and also watch some tutorial videos. Turns out that I can do it HAHA I wonder why am I not confident in the first place. However, with this exercise to begin our module, I think it really helps me a lot. I can recall what I have forgotten and also even learnt new things like animation with or without gsap. This will really help me later when building the front-end part of my mobile app.