Interactive Design - Final Compilation

4.4.2023 - 14.7.2023 (Week 1 - Week 15)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media 
Interactive Design
Final Compilation

---

QUICK LINKS

Lectures & Exercises: Web Analysis, Web Replication, HTML and CSS Document Development 

Project 1: Landing Page Design Prototype

Project 2: Working Web Page

Final Project: Design, Exploration and Application

---

MODULE INFORMATION

<iframe src="https://drive.google.com/file/d/1kLhiKZEQ-jplM2Vq45nSdwIUaH8Jyveo/preview" width="640" height="480" allow="autoplay"></iframe>

---

FINAL SUBMISSIONS

Exercise 1: Web Analysis

The selected websites that I chose to analyze for this exercise:

First Website: MA True Cannabis

Link: https://matruecannabis.com/en 

Second Website: Simple Chocolate

Link: https://simplychocolatecph.com/

Fig. 1.1 - Final Exercise 1: Web Analysis (PDF)

Exercise 2: Web Replication

1. First Website ( https://www.morganstanley.com/ )

Fig. 2.1 - Final Exercise 2: Website 1 (JPG)

Fig. 2.2 - Final Exercise 2: Website 1 (PDF)

2. Second Website ( https://www.oceanhealthindex.org/ )

Fig. 2.3 - Final Exercise 2: Website 2 (JPG)

Fig. 2.4 - Final Exercise 2: Website 2 (PDF)

Exercise 3: HTML and CSS Document Development

Click HERE to view my personal profile page.

Fig. 3.1 - Final outcome: Exercise 3 (JPG)

Fig. 3.2 -  Source code: HTML (PDF) 

Exercise 4: CSS Layout

Exercise 4 Netlify Link: https://tanyityng-exercise-4.netlify.app/

Fig. 4.1 - Final Outcome: Exercise 4 -Layout (JPG)

Fig. 4.2 -  Source code: HTML (PDF) 

Fig. 4.3 -  Source code: CSS (PDF) 

---

Project 1: Landing Page Design Prototype

Click HERE to view Toronto Cupcake original website.

Click HERE to access the live prototype on Figma.

Fig. 5.1 - Landing Page Design Prototype (JPG)

Fig. 5.2 - Landing Page Design Prototype (PDF)

---

Project 2: Working Web Page

Netlify Submission Link: 
https://torontocupcake-project2.netlify.app/

Screen recording of Project 2: 
Working Landing Page (including testing view on website, tablet, and mobile device)

Fig. 6.1 - Final Outcome: Screen recording of Working Landing Page

Fig. 6.2 - Final Outcome - Project 2: Working Landing Page

Fig. 6.3 - Source code: HTML (PDF) 

Fig. 6.2 -  Source code: CSS (PDF) 

---

Final Project: Design, Exploration and Application

Netlify Submission Link: 
https://anxietywellness.netlify.app/

Screen recording of Final Project - Anxiety Wellness website: 

Fig. 7.1 - Final Outcome: Screen recording of Anxiety Wellness Website (Desktop view)

Fig. 7.1 - Final Outcome: Screen recording of Anxiety Wellness Website (Mobile view)

Fig. 7.3 - Source code: HTML (PDF) 

Fig. 7.2 -  Source code: CSS (PDF)