Interactive Design Final Project

31.10.2023 - 28.11.2023 / Week 10 - Week 14
Tan Jian Xin / 0350784
Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project / Creating a single-page website for your favorite artist

---

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

Project Requirements:
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.

Content:
Your single-page website should include the following sections:
Header with the artist's name and a brief tagline.
Introduction: Provide an overview of the artist's background and why you admire them.
Gallery: Showcase images, videos, or other multimedia related to the artist's work.
Biography: Include a brief biography or description of the artist's life and career.
Contact Information: If applicable, include contact details or links to the artist's social media profiles.

Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your personal 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.



1. Sketches (wireframes)
I started this project by sketching out more than 5 wireframes on my notebook after choosing my favorite artist - Hirai Momo. 

 
Figure 1.1: 6 wireframes

For some details, Hirai Momo, is a Japanese rapper and dancer, active in South Korea. I started to admire her as she is very hardworking despite being eliminated in the reality girl group survival show, Sixteen in 2015. Fortunately, JYP saw her skills in dancing and rapping would complete his girl group, which was named Twice. 

Figure 1.2: Hirai Momo

After that, I chose a few peach color palette at color hunt as Momo in Japanese means peach. 

Figure 1.3: Color palettes 

2. Prototype (Figma)
After changing the desktop frame size to 1330 (width), and altering the layout grids to 12 columns as shown below, I started to do my prototype in Figma by adding the details for my favorite artist - Hirai Momo.

Figure 2.1: Figma desktop frame 

I had problem with choosing the picture for the header as shown below.

Figure 2.2: Figma process

Then, I started to add the details about her in the Introduction and Biography section.

Figure 2.3: Introduction and Biography details

And then the pictures for the gallery section.

Figure 2.4: Gallery section

For the contact section, I dragged and dropped the Instagram icon through the plugins.

Figure 2.5: Instagram icon at plugins

I created 2 versions of prototypes shown below. As I'm unsure of her contacts besides her Instagram account, I decided to change the layout as shown below on the left.

Figure 2.6: Prototypes

Then, I thought of adding the fan name of Once as their group name is Twice, to the contact section.

Figure 2.7: Contact section

I also added her quote and some details on the introduction section.

Figure 2.8: Changes made

I decided to change my font to Agbalumo (in google fonts) later when I'm creating my website as I stumbled upon it during in class exercise in Week 10.

Figure 2.9: Font used in class exercise during Week 10

3. Dreamweaver (development process)
At first, I typed out all the details for my website in HTML as shown below. Then, I realized the picture chosen in Figma have bad quality when enlarged. Thus, I changed it to the one below.

 
Figure 3.1: Typing out informations of Momo

Then, I created a CSS file and attached it to my HTML. After that, I selected the fonts from google fonts and copied and pasted the link in my CSS file. 

Figure 3.2: Changing fonts

Then, I tried to fix the gallery section as the height of each image is different.

Figure 3.3: Images with different heights

I managed to find images with same heights as shown below.

Figure 3.4: Fixed images in gallery

As the height of intro does not fit the whole website screen as shown below, I've added min-height: 90vh; to make it fit the screen and make necessary amendments to the font size.

Figure 3.5: Not fit website screen (left) and Fit website screen (right)

4. Responsiveness

After I've completed my website, I ensured that it's responsive as shown below.

Figure 4.1: Responsiveness coding

I then changed my image as it is not aligned shown on the left below.

 
Figure 4.2: Gallery image responsiveness

Then, I decided to change the alignment of the contact so that it's responsive shown below.

 
Figure 4.3: Responsive for contact

After uploading my website at netfily, here, I checked the responsiveness from an incognito window shown below. As a result, my font sizes and viewport heights are a mess.

Figure 4.4: Small font for navigation and messy viewport height

Therefore, I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> at the beginning of my html code and it turned out to be what I've desired as shown below.

Figure 4.5: Responsive amendments

Final website: https://tanjianxin-projectfinal.netlify.app/