Interactive Design: Final Project
[Ng Jia Xuan / 0375273 ]
[Bachelor of Design (Honours) in Creative Media]
[ Interactive Design ]
[ Final Project ]
2. LECTURES
WEEK 9
Class activity
 |
| The HTML to make a drop down button |
 |
| The structure of the code to add hover effect |
WEEK 10
Class activity
 |
| Dividing a page into two box, by adjusting the width we can change the ratio of the whole page |
 |
| When doing the mobile view, change the display to block. Mobile have a smaller screen, dividing them into different blocks so we can separate the row/column and make them individal |
3. PROGRESS
Based on the prototype that we have done in the previous Project 2, we have to make a real and usable website with a total of five pages by using HTML & CSS.
In the previous task, I have designed three pages, which are Home, Menu, and Contact. So I started with these three pages first.
First, I planned and divided the information into different divs for every page. Then I started to type my information into HTML, and after putting in the info, I started to do the CSS.
 |
| Fig 3.1: HTML in Dreamweaver |
 |
| Fig 3.2: CSS in Dreamweaver |
 |
| Fig 3.3: Image and Background making in Illustrator |
 |
| Fig 3.4: Home Page |
 |
| Fig 3.5: Menu Page |
 |
| Fig 3.6: Contact Page |
At first, I got feedback from Mr. Shamsul when doing these three pages. Turns out, I relied too much on margin and padding instead of using other functions, which is not good. Because using margin and padding is too "manual", it will be hard for me in the mobile view version and the responsiveness will be bad. So I adjusted my CSS to make it more flexible.
 |
| Fig 3.7: Footer |
When making the footer, I met a challenge. I couldn't move my copyright info to align with the bottom (just like the fig that I put). My friend and I tried using different functions such as text-align, but it still didn’t work until we tried using align-items: flex-end. The mistake that I made was using baseline instead of flex-end.
Moving on to the new pages that I haven't design it before, which are About Us and Reservation.
 |
| Fig 3.8: Comparison of Home Page 2 (top) with About Us Page 1 (bottom) |
To remain consistent, I planned to use the same layout of Home Page 2 for About Us Page 1.
 |
| Fig 3.9: Comparison of Figma Design (top), Home Page 3 (middle) and Final About Us Page 2 (bottom) |
At first, I planned to use a similar layout from About Us Page 1 (separating information into left and right), but I felt it was repetitive, and this layout (info written on the left and fig on the right with image background and stripes at the side) is used in Home Page 3. I kind of want to differentiate the Landing Page from the other pages, so I changed it (just like the fig).
 | |
|
I am not satisfied with my design for the reservation page, so I did some research and exploration about it. In the end, I decided to use the image on the right as a reference for my reservation page.
 |
| Fig 3.11: Comparison of Feedback form with Reservation form |
 | |
|
Moving on to the mobile version.
 |
| Fig 3.13: Making mobile version in Dreamweaver |
 | |
|
 |
| Fig 3.15: Hamburger navigation bar in mobile view |
For the mobile version, it's better to have a hamburger icon to make the navigation clean and clear. At first, the hamburger was black, which was a problem for me as my navigation bar is dark red. To make it more visible, I decided to change it to a lighter color such as cream or white. However, the hamburger icon itself is an image, so I couldn’t adjust the color directly. After some research, I found a way to change it by using filter: invert. It will invert the icon from black to white.
 |
| Fig 3.16: The website in mobile view |
For the mobile view, Mr. Shamsul suggested I separate the info and image into two blocks so it's visible and not too small in mobile view. Most of my pages were separated into two blocks (top and bottom) and aligned to the center.
 |
| Fig 3.17: Footer in mobile view |
When adjusting the footer, I met a problem. My copyright is on the left side, causing it to appear at the top while the information stays at the bottom (normally, the left element will come first when it changes to two separate blocks), which is not the correct format for a footer. To fix it, my friend and I tried many attempts and figured out the solution, which is changing the flex-direction to column-reverse. Another problem came up when my copyright was not aligned to the center. My friend and I tried many attempts, including justify-content, text-align, and more. In the end, we figured out that we had to change align-items from flex-end to center.
4. FINAL OUTCOME
FINAL WEBSITE LINK: https://saltlakerestaurantbyngjiaxuan0375273.netlify.app/
A brief documenting report:
Throughout this whole process, I faced quite a lot of challenges, including code that didn’t work, display issues in mobile view, and more. In this document, I am going to write about my progress and the challenges I encountered.
First, I worked on the pages I made in Figma in Project 2, which are the homepage, menu page, and contact page. I divided the sections into different <div> and typed them in my HTML. After finishing the HTML, I started working on the CSS. By using previous class activities as a reference, I organized the content to align with my prototype design.
During this process, I encountered a problem: I relied too much on padding and margin, which is not ideal. Since padding and margin are fixed, building my website too “manually” instead of using more powerful CSS tools like flex-direction or justify-content made it harder to work on the mobile version and make the layout responsive. I basically had to redo my homepage. Luckily, I consulted with Mr. Shamsul and also asked my friend to check my CSS. Without their help, I might have had to redo everything, which would’ve made the mobile version even more difficult to manage. The reason I relied so much on padding and margin was because I thought they were powerful, and I didn’t fully understand CSS at that time. Thanks to Mr. Shamsul and my friend, they helped me a lot.
After fixing it, I moved on to the contact page. This page was smoother to work on. I had learned how to create a form in class before, and having that experience helped me speed up this part. However, I ran into a new issue with my footer. My footer is divided into two <div>, one for copyright and one for footer info. I wanted to align them and also make sure the copyright stayed at the bottom. My friends and I tried many ways, and eventually, we found the right solution which is align-items: flex-items.
Moving on to the menu page, it was more complicated because my menu is in a list, and in each row, I have two dishes including a title, description, and image. I received help from Mr. Shamsul to finish this page. After completing all the pages I designed in Project 2, I worked on the remaining two pages: the About Us page and the Reservation page.
These pages weren’t too hard because I had already made several pages. To keep the layout consistent, I used the menu page and contact page as references. I planned the content placement and wrote suitable descriptions. Lastly, I searched for images on Pexels to use as background and side images and edited them in Illustrator. After creating the prototypes, I started coding in Dreamweaver. Similar to before, I typed the HTML and created the CSS.
Another issue came up, I didn’t include the Bootstrap link in my HTML at first because I thought I wouldn’t use it. But my friend and Mr. Shamsul suggested I add it, as it would help improve responsiveness and make the hamburger icon for mobile view easier. After adding it, I realized Bootstrap has its own format, like fixed padding and margins, so I had to adjust these one by one. Fortunately, it didn’t take too much time. Once that was done, I continued working on my reservation form, but it didn’t go smoothly either. The textboxes weren’t aligned. Mr. Shamsul suggested I refer to the Bootstrap form layout, and that worked.
After finishing the full website, I moved on to the mobile version. At first, it looked too much like a desktop version. The text was too small, and the image and text should have been separated into two blocks. Luckily, I consulted many times, so I didn’t need to make big changes.
In the mobile version, I faced a few problems. First, in the footer, my copyright was on the left and the info on the right. When displayed in block format, the copyright moved to the top instead of the bottom. After a few attempts, my friends and I managed to solve this by using
flex-direction: column-reverse. But this caused another issue: no matter what justify-content or text alignment I used, it still appeared on the bottom right, but I wanted it centered. After more attempts, we found that changing align-items: flex-end to center fixed it. The second issue was with my menu. The title and description kept moving outside the frame, which wasn’t accurate. After some attempts, with my friend’s help, we figured out that I had too many <div>, so I had to be very specific with my code to make it work. The last issue I faced was that I couldn’t change the color of my hamburger icon. After doing some research, I found a suggested method which is using filter: invert. The icon was black at first, but after applying it, it turned white.After all adjustments, Mr. Shamsul helped me do a final check. He suggested either removing the border of the form or changing it to a lighter color, and mentioned that the menu title stood out too much, maybe I could remove its background color. In the end, I removed the border of the form. As for the menu title, I tried removing the background, but it became too invisible and blended in with the section header, so I did not change it.
Finally, I published the website on Netlify, and it was done. This whole process was very new to me. I kind of enjoyed it in the end but definitely not during the first class. The feeling of being overwhelmed eventually turned into enjoyment and satisfaction.
5. FEEDBACK
1. Don't rely padding & margin too much, other function is more powerful than you thought.
2. For the border of the form, get rid of it or change it to a lighter color.
3. The menu title stood out so much, maybe can consider removing the background.
6. REFLECTION
This project was surprisingly enjoyable haha. I really enjoyed doing it, even until the end. At first, I was scared of coding, and I didn’t even dare to imagine that I could finish a website using code. I’m new to HTML and CSS, so it felt overwhelming in the beginning. Thanks to Mr. Shamsul and my friends (especially Madeline, Anggia, and Ashley <3 love you guys TT), they guided me a lot and gave me so much valuable feedback and suggestions. Not gonna lie, I actually had two lecturers, Mr. Shamsul and Madeline. They helped me SO SO SO MUCH. At first, I was really confused with CSS, but through constant consultation and hands-on practice, I think I’ve gotten better. Overall, this is a project I was able to fully focus on and enjoy throughout the process. I’m really happy with the result, it’s satisfying and very enjoyable.
Comments
Post a Comment