INTERACTIVE DESIGN- FINAL PROJECT [Design, Exploration and Application]

 

4.11.2022 - 2.12.2022 (Week 10 - Week 14)
Loh Qiao Yin / 0348923 
Interactive Design/ Bachelor of Design in Creative Media / Taylor's University
Project 3
[Design, Exploration and  Application]

---

LECTURES

[Completed in Exercise blog]

---

INSTRUCTIONS

 />

---

TASK

i. SHOWCASE - Subpages
Subpage 1: Rating reviews of Love, Death & Robots first and second series

Fig 1.1 Screenshot #1 of subpage 1, 7 December 2022

Fig 1.2 Screenshot #2 of subpage 1, 7 December 2022

Fig 1.3 Screenshot #3 of subpage 1, 7 December 2022

Subpage 2: Thumbnail of video representation for the episode and list of episodes

Fig 1.4 Screenshot #1 of subpage 2, 7 December 2022

Fig 1.5 Screenshot #2 of subpage 2, 7 December 2022

Subpage 3: Image gallery with lightbox

Fig 1.6 Screenshot #1 of subpage 3, 7 December 2022

Fig 1.7 Screenshot #2 of subpage 3, 7 December 2022

Subpage 4: Embedded Youtube videos

Fig 1.8 Screenshot #1 of subpage 4, 7 December 2022

Fig 1.9 Screenshot #2 of subpage 4, 7 December 2022

Subpage 5: Shop

Fig 1.10 Screenshot #1 of subpage 5, 7 December 2022

Fig 1.11 Screenshot #2 of subpage 5, 7 December 2022

ii. LINKS

HTML and CSS codes - PDF of codes

[Resize the browser screen size if anything looks wacky]
Submission on Netlify -  https://assignment3-lohqiaoyin.netlify.app/

---

FEEDBACK

Week 14

- Change the columns to unordered list if the purpose is to showcase a list of episodes.
- Border bottom can be used too instead of <br> and it gives more control easily

---

REFLECTION

I am glad that the final website is very close to what I designed on Adobe Illustrator. In a few sections, I initially changed the layouts to something else because I had difficulty finding the codes for the design I want. However, I kept googling for resources and manage to stumble upon useful tutorials to guide me. I would have never thought of coding a complete website and I am thankful that I got the opportunity to learn what goes behind the structure of the codes in each website.