Design Production - Mutton Quad - Online Presence

____Twitter

___Website Development

I decided to mock up the website before I hopefully go on to create it myself. I kept the layout quite simple as it needed to be easy to navigate for customers to find out the necessary information. I split the website into 5 main pages which would be the Homepage, Story behind the company, The food / menu, The location and the contact details. These are all the important things I must include so I didn't really want to add anything extra that would be inappropriate and just bulk the website out.

I research into possible competitors websites to see what kind of things they included along a similar line...

___Landing Page

____Homepage

As you can see, the buttons will be at the top of the page and I have placed them in a grid like format that directly relates them to the printed matter. It was important for me to make that transition from print to digital easily. I almost wanted the website to look like the printed matter but in a digital form which is why I went for this.

I also included the two main logos. The logo for the restaurant and the 'stamped' seal of approval which will overlap the main white centre container of the website and move onto the background colour which will be the antique off-white.

he homepage will consist of mainly imagery and a small selection of text at the bottom. I plan to use javascript which could create a slideshow of different aspects within the restaraunt. The food, the stationary and the interiors and exteriors.

____Story

The story page will consist of a timeline that will be just simple laid out text and image which you can stroll down to move to more recent dates. I might also include links on this section which will jump to certain dates if this will make the navigation easier.

____Menu

The menu is simple enough. I will use the same design that I have used for the printed menu but translate this into digital. This will just sit under the navigation bar in a grid format.

____Location

I mocked up how the restaurant would look when searched for on google maps. I did this by simply finding the location, then editing over the top of it to enter the information of my fictional restaurant.

I placed this into the 'find' page of the website. If this was going live, I would insert an interactive map from googlemaps into the website to fit the border of the nag bar and container. There will be simple body copy underneath this which will explain in detail directions from the train, tube, car and walking.

____Contact

Again, simple enough page for the contact. Here, I have included and image of the letterhead which I may include in the final website. This gives an idea that the customer can write to the restaraunt for more traditional methods but there is also contact information underneath which includes the address, email, Twitter and Facebook links.

____Mock-Up in Context