I wanted to make the website responsive to the user whilst fitting into the correct genre of the establishment. Not just making a website that is interactive with numerous aspects of media, but a website that appealed to the target market and was fit for purpose.
I began by planning what slides I would produce. I did this by looking at Pit and Pendulum and seeing what content would be needed for a website. Having considered what content may be relevant I structured the site. I chose to make seven pages each containing something useful to the audience.
First Page: Index (Homepage)
I chose to keep the layout simple but bold, trying to capture the stereotype of the pub in the design. Sticking to the rustic/medieval theme found throughout the bar. This worked well and I managed to make a homepage that had elements of detail with a simple yet eye catching design. I made a floral side bar which I included on all the pages. It consisted of a rustic textured black frame design, similar to a pattern I saw in the pub. I made a simple header with the links in bold boxes, having the effect too stand out to the participant (visitor of the site). Also the links react to the mouse cursor with them highlighting when the cursor hovers over them. For the main header of each page I made a Typeface on photo shop saying the establishments name ‘Pit and Pendulum’. This not only tells them the name of the bar but introduces them to the website. I added a photo of the pub bordered in a red box to make it stand out from the textured background. This was to give the possible customer a glimpse of the pub. I also added a small introduction. The final thing I did was added narrow long boxes in a red colour. This was to break up the empty space in the layout. The container was centralised on a pale coloured background with brushes and filters to give the final image.
Second page: contact
On this page I stuck to the layout of a floral sidebar and a header with the links and typeface in. I then added the contact details and number in a rectangular side box. To the right of this I made a working Google map to give further directions and guidance to the establishment.
Third Page: Drink Menu
On the drink menu I included a couple of illustrations I had drawn using biro and watercolour paints. I also made a text box included the basic drinks sold at the establishment. This was design to give the user an insight into the drinks sold.
Forth Page: Events
This page was designed to tell customers of upcoming events and offers. At the time all the current events have passed so I left it as a text box TBA with the java script coding to enlarge the text if needed. As this box will included vital information of the current events, whilst at the moment it only stores a small sentence it is designed to store an events details and other important information. In large volumes of text it will need enlarging too read making the java script button useful.
Fifth Page: Gallery
I chose for this page to gather a range of photos from within the establishment, giving the participant an inside view of the bar. Showing people who have never been to the Pit and Pendulum what it is. I design it sticking to the layout that flows on every page whilst including an introductory sentence to the gallery its self. I made the gallery using java script to make them all black and white until the cursor hovers over which enabled them to go into colour. This worked really well and gave some sort of interaction to the audience.
Sixth Page: Special Drinks Menu
For the special drinks page i stuck to the cocktail theme for the establishment, including the seven deadly sins and seven heavenly virtues. I created specific typefaces to draw attention to the page making it stand out. This page consisted of a simple layout making it more users friendly.
Seventh Page: Food Menu
This was the final page I created to bring the website together. I used java script and j query to create a sliding accordion. This displayed four selections starter and snacks, mains, sides and salads and desserts. This gave the option for the participant to choose the section they look at by a click of the mouse.
Throughout the website I have strived to keep a simple layout with elements of detail in areas. I produced a controllable interface which helps the users complete their tasks successfully and efficiently.