Design Decisions
1. NavBar Structure
Nav Bar is changed to a more appealing design with fixed horizontal position to the top of the page. As for responsiveness for smaller screens, a hamburger menu is used to toggle the visibility of the nav items.
In smaller screens, navigation items appear in a vertical list from the left side of the screen when the hamburger icon is clicked.
2. Font and Color Theme
Font and color themes such as font color and background colors are selected to match the theme of the restaurant.
3. Header Banner Image
Header banner image is used to give more appealing look while providing a meaningful idea about the page content.
Some of the images are cropped to fit the header image size and selected a image position to focus on details of the image.
Image's brightness and opacity are adjusted to make a consistent look for all the pages, as some images are too bright and some are too dark.
Images are selected from the provided images of the restaurant interior and food items.
4. Main Content
Main content styles are changed with a consistent look and clear appearance of the texts with separation of sections and clear headings.
Clear background color and dark font color are used to make the text more readable.
5. Menu Tables
Menu table is changed to a more appealing design with a consistent look for all the menu pages.
Bold texts and background colors are added to the table headers to seperate the table sections with clear headings.
6. Take Away Form
Take away food order form is designed according to the requirements with customer informations and easy selection of food items with keeping consitent menu item table design with added quantity selection for each item.
Menu item sections are designed to appear dynamically in sections according to user selection using buttons for each category.
Selected items are displayed in a summary table with total price calculation for better user experience.
Previous order details are displayed to appear in the top of the page if there are any previous orders and with easy selection of the previous orders with date and time.
7. Booking Form
Bookings form page is also designed to follow consistent design with clear headings and sections.
Form is designed to be user friendly with clear labels and error messages with validations for each field to prevent invalid data submission.
Date selection is also validated prevent entering same dates while allowing at least one date requirement for the booking.
8. Gallery
Gallery page is also designed to follow consistent design with clear headings and sections.
Interior images of the restaurant are removed from the page as interior images are used in the header banner images.
Food images are displayed in list with responsiveness to adjust the image size as well as the list to fit the screen sizes.
9. Footer
Footer is added to all the pages with a consistent design with same background colors as navigation bar and a fixed position to the bottom of the page.
10. Responsiveness For Smaller Screens
All the pages are designed to be responsive for smaller screens with for better user experience.
Necessary size changes of images, white spaces and font sizes are made to fit the all screen sizes.
Horizontal scrollable menu for take away form are added to maintain fixed content size.
11. Images
Some of the provided images are lack in quality and some of them are unattractive for a appealing look.
Therefore, same images are used in the header and brightness, opacity and image height width are adjusted to make a consistent look as well as to hide the unattractive parts and the low qualitness of the images.
Code Link
Gitea Repository Link: https://gitea.usq.edu.au/U1164161/2025-T1-CSC8740-A4-Nipun-Maha-Mudiyanselage.git