Interactive Design (Exercise)

on
Week 1 - Week 8 [24/4/2024 - 12/6/2024]
Kong Ga Wai 0359692
Bachelor in Design Creative Media  
GCD60904 - Interactive Design
INSTRUCTIONS

EXERCISE 1 - Web Analysis

Loading time can be slower on older devices. It is more enjoyable to use on bigger screens (PC) than on smaller screens (Mobile).

Grinds shows us the principles of using grids. This website is unique and stands out a lot. It has two modes, normal mode and ‘crazy mode’. In the normal mode, it looks simplistic with just black and white colour while in the ‘crazy mode,’ it is vibrant yellow and black. At the start, the website moves horizontally only then it moves vertically.

Normal Mode

Crazy Mode

In normal mode, the website looks clean and tidy with straight and clean lines, as if it is following a rule. While the ‘crazy mode’ is more freestyle and wilder with uneven and wobbly lines with scribbles, as if it is breaking a rule. 

The font used is simplistic which suits the website well. However, some font sizes are too big which makes the website look compressed and some sentences need to be arranged more neatly. But the big font does work with some parts of the website. 

Arrangement

Feels Compressed

Big Font Suitable Here

From what I’m getting from this website, in the normal mode it teaches us the different types of grids and how to follow the principles of grids. After going through the normal mode I turned on the ‘crazy mode’ and went through everything again. In the ‘crazy mode’ it is like they are telling us that we can break the principle of grind and use our creativity. 







UFOMAMMOOT: https://ufomammoot.de/en/

Loading time can be slower on older devices. The transition to another site will sometimes not as smooth due to the loading taking a while. It is more enjoyable to use on bigger screens (PC) than on smaller screens (Mobile).

Unlike any other websites that use a scroller, UFOMAMMOOT is a click-and-drag to get around. It is very interactable similar feeling to a 3D virtual reality (VR). This website has a mix of 2D and 3D virtual with the 3D models and 2D animation effects. Their large size font is suitable for the website because it is easy to see the headings, they also have a soundtrack for it.

Drag TO Move Around

2D and 3D Visual

In their ‘work’ section they show some samples of the things they had made and all if them have their own unique style. As unique as the website looks, unfortunately the information is scattered everywhere which is a hassle to go through. Not to mention that while dragging you can unintentionally click on the buttons that lead you to a different site. 

Clickable Icons

3D Have Depth

Model Follows Cursor

One part of this website that surprised me was that they have a whole section in ‘Virtual Space’ where we can see their WebVR version of their website. There you can even move around with the arrows provided and explore. 

Inside Their WebVR

Arrow To Move Around

The control in the virtual space is a little hard to get a hang of and it takes multiple stocks to look in the direction you wanted. 


EXERCISE 2 - Web Replication

We were tasked to replicate TWO existing main pages of the website given to get a better understanding of their structures. The websites provided are Morgan Stanley, Bandit Running, and Ocean Health Index. The websites I choose are Bandit Running and Ocean Health Index.

Bandit Running: https://banditrunning.com/


Process

First I went to find some images to use in the replica website. For the images, we are allowed to use any free stock images online. 

Place Image Chosen

We have to find fonts that are the most similar to the original website. The font I used for Ocean Health Index is Nunito Sans and as for Bandit Running it is Roboto.

Font used: Nunito Sans


Some of the logos/icons were hard to recreate in Adobe Illustrator so I used a drawing software to recreate them and then imported them into Adobe Illustrator. By using image trace I was able to do finer tweaking to them. 

Logo Recreate on Tablet then Imported


We were also allowed to use already premade AI files of social media icons from Freepik to save us from suffering further. 
(Ok we didn't suffer thaaaaaat much......)

Social Media Logo from Freepik

The process of replicating Bandit Running is overall the same as Ocean Health Index (OHI). But compared to OHI there are more (simpler) icons and logo to recreate. 

Making the Arrow

There is this interesting gradient for one of the title on the original website. It is a mix of metal and marble effects. But it was harder to recreate it with both effects so I ended up just giving it a metal gradient. 

Metal Gradient

Compare to OHI, this logo was way easier to recreate in Adobe Illustator.

Recreating Bandit Logo

Final Submission 

Replication of Ocean Health Index

Replication of Bandit Running


EXERCISE 3 - Creating a Recipe Card

In this exercise, we had to create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. 
The recipe I choose is the Yellow Cake with Chocolate Frosting.


Process

First, I give myself some ideas for the design. I want it to look tidy and more interesting but the more complicated it looks the harder it is to input the codes in so I ended up sticking to a simpler basic look. 


I struggled a bit at the start, trying to find the code I needed (a text with a border). I looked at an old exercise's codes to use and compare it. 
There were other codes that I searched online for such as "Html how to center a picture/text", "Html code border types", "Html code bullet point number", etc.

Assigning class and id

At first, I don't know how to feel about having to jump back and forth from the HTML screen to the CSS but it wasn't that bad and it kept each screen tidy and clean. 

Working in CSS

Found out '&'  have to be replaced with 'and'

After going back and forth for a while I eventually grasped a better understanding and was able to code some parts from memories (they will in fact not last for long). Everything went from a rough start to somewhat a smooth sailing process, ignoring that most errors I made were spelling errors. . .

HTML Code

CSS Code

After finishing everything, I tidied up the code more and uploaded the files to Netlify. 


Final Submission