Interactive Design / Final Project: A Single-Page Website

on

 25/05/24 - 03/08/24 Week 10 - Week 15

Sheren Princessa Davon / 0362134

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Project 2: Working Web Page

INSTRUCTIONS


For our final project, we are required to create a single page website of our favorite lifestyle topic.

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.

Visual References
I decided to choose Taylor Swift's album 'folklore' as I really like its aesthetics. I used the taylorswift website as inspiration as well. 


Fig 1.1 references

I eyedropped the colors from the album cover to use as my color palette and chose my fonts to match the overall album aesthetics. 


Fig 1.2 Moodboard

Fig 1.3 Mood Board PPT

Prototype
Afterwards, I went on Figma to create my prototype. I made sure to include 5 sections as required.

Fig 1.4 Prototype 1


Upon receiving feedback from Mr. Shamsul, I did some changes and finalized my prototype to begin the coding in Adobe Dreamweaver.

Fig 1.5 Prototype - PDF. Week 12 (10/07/24)

Fig 1.6 Prototype on Figma - Week 12 (10/07/24)

HTML
I wrote the HTML code beforehand. I utilized Bootstrap given by Mr. Shamsul and additional resources to guide my coding process.
Fig 1.7 Dreamweaver HTML screengrab

CSS Hover Effects
Then, I modified the CSS code to match my designs and create the overall layout more appealing. I added hover effects to the links, so that they change color when the user hovers over it.

Fig 1.8 CSS Code
Fig 1.9 Hover effect


For the gallery section in the Discography, I implemented another hover effect with the help of online resources. When the image is static, it appears in black and white but if the user hovers over it, color will appear along with the name of the album.
Fig 1.10 Images hover effect

For the rest of the images, I created a simple hover up effect.
Fig 1.11 Hover up effect

Icons
For the icons, I used the icons from https://fontawesome.com/ and linked it to the HTML file.

Fig 1.12 Icons


Responsive Design
I made sure my website is responsive across different devices by adding the @media tag
Fig 1.13 Responsiveness

Resources 
Below are the resources that I used to guide in the creation of my website:

Final Project: A Single-Page Website


Fig 1.14 Prototype - PDF. Week 12 (10/07/24)

Fig 1.15 HTML Code - Week 15 (03/08/24)

 
 CSS Code - Week 15 (03/08/24)

FEEDBACK

Week 11
  • add logo in the navigation bar
  • add some color, maybe in the headings/banners
  • add Spotify embed instead 
  • in the footer, make contents smaller

REFLECTION

This project was challenging to say the least, especially the coding process since this is one of my weakest point. However, with the knowledge shared during previous lectures and with help ftom additional online resources, I was able to gain a better understanding of HTML and CSS. I feel quite satisfied with my final product. This project has helped me improve my web creating knowledge, both prototype and layout design as well as the programming that goes behind. 

Comments

Post a Comment