Interactive Design | Final Project : Creating a Single Page Website
25/06/2024 - 03/08/2024 / Week 10 - Week 15
Eng Yan Ling
Bachelor's Degree in Creative Media (Hons) - (Taylor's University)
Interactive Design | Final Project : Creating a Single Page Website
TABLE CONTENT
<span id="LIST"></span>
1. Instructions
3. Project
3.1 Progression
4. Quick Links
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1UkhqnbQ7tgLrsvt2G92NyKarGMaPcPJm/preview"
width="640" height="480" allow="autoplay"></iframe>
PROJECT REQUIREMENTS
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 topic of your 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 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.
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 topic of your 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 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.
PROJECT
1. Ideation/Research
Mood board & Ideation of Website :
Google Drive File Link - https://drive.google.com/file/d/1pwlLbIGs1XxQ9_ZiMZW571dwoPaA05jS/view?usp=drive_link
Figure 3.1 Final Project Proposal (Week 10, 25/06/2024)
Goal : For users to experience and learn the different genre in music as well as sharing music with other users.
Sketch
Figure 3.2 Final Project Sketch (Week 11, 02/07/2024)
Feedback
Overall layout is ok but the website needs to have a purpose as in what is this website for? Too much colors, try to reduce the color palette. Try adding some buttons in the genre for easier navigation.
2. Wireframe
Figure 3.3 Website Wireframe (Week 11, 02/07/2024)
Feedback
Encourage to add in a logo that aligns with the purpose of the website and images used must be clear and high resolution avoid blurry images.
Figure 3.4 Wireframe Revised (Week 12, 09/07/2024)
Section Breakdown
1. Navigation
2. Head - Introduction + CTA Button
3. About Page Section
4. My Top Picks Section (Top Songs Selection) + Why Music? (Explaining what is special about music)
5. Chosen Genre (+directory towards respective genre)
6. Lyrics section - Quote from a selected song
7. Genre 1 - Kpop
i) What is Kpop?
ii) Kpop Top Picks
iii) More About Kpop
iv) Back to Genre button (directory)
v) Who in Kpop? - chosen artists for the genre
8. Genre 2 - RnB
i) What is RnB?
ii) RnB Top Picks
iii) More About RnB
iv) Back to Genre button (directory)
v) Who in RnB? - chosen artists for the genre
9. Genre 3 - Pop
i) What is Pop?
ii) PopTop Picks
iii) More About Pop
iv) Back to Genre button (directory)
v) Who in Pop? - chosen artists for the genre
10. Genre 4 - Rock
i) What is Rock?
ii) Rock Top Picks
iii) More About Rock
iv) Back to Genre button (directory)
v) Who in Rock? - chosen artists for the genre
11. Curated playlist on Spotify - sharing music to the users to experience other potential genres
12. Image Divider
13. Form - Song Recommendation
14. Copyright Information 2023
15. Directory & Socials
3. Process
Spotify Playlist :
Figure 3.5 Playlist curated on Spotify (Week 12, 09/07/2024)
Logo & Name
Ideas :
Reflecting the quote in the head section --- "Music is Life itself."
1. Symphony of Souls
2. Sound of Life/SoundLife
3. Unmute your Life4. The Unmuted Symphony
5. Harmony Within
Choice of Name : Symphony of Life
Meaning : The music joint together with our daily lives that creates a symphony of liveliness with music.
Logo Ideation
The intention of reflecting "symphony" that joins with our lives, the letter "S" that connects together in 2 different colors. Both the "S" that joins together represents "symphony" and "soul" and a music note within both the letters representing music itself.
Sketch
Figure 3.6 Logo Sketch (Week 13, 16/07/2024)
Progress
Figure 3.8 Logo Structuring (Week 13, 16/07/2024)
Using Univers LT Std Extra Bold as base structure of the logo, the both end of the S is adjusted to connect each other. The overall idea is to join both the symphony and soul which creates an "8" or an "infinity" representing the infinite types of connection we have with music, hence the name "symphony of souls". The bottom bowl is shaped according to the music note.
Figure 3.9 Logo & Favicon Options (Week 13, 16/07/2024)
Figure 3.10 Final LOGO and FAVICON (Week 13, 16/07/2024)
Figure 3.11 Genre Section - html (left) & css (right) (Week 13, 16/07/2024)
Using display:flex to create multiple columns, each column <h3> directs to the genre's respective sections. Images within columns are resized to a 1:1 ratio before inserting. a:visited & a:hover style is applied to the <a href=>.
Figure 3.12 Genre - Who in xx? html (Week 13, 16/07/2024)
Each column applies the same html & css code as Figure 2.11, but an additional set is included to customize each genre and column colors. Each artist column links to their social media acc (mostly Instagram) for users to learn more about the artist.
List of Artist & Socials :
kpop
1. Straykids - @realstraykids
2. Tomorrow by Together - @txt_bighit
3. Aespa - @aespa_official
4. Seventeen - @saythename_17
rnb
5. Lany - @thisislany
6. Dvwn - @around_dvwn
7. Slchld - @slchld
8. Keshi - @keshi
pop
9. Why don't we - @whydontwemusic
10. Cigarettes after sex - @cigsaftersex
11. Bruno Mars - @brunomars
12. Ed Sheeran - @teddysphotos
rock
13. wave to earth - @wave_to_earth
14. Queen - https://queenonline.com/
15. RADWIMPS - @radwimps_jp
16. The Rose - @official_therose
Figure 3.13 Genre - Who in xx? css (Week 13, 16/07/2024)
a:visited & a:hover style applied to <a href=>.
Figure 3.14 Footer - html (left) & css (right) (Week 13, 16/07/2024)
Figure 3.15 Footer Icon Code - Directory & Socials (Week 13, 16/07/2024
Feedback
Mobile must be responsive, font throughout the website must be the same.
Figure 3.16 Media Queries - Desktop & Mobile (Week 14, 23/07/2024)
Left - Desktop, Right - Mobile.
Figure 3.17 Media Queries CSS Code (Week 14, 23/07/2024)
The widths and other elements are adjusted to fit both screen size. (Refer to CSS code for further adjustment.)
4. Final
HTML Code
Figure 3.18 Symphony of Souls HTML Code PDF (Week 14, 23/07/2024)
CSS Code
Figure 3.19 Symphony of Souls CSS Code PDF (Week 14, 23/07/2024)
FINAL SUBMISSION
FINAL WEBSITE LINK : https://symphonyofsouls.netlify.app/
QUICK LINKS
Comments
Post a Comment