I began this project by researching current restaurant websites and initially ones in London as I imagined them to be of a high standard. The first one I chose to analyse was The Club: a restaurant and bar, located just off of Regent Street. This is a well designed and simple flash site with good use of 'white space' and easy to use navigation. Within one click you can access the information you visited the site for, as there are no further links on any of the pages. Although this is a Flash site, the interaction and animation they're associated with, is kept to a minimum. This clearly was a concious decision and a good one as the imagery used keeps the users interest. I thought the site would benefit from combining images with the text as although the menu is displayed well, streams of text are easier to read with images alongside.
Next I started to explore the restaurants owned by celebrity chefs and as the majority of them have more than one, they act as micro-sites. Jamie Oliver's London based restaurant fifteen, follows a quite standard layout with its left-hand-side, vertical navigation and portrait orientation. The imagery used conveys the purpose of the site which is necessary with an obscure name like fifteen and gives the impression of trendy urban restaurant. It softens the quite formal feel portrayed by the layout, while at the same time appealing to a wide audience. Navigation is far more complex than The Club, however taking the amount of information into consideration, it is well structured and organised. Personally I would prefer to see this site with more concise information to reduce user scrolling, and although I like the pink strip in the third column aesthetically, it seems a little pointless on quite a few of the pages.
Owned by Antony Warrel Thompson, The Barnes Grill website is flash based. Aesthetically this website is very appealing, however it acts as a micro-site and so has links to his other restaurants. These are so big that they dominate over the links concerning The Barnes Grill and leave very little room for information. To overcome this problem the designer has created scroll bars. I'm not too keen on this idea as scrolling can be frustrating, especially when there is so much 'white space' round the edges.
When researching restaurants' websites, I turned my attention to local Nottingham restaurants. This led me to the Nottingham Restaurant Awards website, and from here I came across Tarn Thai. It had been nominated for Best Oriental Restaurant in 2007 and 2008, so when I visited their site, I was quite disappointed. They have clearly made this themselves, the layout is illogical and the content is long-winded and in some parts irrelevant.
Tarn Thai really stood out due to its lack of design. Despite this however, I was intrigued by it as it had been nominated two years in a row. With this in mind I went to visit the restaurant and found that it was stunning. This made me want to re-design the website to do the restaurant justice. From my visit I took a take away menu and a contact card. The only current branding they have is a logo and the use of gold and maroon.
(More critiques)
When in the design stages, I started by using the colours and logo from the contact card. I decided on positioning the main content to the left so it is the first thing your eyes are drawn to as typically our eyes read from left to right. I started by thinking about what information the user is most likely to use. I decided upon: address as for local customers, this would be enough to locate the restaurant, opening times and telephone number; so these will be displayed on all pages.
I then started to create different variations in Illustrator, altering colours, menu positions and adding images as I thought my initial design was basic. I also added a 'Do we deliver to you?' section where the user could enter their postcode to check whether they fall in the delivery zone. I didn't think i'd have time to make this function but it conveys an idea.
After some constructive criticism, I went back to using a similar palette to the contact card and ditched the white background. I feel this gives it more warm feel and its starting to feel a bit more 'Thai'. I've kept the layout very similar although I added a footer and replaced the generic picture of a Thai dish with one from their website.
At this stage I was quite happy with the design and took it into dreamweaver; but as time went on the imagery just didn't seem right, it lacked depth and wasn't at all dynamic.
I took my images back into Photoshop and added Emboss, Shadows and Gradient Overlay styling. I feel this give the site a more finished feel and reflects the quality that you should expect from a visit to Tarn Thai. Before the imagery was far too flat. I also moved the logo as I thought it detracted from the text when reading.
Although, I liked the colour of behind the logo I removed the box in the second column because I wasn't sure suited the rest of the page.
This is my final design for my Tarn Thai website. Looking at my previous screen shot I think I prefer the main text on the left hand side. This reduces the chance of the logo interfering in the text when displayed in different browsers and separates it from the text in the second column. I would also increase the size of the buttons as I don't think they are look in proportion with the rest of the page.
The menu's proved quite problematic as they are extremely extensive. Having 20 odd html pages or displaying them as PDF's were not really options for me. It was made more challenging as the dishes aren't in English, making the description more important. This brought about having a Thai Cuisine Dictionary. This way I could divide each menu into sections, each displaying on different pages but only list the names and prices of the dishes. By having relevant Thai words translated at the side the user could work out what the dishes meant. This would be quite quirky and also add interaction for the user.
I have wasted a lot of time though tweaking the layout and the background images to make them match. I should have produced my final design in the design stages and so reduced the time spent in dreamweaver. If I had more time I would've liked to get the postcode entry working and also to have used the font from their contact card.
Through this project my HTML and CSS skills have certainly improved. I have learnt how to use and style
tags and although it did take quite a long time, I also managed to achieve a drop-down list. I think my CSS sheet and use of headers is more logical although I have however used a lot of 'padding' and 'margin' options in the headings rather than containing the text in more
tags which I am now aware I shouldn't do as different browsers display these options differently.
I feel this website is of a higher quality than for the project last term and I am quite pleased with my final outcome. There are a lot of benefits from making mistakes, and by learning from mine my technical abilities are certainly improving.
Faceparty
