Interactive Design: Final project

| 29.06.2024 - 03.08.2024 (WEEK 10 -WEEK 15)
| Tang Chin Ting [ 0366473 ]
| Interactive Design / Bachelor of Design in Creative Media
| Final Project: Single Page Lifestyle Microsite

---

LECTURES

Every week's lecture can be found in Interactive Design: Exercises.

---

INSTRUCTIONS

---

SUBMISSION

Task 3: Single Page Lifestyle Microsite

Requirement

Project Overview:

• In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the subject of your choice.

Project Requirements:

• Artist Selection: Choose your favorite topic as your website's subject. 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.

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.  

Design Elements:

• Choose a color 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).

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.

Idea Proposal 

Figure 1.1 Idea Proposal PDF

Prototype Design

Based on the references that I preferred, I would like to design a fan page that is simple style but includes all the information about Faouzia. My website will be separated into 7 sections, which are the hero section, introduction, singles, music videos, gallery, and social media.

• Hero Section

This is my hero section, designed with simplicity in mind. I placed a portrait of Faouzia and adjusted its opacity to 60% to ensure it doesn't dominate the space. This allows the "Hey! Nice to meet you" text to stand out clearly on the image.

Figure 1.2 Hero Section in Figma

• Introduction

This part is quite interesting and one of my favorites. Initially, I chose the "Jim Nightshade" font for the subheading, but my roommate suggested that bold "Judson" would be more suitable. I agreed and changed all the headings to "Judson." Additionally, I initially placed the image on the right side, but it felt too plain. Inspired by some references, I added squares that partially cover the image, making the design more dynamic and engaging.

Figure 1.3 Introduction Section in Figma

Figure 1.4 Introduction Section in Figma

Figure 1.5 Introduction Section in Figma

Figure 1.6 Introduction Section in Figma

• Singles

In this part, I initially wanted to design it like a vinyl record but found it too difficult. Instead, I placed the cover of the singles and created a button shape to simulate pressing a button to play the song. Additionally, the song list is scrollable, allowing users to play more songs seamlessly.

Figure 1.7 Singles Section in Figma

Figure 1.8 Singles Section in Figma

Figure 1.9 Singles Section in Figma

• Latest Activities

In this part, I wanted to showcase the latest activities by linking to 'Singer 2024' YouTube episodes directly from the image titles. This allows viewers to click on the episode they want to watch and be taken straight to the YouTube video. Initially, I created a shape for each title, but I found that simply using a line for the titles looked better.

Figure 1.10 Latest Activities Section in Figma

Figure 1.11 Latest Activities Section in Figma

Figure 1.12 Latest Activities Section in Figma

• Music Video

In this section, I would like to directly put the YouTube embed code into the website, and I will include 5 links for it. Create the arrow buttons and scroll to see more videos. 

Figure 1.13 Music Videos Section in Figma

Figure 1.14 Music Videos Section in Figma

Figure 1.15 Music Videos Section in Figma

• Gallery

In this section, I wanted to include some portraits and make the background more interesting. To achieve this, I decided to place some words in a staggered arrangement. This created a visually appealing effect that I really liked. To avoid a messy look, I reduced the opacity of the white text to 40%.

Figure 1.16 Gallery Section in Figma

Figure 1.17 Gallery Section in Figma

Figure 1.18 Gallery Section in Figma

Figure 1.19 Gallery Section in Figma

• Footage

In the footer, I included direct links to Faouzia's social media profiles, allowing users to browse her profiles on each platform easily. Initially, I didn't have a 'go to top' button, but Mr. Shamsul suggested adding it to give the footer a more complete and functional look.

Figure 1.20 Footage Section in Figma

Refinement

After receiving the feedback from our lecturer, he suggested that the singles part can directly put Spotify embed code into the website; it is an easier and simpler one.

Figure 1.21 Refinement in Figma

HTML

Figure 1.22 HTML Layout

Figure 1.23 HTML Coding

CSS

• Smart Navigation Bar

This code snippet demonstrates the implementation of a dynamic navigation bar that adapts to the user's scroll position on the page. If the user scrolls down past the previous scroll position (lastScrollTop), the navigation bar is scrolled down and hidden, creating a minimalist UI that doesn't obstruct the main content. If the user scrolls up, the navigation bar is brought back into view, ensuring easy access to the navigation options. 

Figure 1.24 Smart Navigation bar

• Singles

The "Singles" section of the music artist's fan page, features an embedded Spotify player. The Spotify player is integrated seamlessly into the page layout, allowing users to listen to the artist's singles directly on the fan page. The player includes key details such as the track titles, duration, and playback controls, enabling users to navigate through the artist's singles with ease. The clean and minimalist design of the player ensures that it complements the overall aesthetic of the fan page, creating a cohesive and visually appealing user interface. 

Figure 1.25 Singles Section Coding

• Music Video

The code I provided enables autoplay for the current video. Since YouTube's policy prohibits embedding music videos on websites, I downloaded some music videos and embedded them directly into my site. Additionally, I included a carousel button to allow users to scroll through and watch more videos.

Figure 1.26 Music Video Section Coding

• Latest Activities

This section showcases the "Latest Activities" of the music artist, presented in a grid-like layout. The grid displays a series of images, potentially representing live performances, promotional events, or behind-the-scenes footage, giving users a visual glimpse into the artist's recent activities. The grid layout allows for an organized and visually appealing presentation of the content, making it easy for users to browse through the latest updates. This section not only provides users with up-to-date information about the artist's activities but also encourages continued engagement and exploration of the fan page.

Figure 1.27 Latest Activities Section Coding

The inclusion of a navigation arrow suggests that users can navigate to additional pages or sections to view more of the artist's latest activities. This design decision ensures that users can easily discover and engage with the full breadth of the artist's recent updates and content.

• Gallery

The gallery section has been modified from the initial prototype design. To showcase more of Faouzia's images, I switched to landscape images with varying heights and widths for a more dynamic presentation. The original prototype design will be included in the mobile layout, as it is more suitable for that format.

Figure 1.28 Gallery Section Coding

Figure 1.29 Gallery Section Coding

• Footer

In this section, I included all the social media links into the button so that it will be a jump link that users can directly go to Faouzia's social media platform.

Figure 1.30 Gallery Section Coding

Figure 1.31 Gallery Section Coding

Final Outcome

Click here to view my website!

Figure 1.32 Website's Final Outcome

---

FEEDBACK

Week 12: Your layout is good, but for the singles, I think you can directly include the Spotify embed code into your website. The music video is also the same, including the embed code of the YouTube video into the website. You can also adjust the width and height directly in the embed code; it is quite easy. The social media button is good, but I think you can add one more arrow button to go to the top since it does not look like footage now.

---

REFLECTION

As my final project for Interactive Design, I made a fan page for Faouzia, one of my favorite artists. This project taught me and helped me use several new coding approaches, which made it both difficult and satisfying. I made the website mobile-friendly, added an effective navigation bar to enhance user experience, and designed a carousel to display several movies. These abilities greatly increased my competence in web design in addition to improving the fan page's usability and appearance. I have learned so much about interactive design and coding thanks to this experience.