Interactive Design // Final Compilation

28th August 2023 - 10th December 2023 (Week 1 - Week 15)

Emran Tarek Sayed // 0346648

Bachelor of Design (Hons) in Creative Media

Interactive Design // Final Compilation

---

INSTRUCTION

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

---

SUBMISSIONS

Exercises: 1 - 3

Web Analysis

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

Web Replication

Website 1

Fig. 7.0 Web Replication 1 

Original (Left) & Replica (Right)

10th December 2023

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

Website 2

Fig. 7.1 Web Replication 2

Original (Left) & Replica (Right)

10th December 2023

<iframe src="https://drive.google.com/file/d/10nXEnvXMbKNEBiU8OgFD25kz6sjgGEj5/preview" width="640" height="480" allow="autoplay"></iframe>

Recipe Card

Fig. 7.2 Recipe Card

10th December 2023

<iframe src="https://drive.google.com/file/d/14_lSRejJqI2GlXlGUGZB2gndgLqF4UL4/preview" width="640" height="480" allow="autoplay"></iframe>

HTML Code

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

CSS Code

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

Netlify Link

Kuih Tepung Pelita Recipe Card !

Project 1 

Prototype Design

Fig. 7.3 Prototype Design

10th December 2023

Figma Link

Prototype Design

Project 2

Working Web Page

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

HTML Code

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

CSS Code

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

Fig. 7.4 Prototype Design 

(Web Page Look)

10th December 2023

Netlify Link
Prototype Design Web Page

Final Project

Design, Exploration, & Application

Final HTML Code

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

Final CSS Code

<iframe src="https://drive.google.com/file/d/10PEoTgn-0whYVdHkk6W63W9G_5hmZyJE/preview" width="640" height="480" allow="autoplay"></iframe>

Final Look

Fig. 7.5 Jenna Ortega 

(Web Page Look)

10th December 2023

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

Netlify Link

Jenna Ortega Web Page

Google Drive link to materials

Materials

---

REFLECTIONS 

Throughout the module, my experiences, observations, and findings across all exercises and projects have collectively fostered a comprehensive understanding of user interface (UI) design and web development. Commencing with the foundational exercises, I familiarised myself with prototyping tools like Adobe XD and Figma, honing my skills in crafting intuitive and visually pleasing UI layouts. The transition to Project 1 presented an opportunity to apply these skills, culminating in a digital resume prototype that showcased meticulous attention to detail, layout, and colour schemes.

Project 2 was a pivotal juncture where I ventured into the realm of web development, translating my static prototype into a functional website. This endeavour required mastery of HTML, CSS, and even Bootstrap to ensure pixel-perfect precision and responsiveness. The complexities of integrating interactive elements and troubleshooting issues were invaluable learning experiences.

In the final project, I directed my newfound expertise towards constructing a dynamic webpage dedicated to my favourite artist, Jenna Ortega. From mood boards to sketches and digitalization in Figma, the project was a testament to meticulous planning. Implementing JavaScript for interactivity, such as section toggling and multimedia control, was a challenging but rewarding endeavour.

Overall, this module has equipped me with a profound understanding of UI design, web development, and the iterative design process. My skills have evolved significantly, and I've cultivated problem-solving abilities essential for creating user-friendly and aesthetically pleasing digital interfaces. This journey has not only enriched my technical skills but also instilled a deep appreciation for the art and science of UI/UX design.