Interactive Design (Final Project)

22.4.2024 - 28.7.2024 / Week 1- Week 14
Interactive Design / Bachelor of Design (Honours) in Creative Media
Aliah Farhana Binti Mohd Fauzi / 0357957
Interactive Design - Final Project

---

INDEX

1 - Exercises

2-  Project 1

3-  Project 2

---

INSTRUCTION

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

Final Project : Creating a Single-Page Website 

Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.

Project Requirements:
Artist Selection: Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.

Content: 
Your content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.  

Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).

Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.

Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

---

Knowing that we have to make an interactive website and with me have been a fans of TXT ever since their debut. I've decided to make a fan page for them using coding. I've tried my best to make the website to represent txt themselves thus this assignment has made me excited to see the outcome that I've make.

PROCESS

Ideate in Miro 

Link to my Miro here

In the ideate part, I've provided the structures, Visual references, Font type and color schemes that I'll be using and refer upon this task.

Thus the structure is going to include:

- The Front Cover 

- Moa short description

- Members

- Discography

- Achievements

- Media

The colour scheme :

-1D5D9B
- 75C2F6
- F4D160
- FBEEAC

As to why I'm choosing this colour schemes is because it's representing TXT in overall. Therefore I've decided to proceed with this colour.

Font choice's:

-Logo (Cantarell)

-Navigation and body text (Roboto)

-Title (Abril Fatface)

Wireframe Prototype Process:

I've realised that from the feedback's given by Mr. Shamsul, I've complicated the design as it will be hard for me to code this later on. Thus, Mr. Shamsul asked me to change and make an improvement upon my layout.

Therefore it took me quite sometimes to come out with final composition and layout.

This is link to my final prototype: Click Here

pdf to my final prototype

After getting approved by Mr. Shamsul, I've started coding in Dreamweaver on Week 14.

Figure 1.1 Began my coding 

Figure 1.2 One of the problem that has occur

I'm solving this problem with using position="absolute" to keep the text on the right side to be on the same height as the left one.

Figure 1.3 Screen grab of HTML code

Figure 1.4 Screen grab of CSS code

Figure 1.5 Process of deploying my site in Netlify

Figure 1.6 The outcome

Figure 1.7 Final Outcome

This is the link to my website TXT Fan Page - aliah farhana

---

REFLECTION

Experience

Creating a fan page for TXT has been an exciting and rewarding experience, combining my passion for the group with my interest in web design and development. The project required a blend of creativity and technical skills, pushing me to explore different aspects of design and coding. Choosing TXT as the subject made the process enjoyable and motivating, as I was able to delve into their music, achievements, and unique style while working on the project.

Observation

Throughout the project, several key observations stood out:

1. Content Creation: Developing meaningful and engaging content was crucial. I aimed to provide valuable information about TXT, including their history, members, discography, achievements, and upcoming events. Ensuring the content was well-structured and relevant helped in creating a cohesive and engaging website.

2. Responsive Design: Creating a responsive design that adapts to various screen sizes was challenging but necessary. Ensuring that the website looks great and functions well on both desktop and mobile devices was a priority, considering the diverse ways fans might access the site.

3. Interactivity: Incorporating interactive elements such as image sliders, hover effects, and lightboxes for multimedia content added depth and engagement to the website. These features made the browsing experience more enjoyable and immersive for users.

Findings

1. Technical Skills: This project improved my coding skills, particularly in HTML and CSS. Implementing smooth scrolling navigation, responsive design, and interactive features required a good understanding of these languages.

2. Passion and Interest: Choosing a topic I am passionate about made the project more enjoyable and motivating. My genuine interest in TXT helped me create a more authentic and engaging website, reflecting my dedication and enthusiasm for the group.