INTERACTIVE DESIGN - FINAL PROJECT
29/10/20 - 03/12/20 (Week 10 - Week 15)
Chan Jing Wen (0340480)
Interactive Design
Final Project
LECTURE NOTES
INSTRUCTIONS
FINAL PROJECT
Week 10 (29/10/20)
Me and Kelly had a discussion on what we wanted for our websites. Below is both of our proposal for each other's website:
Week 11 (05/11/20)
After showing the proposal, Mr Shamsul wanted us to work on the actual interface of the webpages.
Kelly shared a google file with all of her photos.
 |
Figure 1.1 Screenshot of Google Drive 01
|
 |
Figure 1.2 Screenshot of Google Drive 02
|
The typeface I used for the webpage was Barlow. I also created a logo for Kelly's blog using the typeface selected.
 |
Figure 1.3 Typeface selected: Barlow
|
 |
Figure 1.4 Kelly's blog logo
|
Below are the design of the webpages:
 |
Figure 1.5 Home Page Design
|
 |
Figure 1.6 About Page Design
|
 |
Figure 1.7 Japan Page Design
|
 |
Figure 1.8 Korea Page Design
|
 |
Figure 1.9 Taiwan Page Design
|
Week 12 (12/11/20)
After receiving feedback, I started coding the website.
I changed some of the photos as they were quite repetitive for some spreads. Below are the photos that were newly added:
 |
Figure 2.1 Japan Top 3 place #01
|
 |
Figure 2.2 Japan Top 3 place #03
|
 |
Figure 2.3 Taiwan Top 3 place #01
|
 |
Figure 2.4 Taiwan Top 3 places #02
|
 |
Figure 2.5 Taiwan Top 3 places #03
|
Figure 2.6 Home Page Attempt 01
Week 14 (25/11/20)
After consulting Mr Shamsul and Mr Lun, I found some solutions to the problems I faced while coding the website.
For the first problem, I noticed that my background for the section below couldn't stretch to the side completely. Mr Shamsul suggested that I change the background fit to cover instead of contain.
 |
Figure 3.2 Layout before edit
|
 |
Figure 3.3 Corrected code for background fit
|
 |
Figure 3.4 Layout after edit
|
Another thing was that my row's margin seems to be sticking out of the actual margin for the webpage. For this, initially I wasn't sure which element's margin was causing the problem so I included a red border to see where the problem was from. Eventually I found out that it was because of the row, but there was no specific class or id for that code (I just use the one from bootstrap) so I wrote a new id to override the presets.
 |
Figure 3.5 Figuring out where's the problem
|
 |
Figure 3.6 Introducing a new code
|
I also noticed that the "follow my journey" button wasn't sticking to the side in the previous website so I changed the margin to follow the rest of the text.
 |
Figure 3.7 Changed margin settings
|
And finally, the website links under Top 3 countries weren't accessible for some reason. I later noticed that it was because I labeled the website wrongly.
 |
Figure 3.8 Page not found due to the wrongly named links
|
 |
Figure 3.9 Corrected website links for Korea and Taiwan
|
Figure 4.1 Home Page Final Submission
Figure 4.2 About Page Final Submission
FEEDBACK
Week 11 (05/10/20)
The proposal seems fine, try working on the actual design of the webpage.
Week 12 (12/11/20)
Font colour for the titles under top 3 countries don't have enough contrast. Spacing between sections should be the same. Try to make the footer consistent in all pages. For this, maybe include a contact form instead of having a huge footer for the Home page and reuse the footer used in the other pages. The footer can still be a little bigger. Can try making the navigation slightly bigger. Overall layout is fine but texts are quite small.
Week 14 (25/11/20)
Try to change the background fit to cover instead of contain (for the top 3 country section under home page). The images look off centered because of the shadow, but it's actually not off centered.
Comments
Post a Comment