View the live project here. This website is made for restaurants. We named our restaurant "Tadig restaurant" which is a made-up Persian restaurant. It is designed to be responsive and accessible on a range of devices, making it easy to navigate for potential customers.
-
-
a. As a General customer, I want to look for testimonials to understand what their users think of them and see if they are trusted. I also want to locate their social media links to see their followings on social media to determine how trusted and known they are.
b. As a General customer, I want to find the best way to get in contact with the restaurant with any questions I may have.
c. As a General customer, I want to easily find the opening time and location of the restaurant.
d. As a General customer, I would like to see a menu of dishes and their description and ingredients.
e. As a General customer, I would like to reserve a table at a specific time and date in the restaurant.
f. As a General customer, I would like to write a review for the restaurant.
-
a. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the restaurant.
b. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
-
a. As a Returning Visitor, I want to find information about any discounts and loyalty benefits.
-
a. As a Frequent User, I would like to get some benefits or discounts from being a loyal customer.
b. As a Frequent User, I want to check to see if there are any new blog posts.
c. As a Frequent User, I want to sign up for the Newsletter so that I am emailed any major updates and/or changes to the website or restaurant.
-
-
-
-
The 5 main colours used are:
-
#2c89a5 for Home page which is close to light blue.
-
#638f21 for Menu page which is close to green.
-
#aa58aa for Reservation page which is in the scope of violet.
-
#bb6363 for Rate us page which is darker shades of red.
-
and #fafafa which is a shade of gray and cream.
-
-
- Siracha and Source Sans Pro font are the main fonts used throughout the whole website with Cursive and Sans Serif as the fallback font in a case for any reason the font isn't being imported into the site correctly.
-
-
Home page large, background hero carousel slide is designed to be striking and catch the user's attention. It also has a modern, energetic aesthetic.
-
In Order pages, all the dishes have their image next to them. The information about the dishes is all taken from Wikipedia except the ones mentioned below in the table. Source of all images used in this site is mentioned in the table below:
-
-
| Starter page | Main page | Desserst page | Drink page |
|---|---|---|---|
| Kashke bademjan | Baghali polo | Baklava | Doogh |
| Mirza ghasemi | Zereshk polo ba morgh Info : Persian Mama |
Faloodeh shirazi | Araghe bidmeshek Info : Diba |
| Do piaze alo | Khoreshte gheyme bademjan Info : Persian food tours |
Bastani sonnati | Gol gav zaboon Info : The persian pot |
| Salad olvie Info : Persian mama |
Khoreshte ghorme Sabzi | Noon khamei | Mojito |
| Noon panir sabzi Info : Clean plates |
Khoreshte fesenjoon ba morgh | Ranginak | Berry juice |
| More Drinks | |||
| Watermelon juice | Orange juice | Masala chai | Bloody mary |
| White russian | Espresso |
-
-
-
The website consist of 7 pages named: index(Home), order(Menu), order main, order dessert, order drinks, reservation and rate us. Each page has three sections.
-
The main content of the header and footer sections are the same in all the pages. The Header section consists of the navbar menu for navigation through the website and the footer section consists of Sign up / sign in button, contacts, and social media links.
-
-
-
Home page
This section consist of 3 part: Introduction and greeting note, carousel slide with food images and a jumbotron with some guide note.
-
Order pages
These sections consist of two food menu headers on top and the bottom of the section to make the navigation easier throughout the order pages. These pages also consist of the list of dishes with their image, description, and ingredients guide.
-
-
Reservation page
This section consists of a form for reservation.
-
Rate US page
This section consists of a form for review and feedback.
-
-
-
Wireframes are created using balsamiq.
-
Link to the wireframes is available under wireframes.
-
The design of the website is mainly the same for desktop and tablet however on mobile screen the content will be re-arranged. The user will move from top to bottom.
-
-
Interactive elements.
-
Informative item descriptions with their images.
-
Easy to use.
-
Colorful navbar menu is unique for each page which makes navigation easier.
-
A carousel slide for food images on the home page to attract the customers.
-
It's easy to find navbar, contacts, social media links, and sign in / sign up button in all the pages.
-
The top and bottom food menu buttons make it easier to navigate throughout the food menus.
-
Beautiful photos of the dishes and drinks attract the customers.
-
reserving seats throughout the website is easy.
-
writing a review throughout the website is easy.
-
In the future, I want to make an app for the restaurant.
-
I want to add a functional loyalty chart.
-
I want to make a logo for the restaurant.
-
Social media profiles of Tadig restaurant will be added in the future.
-
Use original photos with the same backgrounds.
-
Add a food delivery system.
-
- Bootstrap was used to assist with the responsiveness and styling of the website.
-
- Google fonts Roboto and Baloo Bhaina are used on all pages throughout the project.
-
- Fontawesome icons were used on all pages throughout the website to add icons for aesthetic and UX purposes.
-
-
Hover.css was used on the Social Media icons in the footer to add the float transition while being hovered over.
-
Hover effect hvr-sweep-to-bottom has been used in menu buttons.
-
Hover.css was used on the Sign in / Sign up button.
-
Hover.css was used on the Reservation and Rate us button.
-
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
-
- GitHub is used to store the project's code after being pushed from Git.
-
- Gitpod is used for testing the project.
-
- Balsamiq was used to create the wireframes during the design process.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
-
Further, the testing of the project has been carried out from the beginning using google developer tools.
-
User stories from the UX section that didn't need usage of javascript were tested to ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals.
-
General Customer Goals
i. As a General Customer, I want to easily understand the main purpose of the site and learn more about the restaurant.
-
a. Upon entering the site, users are greeted with a clean and easily readable welcome note and a colorful navigation bar that guides the user to the page of their choice. Underneath the navigation bar, there is a Hero carousel slide that makes the visitor interested and shows the main purpose of the site.
-
b. The user has two options, click the navigation bar buttons and go to the page of their choice or scroll down and locate the sign-up / sign-in, Contact us information and social media links.
ii. As a General Customer, I want to be able to easily navigate throughout the site to find content.
-
a. The site has been designed to be fluid and never to entrap the user. At the top of each page, there is a clean navigation bar, each link describes what the page they will end up at clearly.
-
b. At the bottom of all the order pages, there is another food menu navbar that redirects the visitor to the top of the page to ensure the user always has somewhere to go and doesn't feel trapped as they get to the bottom of the page.
-
c. On reservation and rate us page and the modal form of all pages, after a form response is submitted, the page refreshes and the user is brought to the top of the page where the navigation bar is.
iii. As a General Customer, I want to look for testimonials to understand what their users think of them and see if they are trusted. I also want to locate their social media links to see their following on social media to determine how trusted and known they are.
- a. The user can scroll to the bottom of any page on the site to locate social media links in the footer; although the links, for now, are connected to the home page of each media since our restaurant doesn't have functional social media pages yet.
iii. As a General Customer, I want to find the best way to get in contact with the restaurant with any questions I may have.
-
a. Contact information is located on the footer of all pages.
-
b. The footer contains links to the restaurant's Facebook, Pinterest, Instagram, Twitter, Whatsapp, and Telegram page. although these pages are not connected to the restaurant social media pages they open the home page of each corresponding media.
-
c. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.
-
-
Frequent User Goals
i. As a Frequent User, I want to sign up for the Newsletter so that I am emailed any major updates and/or changes to the website or restaurant.
-
a. At the bottom of every page, there is a footer which content is consistent throughout all pages.
-
b. To the left side of the footer, the user can see the Sign in / Sign up button. By clicking on that they can fill in the alternative "Subscribe to our Newsletter".
-
c. There is a "Submit" button under the input field which is located close to the field and can easily be distinguished.
-
-
The Website was tested on Google Chrome, Microsoft Edge, and Firefox browser.
-
The website was shown responsive on a variety of emulated devices such as Jio phone, iphone4, 5, SE, 6, 6 plus, 7, 7plus, 8, 8plus and X, Nokia Lumia 520 and N9, Moto G4, Galaxy S5, Blackberry Z30 and playbook, Galaxy note, Microsoft Lumia 950 and 550, LG Optimus L70, Nexus 4, 5, 6, 7 and 10, 6P, Pixel 2 and 2XL, iPad mini, iPad, Kindle Fire, iPad pro and laptop with MDPI, touch, and HiDPI.
-
A large amount of testing was done to ensure that all pages were linking correctly.
-
Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.
-
The sweep to bottom hover effect doesn't cover the buttons on some mobile phones.
-
Sometimes the browser doesn't open the site but after reloading the page it workes properly.
-
When on the menu page, click on the menu button was making an error. The href for the menu page was wrong. The href attribute was changed from href="starter.html" to href="order.html" to fix the problem.
-
In some emulated devices, the right to left scroll appears. In most of them after reloading the page, the scroll disappears and the whole page is shown again.
I used the code below from stack overflow to fix the problem:
html,
body {
max-width: 100%;
overflow-x: hidden;
}
- Clicking the submit button in modal wasn't resulting in closing the modal.
I used the code below from stack overflow to fix the problem:
<div class="modal-footer">
<button type="submit" class="btn btn-primary sign-in-btn" data-dismiss="modal">
- When slides were changing in the carousel, index-note was getting blurry.
I used the code below from stack overflow for the index-note to fix the problem:
.index-note{
-webkit-transform: translateZ(0px);
}
- List of menu dishes were getting blurry when hovering over them.
I used the code below from stack overflow tofix the problem.
ul li:hover {
opacity: 1;
}
Following steps has been taken to deploy Tadig restaurant website on GitHub pages;
-
Go to GitHub and click on repository behnazkhoshnood / tadig-restaurant
-
Click on Settings on the top right of the page
-
Scroll down to the GitHub pages section
-
Click on dropdown menu under Source section and select Master Branch as Source
-
The page will automatically refresh.
-
Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
Follow these steps to run the website locally on your machine;
-
Go to Github repository behnazkhoshnood / tadig-restaurant
-
Click on Clone or Download
-
Click on Download Zip
-
Unzip the downloaded zip file
-
Then run index.html file
-
It will open in a browser which is set as a default browser.
-
-
- Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
-
- For reservation time and validity. The code was modified to better fit my needs. Tutorial Found [Here]((https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)
-
Used for fixing the bugs mentioned in the Fixed bugs above.
-
to open my project in the browser I used this code:
python3 -m http.server
-
- All Images are from an external source which is mentioned in the table in the Imagery section and is used only for educational purposes.
-
A special thanks to my mentor, Rohit Sharma, for his valuable feedback during mentoring sessions.
-
Also, I like to thank all of the Code Institute support groups.
-
The design and layout of this website are based on the Rule of Thirds.
-
All the images on the website have an external source and have been used for only educational purposes.
-
Code Institute tutorials were very helpful throughout the whole project.
-
Bootstrap is also used in the project. (Bootstrap grid, Bootstrap Modal, and Bootstrap classes)