Interactive Design/ Final Project - Creating a Single-Page Website

29th June 2024 - 3rd August 2024 (Week 10 - Week 15)
Natalie Chu Jing Xuan, 0354589
Interactive Design, Bachelor of Design (Honours) in Creative Media

Final Project - Creating a Single-Page Website

---

Table of Contents 

1. Module Information Booklet (MIB)
2. Final Project

---

Module Information Booklet (MIB

---

Final Project

In this web design project, we will create a single-page website about our favourite topic. This project will help us strengthen our web design and development skills while also showing our passion for the topic of our choice.

Requirements

1. Artist selection: 

Choose your favourite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.

2. Content:

Your content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.  

3. Design Elements:

• Choose a colour scheme and fonts that reflect the artist's style or your 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).

4. Navigation:

Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.

5. Interactivity:

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

Planning Stage

I've decided to create a fan page for Keshi, an American singer whose music I admire. To begin the design process, I spent some time browsing Pinterest for inspiration, looking for a colour scheme that matches Keshi's aesthetic and the vibe of the music. 

Fig.1.1 Visual References

I wanted to design a dark-themed website with black as the background for a mysterious and modern vibe. At the same time, I wanted to add some retro elements to give the visual effect more depth.

While looking for colour inspiration, I recalled Kodak film's classic colour scheme of red and yellow. This palette not only evokes nostalgia but also creates a stark contrast with the black background, enhancing the visual impact. 

Fig.1.2 colour scheme

After much thought and inspiration, I've decided to divide my Keshi fan page into five main sections: Home, About, Music, Gallery, and Subscribe. 

• Home: This will be the landing page, giving visitors a quick overview and setting the tone for the rest of the site.

• About: In this section, I will provide some background information about Keshi.

• Music: This section will contain a curated selection of Keshi's song genres.

• Gallery: A visual showcase of photos, including concert live photos.

• Subscribe: This will be a call to action for visitors to subscribe for updates.

This structure will help to a smooth and engaging user experience, allowing fans to easily navigate and explore various aspects of Keshi's world. 

I uses Figma to create my prototype:

In Fig 1.3, I started by linking my CSS style file to the fonts I intend to use throughout the site—Alata and Acme. These fonts were chosen to complement the overall aesthetic I want to obtain, giving the website a modern yet approachable feel.

I also created the basic navigation structure by putting in the five sections—Home, About, Music, Gallery, and Subscribe—as listed in the header. This will make it easier for users to navigate between different sections of the site, resulting in a more smooth and intuitive user experience.

With these foundational elements in place, I'm ready to start designing and creating content for each section.

Fig.1.3 Header HTML & CSS

In the Music section, I decided to include Keshi's Spotify page directly on the website. Visitors can listen to his tracks without leaving the page. It's a simple but effective way to incorporate his music and keep fans engaged on the fan page.

This addition not only improves the user experience, but it also adds an interactive element, making the site more dynamic and connected to Keshi's music.

Fig.1.4 Embed Spotify

The Gallery section of the site is designed to be a visual showcase of Keshi's world, featuring a curated collection of his film work, concert live photos, and snapshots from his daily life.

I implemented a simple yet engaging effect where the images slightly increase in size when the cursor hovers over them. This interactive element adds a dynamic feel to the gallery, making it more engaging for visitors.

Below is the HTML and CSS code I used to create this effect:

Fig.1.5 Gallery HTML & CSS code

In Fig.1.6, I completed the website's last section, which includes a "Subscribe for Latest Updates" form and links to Keshi's social media pages. This section is intended to promote fan engagement and keep visitors up to date on Keshi's latest news and content.

Fans can easily sign up for updates using the subscribe form, ensuring they don't miss any new releases or announcements. Furthermore, by including links to Keshi's social media accounts, I'm giving fans multiple ways to stay connected and track his activities across multiple platforms.

Fig.1.6 HTML code

Final Outcome

Netlify link: https://keshifanpage.netlify.app/

HTML code:

CSS code: