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

27.10.2023-1.12.2023/ Week 9- Week 14

Kelly Lau Jie Ning/ 0354839

Interactive Design/ Bachelor of Design(Honours) In Creative Media

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

---

INSTRUCTION

---

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 favourite 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:

Artist Selection: Choose your favourite artist as the subject of your website. It can be a musician, painter, actor, or 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: Include contact details or links to the artist's social media profiles if applicable.

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 page sections.

Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

Progress

1. Draw 5 sketches

I have drawn 5 sketches using Procreate. I decided to do 7 parts for this website which are home, about, career, discography, gallery, contact, and countdown.

Fig1.1 Sketch #1

Fig1.2 Sketch #2

Fig1.3 Sketch #3

Fig 1.4 Sketch #4

Fig 1.5 Sketch #5

I have chosen Sketch #4 for my prototype.

2. Do the prototype
I have done my prototype in Miro. For the colour of the website, I choose it from the color hunt website.

Fig 2,1 Screenshot for the Miro

Fig 2.2 Colour palette of the website

Final prototype

Fig 2.3 Final prototype in Miro

Fig 2.4 Final Prototype for website-PDF

3. Coding progress in Adobe Dreamweaver

There are logo and navigation at the header part.

Fig 3.1 HTML code of header part

Fig 3.2 CSS code of header part

For the navigation, I have done the hover for each part.

Fig 3.3 hover effect for navigation

Then is the home page.

Fig 3.4 HTML code of the home page

Fig 3.5 CSS code of the home page

For the home page, I made the word have an animation that can change colour.

Fig 3.6 Colour-changing gif

For the about part, I have written his information and also wrote my reason why I admired him.

Fig 3.7 about page

For the career part, I made a timeline. The image of the timeline is clickable after clicking it you will go to Spotify.

Fig 3.8 HTML code of career page

Fig 3.9 CSS code of career page

Fig 3.10 Hover effect of discography

The next part is the gallery page. On this page, you can see the photo of J-Hope.

Fig 3.11 Screenshot of gallery page

The website also has a contact page

Fig 3.12 HTML code of the contact form

Fig 3.13 CSS code of the contact form

I also created a countdown page because the artist I picked is doing his military service now and the countdown is created for counting when the time he is back. For this page, I used Java Script.

Fig 3.14 HTML code of countdown page

Fig 3.15 CSS code of countdown page

Fig 3.16 Java Script of countdown page

For the footage part, there is a social media icon. After you click it you will go to his social media account on each platform. However, he only has an Instagram individual account so after clicking another icon will go to his group account which is BTS.

Fig 3.17 Screenshot of footage

I also do a back-to-top button.

Fig 3.18 Screenshot of back-to-top button

Fig 3.19 HTML code of back-to-top button

Fig 3.20 CSS code of back-to-top button

Fig 3.21 Java Script code of back-to-top button

I also have created a mobile format.

Fig 3.22 screenshot of a part of mobile format

Final Outcome

Click the link to see the website.

---

REFLECTION

I learned a lot from this project. In this project, I used Java Script for the first time. I think Java Script is quite hard to use so I just copy and paste from another website. I hope I will have a deeply learned Java Script in the future. In this project, I also learned more about how to use HTML and CSS. For example, I learned how to create a timeline. This project also helps me know more about my favourite artist.