Interactive Design/Project 2

22.5.2023 - 11.6.2023/Week 9 - Week 11
Sim Jian Xiong (0356498)
Bachelor (Hons) in Creative Media
Project 2

---

INSTRUCTIONS

---

Project 2 - Working Web Page

This task is a sequel to Project 1, where we have to transform it static prototype into a fully functional and interactive web page. We have to ensure that it closely aligns with our original prototype.

For clarification, this task doesn't need to have multiple pages, the tabs have to give off feedback such as highlight and opacity.

One command I tried to learn is the hover effect, where the text shows up when your mouse hovers over the image, an effect I often see on movie websites to show the film's synopsis and runtime.

Fig 1.1 Hover Effect Attempt, Week 11 (8.6.2023)

I followed a YouTube video, but I couldn't make the text show up, only the highlight.

Fig 1.2 Footer Comparison, Week 11 (9.6.2023)

I tried to follow my prototype right down to the footer, but unlike Figma, I cannot drag and drop text boxes and images around freely, I have to set the proper commands. This is became an obstacle since I lack experience in coding and can only blindly follow videos. Honesty, I prefer the footer made in Figma because of good spacing as I used a grid, but I don't know how to apply this on Visual Studio Code.

FINAL SUBMISSION

Project 2

---

FEEDBACK

Week 9

General Feedback: If the website looks good, people don't realise the errors.
 

---

REFLECTION

I tired my best to match my prototype on Figma to the one one Visual Studio Code. But I was struggling due to my lack of experience in coding. I'm not aiming for pixel perfect but I wanted to at least meet some small goals of mine like the hover effect, which I was really looking forward to.