Interactive Design - Final Project

02/07/2024 - 23/07/2024 

Week 11 - Week 14

Wong Jia Yi Carmen (0357198) / Bachelor Of Design In Creative Media

Interactive Design / Final Project | / Design, Exploration and Application

---

INSTRUCTION 

fig 1.0 Interactive Design Module Information

Timeframe: Week 08 – Week 14

Deadline: Week 14

Description Final Project: Single Page Lifestyle Microsite

Description: In this assignment, you have the creative freedom to design and develop a single-page microsite centred around the theme of lifestyle. Your goal is to craft an immersive and visually appealing microsite that effectively communicates the chosen lifestyle theme and engages users through thoughtful design and interactive elements.

First, is the planning stage.

I decided to go with One Direction (1D) fan page website where my target audience is those fans as known as the Directioners and also those youngsters who have no idea who is One Direction.

fig 1.1 Planning Process

fig 1.2 Planned Second Section (Home Page)

This is my second section which is the home page where I introduce who is the owner of this website. I'll introduce myself and provide some information about me.

fig 1.3 Planned Third Section (About Page)

This is the third section which is the about page. Also, the most important section of this website is where I'll introduce who is One Direction to the audience, how they were formed as a band, and their history. Some of their popular albums and songs etc..

fig 1.4 Planned Fourth Section (Personal Page)

In the fourth section, is where I'll introduce some of the facts about each of the individual (members) of the band.

fig 1.5 Planned Fifth Section (Contact Page)

The last section is where the audience can contact me if they have any concerns about the website or any questions to ask.

After getting feedback and approval from Mr Shamsul, he suggested changing some of my sections of the website and adding some improvements...

fig 1.6 Second Section (Band Page)

Now my second section would be the band's information as this is what the audiences wanted to see first when they first clicked on my website.

fig 1.7 Third Section (Personal Page)

After the band section, comes the individual profile of the members. Mr Shamsul suggested that I should change my layout like flying cards.

fig 1.8 Fourth Section (About Page)

After that comes the about page where I summarize everything and change it into a call to action button so the audience can have the option to click this button to find out more about myself and who is the creator of this website.

fig 1.9 Fifth Section (Contact Page)

I didn't change the layout for the last section so I remained the same.

After sketching, I then proceed with the prototype in Figma.

fig 1.10 Prototype Process in Figma 

After getting feedback from Mr Shamsul, he said that my website was too simple and that I needed to change the layout of the website. He suggested finding a reference to begin with. 

I found this website that I thought was so cool. I like the stars animation in the background and thought I could add it to my website as well.

fig 2.0 Reference #1

This is another website I found. I love the idea of a slideshow.

fig 2.1 Reference #2

I then begin with sketching...(zoom in to see clearly)

fig 2.2 Sketch on my iPad

fig 2.3 Prototype in Figma

After I got a rough idea and design of how I wanted my website to be. I begin with the coding.

fig 2.4 Process of Coding

Link to One Direction Fan Page.

---

REFLECTION

Experience

Learning Interactive Design was as exciting as it was daunting for me primarily because, for the first time, I sat for a course with no coding experience whatsoever. When I learned that we have to code, a thought appeared like a wall with a lot of syntax and logic which was rather tough to understand. However, as I started going through the course in detail, I started to appreciate coding. No wonder why people wonder how a few lines of code can turn into an experience which involves the user as compared to the striking of a design. They made me find out that coding is more akin to art-solving puzzles and providing creative solutions. It is all about assembling the right furniture and locating it where it makes functional as well as aesthetical sense. That was a wake-up call and made me look at coding in a positive light which is considered to be quite fun and enjoyable if you understand.

But the journey was far from being stress-free and frustration-free. Once I was almost exiting this program, there were times when I felt angry when debugging the program that was becoming deceitful. However, such difficulties were valuable and studied as was each failure, which was an organic part of the whole process. Being able to see a project come to life and being able to know that I put my hands into it through construction was satisfying. This made all the late nights that I have pulled all night as well as the moments of self-doubts pay off. 

What I came to know is that any problem is the key to the learning process. They make you to research, question, and look for answers which in the end enhances comprehensiveness and skills in the area of focus. From this experience I have learnt the value of patience; a lot of perseverance and the essence of having a growth mindset.

Observations

I also pointed out that challenges and problems I face, especially in relation to the erroneous programs and while debugging them, are important for the learning process. Such issues made me become and practice patience and perseverance to ensure I gained technical experience as well as personal growth. This encouraged the adoption of the growth mindset which sees the wall as essential to help us push through in order to achieve a breakthrough. 

Moreover, it leads to a newfound respect for the interactive design profession. HTML coding made me discover that it is possible to translate ideas into vibrant and lively creations. This insight made learning quite fulfilling and worth the trouble, every hard phase in the learning process highlighted the fact that learning is not just about the learning process but how to grow from the process.

Findings

I did not find coding easy because it was something new to me, although with time I found coding quite interesting . Coding then I come to acknowledge is more than just an engineering mechanism it also included creativity to bring ideas into realisation that I did not consider before. From this shift, I was able to mainly change how I approached my work from feeling like simple tasks that I have to accomplish to feel more like fun challenges. The course also made me understand the importance of perseverance and patience. Most problem-solving, especially in debugging, was time-consuming and at times even discouraging, however, I found all these to be very important. It assisted me in developing patience and enabled me to understand the content better. I saw new experiences as hurdles that later on, become a stepping stone in the process of learning. 

The self-investment of views and opinions shifted during the course of the project, and the most important one was concern towards the interactive design as the domain. I slowly started to realize the efficiency of coding and how it can be used to make the application more user-centric and fun. All in all, this realization expanded my thinking and extended my perception of what can be done through designs and technologies. 

Lastly, this experience showed the importance of approaching the problem with a growth mindset. Learning was one of the fundamental aspects that I embraced not forgetting the challenges that I underwent while learning. It was understood that all of the challenges and achievements which were met on the way were definitely important and helpful for gaining new experience.