2nd July - 3rd August 2024 (Week 11 - Week 15)
Sin Jun Ming 0364638
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Final Project - Single-Page Website
INSTRUCTIONS
Final Project - Single-Page Website
In this web design project, we will create a single-page website dedicated to our favorite topic. This project will help us develop our web design and development skills while allowing us to showcase our passion for the topic of our choice.
Project Requirements:
Artist Selection: Choose your favorite 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.
Content:
Your content should have at least 5 sections that explain the topic of interest. It should be 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 sections of the page.
Interactivity:
Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.
Design and Process
First thing first, I design the prototype of my webpage using Figma. The title of my webpage is Kendrick Lamar's fanpage.
Visual Reference: Tyler the creator (tilda.ws)
After finishing the prototype, I started to continue on to the progress in HTML and CSS. To make the homepage more appealing, I added JavaScript code to make the title appears when the homepage is detected on screen.
Fig 1.1 Homepage
At the music section, I also added JavaScript code to create a responsive album cover that rotates when the song is played.
Fig 1.3 Image Slider
The last section is my contact information, the large arrow icon on the right can be clicked to go back to the header.
Fig 1.4 Contact Info
For the mobile viewport, I adjusted the font size and image size to make the webpage adaptable to smaller screen, the whole layout is still the same as the desktop viewport.
Video 1.1 Webpage on mobile screen size
Fig 2.1 HTML code
Fig 2.2 CSS code
Fig 2.3 JavaScript code
REFLECTION
This project is super interesting as I got the opportunity to create a webpage for one of my favourite artists, Kendrick Lamar. Because of this project, I started to learn Javascript online to make the webpage more responsive and I have to say the result is very satisfying as that was exactly what I was looking for earlier. Other than that, Mr. Shamsul also guided me on using the cdn link from Bootstrap to create an image slider conveniently and it saves time from writing bunch of Javascript code, so I really appreciate it and this journey was enjoyable.
Comments
Post a Comment