Los Gochos Restaurant

Link to live page

Los Gochos Restaurant is a small family owned restaurant, owned and ran by a Venezuelan couple from Merida-Venezuela. We pride in having a fun and enjoyable environment when people can meet up for great food, a few drinks or just a place to relax with friend and enjoy Latino America music.

Image of website of various devices

User experience (UX)
- Deployment
  - Acknowledgements

User experience (UX)

User Goals

First time visitor Goals

As a first-time visitor, I want to feel welcome to the restaurant without having been there yet.
As a first-time visitor, I want to be able to find all basic information from the restaurant easily.
As a first-time visitor, I want to be able to find directions to the restaurant and clear contact info.
As a first-time visitor, I want to have access to an easy to understand menu that clearly shows any ingredients that can be allergens to some people.

Returning visitor Goals

As a returning visitor, I want to have various ways to contact the restaurant for any queries or booking I may have.
As a returning visitor, I want to find out about deals or new features they may have.
As a returning visitor, I want to be able to look at testimonials of previous customers to find out what their experience was.

Frequent user Goals

As a frequent user, I want to be able to sign up to a newsletter and receive regular updates and possible new additions to the menu.
As a frequent user, I want to be able to follow the restaurants special media and see what they are up to.
As a frequent user, I want to know about events taking place.
As a frequent user, I want to be able to sign up to some sort of rewards club

Site owner Goals

Provide information for the customer to not just feel safe about their visit, but also to know more about us, our menu and our country before they arrive to the restaurant.
Let customers know about Deals or specials there may be on.
Provide an easy way to comunicate to with restaurant staff.
Direct as manu people as possible to out social media pages, and promote our experience.
Increase the amount of viitors to the site.

Requirements and expectations

Requirements

The site must be easy to understand and navigate.
The information displayed must be easy to read and understand.
The pictures used will be just like the food served on the restaurant.

Expectations

We expect the links of social media and to the different sections of the site to work.
Once a message has been sent, we expect the correct information to be added to the form in orther to contact the customer back.
We expect the site to be visible in various screen sizes and adjust to them acordinly.

Design

Colour scheme

Typography

Architects Daughter was used for the main headings and titles.
Playfair Display was used for the body of the page.

Imagery

Standard restaurant images downloaded from the free library by rawpixel.com.
Venezuelan food related pictures downloaded from free trial subcription of Shutterstock.
One of the images, also from the free library was made by Karolina / Kaboompics for rawpixel.com.
Colour palette from Coolors.

Wireframes

Features

Existing Features

Navigationg bar

Responsive nab bar that adapts to the size of the screen. The main logo reduces in size to allow for the menu to stau in the same level, until it reaches the movile screen size. at this point it transforms in to a hamburger menu, that once it oped, the menu icon turns in to the closing button.
- Desktop
- Tablet
- Mobile
- Mobile opened

Fabicon

Personalized image of venezuelan iconic dish (the Arepa) as the image that shows on both the pabs on a web browser, o the icon diplayed on a smartphones shortcut link.

Welcome Section

First impresion of the user is a large, but yet simple picture of the iconic venezuelan dish, The Arepa, with a Welcome to a Latino Experience phrase.
- Desctop Welcome Screen
- Mobile Welcome Screen

Deals, Features and experiences

This section flexes to cover the screen and using the grid system from bootstrap, the feedback goes from side by side on a desktop view, to on top of eachother on the mobile vertion.
- Deals and experiences on desktop
- Deals and experiences on mobile

Gallery

Images on the gallery have a lower opacity, which goes back to normal when hovered over. Image will also increase in size whole on hover.The scaling of the image while on hover will only work on tables and larger devices, and not on mobile phones as images are already at a good size.
Gallery set up with Bootstraps Grid system to be responsive acros multiple devices.

Direct Messaging Form

A simple form was added to the site to cover any communications that customes may require from the restaurant, from questions, feedback, bookings and signing up to the newsletter.
- Messaging form on desktop
- Messaging form on Mobile

Contact

Other means of contact (phone number and an email address), which also included the addresand opening times.

Footer

With access to various social media platforms, the footer aims a simple yet clear pathway to the various social media accounts from the restaurant.
There is a hover effect on the images that makes them spin around.

Future Development / Ideas.

One of the ideas for the menu was a drop down section with cards, where the tip of the carts are like tabs and when selected, the menu drops down underneth.
As a reply to show your message has been succesfully sent, we thought a modal could be put in place only to confirm the message is sent and that someone would get back to them when posible type of message.

Technologies used

Languages

HTML
CSS

Tools, Frameworks, libraries and programs.

Testing

Although I like the stage where the site currently is, there are still several details that are not at 100% to how I imagine them to be.

This Website was tested on Safari, Brave, Google Chrome, Internet Explorer.
The website was viewed on a variety of devices such as Desktop, Laptop, iPad PRO, iPhone 12 & iPhone12 PRO.
A lot of testing was done to ensure that all of the links in the pages worked correctly.
Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Some of the issues I found during the testing once the code was placed on the validator:

I was getting errors as I was using section tags withiut headings, so this oes where chaged to a div tag.
On the menu section, I needed had initially added paragraphs and subheadings whithing the < li > items, I also had an < ul > nestes inside of another < ul >. this of course gave an error, so the < p > tags where moved inside of the < li >, and the nested < ul > was aded inside of a < li > whithing the main < ul >.
Due to various mejor changes thorught out the development of this site, i ended with many lines of code not being needed anymore, but causing all sorts of trouble with the formaing of the existing code. so I had to go throught every single line several times, to ensure everything was correct.
HTML Validator Results
CSS Validator Results

Known bugs

On the gallery, when the hover over function is active, I wasnt able to thet the active image being hovered to cover the othernes while on hover. I tried using z-idex values, but this wasnt succesfull. TO BE IMPROVED!
The navbar was mean to be on the top right hand courner, and despite the man attepmts usign flexbox to move it, I just could not get it to work and be where I wanted.

Deployment

Following writing the code then commiting and pushing to GitHub, this project was deployed using GitHub by the following steps.

Navigate to the repository on github and click 'Settings'.
Then select 'Pages' on the side navigation.
Select the 'None' dropdown, and then click 'master'.
Click on the 'Save' button.
Now the website is now live on https://jorgekleiss.github.io/los-gochos-restaurant/

If any changes are required, they can be done, commited and pushed to GitHub and the changes will be updated.

Acknowledgements

To my Mentor for his continuous support and extremely helpful feedback.
To the Tutor support at Code Institute for their invaluable support.
To my wife for her brilliant ideas and input in to this project.
To my friends and family for taking the time to explore the website and provide feedback about their experience.

code-institute-submissions / los-gochos-restaurant Goto Github PK