23/10/2023 - 10/12/2023 / Week 9 - Week 16
Joey Lok Wai San / 0350857
Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project: A Single-Page Website for Your Favorite Artist
TABLE OF CONTENTS
LECTURES
All lectures completed in Interactive Design - Exercises
INSTRUCTIONS
https://drive.google.com/file/d/1zzXnrHL39y2kBn-Hd5YoqvDFZwUugOXv/preview
FINAL PROJECT: Single-Page Website for Your Favourite Artist
In this web design project, we will be creating a single-page website dedicated to our favourite artist. This project will help us develop your web design and development skills while allowing us to showcase our passion for the artist of your choice.
Requirements:
Requirements:
- Artist Selection:
- Choose your favourite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you are genuinely interested 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 colour 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.
Choosing an Artist
Fig. 1.1 Taylor Swift's albums, Week 11 (29/10/2023)
Fig. 1.2 Lana Del Rey's albums, Week 11 (29/10/2023)
To start this project, we were asked to choose our favourite artist, especially one that we have a genuine interest in because it will help us create a more engaging website. In hindsight, this was actually really good advice because if not for this, I would have given up on coding a long time ago.
My original choices were Taylor Swift and Lana Del Rey. Taylor Swift does not have a specific aesthetic, she has many albums all with different styles which gives more options on the design part. On the other hand, I really like Lana Del Rey's 'vintage Hollywood glamour' aesthetic.
I ended up choosing Taylor Swift as I am more familiar with her music and did not need to conduct much background research on her because I already had a clear understanding of her persona and style (I noticed someone else had chosen Lana Del Rey so yeah).
My original choices were Taylor Swift and Lana Del Rey. Taylor Swift does not have a specific aesthetic, she has many albums all with different styles which gives more options on the design part. On the other hand, I really like Lana Del Rey's 'vintage Hollywood glamour' aesthetic.
I ended up choosing Taylor Swift as I am more familiar with her music and did not need to conduct much background research on her because I already had a clear understanding of her persona and style (I noticed someone else had chosen Lana Del Rey so yeah).
Fig. 1.1 Taylor Swift's albums, Week 11 (29/10/2023)
Fig. 1.2 Lana Del Rey's albums, Week 11 (29/10/2023)
Visual References
I searched for visual references to base my website on, taking note of the layout, sections, content, style and visual elements. I found these layouts that I liked on Pinterest and Google. I noticed that most if not all, have a consistent colour scheme and the landing page is usually centre-aligned.
Fig. 1.3 Visual References of Websites, Week 11 (29/10/2023)
Moodboard
I then went on to create the most beautiful thing in the world: this mood board. It consists of the aesthetics of all her 10 albums - each album is correlated with a distinctive style, put together to form a giant Taylor Swift mood board. My proudest achievement to date and I definitely put in way too much effort but it's so worth it.
Fig. 1.2 Moodboard, Week 11 (29/10/2023)
Colour Pallete and Font Choice
From the giant moodboard consisting of all of Taylor Swift's 10 albums put together, I narrowed down my choices to three albums: 'Midnights', '1989' and 'Evermore'. I created another moodboard specifically to further reflect each album's style and chose a colour palette and font style that matched them. This is fairly simple because all of Taylor Swift's albums already have a distinctive palette and font choice associated with them, as shown in Fig. 1.3 below. I simply expanded on the main aesthetic of each album.
Fig. 1.3 All Album's Colour Pallete and Typography, Week 11 (29/10/2023)
Fig. 1.4 Narrowed-down Choices, Week 11 (29/10/2023)
My personal style is usually working with brighter colours, which made me lean toward the latter two choices. When I asked Mr Shamsul which colour palette and style I should use, he said it was up to me but preferred the first one ('Midnights'); it also helps this is her latest, non re-recorded, album. This is the overall chosen moodboard, colour palette and font choice reflecting the chosen album 'Midnights'.
Fig. 1.5 'Midnights' Album - Moodboard, Color Palette and Font Choice, Week 11 (29/10/2023)
The main colour of the website will be navy/midnight blue following the album's colour and style. I went to Adobe Colours to extract the main colours from the moodboard created and expanded on the selection. The colour palette now contains navy/ midnight blue with a gradient of purple, red and burnt ochre.
Moodboard
Fig. 1.6 'Midnights' Moodboard, Week 11 (29/10/2023)
Color Palette
Fig. 1.7 Selected Color Pallete, Week 11 (29/10/2023)
Font Choice
The font choice is that of the font used in the album, which is Helvetica Neue. I realized Helvetica Neue/ Neue Haas Grotesk Display needs to be paid to be downloaded and is not available on Google Fonts. This led me to hunt down an alternative, similar looking sans-serif typeface. I narrowed my options to 'Inter', 'Roboto' and 'Open Sans', all of which can be found on Google Fonts. I chose 'Inter' as the main typeface.
Fig. 1.8 Original Font Choice - Helvetica Neue, Week 11 (29/10/2023)
Fig. 1.9 Roboto (Left) and Inter (Right) Font Choice, Week 11 (29/10/2023)
Fig. 1.9 Roboto (Left) and Inter (Right) Font Choice, Week 11 (29/10/2023)
Sketches
After completing my visual research and having a general idea of the website's overall theme, I started to do a few rough sketches of wireframes on 'ibisPaint'. I drew out different layouts for my website, making sure to include a header, navigation bar, footer and the other content in my sketches.
After completing my visual research and having a general idea of the website's overall theme, I started to do a few rough sketches of wireframes on 'ibisPaint'. I drew out different layouts for my website, making sure to include a header, navigation bar, footer and the other content in my sketches.
Fig. 2.1 Layout Wireframe Sketches, Week 11 (29/10/2023)
Low Fidelity Prototype & Prototype
I then went on to work on my low-fidelity prototype and the actual prototype using Figma. I created a few low-fidelity prototypes based on the wireframe sketches above. Since I had many different sketches, I narrowed down the layouts/sections I liked best and compiled them to produce my low-fidelity prototypes.
Fig. 2.2 All Low-Fidelity Prototype Wireframes, Week 11 (29/10/2023)
Fig. 2.3 Wireframe Development #1, #2, #3, Week 11 (29/10/2023)
Fig. 2.4 Final Low-Fidelity Prototype, Week 11 (29/10/2023)
Fig. 2.5 All Prototype Wireframes, Week 11 (29/10/2023)
Fig. 2.5 Final Prototype, Week 11 (29/10/2023)
Fig. 2.2 All Low-Fidelity Prototype Wireframes, Week 11 (29/10/2023)
My three initial low-fidelity prototypes were a combination of different sections from my sketches. E.g. I liked the gallery section from one sketch and the home landing page from another sketch,, etc., which led me to combine them to make one layout.
Fig. 2.3 Wireframe Development #1, #2, #3, Week 11 (29/10/2023)
From this, I expanded further on wireframe #2 to get my final low-fidelity prototype. The initial design felt a bit empty and lacking, so I added a few more sections from wireframes #1 and #3.
Fig. 2.4 Final Low-Fidelity Prototype, Week 11 (29/10/2023)
I inserted the colour palette, moodboard and font choice I selected previously, as well as some images from the 'Midnights' album era to create the actual prototype. Once again, I experimented with the prototype using different images as the background and different colours for different sections. During the feedback, Mr Shamsul said the layout looked good and clean and ready to proceed to the next step.
Fig. 2.5 All Prototype Wireframes, Week 11 (29/10/2023)
Fig. 2.5 Final Prototype, Week 11 (29/10/2023)
Entire Planning Process
Fig. 2.6 Entire Planning Process, Week 12 (06/11/2023)
Gathering Assets
Fig. 2.7 Assets (Images) in Figma, Week 12 (08/11/2023)
Fig. 2.8 Assets ('Inter' font) from Google Fonts, Week 12 (08/11/2023)
Fig. 2.9 Editing Images in Adobe Photoshop, Week 12 (08/11/2023)
Fig. 2.10 Assets (Content - Background Research), Week 12 (08/11/2023)
I gathered all the assets for my website after creating the prototype, including the required fonts from Google Fonts and images from Google and Pinterest. Initially, some of the collected images were low quality or had too big a file size, which could affect the upload to Netlify later down the line. This led me to go into Adobe Photoshop to adjust the size and resolution. I also gathered all the information for each section.
Fig. 2.7 Assets (Images) in Figma, Week 12 (08/11/2023)
Fig. 2.8 Assets ('Inter' font) from Google Fonts, Week 12 (08/11/2023)
Fig. 2.9 Editing Images in Adobe Photoshop, Week 12 (08/11/2023)
Fig. 2.10 Assets (Content - Background Research), Week 12 (08/11/2023)
I started coding in Adobe Dreamweaver by inserting all the content, such as the texts and images, into HTML. I put the contents and images into different sections and labelled them to ensure I did not get lost while coding. I decided to use Bootstrap to make my life easier or harder... it was both.
Fig. 3.1 Pure HTML, Week 13 (13/11/2023)
Fig. 3.2 Pure HTML Code, Week 13 (13/11/2023)
Fig. 3.3 HTML with Bootstrap's Navigation Bar and Carousel, Week 14 (20/11/2023)
Fig. 4.7 Landing Page Design Variations Style #1, Week 15 (30/11/2023)
Fig. 4.8 Landing Page Design Variations Style #2, Week 16 (04/12/2023)
Fig. 4.10 Scroll Down Button Tutorial, Week 16 (05/12/2023)
Fig. 4.11 Scroll Down Button Tutorial Outcome, Week 16 (05/12/2023)
Fig. 5.2 Using Padding to Place Text, Week 15 (30/11/2023)
My original plan was to have a short biography next to Taylor Swift's face, followed by a full timeline of the eras of her life. While coding the timeline section, I realized the timeline was really long and would take up an unnecessary amount of space. To make it look neater, I found a code on collapsible buttons and decided to put the timeline inside the button. By clicking on the button, it would reveal the full timeline.
Fig. 5.4 Collapsible Button Timeline, Week 15 (02/12/2023)
Discography Section
Fig. 5.9 Adjusting the Z-index of the Carousel, Week 16 (05/12/2023)
Fig. 6.7 Footer Section, Week 16 (07/12/2023)
Fig. 8.1 Revised Colour Pallete, Week 16 (08/12/2023)
1. Create the icon in Adobe Photoshop/Illustrator (document size 200 px x 200px)
Fig. 3.2 Pure HTML Code, Week 13 (13/11/2023)
Once the basics were done and all the content was added in, I started to slowly build up the HTML by first adding a navigation bar from Bootstrap and then a carousel.
Fig. 3.3 HTML with Bootstrap's Navigation Bar and Carousel, Week 14 (20/11/2023)
During Week 14, I got feedback from Mr. Shamsul to remove the 'Search' button in the navigation bar as well as to increase the margins and paddings so that the content does not stick to the sides of the page. He also helped me with centering the background image and making it fill the entire page's width.
Fig. 3.4 Before and After Feedback, Week 14 (20/11/2023)
Fig. 3.4 Before and After Feedback, Week 14 (20/11/2023)
Styling the HTML with CSS and JavaScript
Now it's time for my arguably my least favourite part, CSS and a little bit of JavaScript. Bootstrap has its own HTML, CSS and JavaScript source code, which initially freaked me out because I had no idea how to customize and override the Bootstrap design. It was only later that I learned you can customize Bootstrap with a custom CSS stylesheet.
Navigation Bar
Fig. 4.1 Navigation Bar - Without and With Styling, Week 15 (26/11/2023)
After the initial styling, I did not like how much space the navigation bar took up when you first enter the website. I wanted it to have no background at first sight and only have the background reappear when scrolling. I found this tutorial and copied and amended the code needed to do that.
Fig. 4.3 Outcome of Tutorial - Further Styling of the Navigation Bar, Week 15 (30/11/2023)
Fig. 4.4 Hover Effect on Navigation Bar, Week 15 (30/11/2023)
This is where things get fun. While changing my landing page design, I decided to delete the original navigation bar in place of a new navigation bar rather than writing the code out instead. Later when designing the media query, I realized it was a huge mistake as the new navigation bar code does not fold into a hamburger menu when the screen size is reduced. Therefore, I had to recode the Bootstrap navigation bar again and add the disappear feature's class tag. I essentially coded the navigation bar three times.
Landing Page - Home Section
Throughout the whole process, I tried to stay as close to my initial prototype design. However, the one section I struggled with the most, in terms of design, was the landing page.
My initial idea was to have a plain background with the title, and when clicked on a scroll arrow/button, it would take you down to reveal the face and tagline. I realized too late that this would make the landing page look extremely boring and not make viewers understand what the website is about. Furthermore, all the images I found to match the original prototype design had very low resolutions which made the landing page look messy and blurry. It also did not help that the image was not long enough to add a good indicator arrow. To combat this problem, I coded many different background image designs.
Fig. 4.6 Initial Landing Page Design, Week 15 (30/11/2023)
Navigation Bar
Based on my prototype design, I wanted to create a center-aligned navigation bar. During this stage, Mr. Shamsul also commented on making the spacing and font size smaller to be able to incorporate the logo on the side.
I adjusted the style of the Bootstrap navigation bar to match my design: removing the unnecessary links and search buttons, replacing the logo, changing the background colour and alignment of the content. The initial code made the navigation bar disappear when scrolling so I changed the navigation bar to sticky so that it does not move when the page is scrolled. I also made sure to set the right #id for each of the sections.
I adjusted the style of the Bootstrap navigation bar to match my design: removing the unnecessary links and search buttons, replacing the logo, changing the background colour and alignment of the content. The initial code made the navigation bar disappear when scrolling so I changed the navigation bar to sticky so that it does not move when the page is scrolled. I also made sure to set the right #id for each of the sections.
Fig. 4.1 Navigation Bar - Without and With Styling, Week 15 (26/11/2023)
Fig. 4.2 Navbar Transparent to Solid on Scroll using CSS Tutorial, Week 15 (30/11/2023)
Fig. 4.3 Outcome of Tutorial - Further Styling of the Navigation Bar, Week 15 (30/11/2023)
After the navigation bar was styled to my liking, I added hover effects. I went with what I learned in class which was making it to be underline and changing colour when hovered over. Furthermore, I inserted the logo in the navigation bar and amended the size, and made sure there was a wide enough gap between the logo and the navigation bar content.
Fig. 4.4 Hover Effect on Navigation Bar, Week 15 (30/11/2023)
Fig. 4.5 Class Tag for No Background Navigation Bar, Week 15 (30/11/2023)
Throughout the whole process, I tried to stay as close to my initial prototype design. However, the one section I struggled with the most, in terms of design, was the landing page.
My initial idea was to have a plain background with the title, and when clicked on a scroll arrow/button, it would take you down to reveal the face and tagline. I realized too late that this would make the landing page look extremely boring and not make viewers understand what the website is about. Furthermore, all the images I found to match the original prototype design had very low resolutions which made the landing page look messy and blurry. It also did not help that the image was not long enough to add a good indicator arrow. To combat this problem, I coded many different background image designs.
Fig. 4.6 Initial Landing Page Design, Week 15 (30/11/2023)
Fig. 4.7 Landing Page Design Variations Style #1, Week 15 (30/11/2023)
Fig. 4.8 Landing Page Design Variations Style #2, Week 16 (04/12/2023)
I took a short break from the landing page for a while to code some other sections. When I came back to solve the problem, I decided to change the entire design and initial concept I had in mind. After having another look at the visual references I gathered in Fig. 1.3 and searching for inspiration on Pinterest, I noticed websites put the full face as the landing page as well. I tried out different variations and got what is shown in Fig. 4.6.
I went with the bottom design because the words were clearer to read and was the cover of the 'Midnights' album I drew inspiration from. It was at this point I changed the navigation as mentioned above, as well as adjusted the colour palette to better suit the new home page (mentioned below in Fig. 8.1).
I wanted to keep my initial idea of clicking on an arrow and scrolling down to a section, so I coded that by following this website. I customized the code in CSS to make the arrows bigger, as well as to place the arrow in the right place - this took forever because the arrow was originally missing and hiding on top of the navigation bar.
Fig. 4.9 'Midnights' Album Inspiration, Week 16 (04/12/2023)
I wanted to keep my initial idea of clicking on an arrow and scrolling down to a section, so I coded that by following this website. I customized the code in CSS to make the arrows bigger, as well as to place the arrow in the right place - this took forever because the arrow was originally missing and hiding on top of the navigation bar.
Fig. 4.10 Scroll Down Button Tutorial, Week 16 (05/12/2023)
Fig. 4.11 Scroll Down Button Tutorial Outcome, Week 16 (05/12/2023)
Introduction Section
Biography Section
This section was also fairly simple to code. I initially thought of making two columns and using display:flex to get the text and image side by side, but then had a lightbulb moment to just set the image as the background, and use padding and margin to place the text. Looking back on this code, I don't think this is the correct way, let alone the smartest way, to place the text but it was what I thought of at the time.
This was by far the simplest section to code because there was barely any design to it. My prototype design initially had icons and images on the top, but after some contemplating I decided to remove them as it would look a little corny. I also removed the background as it made some parts of the text difficult to read. Overall, I just made everything about it simpler.
Fig. 5.1 Before and After of Introduction Section, Week 15 (30/11/2023)
Fig. 5.1 Before and After of Introduction Section, Week 15 (30/11/2023)
This section was also fairly simple to code. I initially thought of making two columns and using display:flex to get the text and image side by side, but then had a lightbulb moment to just set the image as the background, and use padding and margin to place the text. Looking back on this code, I don't think this is the correct way, let alone the smartest way, to place the text but it was what I thought of at the time.
Fig. 5.2 Using Padding to Place Text, Week 15 (30/11/2023)
My original plan was to have a short biography next to Taylor Swift's face, followed by a full timeline of the eras of her life. While coding the timeline section, I realized the timeline was really long and would take up an unnecessary amount of space. To make it look neater, I found a code on collapsible buttons and decided to put the timeline inside the button. By clicking on the button, it would reveal the full timeline.
Fig. 5.3 Collapsible Button Code, Week 15 (01/12/2023)
Fig. 5.4 Collapsible Button Timeline, Week 15 (02/12/2023)
I also had the idea to add some images next to the timeline text, to even out the amount of media there is. However, after trying to do so with multiple attempts, I couldn't adjust the image size inside the collapsible button. I decided to just leave the timeline alone, and move the collapsible button right below the biography text.
Fig. 5.5 Image in Timeline, Week 15 (02/12/2023)
Discography Section
This was by far the worst part of code. Carousels and I do not get along, especially from the previous assignment. The original Bootstrap code for carousels and sliders were all single column. I followed the tutorials below to make a multicolumn carousel, but none of them worked at all.
I followed more code online but that didn't work either. I can't remember what I changed, adding an extra div class, or removing another carousel at the bottom of the page. Either way, the carousel now works woohoo!
Unfortunately, I encountered yet again another issue. I noticed when scrolling down, the carousel goes above the fixed sticky navigation bar. I did some searching online to find out it was the layering/ z-index. To make navigation bar stay above all the elements, it needs to have the highest z-index. I adjusted my code accordingly, making the navigation bar z-index:2 and setting the carousel class as z-index:1.
Unfortunately, I encountered yet again another issue. I noticed when scrolling down, the carousel goes above the fixed sticky navigation bar. I did some searching online to find out it was the layering/ z-index. To make navigation bar stay above all the elements, it needs to have the highest z-index. I adjusted my code accordingly, making the navigation bar z-index:2 and setting the carousel class as z-index:1.
Fig. 5.9 Adjusting the Z-index of the Carousel, Week 16 (05/12/2023)
Fig. 5.10 Functioning Carousel, Week 15 (06/12/2023)
Fig. 5.11 Adjusting the Z-index of the Carousel, Week 16 (05/12/2023)
I wanted to make another carousel (as if one carousel isn't enough) for all of Taylor Swift's latest videos. The carousel also faced the same problem as the carousel above. Unfortunately, I couldn't embed the original videos from YouTube due to copyright issues. All in all, there were too many problems with this idea so I decided to make my life easier and just embed one video that did not infringe copyright.
Fig. 5.11 Adjusting the Z-index of the Carousel, Week 16 (05/12/2023)
Gallery Section
Fig. 6.5 Lightbox Tutorial Outcome, Week 16 (06/12/2023)
I did not really have a plan for the gallery going into this, all I wanted was to make it interactive. This was the original layout I found from Bootstrap and later adjusted it to create another, tidier layout. I also used pictures that I thought matched the aesthetic of the 'Midnights' album, which mainly consisted of pictures from the album's photoshoot.
Fig. 6.1 Gallery Layout, Week 16 (03/12/2023)
Fig. 6.3 Image Hover Zoom Outcome, Week 16 (03/12/2023)
My friend told me that we needed to include a lightbox on our website. I applied the code from the tutorial to each image of my existing gallery code. Initially, the lightbox was extremely small, but when I went to check it again a few days later everything worked well.
Fig. 6.1 Gallery Layout, Week 16 (03/12/2023)
To make the gallery interactive, I wanted to add a zoom in feature. I already did a hover to reveal the image feature in the previous assignment and wanted to try something new. As shown below, the first attempt did not go very well. I multiple tutorials before finding the one that worked, which also happens to be the shortest video out of all.
Fig. 6.2 Image Hover Zoom, Week 16 (03/12/2023)
Fig. 6.2 Image Hover Zoom, Week 16 (03/12/2023)
Fig. 6.3 Image Hover Zoom Outcome, Week 16 (03/12/2023)
Fig. 6.5 Lightbox Tutorial Outcome, Week 16 (06/12/2023)
Contact Section
I divided the section into 2 parts, with contact information icons on the left and a 'get in touch with us' form on the right using display:flex. The initial form I made had a clear placeholder for each field, allowing people to easily input their details. However, the placeholder got smaller when information was being entered. For this reason, I changed the Bootstrap form type leaving them without placeholder text. The right section with the contact details consists of ways to get in touch with Taylor Swift - obviously, the contacts are not real but they are easter eggs to her work.
Fig. 6.6 Contact Section Process, Week 16 (07/12/2023)
I divided the section into 2 parts, with contact information icons on the left and a 'get in touch with us' form on the right using display:flex. The initial form I made had a clear placeholder for each field, allowing people to easily input their details. However, the placeholder got smaller when information was being entered. For this reason, I changed the Bootstrap form type leaving them without placeholder text. The right section with the contact details consists of ways to get in touch with Taylor Swift - obviously, the contacts are not real but they are easter eggs to her work.
Fig. 6.6 Contact Section Process, Week 16 (07/12/2023)
Footer
The content of the footer was fairly simple to do. I simply added a subscription form as well as included the links to Taylor Swift's social media and copyright information. I wanted the footer background to match the topmost of the website, the navigation bar, so I made them the same colour.
The content of the footer was fairly simple to do. I simply added a subscription form as well as included the links to Taylor Swift's social media and copyright information. I wanted the footer background to match the topmost of the website, the navigation bar, so I made them the same colour.
Fig. 6.7 Footer Section, Week 16 (07/12/2023)
Responsive View for Different Screen Sizes
I used @media to make the webpage responsive by specifying adjustments for various screens and windows.
- Min-width 1140 above - content is all good
- Max-width 1139 to min-width 992 - content is all good
- Max-width 991 to min-width 600 - navbar (hamburger menu), sections are cramped, video exceeds the page
- Min-with 600 below - adjustment for every section
I created two versions of the website for responsive viewing on a phone screen and a tablet screen. Most of the code did not require much adjustment to make it responsive in different screen sizes. For example, sections like the 'Introduction', 'Timeline' 'Contact Form', 'Gallery', 'Footer', 'Discography Carousel' etc. only needed a few lines of code such as changing display: flex to display: block. The full media query can be viewed in the CSS code file in Fig. 9.3.
Fig. 7.1 'Gallery' and 'Contact' Section in Phone View, Week 16 (08/12/2023)
Navigation Bar
The initial problem with the navigation icon was that it was too dark. To change it to a lighter version, I adjusted the code by using 'navbar-dark' for a light/white toggler on darker backgrounds.
Fig. 7.2 Navigation Bar Element with Border in Phone View, Week 16 (08/12/2023)
Fig. 7.3 Media Query Code to solve Navigation Bar Issue, Week 16 (08/12/2023)
Iframe/ Video Section
When adjusting the screen size, the iframe video would exit the screen in some instances. This was because the code was set to width: 400px for all screen sizes. I adjusted the width to 90%, and gave it a minimum height so that it does not look so small when the screen size is being adjusted.
Fig. 7.4 Media Query Code to solve Video Size Issue, Week 16 (08/12/2023)
Fig. 7.1 'Gallery' and 'Contact' Section in Phone View, Week 16 (08/12/2023)
Navigation Bar
The initial problem with the navigation icon was that it was too dark. To change it to a lighter version, I adjusted the code by using 'navbar-dark' for a light/white toggler on darker backgrounds.
Fig. 7.2 Navigation Bar Element with Border in Phone View, Week 16 (08/12/2023)
Another issue that popped up was after clicking on the hamburger menu, a border would appear. The inspect tool really helped me identify the tag that I needed to change, without it there was no way I could find out what Bootstrap styling was causing this issue. I found out it was the nav-toggler-focus-width, so I set it to 0rem to make it go away and took away the outline.
Fig. 7.3 Media Query Code to solve Navigation Bar Issue, Week 16 (08/12/2023)
Iframe/ Video Section
When adjusting the screen size, the iframe video would exit the screen in some instances. This was because the code was set to width: 400px for all screen sizes. I adjusted the width to 90%, and gave it a minimum height so that it does not look so small when the screen size is being adjusted.
Fig. 7.4 Media Query Code to solve Video Size Issue, Week 16 (08/12/2023)
Additional Details
Changing the Colour Palette
As and seen mentioned above, I changed the colour palette midway through the CSS styling. I realized that the original colour palette did not have enough contrast in it, as it was all a gradient. I went back to the drawing board and drew inspiration from the album cover itself. It has lots of contrast between the cool reds and indigos and midnight blue.
As and seen mentioned above, I changed the colour palette midway through the CSS styling. I realized that the original colour palette did not have enough contrast in it, as it was all a gradient. I went back to the drawing board and drew inspiration from the album cover itself. It has lots of contrast between the cool reds and indigos and midnight blue.
Fig. 8.1 Revised Colour Pallete, Week 16 (08/12/2023)
Buttons Style
I made the buttons match the new colour palette. Previously all the buttons were blue, which looked nice but didn't have enough contrast against their background. This was also a good way to incorporate some of the warmer colours into the website design. I made it change to a darker colour when the button is hovered over.
Favicon
I wanted to add in a favicon, luckily enough Mr. Shamsul posted a tutorial on Google Classroom. I used the same logo on my website as the favicon.
Fig. 8.2 Button Styling - Before (Left) and After (Right), Week 16 (08/12/2023)
Favicon
I wanted to add in a favicon, luckily enough Mr. Shamsul posted a tutorial on Google Classroom. I used the same logo on my website as the favicon.
How to add Favicon to your Website:
2. Make the icon as simple as possible
3. Export the image as .PNG (Make sure you checked 'Use artboard')
4. Save it as favicon.png
5. Add this code <link rel="shortcut icon" type="image/png" href="images/favicon.png">
Fig. 8.3 Favicon, Week 16 (08/12/2023)
Fig. 8.4 Figma Process, Week 16 (10/12/2023)
Fig. 8.5 Coding Process, Week 16 (10/12/2023)
Final Single Page Website
Fig. 9.1 Final Webpage (10/12/2023)
Fig. 9.2 Final Webpage - HTML Code (10/12/2023)
Fig. 9.3 Final Webpage - CSS Code (10/12/2023)
Fig. 9.4 Final Webpage - JavaScript Code (10/12/2023)
Fig. 9.4 Final Webpage - JavaScript Code (10/12/2023)
FEEDBACK
WEEK 10
The layout is clean and the process is good. The colour palette choice is up to you.
WEEK 12
Remove the search bar in the navigation bar. Add margins and padding to make sure the content does not touch the ends of the screen.
REFLECTION
Experience
My experience with this project is a very love-hate relationship. I love that we get to choose our favourite artist and the topic is something we would actually like to make a website about. This really motivated me to finish the project to the best of my abilities. If not for this only positive factor, this is one of the most challenging things ever. I feel like I would've given up the moment something went wrong, but the topic really pushed me to solve the issue, only to have ten more issues come up.
Observations
I observed that coding requires a lot of troubleshooting and patience. An issue always comes up one way or another, and it takes a lot of patience and anger management (especially on my end) to solve the problem. Sometimes the problem is too difficult, it would take days to figure it out and sometimes it would just take a few minutes. I also observed that being sure of your prototype design is important. Some things look great on paper but just don't work out in code. It's important to make sure the design isn't overcomplicated and that you are not overconfident and think it's possible to code anything
Findings
I found that watching tutorials and reading through notes helps me learn a lot. Most of what is coded has not been learnt in class, we only know the basics, and to expand upon that requires research. I also found that using Bootstrap is both an ease and a pain, it can help code the most useful things that would normally take ages to code from pure HTML and CSS, but customizing the Bootstrap code is challenging and requires the inspect tool and slowly going through each class
Comments
Post a Comment