INTERACTIVE DESIGN PROJECT 3（Final Project）

INTERACTIVE DESIGN - PROJECT 3（FINAL PROJECT） -

WEEK9 - WEEK13

DONG XINBEI 0359733

Bachelor of Design (Honours) in Creative Media

LECTURE

Please refer to exercise.

Please refer to project 1.

Please refer to project 2.

INSTRUCTION

Final Project Requirements

In this task, we are required to create a website design using HTML and CSS, applying the knowledge acquired in the previous weeks. Multiple elements are to be added to enhance the visual appeal of the webpage, aiming to increase the aesthetic experience for the viewers.

Research

Research and Decision: In this project, we need to decide on the content before we start. I will be creating the website design for the South Korean boy group NCT DREAM, incorporating relevant knowledge to make the website more diverse. To achieve this, I will format the content in the most comfortable layout, and I plan to create several drafts of my ideas before finalizing the project.

SKETCH

In the initial sketching process, I utilized the Procreate software to create the preliminary layout design for my ideas. For the placement, I generated three drafts as alternatives. I arranged the layout according to the most comfortable format, and this step is crucial.

Figure 1.1 Sketch 1-3

For this, I have conducted more detailed sketch designs.

Figure 2.1 first new sketch

Figure 2.2 first new sketch

Figure 2.3 first new sketch

Figure 2.4 first new sketch

Figure 2.5 first new sketch

Figure 2.6 second new sketch

Figure 2.7 second new sketch

Figure 2.8 second new sketch

Figure 2.9 second new sketch

Figure 2.10 second new sketch

Final Sketch

Please refer to link （Google Drive）

FIGMA

I used the Figma website, which was also utilized in Project 2, to create the final design for my website. I incorporated various types of background panels and adjusted their colors to different opacities to complement the chosen background images. Through my experimentation, I opted for a vibrant color scheme that is not entirely uniform, aiming to capture more attention. This is a crucial aspect—from selecting task images to adjusting the overall color coordination, I carefully fine-tuned every detail.

Figure 3.1

Following the mentor's suggestion, I added contactable social media links to the footer of my webpage. They are seamlessly integrated at the bottom for a more aesthetically pleasing appearance. Considering the nature of being a popular South Korean boy group, I believe incorporating more attention-grabbing elements is essential. Therefore, I made some color adjustments to enhance the overall visual appeal.

DIGITALIZATION

After finalizing the design for the website introducing NCT DREAM, in the last step of the project, we will use Dreamweaver software to complete the final coding. This involves applying the knowledge of HTML and CSS learned in the previous weeks to create code that presents the designed webpage. 

Figure 4.1Production Process（HTML）

Figure 4.2 Production Process（HTML）

Figure 4.3 Production Process （HTML）

Figure 4.4 Production Process（CSS）

Figure 4.5 Production Process（CSS）

Figure 4.6 Production Process （CSS）

 In the coding process, I utilized additional knowledge to accurately replicate the designed webpage and incorporated various interactive elements. To ensure clarity, I opted for simple code, making it not only aesthetically pleasing but also easier to identify errors.

                                           

FINAL OUTCOME

Please refer to link.

REFLECTION

In this final project, it integrates the application of all the knowledge we have learned in previous courses. Regarding the creation of the NCT DREAM website, I consider the most challenging part to be adjusting the spacing format on both sides. Because the format presented when opened on different devices varies, it requires me to be more meticulous in the production process, and I also spent a considerable amount of time on this aspect. In the process of creating the website, I added more detailed content in terms of text and some elements. This is also my way of expressing admiration for NCT DREAM, and I hope more people will get to know them. I believe that this course not only allows us to learn more about programming and coding but also helps to cultivate personal patience.