Interactive Design - Final Project: Creating a Single-Page Website for Your Favourite Artist

on

17.10.2023 - 27.11.2023 ( Week 8- Week 14)
Gam Jze Shin / 0353154
Interactive Design / Bachelor of Design in Creative Media
Final Project: Creating a Single-Page Website for Your Favourite Artist
Index
1. Lectures
2. Instructions
Lectures
Refer to Lectures.

Instructions

Final Project
Creating a Single-Page Website for Your Favourite 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:

  • Content: 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.

Ideation

fig 1.1 Form list

In week 9, we should confirm the artist that we would like to choose and write it into a google form. My selected artist is Eric Chou, a Taiwanese singer. I enjoy listening to his music. 

fig 1.2 - 1.3  5 Sketches

I created five paper wireframes and presented them to Mr. Shamsul during the in-person class in week 10.

fig 1.4 Selected layout

He recommended that I proceed with this design as it appears clean and distinctive compared to the others.

fig 1.5 - 1.6 Mood board

I presented the mood board I had created, which included the color palette, font choices, and overall style I intended to use for the website.

fig 1.7 References in Pinterest

Subsequently, I discovered visual references on Pinterest. The artist on the right shares a similar musical style with Eric Chou, focusing on romantic and slightly R&B songs. This similarity allows me to draw inspiration from the style of that artist.

Information references website: https://www.songtell.com/eric-chou/the-chaos-after-you

Prototype

fig 2.1 - 2.2 Prototype before and after

In week 11, I created low fidelity prototype in Figma before class. I presented to my lecturer in order to get some feedbacks. The image on the left is my initial work, while the image on the right represents the improvements suggested by my lecturer.

fig 2.3 Before and after #1

Mr. Shamsul suggested that instead of using lines, I could employ color to distinguish between different sections, considering the abundance of lines already present in my website.

fig 2.4 Before and after #2

In this section, I can enhance the visual appeal by incorporating images into the artist life, especially since there is an extensive amount of text.

fig 2.5 Before and after #3

I decided to add icons to the contact section to make it look more interesting and less plain in my initial design.

Progress in Dreamweaver
fig 3.1 Eric Chou file

First, I created a folder and include the images (Eric self-portrait, images with his family members and his album cover page) needed into it.

fig 3.2 linked HTML and CSS

I linked the HTML and CSS into a single file for efficiency, making it easier for me to style any design quickly.

fig 3.3 -3.4 Font used

Then, I selected the Laila font, copied the font's link, and pasted it into my HTML code before including all the information.


fig 3.5 - 3.6 First part

I changed the images in the first section and adjusted the height and padding-top of the images to ensure they touched the line of the next section. Mr. Shamsul suggested that this would be better than having the images flow into the section without touching the bottom line.


fig 3.7 - 3.8 Playlist part

In the playlist section, I used <div class="column"> within <div class="aside-rightplaylist"> to ensure that the three different songs can be displayed on the same line.

fig 3.9 Effect used

I found the gallery effect that I want in Codepal. Hence, I decided to use it in artist life section.

fig 3.10 HTML and CSS structure

I followed the given steps and attempted to include them in my HTML and CSS code. I noticed that some of the class styles were the same as my other classes. Therefore, I changed and adjusted them, also removing any unwanted elements.

fig 3.11 Effect used

In the Contact section, I thought of adding some effects similar to the image above. I experimented with this idea on my webpage.


fig 3.12 Attempt in Adobe DW

I realized that I couldn't directly copy all the HTML and CSS structure provided, as it would disrupt the layout of the rest of my website. Therefore, I needed to identify and remove certain elements on my webpage.

fig 3.13 CSS style

Additionally, I adjusted my CSS styles for phone devices to ensure the responsiveness of my webpage.

Final Single-Page Website

Feel free to see my Final Single-Page Website.

fig 4.1 Final desktop version



fig 4.2 4.6 Final mobile version


Feedbacks

Week 10
I can proceed with the third layout as it presents a clean and distinctive appearance compared to the others.

Week 11
Replacing lines with color to distinguish various sections. Additionally, incorporating images in the artist life section rather than relying solely on text.

Week 14
Mr. Shamsul recommended considering a different image for the artist portrait and advised ensuring the image touches the bottom for a more cohesive look. While the overall layout is clean and straightforward, exploring the integration of engaging effects could enhance the webpage.

Reflection

I feel excited about the task of creating a single-page website for my favorite artist, Eric Chou. Having successfully completed my resume using Adobe Dreamweaver in a previous task, I now feel more confident in this endeavor. However, this task requires incorporating more elements and effects, such as JavaScript or other structural formats. Fortunately, Codepal has been a useful tool for us. When encountering challenges, especially when included code doesn't work, I've dedicated significant time to troubleshooting and seeking solutions online. I've observed the importance of being meticulous with the elements and code, as a simple mistake can impact the overall functionality. I'm grateful for the support I've received during this project, particularly from my lecturer, Mr. Shamsul.


Comments

Post a Comment