Application Design II / Exercises

05.04.2023 - 16.07.2023 (Week 1 - Week 14)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Application Design II / Taylor's University 
Exercises

---

LIST

• Practical Notes
• Instructions
• Exercises
• Reflection

OTHER POST:

Exercises
Task 1 : App Design 1 Self-Evaluation and Reflection
Task 2 : Micro Interactions and Animated Micro Interaction
Task 3 : Final Project and Portfolio
Application Design Final Compilation / Reflection

---

PRACTICAL NOTES
<back to top>

Week 4 (26/04/2023):

Adding javascript:

1) to change the text

2) on-click

(on the js)

(on the elements)

3) change color

4) using var to change into more than 1 command

5) hamburger menu

-to make the side panel open and close 

Week 5 (03/05/2023):

source: here

a website to help in creating some animations that are planned to use in the file, using the helps of javascript.

How to add/download:

copy code, paste in before head tag in the html

1) animation

gsap.from("#id", {x:, y:, z:});

2) ease

, ease: "expo.out" (or anything from the choice in web)

3) delay

, delay: addnumber

4) hamburger movement

add the coding to the js code

5) transition screen from to screen

• make a div for screen 1 and screen 2 and add ids
• coding example:

Week 6 (10/05/2023):

1) To make animation on a logo navbar:

2) To make timeline:

var / let / const (fixed)

example:

3) Make another page:

---

INSTRUCTIONS
<back to top>

Exercise 1 (5/04/2023):
The first exercise is to recall on the past HTML and CSS that have been taught in Interactive Design. Mr. Razif tasked us to create a website using HTML and CSS code using either Dreamweaver / Visual Studio Code / any platform used for coding, with terms described as:

• It has to have 4 sections consisting of Home, About, Portfolio, and Contact.
• It has to have a sticky navigation bar.
• It has to have some images showcasing the portfolio.
• It has to use HTML and CSS as the basic.
• It can use the help of AI generator like chatgpt, perplexity, etc.

Exercise 2 (12/04/2023):

Recreate the ibandsnet

Exercise 3 (12/04/2023):

ibandsnet javascript

Task 1 (5/04/2023):
Analyze the (+)/(-) from your previous work of app in Application Design.

---

EXERCISES
<back to top>

Exercise 1 (05/04/2023):

The first thing I do was reinstalling the Adobe Dreamweaver, because I reset my mac to clean up some storage. Then, I began to try the chatgpt and perplexity, both offer different codes but still creating the things I want.

I tried the chatgpt feature. To be honest, it's a lot of fun talking with it.

fig 3.1, talking with chatgpt, Week 1 (05/04/2023)

Then, I proceed to put it on Dreamweaver, 

fig 3.2, coding, Week 1 (05/04/2023)

So this is my final for the first attempt: Exercise 1 - Attempt 1

fig 3.3, home preview, Week 1 (05/04/2023)

To be honest I just copy paste everything from chatgpt without customizing it. I even add the pictures using dog photos I got from pexels.

I feel like it's effortless and not good enough, so I planned to make everything from the scratch again. I talked with chatgpt and the AI was really helpful. This time I planned to make a real portfolio, it's not like I'm planning to be an illustrator, but since I don't have much past worked for the UI/UX Design, I feel like I'll just make an illustrator portfolio.

I use chatgpt again and proceed on making the code.

fig 3.4, second attempt coding, Week 1 (07/04/2023)

I feel better with the latest version of the portfolio:

fig 3.5, second attempt cover, Week 1 (07/04/2023)

So this is my final for the second attempt: Exercise 1 - Attempt 2

Sir Razif recommended to add scrolling effect, so I add the code for the smooth scrolling effects. Here are my final: Exercise 1 - Attempt 3

Exercise 2 (12/04/2023):
In this second exercise, this time, Mr. Razif tasked us to recreate his app design but using HTML and CSS. So, he provided this design:

fig 3.6, second exercise, Week 2 (12/04/2023)

Our task is basically to design the "Main" board. All of the images and icons are provided, we just need to export. 

I started with exporting the images and renamed it. 

fig 3.7, exporting jpg png, Week 2 (12/04/2023)

Then, I began to create the index.html and the style.css. I began to create the navbar. My first attempt was to set the font style first from GoogleFonts. Then, next step was to be honest I just dump all of the contents needed. I also searched on some websites like W3S, HubSpot, and chatgpt (but not the exact code).

Then I proceed on making it centered, following the concept given. At first I was so confused how to make 1 picture on the left, 1 picture centered and the other to the right. So, I experimented with some of the possibility. But still nothing works.

I decided to use table, where I divided it into 4 columns, so I can customize each cells individually. Finally, I did my navigation:

fig 3.8, nav bar, Week 2 (12/04/2023)

After that I began to create the image placed some context on top. I began to think all the possibility. The things that came out of my mind were;

        a) make the picture as the div background;

        b) make the picture and content not as div but using the CSS to customize.

I decided to go with option b, because I already tried the option a, and I want to experience new things. Thus, here's my output:

fig 3.9, main, Week 2 (12/04/2023)

I was confused to use container section or table, thus I decided it's easier to use table because we can merge the column. I tried using rowspan, and it works. My problem at first was the width of the gray row was only 50% and I was so confused on how to make it larger. But then, I solved the problem using width css on the gray column div.

Moving forward to the images gallery; to be honest I asked the help of chatgpt. I know how I'll do it but I don't know the code. So basically I just divided them into 2 rows, 4 columns. This time I want to try using div. So here we go;

fig 3.10, gallery, Week 2 (12/04/2023)

Proceeding to the footer; I didn't use <footer> but instead I used <div>, and just proceed in creating the color, shading, and min-height.

Here's my final:

fig 3.11, final preview, Week 2 (12/04/2023)

Here's my final file on netlify; Exercise 2 - Attempt 1

note: to view the exact, neat size of the layout please inspect element and use Pixel5 format (393 x 851)

Exercise 3 (26/04/2023):

First, we started on creating a simple basic javascript, where it changes the text when tapped. I decided to change the text from "Mangsa" to "Green Day-Dookie", so I add the javascript coding to make it change when tapped. It worked.

Proceeding on, sir tasked us on doing the background color for the text, using the background style javascript, I created the background color. I couldn't decide on the color, so I roughly just go to pink, and thus it looked like this:

After that, the question is, how to change it back to the previous form? So sir explained to use the var counter with 0 1 something like we learnt before in Animate. Thus, we were tasked on make the form change when we tap on it to change color and text. 

Previously, I succeed on creating the separate version of the tap, but I want to change it with making it change together when tap. So, sir explained that it can be done if the codes are put on the same variables.

So, this is my output.

(when tapped)

The next part is, we learned on how to create the hamburger menu, sir gave us some css code to work with, and before it can overlay, I haven't change my position to absolute.

Then I add the code to make it open and close, then it works. I tried to change the background color because it looks boring:

Here's my final file on netlify; Exercise 3

Exercise 5 (03/05/2023):

The first task we do is trying to animate the logo. First by giving id to the image we gonna animate, then, adding the GSAP Code in the script part.

Preview:

Then making for the other icons as well, with adding "delay" and "ease", also to the box:

Then, we began to create the hamburger menu open and closing animation. We planned to make it like the hamburger menu was put on very left then later go inside. First, we // the previous coding, so it won't function, then we add the GSAP and edit the x axis. From the previous CSS we need to make the display from none to block, and change the "left" (position) to minus. Preview:

Adding logo screen. We created a div first for the logo and home, to make it separate per sections. Then we add the js coding (can be seen on practical section).

Here's my final file on netlify; Exercise 4

Exercise 6 (10/05/2023):

We continued on doing our last week exercises, now we try to animate the logo in navigation bar. At first I can't make it animated, then I just realized that I haven't add the playLogo();

Then I tried to add the other animation also, and:

var basically has the same function as we put delay manually, but it'll make it automatically.

Next thing is to make the hamburger menu having animation.

Then we proceed on making another page, as you can see I put the coding on the practical session. My first problem was I don't put (); behind the onclick, then, second, my problem is I haven't separate this div with the another div. Then third, I haven't put the display: none; on the CSS. Finally I can make something like this:

Exercise 7 (17/05/2023):

In this week class, sir did a little test. So, from the previous file, we need to add icons on the footer bar.

So I did my footer before, so I just add another table and column for the images.

I just realized I need to add the justify-content and everything is fine. Next step is to add animation to the icons.

Exercise 8 (22/06/2023):

Create a SVG File, copy the coding

Add the GSAP database coding (idk how to say) : GreenSock

Paste the SVG code, add id on the class of the shape

Then add the GSAP Animation:

preview:

I tried to make something different, thus I looked for some GSAP codes and examples that I can implement on my logo:

preview:

For now, if just the logo I guess it's fine, but if there's content, I think it will be messy because the points (Npoints) are already decided.

---

REFLECTION 

<back to top>

EXERCISE 1

From the first exercise, I re-learned about the HTML and CSS and I finally understand the easiest way and instant to code the coding, by using the help of chatgpt. But even, only it seems like it's easy, it's still difficult if you don't understand the way coding works. So what I learned is that, learning the basics are very essential in doing something, that's why it's important to always learn the simplest thing, most basic way to achieve higher outcomes.

EXERCISE 2

The second exercise taught me that there's no instant process. Always ups and downs. Sometimes I struggled, sometimes I was very happy that my code worked out as I want. The whole exercise 2 has give me a recall to my memory about HTML and CSS. Also what I want to take note from this exercise is that, even you didn't remember the code, as long as you understand the concept and know what to do then you'll be fine.

EXERCISE 3

On the next exercise, I learnt about javascript for the first time. Surprisingly it was not that difficult as I imagined, maybe since it's just a beginning. What I learnt and reflect about in this exercise, to create a nice and clean and neat file, we need to make some sections/divs which can make it like "grouped". Always make file with cautions.

EXERCISE 4

In this exercise, I learnt more about javascript, about how to animate object with javascript. I found out that it's not that difficult as long as you understand the basics, and we can always open GSAP. Again, like what I mentioned last week, it's important to have a clean divisions of each sections using div and sections, and adding class/id accordingly.

EXERCISE 5

I feel amazed with the power that GSAP can do, it can animate anything like the things I saw on professional works.

EXERCISE 6

Now this exercise answer on my curiosity on how do we move to other page on coding, so that's the answer...

EXERCISE 7

This mini test is not that difficult to do to be honest, I can achieve it with my current coding knowledge, only the GSAP part I need to think more because I haven't really understand it.

EXERCISE 8

I can now animate the logo using SVG. But I personally think some is better to remain using png because not every logo is solid shape, what if the logo is too detailed.