LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / INTERACTIVE DESIGN
Final Project: Single-Page Website for Favourite Artist
Progress
As per the brief and task schedule, I contemplated my
choice for a favorite artist. After selecting JJ Lin, I delved into the
details of his information to gather ideas and direction for my website
layout. Once I reviewed all the relevant information, I made decisions on what
details to include on the webpage. Before sketching out the layout design, I
documented the chosen information, considering that the length of paragraphs
would impact the overall design.
|
| Figure 1.1 Chosen information. |
Following that, I explored visual references on Pinterest to observe how information is creatively presented in various layouts. Besides, I decided to use the color purple, representing JJ Lin's fandom color, as the color scheme for the webpage to authentically reflect his identity.
Figure 1.2, 1.3 Visual references. (credits: Pinterest)
Afterwards, I began sketching out the ideas that were in my mind for the design of the single-page website.
Figure 1.4 - 1.9 Sketches.
As per the instructions, I compiled my sketches, visual references, color scheme, and font choice into slides to provide a clearer direction for my focus and ensure smooth progress.
Figure 1.10 Compiled slides.
I proceeded to create a low-fidelity prototype using Adobe XD. Choosing sketch 04 as the final design layout, I developed a low-fidelity prototype based on this sketch. Following instructions, the low-fidelity prototype doesn't include color, it is presented in grayscale. I inputted all the informational sentences and created the webpage layout accordingly.
 |
| Figure 2.1 Low-fidelity prototype. |
I presented the low-fidelity prototype to Mr. Shamsul Hamimi, and he advised me to reconsider the layout for the biography section. He expressed that the current layout might not be suitable for an artist's webpage. He recommended searching for singer webpages on Pinterest to gather more ideas for refinement. Additionally, he reminded me to include a footer with copyright information at the bottom of the webpage.
Based on Mr. Shamsul Hamimi's feedback, I explored additional visual references on Pinterest and examined templates on Wix designed for artist webpages to gather more ideas.
Figure 2.2, 2.3 Visual references. (credits: Pinterest)
Following that, I made adjustments to the biography section based on the ideas I gathered. Additionally, I modified the design of the introduction part, as I felt it could become monotonous with just paragraphs of explanation.
 |
| Figure 2.4 Second low-fidelity prototype. |
Based on the low-fidelity prototype, I utilized Adobe Dreamweaver to develop the single-page website. Following the guidelines provided by Mr. Shamsul Hamimi, I began by establishing a project folder. Subsequently, I saved the HTML and CSS files within this designated folder. The HTML file was named "index.html," while the CSS file was named "style.css.
 |
| Figure 2.5 Progress screenshot. |
Figure 2.6 - 2.10 Progress screenshot.
After completing the HTML code, I moved on to CSS.
Figure 2.11, 2.12 Progress screenshot.
However, when attempting to make the webpage responsive, I found it a bit complex. I decided to create a new file and start over with HTML code, this time using Bootstrap. Bootstrap can assist me in effectively organizing all the content and ensuring responsiveness.
 |
| Figure 2.13 Progress screenshot. |
Using Bootstrap to create a website remains challenging for me as I have never used Bootstrap before. Bootstrap has its own formula of using class to overwrite the style of a website, which is different from normal CSS coding.
Figure 2.14, 2.15, 2.16, 2.17 Progress screenshot.
To set up the image slider, I explored several online coding tutorials, but none seemed to work. Eventually, I came across a code that worked for my website. I copied the code into Dreamweaver, replaced the images with my chosen discography images, and made adjustments to the padding.
Figure 2.18, 2.19, 2.20, 2.21 Progress screenshot.
I presented the current status of my work to Mr. Shamsul Hamimi. He recommended a reevaluation of the color scheme used in the website. Additionally, he suggested reducing the font size, as it currently appears somewhat large. He also emphasized the importance of ensuring that all sections are responsive in the mobile version.
 |
| Figure 2.22 First attempt. |
In response to the feedback received, I opted to incorporate a gradient color scheme for the website, aiming to enhance visual appeal compared to a plain color scheme. I envisioned placing the introduction section above the video when scrolling up.
 |
| Figure 2.23 Gradient color. |
To avoid losing the current progress, I created a new file, reorganized the HTML and CSS code, and introduced new code to implement these changes.
 |
| Figure 3.1 Progress screenshot. |
The full-screen video is fixed at the back, and the content is set to position absolute. As users scroll down to the content, the background transitions from light to dark in a gradient, gradually covering the video. Additionally, I included the name of each album below its respective image.
Figure 3.2, 3.3, 3.4, 3.5 Progress screenshot.
To add a more dynamic touch, I chose not to use underlines to indicate clickable social media links in the contact information section. Instead, I applied an icon transformation effect, making it clear and engaging for viewers. When the cursor hovers over the letter or icon, it moves upward slightly, returning to its normal state when the cursor moves away.
Figure 3.6, 3.7 Contact section.
Final Single-Page Website
Website
.png) |
| Figure 4.1 Final single-page website. |
FEEDBACK
Week 11
Reevaluate the biography section, as it may not complement the current layout design for an artist. Explore singer websites on Pinterest to gather more inspiration and refine the layout accordingly.
Week 14
Mr. Shamsul Hamimi suggested a reconsideration of the color scheme used in the website, noting that it appears too plain and lacks visual appeal. He recommended reducing the font size and ensuring the entire website is responsive.
REFLECTIONS
This project posed significant challenges for me. I aimed to create an interactive layout rather than just presenting information. The inclusion of JavaScript for the desired website design, along with the goal of making it responsive, felt stressful and demanding. As I hadn't learned JavaScript before, finding working online resources added to the difficulty.
Besides, I realized my creativity in web layout design is still developing, given my relative newness in this field and my ongoing learning curve with HTML and CSS. Complex designs proved challenging to code. Additionally, incorporating JavaScript into my website was a new and educational experience. I explored Bootstrap for the first time, encountering and solving issues along the way. Exploring new features like gradient backgrounds and a full-screen looping video added to the learning experience. I acknowledge the need for more effort and practice to become more proficient with coding.
Comments
Post a Comment