Labels

Interactive Design - Final Project

 

15/11/2022 - 29/11/2022 (Week 12-Week 14)
Yong Kai Yi (0352826)
Interactive Design
Final Project 

INSTRUCTIONS

Drafts:

fig 00: drafts


fig 00: drafts

fig 00: drafts

After drafting the ideas out, I asked for my friend's and lecturer's feedback, just to keep it simple, no need to display all the flavors, it's better to just state them in the descriptions. 




1st about us page progressions:

 
fig 01: quick start

First, paste the bootstrap code and the font link. Then add a new CSS and link with this current HTML. 

fig 02: containers

I used the same method when I made the about us landing page, just a slight change in the image size.

fig 03: line spaces

Adding <br> to make the paragraph looks neater. 

fig 04: footer site map

After consulting Mr. Shamsul, I finally got to know where is the problem. Because I first thought every HTML file must be named index.html, I named the about us page an index.html as well, but when I wanted to link the HOME button to the landing page which was named index.html too, can't work. Then, I was told by Mr. Shamsul that only the main page needs to name index.html, hence I just changed the about us page file to about_us.html.

fig 05: read more button


2nd featured page progressions:

fig 06: card deck

After a few testing for the cards, I felt like the gallery might be more suitable for the menu pictures, as the descriptions are not lengthy, and tried to make a menu with more pictures and fewer texts. 

 
fig 07: Gallery

I decided to go for a gallery and add a hover text effect for the descriptions.

fig 08: Gallery

It turns out the image sizes need to be adjusted, hence I decide on a size and edit in PS manually. 

fig 09: image size

I keep trying different sizes, and personally preferred 1000px*1000px square size. Hence, I applied this size for all the images. 

 
fig 10: change bg color

I changed the bg color to dark brown which is also one of the colors from the palette. 


3rd cakes page progressions:

 
fig 11: container and gallery

The same method as the previous page, using the gallery, and 3 containers. 

 
fig 12: container and gallery outcome


4th tarts page progression:

fig 13: tarts col

For the tarts page, need to put 3 images in one row, hence I divided the col into 4 each.

 
fig 14: remove the padding

To balance the size of the gallery, I removed the original 15% padding for the container and remain the default container size, so the image will not look too small. 


5th desserts page progressions:

fig 15: desserts page

The desserts page will use one row 3 col, and <br> to divide the information clearly. 


6th sweet treat box page progressions:

fig 16: sweet treat box page

For the treat box, I only need one col for that row, but using col12 will be too big, and adding the padding might affect the header and button also, hence I use col8 and add <center> so it will align center.

Then, I wanted to showcase the inclusions of the box, hence I added another row with 4 columns, with a rounded frame, and added the hover zoom effect.

 
fig 17: sweet treat box page

When hovering over the pics, the images will scale 1.5 bigger. 

Useful tutorial links for this effect:


Link all the HTML on the landing page:

 
fig 18: index.html

I just insert hyperlinks for relevant images to respective HTML files. 

 
fig 19: link back to home

For the footer site map, I hyperlinked them to their respective parts on the landing page, at first I failed to do so as all the files I named them as index.html, after consulting Mr. Shamsul, he told me that only the main page need to name index.html, and the others can be their page name. After changing the name, and hyperlinking them again, it works!

 
fig 20: bug

After done all the stuff and moved on to the final checking, I try using my desktop to see the website and realized some issues that I didn't see before when I check using my laptop. The footer and bg image on the first page does not fit the whole website width. I tried to approach the lecturer, but luckily I was able to solve it by discussing it with my friends and keep attempting. 

fig 21: fixed bug

Basically, just need to add <div class="container-fluid"> for each <div class="row">. Because the rows are the ones that affect the overall width. 


Outcomes:

Problems: not aligned center, no nav bar, exceeding rows 

Problems: exceeding rows 



Demo video:





REFLECTIONS

Overall is quite fun, but quite time-consuming and BRAIN CELLS consuming. I struggled a lot at first, doing the gallery and hover thingy, the only way to do it is just to keep trying different codes, edit it and adjust it. Sometimes need to save different versions of codes I modified in notepad, just in case I can't do the same thing again. It's just, the time too tense, we only have a few weeks to done the whole thing, and after consulting Mr. Shamsul, he advised that keep the design simple. Personally love websites that contain more pictures than text, hence for this website I used short descriptions for the images, that's why in the end I chose a hover gallery but not cards. 





Labels:

Comments

Post a Comment

Popular Posts