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

2.7.2024 - 3.8.2024  / Week 11 - Week 15   

ID name YANG HANWEN

ID number 0364085

Program name bachelor of design (honors) in creative media

Final Project


TABLE OF CONTENTS
Instruction


Lectures











PC

Mobile

















Creating a Single-Page Website

  1. Requirements
  • Project Overview
    In this web design project, create a one-page website dedicated to your favorite topic. This project will help develop web design and development skills while demonstrating personal passion for chosen topic.
  • Project Requirements
    Artist Selection: Choose a topic that personal like the most as the theme of your website. Make sure have a genuine interest in the topic as this will help create a more attractive website. Decide on the goal of personal website to ensure that the content of website is clear.
  • Content
    An individual's content should contain at least 5 sections explaining the topic of interest. The content should be engaging and relevant to the topic. It should also contain a CTA button that reflects the content.
  • Design Elements
  • Choose a color scheme and fonts that reflect the artist’s style or personal taste.
  • Make sure the layout is visually appealing and has a balanced use of text and multimedia.
  • Create a responsive design (mobile-friendly) that adapts to different screen sizes.
  • Navigation
    Implement smooth scrolling navigation or a simple menu so users can jump to different sections of the page.
  • Interactivity
    Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

    2. Process
  • My idea? Plan

    My theme is to make a website for singer details, and I plan to choose a virtual singer, a character called "Robin" from the game "Honkai Impact 3rd".




    Is these ↑ 2 pictures above a visual reference? Or a source material? I’m not sure because...
    My next web page layout is to use the web page of Mr. Shamsul Hamimi Ab. Rahman's final project in the Week 10 Tutorial in the "Lectures" section above as the web page layout of my final project.

    However, I plan to add a singer's track list based on this layout, and insert songs into the list, which can be played by clicking on them,


    similar to ↓


    Because I found that Spotify can share embedded webpage codes,



    so I plan to make such an interaction? This is also the reason why I want to insert the two pictures above.


    So next I need to make a prototype (more precisely, a draft of the layout).

  • Prototype? Draft/Sketch

    I used the screenshot of the webpage made by my senior on the left and the one shown in Week 10 Tutorial on the right as references and made a rough draft in Adobe Illustrator.


    Then I exported it and put it into Figma as a rough draft.


    And... on July 16, 2024, I uploaded this draft to this thread on Google Classroom (although he ignored me because the "Wenbing" above me told me that he wanted to see the complete version after all the materials were sorted out)



    So, later on, I refined my prototype draft in Figma.


    And this ↓ is the background layout I made in Adobe Illustrator.


    And I made some interactive effects in the Figma prototype (although I don’t know why this interactive effect is not showing now😅)

     - Explanation effect

    I want to make the top banner look like this↓.

                               
    Here and here are...

    After clicking the mouse🖱, the left one will go here↓,

    the one on the right will go here↓.

    Click on the following ↓ three...

    Then you will enter the following three ↓ videos.
    (click on the corresponding ones to enter the corresponding videos)

    so...
    Anyway, the final prototype (or draft? sketch) I made at that time looked like this↓.



  • Write Code To Make A Web Page
Oh, I forgot to write the above, I will add it now...

At the beginning of the 11th week, as mentioned in this post, 
we need to decide on a theme or direction for the web page we are going to create.
In other words, we need to fill in the final topic 
who want to do in this ↑ form.

OK, next is the part where I type the code...

The code typed in Adobe Dreamweaver is as follows↓.





- script.js



Next is the final step...
I put this ↑ entire folder directly into Netlify here (as shown ↓  below) 
and got the following ↓ web page I finally submitted.


Feedback

2024.07.24
I went to Taylor's University E9A Room to find Mr. Shamsul Hamimi Ab. Rahman and showed him the prototype I made in Figma and the interactive effect. He said "Fine" and asked me to continue. I said if there was no big problem, I would create this webpage by typing the code. He nodded and said yes. Then I asked if I could ask him on Whatsapp if I encountered any problems in the code. He also said yes (although when I said to implement it through code, he recommended me to use the ? platform "Get started with Bootstrap. Bootstrap v5.3")

2024.07.31
I made a complete interactive design that day and sent it to him. He asked me to type the code to complete the webpage because time was running out (it was true. After all, our students’ Adobe license would expire in about a week).

Reflection

U1s1, I was quite surprised that Figma can create interactive effects, but I also didn’t expect that I couldn’t display or preview the interactive effects. Then I started to write the code manually while watching the Week 10 Tutorial. In order not to trouble Mr. Shamsul Hamimi Ab. Rahman, I asked ChatGPT when I didn’t know what code to enter to achieve the effect I wanted to present. As a result, I asked for the whole 😑fucking😓 day.However, it was because of this that I realized 😦 that CSS code rules have no order restrictions.

Comments

Post a Comment

Popular posts from this blog