INTERACTIVE DESIGN - FINAL PROJECT

On week 10, Mr. Shamsul teach us how to create the overall layout of a website. When creating a homepage, divide the layout into section. There will be header section, hero section, content section, column section and footer.

Fig 3.1.1: HTML code, Week 10 (26/06/2025).

Fig 3.1.2: HTML code, Week 10 (26/06/2025).

After making the whole layout, now we have to style it. We are using external CSS.

Fig 3.1.3: CSS code, Week 10 (26/06/2025).

After homepage is done, create a new HTML file for all the menu in navigation bar to make another page.

Final Outcome:

Fig 3.1.4: Final layout outcome, Week 10 (26/06/2025).

3.2 The Final Website

The website I will be redesign is https://hildegardsgermancuisine.net/. Previously in Project 2, I already made a prototype for website redesign proposal (Link to project 2). I will be doing five pages in total:

1. Homepage

2. About us

3. Menu

4. Location

5. Contact

We were required to create both the desktop and mobile versions of the website. I started by compiling all of my files into one folder. I also created a separate folder for images. I used a single CSS file for all the pages.

Fig 3.2.1: Final Website folder, Week 11 (30/06/2025).

Homepage

For the navigation bar, I used Bootstrap to include the hamburger icon. I have four menu items in the navbar and a homepage that can be accessed by clicking the logo.

Fig 3.2.2: Bootstrap used in HTML, Week 11 (01/07/2025).

Fig 3.2.3: CSS for hero section, Week 11 (01/07/2025).

Fig 3.2.3: The burger icon on navbar, Week 11 (01/07/2025).

There are some differences between my final website and the prototype. I changed the navigation bar from center to endbecause I couldn't get the exact center alignment I wanted from the prototype. By using 'space-between,' it became more aligned. After that I use hover to make the links responsive when it clicked.

Next, I created the hero section by adding the background image through the style.css file. I also included a menu button to make navigation easier for users who want to view the menu.

In the customer's favorite section on the homepage, I used a transition so it responds when clicked.

Fig 3.2.4: Transition for responsive elements, Week 11 (01/07/2025).

Lastly, for the footer, I also changed a few things compared to the prototype. The line I used above the footer was made thinner to keep it consistent with the other line elements on the website. I also removed the line break in footer.

Fig 3.2.5: Footer, Week 11 (01/07/2025).

The navigation bar and footer from the homepage later will be used for the rest of the page.

About page

I only have two sections on the About page. I used the same method for the background image in the hero section for the 'About Staff' section.

Fig 3.2.6: About staff, Week 11 (03/07/2025).

I actually struggled a bit because I wanted the content to be at the bottom of the page, not in the center, which caused some difficulty.

Menu page

The menu page was the hardest to make. The layout of the menu was quite challenging. At first, I used Bootstrap cards, but they didn’t allow me to achieve the flex display I wanted. So, I ended up doing it manually after several attempts, with some help from Mr. Shamsul as well.

Fig 3.2.7: Screenshot of the HTML code, Week 13 (14/07/2025).

Fig 3.2.8: Menu page, Week 13 (14/07/2025).

Location page

Since I didn’t create a prototype for the location page in Project 2, I designed one in Figma using Pretty Patty as my references.

Fig 3.2.9: Prototype in Figma, Week 13 (18/07/2025).

I also use transition code to make my location responsive when clicked.

Fig 3.2.10: Screenshot of the location page, Week 13 (18/07/2025).

Contact Page

Lastly for my contact page, I embed the maps from google maps to my coding.

Fig 3.2.11: Screenshot of the contact page coding, Week 13 (18/07/2025).

Fig 3.2.12: Screenshot of the contact page, Week 13 (18/07/2025).

After finishing the website, I started writing the code for the mobile responsive view.

Fig 3.2.13: Screenshot for the mobile responsive code, Week 13 (19/07/2025).

Fig 3.2.14: Mobile responsive view for navigation bar and footer, Week 13 (19/07/2025).

Upload to Netlify

Fig 3.2.15: Deploying the website using Netlify, Week 14 (21/07/2025).

4. Final Outcome

Final Website Link

https://hildergards-german-cuisine-bymadeline.netlify.app/

Brief report

This final assignment is a continuation of Project 2, which focused on a website redesign. I chose Hildegard's website because it has a poor layout and lacks visual consistency. To plan the redesign, I created a prototype in Figma to help me visualize how the website would look and function before building it later in HTML.

Developing a website was not easy. Although it was fun, I struggled a lot since it was my first time creating one. While developing the website from the prototype into a fully functional version, I changed a lot of things. For my navigation bar, I moved the menu from the center to the end because I couldn’t position it exactly in the center as I wanted. Mr. Shamsul also suggested placing it at the end to make it look neater. While creating my homepage, I added a signature line using the German flag colors to give design consistency to the website. However, this line actually made the website quite hard to build, as I struggled to place it exactly where I wanted. Eventually, I managed to fix it and got used to working with it. After finishing the navigation bar, I also had to create the footer to be used across all pages of the website. The footer was another struggle because I used Bootstrap for the navigation bar, which caused the logo sizing in the footer to look different. I also had to remove the line break in the middle of the footer because Mr. Shamsul said it was unnecessary. While creating the About Us page, I struggled with the staff section. I needed to position the text at the bottom instead of placing it in the center. After several tries, I managed to move it to the bottom. The hardest page out of all was the Menu page. It took me two weeks to complete. At first, I used cards on bootstrap, but it didn't work because I struggled with the margin. After several tries, I ended up making it manually without bootstrap with the help of Mr. Shamsul. Lastly, the Contact and Location page was actually quite easy to complete because it only had one section to design. Since there weren't many elements to arrange, this made the process smoother compared to the other pages, and I was able to finish it without much difficulty.

After completing the code for the desktop view, I continued working on the mobile view. This part was both easy and challenging at the same time. In general, I had to change most of the layout into a block format to suit smaller screens. While some sections adapted easily using responsive classes, others required manual adjustments to achieve the layout I wanted. I used the Inspect tool in the browser to preview how the website would look on different mobile devices. This helped me identify which parts needed to be adjusted. I then edited the CSS accordingly, including the spacing, alignment, and responsiveness. Although it took some trial and error, I eventually managed to make the mobile view.

After I finished, I noticed that making a design prototype for a website requires knowledge in HTML as well. This is because we need to consider HTML while making the prototype, such as the possibility of how I can build it in HTML, what code I can use, and so on. Although everything can be created, for me personally, since I don’t have a lot of knowledge in HTML, it is hard for me to create an advanced design for website. While making the prototype I didn’t include much HTML consideration in and only considered it for some pages, like the menu page. However, I managed to fix all of the problems from my prototype during the HTML development process.

Lastly, I moved into the testing phase to ensure everything on my website functioned properly across different devices. I used the Inspect tool to preview how the site would appear on various screen sizes, such as mobile phones, tablets, and desktops. I thoroughly tested all the interactive elements, including buttons, links, images, and fonts, to make sure they were working as intended and displayed correctly. After completing the testing and making final adjustments, I uploaded my website to Netlify and edited the URL name.

Overall, this module has helped me a lot in developing my skills, especially in web design and development. I never imagined that I would be able to create a fully functional website from scratch. This experience has been both challenging and fun. I’ve learned how to turn a design prototype into a real website using HTML and CSS, and I’ve also gained a better understanding of responsive design. Although I faced many struggles along the way, especially since it was my first time. Lastly, I would like to thank Mr. Shamsul for guiding me throughout the development process and helping me overcome all the problems I encountered.

Google drive Link

https://drive.google.com/file/d/1swQlufUPpk-RoGqmezakDiH_iAxJShX7/view?usp=sharing

5. Feedback

Week 11:

I needed to adjust a few things on my navigation bar. I need to removed the Home menu since the logo already redirects to the homepage. I also need to changed the position of the navigation bar, previously, it was centered in my prototype. To make it neater and more proportional, I moved it either to the right or to the left, aligned with the logo.

Week 12:

My homepage already looks good and just needs a few adjustments to make it neater. However, my menu page has some issues because the layout is a bit hard.

Week 13:

My Contact pages already looking good just need to finish one more page.

6. Reflection

Overall, this module has taught me a lot, it helping me learn about web design and development. Before taking this module, I never imagined that I would be capable of creating a fully functional website entirely from scratch. The entire process, from designing the prototype to coding it in HTML and CSS, has been both challenging and enjoyable. Through this project, I’ve learned how important to consider the technical aspects of coding while designing. I also gained knowledge about responsive design, learning how to make sure that a website looks good and functions properly on different screen sizes and devices. Even though I struggled a lot, especially since this was my first time developing a website, I was able to fix them through multiple trials. Lastly, I would like to sincerely thank Mr. Shamsul for his continuous guidance and support throughout the development process. His feedback helped me a lot to while developing my website.

Search This Blog

Madeline Ordelia Tjahjadi (0376920)