Interactive Design - Project 2
Atiqah Farzana Binti Syalleh Karimyee (0336740)
Interactive Design
Project 2
LECTURE NOTES
Week 8 (03/06/20)
INSTRUCTIONS
Module Information Booklet:
EXERCISE
Project 2 - Microsite
Using the layout we created for Project 1, it had to be made into a responsive website. Below are screenshots of what my website looked so far.
 |
| Fig. 1.1 GOLF - NEW section |
 |
| Fig. 1.2 GOLF - LOOKBOOKS section |
 |
| Fig. 1.3 GOLF - SHOP section |
 |
| Fig. 1.4 GOLF - ABOUT section |
 |
| Fig. 1.5 GOLF - OUR STORE section |
 |
| Fig. 1.6 GOLF - JOIN US section |
Feedback:
Mr. Shamsul said so far so good. There were just a few minor problems such as the hamburger menu should be smaller, as well as the navbar. I was having some problems with the placements of my sections, as everything would move out of place when I resized the screen. Mr. Shamsul said that I try to stick with margin and padding in the html (using p, with a number from 1-5) instead of having it in the css as it messes with the responsiveness of the website. Other than that, the 'ABOUT' seems a bit too big; he told me to use h3 instead of h2. As some text is difficult to read against the background, I could make the background darker. He said that my screen resolution is also too large which may cause images to load slowly or lag.
When Mr. Shamsul opened my website from his side, I could see that the images were loading very slowly. However, I think it's because of his wifi as my images and videos loaded instantly.
Week 10 (17/06/2020)
After making the minor changes, Mr. Shamsul and Mr. Lun checked our work again.
Once again, Mr. Shamsul commented on the screen resolution but I reassured him that the images load just fine on my side (as well as some of my friends'; wifi speed is also a factor)! He also told me to make the 'GOLF' logo fixed at the navbar as it's kind of weird how it's following while you scroll. I actually wanted the navbar to move along while scrolling, but it's fine. Lastly, he said that the titles were too big, but I wanted them to be big as I think it makes the text bold and loud, accompanied by the bright backgrounds. He said they were just too big and could be just a bit smaller and that would be fine.
This is the html and css code for the website.
Here's a video that shows the whole website just in case the link doesn't work anymore.
Fig. 1.7 Project 2 - GOLF Microsite Video
FEEDBACK
Week 8 (03/06/2020)
Specific feedback: So far so good. The hamburger menu should be smaller, as well as the navbar. I was having some problems with the placements of my sections, as everything would move out of place when I resized the screen. Mr. Shamsul said that I try to stick with margin and padding in the html (using p, with a number from 1-5) instead of having it in the css as it messes with the responsiveness of the website. Other than that, the 'ABOUT' seems a bit too big; he told me to use h3 instead of h2. As some text is difficult to read against the background, I could make the background darker. He said that my screen resolution is also too large which may cause images to load slowly or lag.
Week 9 (10/06/2020)
Specific feedback: No class today.
Week 10 (17/06/2020)
Specific feedback: No class today.
REFLECTION
Experience: Week 8 (03/06/2020); I was not really thinking forward on the whole responsiveness aspect of the website, so I ended up using a lot of css. This was a big problem that I had to find out the hard way. Week 9 (10/06/2020); I've already finished most of the website, however, having to slowly work backwards to redo my mistakes (getting rid of the css and only defining things in html) was very exhausting. Week 10 (17/06/2020); I remembered at the start I was a bit hesitant to chose GOLF as my website, but now I'm really glad I chose it because it is a brand I really like and I enjoyed looking at all of the bright colours and loud prints on the clothes.
Experience: Week 8 (03/06/2020); I was not really thinking forward on the whole responsiveness aspect of the website, so I ended up using a lot of css. This was a big problem that I had to find out the hard way. Week 9 (10/06/2020); I've already finished most of the website, however, having to slowly work backwards to redo my mistakes (getting rid of the css and only defining things in html) was very exhausting. Week 10 (17/06/2020); I remembered at the start I was a bit hesitant to chose GOLF as my website, but now I'm really glad I chose it because it is a brand I really like and I enjoyed looking at all of the bright colours and loud prints on the clothes.
Observation: Week 8 (03/06/2020); I think a lot of unnecessary problems and headaches could have been solved if I did everything using Bootstrap. Week 9 (10/06/2020); I think Bootstrap is still very unfamiliar and difficult to most of us, even though it's supposed to be something easy as the components are already given to us. Given a bit more time, maybe it might ease up. Week 10 (17/06/2020); As there was no class today, we were given more time to finish up our website :^)
Findings: Week 8 (03/06/2020); I don't think I fully understood that we were using Bootstrap for the responsiveness of the website, because I didn't even take that into consideration until I was like halfway done with the site. Week 9 (10/06/2020); Although I had a few fun moments while making the website, it was! absolutely! frustrating! at times to the point that I felt like erasing everything and starting a new html and css altogether :') Week 10 (17/06/2020); I'm very grateful to have an extra week to touch up our websites, however, at the same time I just want to get over with this project.
Comments
Post a Comment