The 960 pixel wide 12-column grid is divided into portions that are 60 pixels wide. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

 

Left = Home Page

Middle = Menu

Right = About

Home Page / Index

The home page contains a simple navigation, slider, quotes, and other flexible modules of information which link to other pages on the website. At the very top of the page is a drop-down section where the user can make a reservation. The footer contains important and easy to find information about the restaurants location and hours.

 

 

The slider contains primarily images of entrees or other forms of advertisement that are simple, eye catching and quick to read. The dark grey area at the bottom containing the text slides up and down as the slide changes. 

 

 

When the user selects the "Make a Reservation" tab located in the upper right on every page of the website a form will drop down. The user can then fill out this form and make a reservation. There are input boxes for the date, time and number of guests that will be present.

 

A date picker will automatically drop down when the user selects the date box.

 

Once the user has filled out all of the form's mandatory information and has clicked the "Find a Table" button a pop-up will appear. It will either give you other options if the time you selected is not available or an option to Cancel or Confirm your party's time.

 

 

The menu page is very simple and straightforward with the menu categories on the left and descriptions in the middle. On the right is room for other modules of information that could range from advertisements to other important offers or special deals regarding the menu. The user can also navigate through the menu by clicking the next or previous categories at the bottom of the descriptions. Here you can see the previous category was "Salads" and the next will be "Sandwiches".

 

 

Throughout the website the user will see various comical illustrations involving the restaurants mascot; a pig. This explains the "flying pig" origins. The storyline is based upon a rather odd love story between a pig and a chicken whose love triumphed against all odds. Although strange and comical, this storyline is carried throughout the entire restaurants branding. The pig and chicken love story would be used in merchandize (shirts, hats, coloring books, etc), imagery inside the restaurant, social media and advertisements. Pigs & Wings is not just a restaurant but a culture of it's own and having this storyline reinforces the uniqueness of this establishment.