Interactive Design: Final Project

23/10/23-27/11/23 // W9-W14
Mercy Chong HuiZiun // 0360929

Interactive Design // BDCM
Final Project: Single webpage of your favorite artist



Instructions

Fig 1.0 Module Information Booklet

Lectures
Refer to Exercises
[Task To-Do]
> Choose your favorite artist (musician, painter,celebrity, etc)

Contents
  • Header -> Artist name + Tagline
  • Introduction: Artist background + Why you admire them
  • Biography -> Artist's life + career
  • Gallery -> images/videos related to their work
  • Contact Information -> social media profiles
Design Elements
  • Color scheme that reflects the artist style
  • A visually appealing layout with a balanced use of text, images + multimedia
  • Responsive design that adapts to any screen sizes (mobile-friendly)
  • Navigation
  • Interactivity -> hover effects, image sliders etc
Fig 2.1 W10-14 final assignment plans


Ideation sketches
Sir has instructed us to firstly do around 5 sketches for our prototype design so that we will have a clearer idea of how we will present our work.
Fig 2.2 Sketch #1 (Chosen)

> Sir's feedback (sketch #1): should add headings in each of the sections to differentiate which is which.

Fig 2.3 Sketch #2

Fig 2.4 Sketch 3#

Fig 2.5 Sketch #4

After choosing sketch #1 as my chosen draft, I then proceeded to work on the prototype in Figma.

Prototype process
Software used: Figma

I began following my chosen sketch draft and started creating the shapes for the overall webpage look.
Fig 3.1 Prototype draft (before color)
Fig 3.2 Web color palette

 
Fig 3.3 Prototype draft 
Planning to make my background of the website become gradient (as shown below).Also added some images and icons to visualize how it'll look like in an actual website.

Fig 3.4 Overview of prototype draft (After colors + Img)

For the Albums section, I'm thinking of trying out a hover effect or image card slider effect with the left and right buttons to make the website more interactive but we'll see if I'm able to achieve this effect through the coding process later.
 
 
Coding process (HTML,CSS,JavaScript)
Now here comes the tedious part, coding :p but also it is the most crucial part for the whole website to be created and able to work like those ready-made websites you've seen online.
 
1. JavaScript process
(Image slider effect)
This part will be on the gallery section which is around the middle part of my webpage. I wanted to try to make the album images with a sliding effect and apply the left and right clickable buttons. 
 
One issue I had faced before even starting is that I couldn't find a tutorial that is what I want and at first I don't know what was the name of this effect. I went to ask my friend that has an expertise in the Computer Science field and he kind of guided me on how Javascript works and how to imply it to my coding. Basically Javascript acts as like a controller for CSS for better interaction elements.
Fig 3.5 Split view of coding process

> Split view: To get a better live view whether the code works

The javascript code:
Fig 3.6 Javascript code

2. Spotify embed playlist
 
Found out on Spotify that they have an "embed album" option so I decided to try it out by copying this code below and paste it in my coding.
Fig 3.7 Laufey's EP code
Fig 3.8 pasted the code in Dreamweaver

What it looks like on the webpage:
Fig 3.9 embed album shown on webpage


2.5(?) Card slider hover effect on the embed albums 
(scrapped attempt)
 
Initially, i wanted to try out a card slider hover effect where it shows more of her singles/EPs just by swiping and also has drop shadow when hovered on the images. 
 
I searched for the code online and found a card hover effect, tried to alter it with my own coding but there's errors all around and the effect doesn't really work in the webpage so i decided to scrap this effect and move on to the next one.
Fig 3.10 errors in this coding



3. Image placement 
For these six ep singles from the artist, I wanted to move the placements to the right so it aligns with the embed album from the left. Had a few attempts just to make it to the right (using display: flex, align: right..) so I have spent quite some time here.

Fig 3.11 Image placement struggles

4. Slight Card/Image hover effect
Wanted to give my images some interactive effects so i went and searched a simple but also interesting hover effect and tried to imply them on my webpage by putting them into my coding and do alterations first. 
 
Fig 3.12 Hover effect coding 
 
The results:
When the cursor hovered over a specific image the image will show its full opacity (as shown in 3rd image in the right)

Also adjusted the outline opacity so the difference can be seen more obviously when hovered.

Fig 3.13 image hover effect result


5. Adding footer icons
Reaching the end of the webpage, a footer is essential. I first add a <div img src code and added the icon pngs for them to show on on screen.

- Need to adjust the sizing of the icons.

Before:
 Fig 3.14 Footer icons
 
 After:
Fig 3.15 Overall look of footer
 
6. Google Fonts  
I have used this font i found on Google Fonts which is "Young Serif" on my paragraphs <p>. 
(For the headers/headings, I used a font outside from Google Font called "Astone Nouvea")
Fig 3.16 Google Fonts
 
Fig 3.17 Applying font codes
 
 
7. Favicon logo 
Lecturer has gave us a tutorial on how to do this logo and put them into our website on Google Classroom. 
 
The steps:
  • Creating a simple shape/icon in AI first
  • Export as .PNG, make sure to tick the 'use artboard' section
  • Save as "Favicon.png"
  • Add this code:
     
    Fig 3.18 Favicon code

Results: 
Made a star/sparkle star shape similar to Laufey's actual website icon.

Fig 3.19 Website icon

 
Using the "Inspect" option in browser and check further amendments to improve on the webpage.
  Fig 3.20 Inspect tab from the webpage
 
Went to Netlify and uploaded the files + host the website and this webpage is finally done and dusted :)

Final outcome  
Website link: https://finalidwebpagee.netlify.app/
 
I'm quite satisfied with the overall design and layout of my webpage. However my only comment is that the mobile screen display was hard to adjust so it would probably looked messy when it is viewed on phone..
 
  Reflections 
 
Indeed, this final assignment of Interactive design definitely took the most time out of all the other exercises and previous projects. Besides the time, it was also quite challenging as I have involved JavaScript into the coding for my website to look more interactive with the effects I have applied and so I have to kind of learn online on what a JavaScript is and its function etc to get the hang of it and apply them on my website. Compared to my previous projects, I did not put 100% of my effort in finishing them as I did not have sufficient time to produce good work but for this final task, I'm glad that I have finished it on time and came out with something I actually am satisfied with so far. 
Throughout this task, there were of course a lot of trials and errors in the process of coding the webpage and times where I doubted my work whether or not it will turn out good or at least meeting my lecturer's expectations. However, I'm grateful on the advices/tips my lecturer gave, online tutorials and also the help from my friends and classmates in order for me to be able to finish my work. I have also learned a lot on how certain attributes work in coding since I used to be confused a lot but this final task has made me grew my understanding better and also having a clear direction in pursuing my future specialization which is UI/UX.





Email Post

Popular Posts