INTERACTIVE DESIGN - FINAL PROJECT

on
23/10/2023 - 10/12/2023 (Week 9 - Week 15)
Lee Wing Kie / 0364251
Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project
INSTRUCTIONS


Creating a Single-Page Website for Your Favourite Artist

In this web design project, we will create a single-page website dedicated to your favorite artist. This project will help us develop our own web design and development skills while allowing us to showcase our passion for the artist of our choice.

Requirement
Artist Selection: Choose your favorite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you have a genuine interest in the artist, as this will help you create a more engaging website.


Chosen Musician

Fig 1.1 Eric Chou

The favorite musician I have chosen is Eric Chou, a singer, songwriter, and actor from Taiwan. I truly appreciate his music, as some of his songs have accompanied me during times of stress, loneliness, or anxiety. That's why I've chosen him as the character for this project.


Sketches

Fig 2.1 Sketches 1 to 3 (Week 8: 16/11/2023)

Fig 2.2 Sketches 4 to 5 (Week 8: 16/11/2023)

I have chosen the third sketch template as the final version for the prototype style because the visual appearance is more professional and clean.

References

Fig 3.1 Reference from Pinterest -1

Fig 3.2 Reference from Pinterest -2

Fig 3.3 Reference from Pinterest -3

Mood Board
Fig 4.1 Screenshot of the mood board on Miro (Week 9: 23/10/2023)

Fig 4.2 Mood Board in JPEG (Week 9: 23/10/2023)

Prototype
Fig 5.1 Prototype Layout Process in Figma (Week 10: 30/10/2023)

Fig 5.2 Final Prototype Layout - JPEG (Week 10: 30/10/2023)

After receiving feedback from Mr. Shamsul, I added two more categories to the navigation menu. Additionally, I included more details about the artist I chose in the 'About' section to ensure a cohesive and well-detailed overall appearance.


HTML Progress in Dreamweaver:

Fig 6.1 Screenshot Progress in Dreamweaver

Fig 6.2 Screenshot Progress in Dreamweaver

Fig 6.3 Screenshot Progress in Dreamweaver

Fig 6.4 Screenshot Progress in Dreamweaver

Fig 6.5 Screenshot Progress in Dreamweaver

Fig 6.6 Screenshot Progress in Dreamweaver

CSS Progress in Dreamweaver:

Fig 6.7 Screenshot Progress in Dreamweaver

Fig 6.8 Screenshot Progress in Dreamweaver

Fig 6.9 Screenshot Progress in Dreamweaver

Fig 6.10 Screenshot Progress in Dreamweaver

Fig 6.11 Screenshot Progress in Dreamweaver

Fig 6.12 Screenshot Progress in Dreamweaver

Fig 6.13 Screenshot Progress in Dreamweaver

Fig 6.14 Screenshot Progress in Dreamweaver

Fig 6.15 Screenshot Progress in Dreamweaver

Fig 6.16 Screenshot Progress in Dreamweaver

Fig 6.17 Screenshot Progress in Dreamweaver

Fig 6.18 Screenshot Progress in Dreamweaver

Fig 6.19 Screenshot Progress in Dreamweaver

Fig 6.20 Screenshot Progress in Dreamweaver

Final Outcome:

Fig 7.1 Final Outcome of website - JPEG

Fig 7.2 Final Outcome of website - PDF


REFLECTION

For this final project, I'm truly excited and enjoying the process, as I get to create a webpage for my favorite singer. However, the challenging part is fixing the design for smaller screens. After completing this project, I aim to dedicate more time and effort to practice coding, particularly focusing on addressing issues related to smaller screens. I'm looking forward anticipating the advanced interactive design in semester 3.

Comments

Post a Comment