December 08, 2023

Interactive Design / Final Project-Single-Page Website for Your Favorite Artist

23/10/2023 - 10/12/2023 / Week 9 - Week 14
Janice Marie Eng Chia Hui / 0361521
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Final Project / Single-Page Website for Your Favourite Artist

Instructions

Task

To-do list:

Create a single-page website for your chosen artist
Include the artist's name in the header plus a simple tagline
Insert an introduction section
Insert a section biography of said artist
Insert an image gallery
Add in the contact information

Choosing an artist

Starting off strong, Sir asked us to pick an artist that we love in class to use for this project. Initially, I wanted to do the band Maneskin (who I just found out is my number one most-listened artist on Spotify lmao), but I decided to change and do a website about this Japanese girl group called Atarashii Gakko

Why I choose Atarashii Gakko, well it's because I really like their style and felt like that would translate better when I'm designing something for them, compared to Maneskin.

Figure 1.1 Maneskin vs Atarshii Gakko

Moodboard

We were asked by Sir to make a mood board by week 10. Here are some of the images that I collected.

Figure 2.1 Moodboard (week 10)

Sketches

We were also asked to come up with at least 5 sketches. Honestly, I struggled trying to come up with them.

I did them in figma, but I should have just manually drawn them out instead because the ones in Figma were hard to understand. The initial sketches shown to Sir were not good, so I went back home and redid the prototype and showed it to sir.

Initially, I had the headings form a zig-zag pattern, but Sir advised against that. I was also asked to reduce my font size.

Figure 3.1 Initiall Prototype (Week 10)

Figure 3.2 Initial Prototype (Left) vs After sirs feedback (right) (week 10)

Assets

After coming up with the prototype, I collected all the assets needed for my website, which included the images and fonts needed. The images that I wish to edit were first placed into Ps where I edited them to my liking before exporting them and importing them to Ai.

For the font, I decided to use MONTSERRAT for the text. I wanted a different font style for the headings and titles to differentiate them from the text, so I went onto Google Fonts to look for fonts. I filtered out the display fonts, and because I am very biased toward sans-serif fonts, I filtered out the sans-serif display fonts. I eventually found the font that felt suitable which was BUNGEE.

Figure 4.1 Bungee Font (left) and Montserrat Font (right)

Figure 4.2 Assets Collected (Week 11)

Figure 4.3 Updated Assets (Week 15)

Putting down the Naked HTML

As always, I started by putting down the Naked HTML. Unfortunately, I did not screenshot the naked HTML as it did not occur to me to do that.

Styling the HTML with CSS

Nav bar

Based on my prototype, I wanted to align the navigation buttons to the left. So I coded that initially. I created 2 containers and then adjusted the right and left values.

After the navigation bar was styled, I changed the hover effects. I wanted to increase the font size when it was being hovered, but it pushed the other elements to the side, and I did not manage to sufficiently research how to prevent that so I just underlined it and changed the colour when the element was hovered over.

Figure 5.1.1 Initial Navigation ( Week12)

Figure 5.2 No hover vs hovered element (Week 12)

After I set the the style for the links, I made sure to set the right id for each of the sections. After that, I decided that I wanted to make the navigation bar stay hidden when we scrolled up and reappear when we scrolled down. So I went to YouTube and found this really helpful video on how to do that.

Figure 5.3 Video tutorial on how to make the nav bar disappear when scrolling (Week 12)

Figure 5.4 Outcome of the Video Tutorial (Week 13)

However, when I was doing the media query, I realised that the nav would look weird, so I decided to use the Bootstrap code for the navigation menu since it was 100% responsive, wasting my effort before styling it :).

I still wanted the nav bar to disappear when I was scrolling up, so I just added the class tag from the old code that styled it that way to the bootstrap code. I also added the tag from the old nav bar which styled the font, colour and links of the text in the nav to the new code.

Figure 5.5 Adding the one class tag that connected it to the js and CSS (Week13)

Landing Page

For the landing page, I followed my initial prototype, but then realised that I hated it so I went in and reworked it.

From a technical point of view, I placed the image into the code and then set the width to 100% and height to auto to make it responsive. Fonts added to the top of the image were done by making the container containing both IMAGE and FONT have a position of relative. Then, I set the position of the font to absolute and gave it a z-index of 1 to make it appear in front.

Figure 5.6 Redesigned Landing Page in Figma (Week 15)

Figure 5.7 Before(top) to after(bottom) of landing page(Week 12-15)

Yeah, I went back and redesigned the landing page a few times. I realised that the 2nd image I had chosen had terrible resolution and did not fit the screen, so I looked for a better picture. I found another one hated it and finally found one that looked nice. I then redesigned the landing page, made the name and tagline into a marquee and animated them. I got this idea after trying to make a slider for the gallery section with a marquee slider.

Figure 5.8 Evolution of landing page image (Week 15)

Intro

After that, I started on the intro section. This was the easiest part of the entire website because it just required me to make 2 containers, one for the image, and one for the text, and the style them.

During week 13, I got some feedback from sir, he said that my alignment of 'One Day' was hard to understand. I was trying to make it look like a 'Dear name' or 'Once upon a time' situation. He advised I change it to be bigger to make it stand out. He also suggested I change the content of the bio as it was not worded nicely.

So after the feedback, I shortened the 1st sentence (It was originally 'one day at the supermarket discount store aisle') and made the font larger and italics. I also changed the content to something more nicely worded.

Figure 5.9 Two containers as seen with the inspect tool (Week 12)

Figure 5.10 What I was trying to do with the 'One Day,' (source)

Figure 5.11 Content before (left) vs After (right) (Week 13)

Bio

For bio, I wanted to present it like a student ID card because one of the band concepts is school girls. I planned to have it all displayed in a slider. After I told sir my plan, he recommended I use the code from Bootstrap for the slider. I was thinking about how I should put the contents into the slider, so I tested it out and turns out that if you put content into the 'carousel item' section part of the code it gets displayed and it doesn't have to be an image.

So I coded all 4 of the cards first before adding them to the Bootstrap code. The cards were just coded with columns and rows. I also added another indicator because the ones in Bootstrap only had 3. And I changed the arrows to be more stylized.

Figure 5.12 Original Bootstrap code, highlighted part to be replaced(left) vs customizing the code, highlighted part is the student id (right)(Week 13)

Figure 5.13 Extra Indicator added (code) (left vs Indicator added (element) (Week13)

Figure 5.14 Construction of the Elements (Week 13)

Figure 5.15 Original Icon(left) vs Personalized icon (right) (Week 13)

Gallery

I vividly remember sir said to include a lightbox in our gallery, but I was told by my friend that he never said that. So I think I'm hallucinating. Sir also said to include 8 images in the gallery. This time I was not hallucinating as my friend remembered this too.

I went onto YouTube to look for a tutorial on how to make an image gallery, and I managed to find a simple one, it was responsive and had animations, however, it did not have code for the lightbox. So I looked for another tutorial where he used an extension for the lightbox. I added those codes to my existing code and birthed a gallery with a somewhat functioning lightbox.

The issue was the lightbox did not have a fixed height and because I used someone else's code, I did not really know how to edit it so I left it be...

Figure 5.16 Image gallery tutorial (Week 13)

Figure 5.17 Lightbox Tutorial (Week 13)

Figure 5.18 Final outcome of gallery and lightbox + issues (Week 13)

Figure 5.18.1 Unused image of Kanon that I liked a lot and want to showcase somewhere

Music

This was by far the worst part of code, like my brain was melting I hated this part. I initially wanted to make an infinite slider that slides with an animation when you hover over the next button but did not know how to do that.

After telling Sir my plan, he asked me to do a multicolumn carousel. Why is it so hard to code a multicolumn carousel like why, why! Initially, Sir recommended I use Bootstrap 5 to make it so I looked up a tutorial on how to do that but it didn't work.

So I looked for more tutorials but those did not work too. So I gave up and just decided to do what I did for the Student ID section. I coded 3 images into one page and placed it into the bootstrap slider. It worked, but I needed to add a media query for a smaller size (explained in Media query section). I also added an overlay to blur out the image when we hover over it and learned how to do it with this video.

Attached below are some of the videos I tried.

Figure 5.19 Bootstrap multicolumn slider tutorial

Figure 5.20 3D carousel

Figure 5.21 Dragable Infinite Carousel

Figure 5.22 Marquee Slider

Figure 5.23 Attempts (top) vs what I settle on (bottom) (Week 13)

Socials

I initially followed the prototype when coding the social section. But I realised later on that I did not like it, so I decided to change the whole layout and images as well.

This section was just done with containers, rows and columns, nothing special. I decided to add their Instagram and x links in. This section was fairly simple to do.

Figure 5.24 Initial layouts(top) vs Final Layout (bottom) (Week13)

Contact

After some contemplation, I decided to add a dummy contact form. The content was based on Atarashii Gakko website made by Asobi system. The code was taken from Bootstrap and I added a dropdown menu option to select their category.

Figure 5.25 Visual step of how I edited the bootstrap codes(Week14)

Footer

Content in the footer was based on an existing website for AT's tour. I'm not sure if it's their official website, now that I think about it, but I decided to reference the content in their footer. Which was just the band's logo, their socials, music and merch store lol.

Figure 5.26 Footer (Week 15)

Media Queries

Media queries are my fav woooo (no I hate them). I set a media query for the phone screen and iPad screen. To view full queries please view the files attached in the final work section.

Nav Bar

The code from Bootstrap is responsive, it collapsed my nav bar into a hamburger menu, but the dropdown option for whatever reason was not coloured initially. So I located the class tag with the inspect tool in the device preview and added in a bg colour for the dropdown menu.

Figure 6.1 Element that was not coloured for whatever reason (Week15)