Interactive Design: Final Project_Websites Redesign Development

21 November 2024-12 December 2024

CHONG CHENG TAO (0371072)

Interactive Design | Bachelor of Design in Creative Media | Taylor's University

Project 2/ Website Redesign Prototype

---

List

• INSTRUCTIONS
• FEEDBACK
• REFLECTION

---

<back to top>

INSTRUCTIONS

This is the Module Information Booklet for this module: 

Project 3: Website Redesign Development

• Development Process
• Challenges
  
• Interactive Element
• Demo Video / Testing
• Final Submission

---

<back to top>

Development Process:

At first I have created 5 html files with custom CSS stylesheets. 5 main pages are developed including homepage, review page, genre page, chart page and contact page. 

I have imported Bookstrap and DaisyUI CDN to used the existing framework and toolkit. From bookstrap, I have used class= "col-10" for all of the sections to ensure the consistency white space and margin of the overall website. For customization, I have used multiple css stylesheets to customize the framework and toolkit. In order to make allow the customization, a more specific class need to use or using "!important" in the CSS code. Besides Bookstrap and DaisyUI, I have use a few of online free sources to achieve some effect and functions. 

The most challenging part of the overall creating process would be the horizontal scrolling card containe. As it is related to complicated CSS and Javascript codes. In order to achieve that, I have used a framwork of multi column slider (more specific details in Challenges 2). 

---

<back to top>

Challenges:

Following are the challenges I face throughtout the development phrase and the respective solutions. 

1. Responsive website in devices like dekstop, mobile and tablet

• Using framework like Bookstraps.
• Using the column class from the framework to fix the elements in a certain column.
• Eg: class= "col-6" fixed the elements in 6 columns widths in all devices.

2. Horizontal scrolling of card elements

• In the hompage, albums are display with card elements which can be scrolled horizontally.
• How to Create Horizontal Scrolling Container
• Pure CSS Horizontal Scrolling
• After consulting Mr Shamsul, he suggested me to do a multi column slider. (example here)
• In the JS code, a limit number of items (card) per row are set in different screen size. 

Fig 2.1 Multi column slider_JS code

3. Open hidden info of the card on click

• Method 1: Show div on click
• HTML: <tabindex = "1" >
• Make the element focusble and can be navigated to directly using Tab key.
• Method 2: Details disclosure element
• HTML: Using <details> tag
• In <details> put all information.
• Place the info that want to show the viewer in <summary> tag.

Fig 2.2 <details> tag

4. Customize scrollbar

• CSS: ::-webkit-scrollbar, ::-webkit-scrollbar-thumb & ::-webkit-scrollbar-track
• The scrollbar is customized to fit the overall style of the website. 

Fig 2.3 Customized scrollabr

5. Customize style for Bookstrap/ DaisyUI framework 

• Method 1: Using !important (however it's not recommentded as it will potentially disrupt other style.)
• Method 2: Put custom style in a more specific class. 

6. Pop up card & window after clicking button

• Create a button for clicking action.
• HTML: Include onclick event. (Eg: onclick="showPopup()")
• CSS: Style both pop up card while close and open:
• .popup { display: "none",  }
• .popup.show { display: "block",  }
• JS code created using Claude.ai. 
• An animation keyframe is added to the pop out action to make the animation looks smoother. 

Fig 2.4 Show pop out card_JS code

Fig 2.5 Close pop out card_JS code

Fig 2.6 Pop out animation keyframe_JS code

7. Change order of flex direction

• CSS: 
• First items: order: {1, }
• Second items: order: {2, }

8. Responsive

• Most of the responsive material get from Bookstrap and Daisy UI. However, a few of customization are still needed to make it look smoother. 
• Mobile responsive: @media (max-width: 450px) 
• Tablet responsive: @media (max-width: 1024px)
• The section that required mannual adjustment in responsive is mostly the scrolling card section and display issues in a container. 

Fig 2.7 Responsive Cheatsheet

Fig 2.8 Chart card_Deskop view

Fig 2.9 Chart card_Mobile & Tablet view

Fig 2.10 Homepage_Deskop view

Fig 2.11 Homepage_Mobile & Tablet view

9. Like and Dislike button

• Like button and dislike button are set in default. 
• An active Psuedo class is add to swap the fill and stroke of the svg graphic.
• CSS: {transition: all 0.3s ease;}
• Transition is added to smooth the color swapping. 
• JS code is added to make the like and dislike button only active either one. 

Fig 2.12 :active_Psuedo class_ 

Fig 2.13 Transition_Like & Dislike button

Fig 2.14 Only display either Like or Dislike button_JS Code

---

<back to top>

Interactive Elememts

Some interactive elements are added to the website to enhance the overall user experience and satisfaction. 

Carousel

The hompage carousel features 3 images with short desciption, which can be changes by clicking the "<" and ">" button. 

Fig 3.1 Carousel

Multi Column Slider

Multi column slider is using to display cards for albums and news. It can be drag by holding left mouse or using the left and right buttons. 

Fig 3.2 Multi column slider

Besides, each cards consist dropdown to show more details such as rating and review.

Fig 3.3 Multi column slider_Dropdown

Rating Bar

In the review page, a 5 star rating bar is featured for the user to rate a specific album. 

Fig 3.4 Rating bar

Textarea & Button

In review and conatct page, there is a textarea dedicated for review post and user's opinion. 

Fig 3.5 Review & Contact Textarea

Most of the buttons are customized to change color while hovering. 

Fig 3.6 Buttons

After clicking post or submit button, a overlay card will pop out.

Fig 3.7 Pop out card

---

<back to top>

Demo Video / Testing

Fig 4.1 Demo video_Desktop view

Fig 4.2 Demo video_Mobile & Tablet view

---

<back to top>

Final Submission

Fig 5.1 Screengrab of redesign website_RateYourMusic

Link to Redesign Website-RateYourMusic

---

<back to top>

HTML / CSS/ Javascript

Fig 6.1 Hompage_index.html

Fig 6.2 Reveiw page_review.html

Fig 6.3 Genre page_genre.html

Fig 6.4 Chart page_chart.html

Fig 6.5 Contact page_contact.html

Fig 6.6 Custom CSS stylesheets_custom.css (merged)

---

<back to top>

FEEDBACK

Week 12

• Try to use multi column slider for the homapge. 
• Make sure that the main page or the first page should be named index.html. The other 4 pages can be named accordingly (eg. about.hml, contact.html etc). 
• Overall looks good. 

---

<back to top>

REFLECTIONS

This project has been such a challenging and amusing journey! The process of developing the website using coding languages is full og ups and downs. Sometimes, I find myself stuck on what seems like a simple problem for hours, but overcoming those challenges feels incredibly satisfying. While it is really frustrating at times, it’s also interesting to learn, experiment, and create something from scratch.

I feel that my problem-solving techniques have improved significantly throughout this project. I’ve noticed that I’m less likely to panic when faced with difficulties. Besides, I'm able to tackle the issues by using different methods and approaches. 

Overall, I’m proud of the final product of this project. Although there’s still a big of room for improvement, I view this as a checkpoint for myself as a designer.