Labels

Interactive Design - Final Project

23/10/2023 - 12/10/2023 (Week 9 - Week 15)
Katelyn Tan Kye Ling (0354148)
Bachelor Of Design In Creative Media (Interactive Design)
FINAL PROJECT

LECTURES
WEEK 9 - 23/10/2023
Click here to see in class activity.

WEEK 10 - 30/10/2023
Class cancelled.

WEEK 11 - 6/11/2023
At the start of the class, Mr. Shamsul taught us how to do jumplinks within the sections of the website. Then we just had a feedback session on our final project and could leave.

WEEK 12 ONWARDS:
The rest of the classes were optional, we could go to class to check our work or continue doing it at home. We also had online consultation sessions in MSTeams.
INSTRUCTIONS
For this final project, we had to create a single page website that included the following;
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.

Planning & Sketches:
Click here to see planning.

Visual References:

While doing sketches, I looked at some references:
Fig. 1.1 Reference #1 (Home Page)


Fig. 1.2 Reference #2 (Gallery)

Fig. 1.3 Reference #3 (About Page)

Fig. 1.4 Reference #4 (Infinite Scrolling Banner)

Fig. 1.5 Reference #5 (Video Bg)

Fig. 1.6 Final Sketches (28/10/2023)

Fig. 1.7 Low Fidelity Prototype (4/11/2023)

WEEK 14:
After my consultation with Mr. Shamsul. I personally felt that my website wasn't good enough. Therefore I decided to scrap off some of the work I've done and added some new things as well.

I decided to look for more reference as well:
https://www.pinterest.com/pin/441704675968223383/


WEBSITE PROGRESS:
After completing many projects and designing many websites, I figured that it was much easier for me to do both HTML and CSS at the same time (section by section of the website) instead of completing the entire HTML first then only adding my CSS.

Header & Home Section:
Fig. 2.1 HTML (Header Section)

Fig. 2.2 CSS (Header Section)

I wanted to set a background video for the home section. I used a tutorial from hubspot.
Fig. 2.3 HTML (Home Section)

Fig. 2.4 CSS (Home Section)

The tagline overlapped the header whenever I scrolled down. However Mr. Shamsul taught me how to fix it by adding a z-index.
Fig. 2.5 Refined Header and Home Section

Introduction Section:
The Introduction section was overlapping the background video. I was struggling to figure it out. Finally I figured it out by putting min-height on the background video (home section).

Fig. 2.6 HTML

Fig. 2.7 CSS

During week 14 after consultation with Mr. Shamsul, he said I needed to add more content to the introduction as it didn't fill up the whole screen. I decided to add a promotion for their latest album. I put New Jeans as the background image. I wanted the background colour to transition and blend into the album background image, which resulted in me changing the colour of the background to another blue.
Fig. 2.8 Additional introduction section
Week 15:
I didn't really like the introduction layout so I decided to change it.
Fig. 2.9 New Introduction layout


About Section:
Fonts were already coded in CSS therefore the font here is not the default font.
Fig. 2.10 HTML

Fig. 2.11 CSS

Member's Individual Profiles:
I first designed all the information cards in Adobe Illustrator.

I wanted to go for a photocard/polaroid style and these were my first 3 designs.
I went for an overall blue theme as that was my colour scheme. 
The 2nd design had yellow because that was her representative colour.
Fig. 2.12 Member's Profile

I decided to eliminate the first design and then tried the other 2 once again but with another member.
Fig. 2.13 Member's Profile

I decided to go for the 2nd design. (The one with the representative colour of each member as the polaroid's background.)
Fig. 2.14 Final Member's Profile Design

I made a 3D carousel for this and it turned out really pretty!! At first there were some errors, but after trying to study to code, I altered some things and it worked! Click here for tutorial.

Fig. 2.15 3D Carousel

Album:
For the album part which is under the about section, I jus did a very simple layout to show the albums that NewJeans have so far.
Fig.2.16  Album

Gallery Section:
I made a 3D auto rotating carousel for this section. At first I wasn't succeeding as the first few tutorials didn't work. However after some searching, I finally found a tutorial that worked. 
Fig. 2.17 Gallery Attempt 1

I found a simple grid gallery tutorial, I once again did some studying on the code and altered the coding a little bit to fit the gallery layout to my liking. Tutorial from: here
Fig. 2.18 Final Gallery

For the youtube video part, I just took the code from youtube's embed code function. I added one of their vlogs and their latest music video.
Fig. 2.19 Youtube Embed Video


Fig. 2.20 Youtube videos html

Socials Section:
For the final section which is the social section, I just used a simple social media footer tutorial. Click here for tutorial. 

At first the tutorial had no tiktok logo, and I wasn't sure how I could add it in therefore I left a comment asking the coder for some help. To my surprise he answered within a day which made me so happy!
Fig. 2.21 Codepen Help Request

After that I was able to complete my footer and also added a banner as designed in my low-fidelity sketch. The banner was the logo of the companies that New Jeans is under. 

Fig. 2.22 Socials Section




After the submission, I wasn't so happy that I wasn't able to make my site mobile responsive. Therefore even after the submission, I still continued to research and fix my site. And finally I was able to make my site much more mobile responsive.

FEEDBACK
W11: 
"Sketches and low fidelity are overall ok. Since you have 2 carousels make sure they are consistent. Logo put on the header usually is a button for it to go back to home."

W13:
"The fonts have to be changed. For the word "New Jeans" on the home page, don't use all caps."

W14:
"Each section should fill the whole screen. Maybe need to add more content. Maybe don't have 2 carousels, it makes it inconsistent. Gallery could be changed to something else."
REFLECTION

Experience
This was one of the most interesting projects I have ever did. I personally enjoyed making this website as Mr. Shamsul allowed us to share and tell about our favourite artist. We only learnt the basics of coding in class so creating a whole website was pretty challenging. However with many codes and tutorials online, I was able to build my website. There were some parts that were also challenging, most of the times the codes online didn't work and I had to study the code and alter it according to my own code which was very time consuming. I also really struggled to make my website mobile responsive, I tried changing each element manually and also looking codes up online, but none of them worked for me.

Observation
I noticed that the classes in the codes are very important. Sometimes my classes might repeat for a div or I name a div that already has a class. Therefore, organising all the codes well and naming the classes well is important. I also noticed that research has to be done well, like finding inspiration, finding the right codes etc. Also colour coordination is very important so that it'll be pleasing to look at. Fonts are also important so that its legible. Like Mr. Shamsul said, try not to have too many fancy things as it will take away the consistency in the website.

Findings
After doing this assignment, I really look up and respect designers who design and code websites. It is very time consuming and lots of effort has to be put in. From sketching, to making a prototype and then to coding for days and weeks. I find myself amazed by different websites now, it is really fascinating to see how interesting interactivity can get. And these designers really can think out of the box and come up with amazing designs which is something I wish to learn from as I currently lack.
Labels:

Comments

Post a Comment