Web Design Forum: Redesign of Cafe Website - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Redesign of Cafe Website Rate Topic: -----

#1 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 14 September 2011 - 02:13 PM

Hi, I was asked to take over the design of a website as the current one got lost along the way..

This is their old site:-


The Current Site


And here is a mock-up of the homepage I have done:-


Posted Image

I'd be interested to hear your thoughts. The green had to be incorporated.

This post has been edited by oakleaves: 14 September 2011 - 02:14 PM

0

#2 User is offline   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,995
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 14 September 2011 - 02:22 PM

Where's the focus? Why is the menu link small, and at the bottom and below the fold? The menu has got to be the most critical part of this site yet it's not the focus here.

The layout is conventional, but it looks like a blog. It isn't really suitable for this kind of site.

It seems bizarre that you've got this green, plus pictures such as the slider, to work with yet instead the rest of the design uses bland greys.

Basically, this design suffers because the information you should be focussing on is secondary, and below the fold.

You've got this great image, yet you've cropped it (assuming) into a slider. Why not make the pictures the "background" of the site? Perhaps a grid that expands to the width/height of the browser.

Then have blank tiles with the critical information, such as contact details, name/logo and menu link. You could retain your green.

Look at these:

http://mariecatribs.com/
http://www.rubytuesday.com/
http://www.lamasamimatta.com/

Now look at yours.


Now look at these:

http://www.monkeynuts.biz/menu.html
http://www.giraffe.net/menus

Now back at yours.

See what I mean?

This post has been edited by brightonmike: 14 September 2011 - 02:27 PM

0

#3 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 14 September 2011 - 02:25 PM

Hi Mike, appreciate the feedback. I am thinking me and you have very different tastes when it comes to design and layout!
0

#4 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 14 September 2011 - 02:28 PM

Quote

Look at these:

...

Now back at yours.

See what I mean?


Yeah, kind of. Out of all of them the giraffe one is quite nice and funky. Bit too wacky for what I had in mind though.

The rest just look like stock wordpress theme affairs to me.

This post has been edited by oakleaves: 14 September 2011 - 02:38 PM

0

#5 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 14 September 2011 - 07:02 PM

Working URL of latest progress:-

LINK

This post has been edited by oakleaves: 14 September 2011 - 07:03 PM

0

#6 User is offline   MG1878 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 509
  • Joined: 07-April 08
  • Reputation: 7
  • Gender:Male
  • Location:The world of MiGa
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 14 September 2011 - 08:49 PM

View Postbrightonmike, on 14 September 2011 - 02:22 PM, said:

Where's the focus? Why is the menu link small, and at the bottom and below the fold? The menu has got to be the most critical part of this site yet it's not the focus here.

The layout is conventional, but it looks like a blog. It isn't really suitable for this kind of site.

It seems bizarre that you've got this green, plus pictures such as the slider, to work with yet instead the rest of the design uses bland greys.

Basically, this design suffers because the information you should be focussing on is secondary, and below the fold.

You've got this great image, yet you've cropped it (assuming) into a slider. Why not make the pictures the "background" of the site? Perhaps a grid that expands to the width/height of the browser.

Then have blank tiles with the critical information, such as contact details, name/logo and menu link. You could retain your green.

Look at these:

http://mariecatribs.com/
http://www.rubytuesday.com/
http://www.lamasamimatta.com/

Now look at yours.


Now look at these:

http://www.monkeynuts.biz/menu.html
http://www.giraffe.net/menus

Now back at yours.

See what I mean?


Ha ha, sounds like a certain aftershave advert

The design looks clean enough, will be interesting to see it as a whole
0

#7 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 14 September 2011 - 09:47 PM

View PostMG1878, on 14 September 2011 - 08:49 PM, said:


The design looks clean enough, will be interesting to see it as a whole


Cheers, will post link when it's done.

It's not something I'm getting a ton of money for, it's more a favour. Still want to do a decent job for them though.
0

#8 User is offline   Jason Dexter 

  • Expert
  • Group: Gold Membership
  • Posts: 711
  • Joined: 07-March 11
  • Reputation: 121
  • Gender:Male
  • Location:Nottingham
  • Experience:Web Guru
  • Area of Expertise:SEO

Posted 14 September 2011 - 10:26 PM

View Postoakleaves, on 14 September 2011 - 02:28 PM, said:

Yeah, kind of. Out of all of them the giraffe one is quite nice and funky. Bit too wacky for what I had in mind though.

The rest just look like stock wordpress theme affairs to me.



What the examples do and yours doesn't is to get the "feeling" of the place across. With a good cafe/restaurant website, the general theme and flavours come across with their website design. Is the place funky? You can tell by their website. Is it homely, with big hearty meals? You can tell by the website.

Look at the http://www.lamasamimatta.com/ website. As soon as it loads, it screams authentic, Italian cooking without me having to read anything on the actual page.

I know that it's a favor and obviously don';t want to spend too much time and focus too much energy into it but I just think you could do with adding more depth to it. Make it more interesting, change the location of the menu link. that's the CTA for this website and it does all the selling for you.

The main section of the website looks bland. Where you have the address, why not have a small Google map there? It will add some colour and adds a nice break away from the text for the user.

Good luck with it mate
1

#9 User is offline   Glowbridge 

  • Expert
  • PipPipPipPip
  • Group: Members
  • Posts: 616
  • Joined: 15-July 11
  • Reputation: 99
  • Gender:Male
  • Location:Scotland
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 14 September 2011 - 11:23 PM

I'm coming down right in the middle of this issue. Many of the examples given I think are too busy. I personally prefer less wood texture. I do agree that yours is too far the other way though. There is more site than cafe, if that makes sense?

I think the main problem is the opposite feelings between the warm image of the cafe and the cold green/white of the site. I'd make that image the biggest thing on the page. Reduce all the text underneath to absolute minimum. Get the website out the way, let the actual place sell itself, it's an excellent picture.
0

#10 User is offline   pandadoodle 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,654
  • Joined: 18-June 11
  • Reputation: 140
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 04:34 AM

shame you have not introduced that green curve all the way down under the image and brought another down by the footer at least there would be some kind of theme going with it. The green bit is always way to flat.

I prefer the navigation on the older site

Focus on coffee, sandwiches etc for a theme or even colours its a cafe, build the website around the current cafes theme
0

#11 User is offline   stijnhommes 

  • Dedicated Member
  • PipPip
  • Group: Members
  • Posts: 124
  • Joined: 22-August 11
  • Reputation: 7

Posted 15 September 2011 - 06:52 AM

Quote

Why is the menu link small, and at the bottom and below the fold? The menu has got to be the most critical part of this site yet it's not the focus here.
I think that focus is there. It's not only at the bottom, but included in the top menu bar.

I agree there needs to be a bit more personality and color in there. Does the cafe already have a logo of its own?
0

#12 User is offline   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,995
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 15 September 2011 - 08:49 AM

Sorry I couldn't be more positive Oak, I wasn't trying to totally dismiss your design :(

There are things you could work with, and I'm not saying you necessarily have to go as far as those I've linked - but I think I'd echo what Jason says about them.

I assume you've got more than one image to work with - so perhaps there's more you could do with the images to get across the feel. Remember, people will be sitting in this café, knowing what a place is like inside before you go I'd have thought to be a key part of the design.

Good luck, I'm sure you will nail this and I'm sorry if I was overly negative!
0

#13 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 08:52 AM

hmm, thanks for the feedback guys.

I think you all make a good case and I will try and do something with it.

I am reluctant to go too far with this due to the budget restraints but I can see a lot of what you all say makes sense. They are also good points for future reference if I get another client along the same lines.

The logo is what they have on their company vehicle so wanted to keep the branding consistent.

This post has been edited by oakleaves: 15 September 2011 - 08:57 AM

0

#14 User is offline   pandadoodle 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,654
  • Joined: 18-June 11
  • Reputation: 140
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 09:01 AM

Budget is no excuse for lack of design sorry! I put the same effort into a design for a £600 site as I would for a £6000 one...
0

#15 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 09:08 AM

View Postpandadoodle, on 15 September 2011 - 09:01 AM, said:

Budget is no excuse for lack of design sorry! I put the same effort into a design for a £600 site as I would for a £6000 one...


ok
0

#16 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 10:56 AM

Made a few changes, think this is as far as going to go with it on the homepage:-

2nd Version

Should have a warmer feel to the body background and main section.
0

#17 User is offline   Jason Dexter 

  • Expert
  • Group: Gold Membership
  • Posts: 711
  • Joined: 07-March 11
  • Reputation: 121
  • Gender:Male
  • Location:Nottingham
  • Experience:Web Guru
  • Area of Expertise:SEO

Posted 15 September 2011 - 01:08 PM

View Postoakleaves, on 15 September 2011 - 10:56 AM, said:

Made a few changes, think this is as far as going to go with it on the homepage:-

2nd Version

Should have a warmer feel to the body background and main section.



Now we're talking. I'm liking the feel of it and the coffee cup is a great addition.

I know you're done with the home page, but the orange bit has padding/border on both the left and right hand side. Maybe carry that through the rest of the page?

Because the green header has no edge, and I think a 2/3px border will make it sit much better

This post has been edited by Jason Dexter: 15 September 2011 - 01:10 PM

0

#18 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 01:09 PM

Cheers mate, really appreciate your feedback

edit - what about the banner image, border on that?

This post has been edited by oakleaves: 15 September 2011 - 01:12 PM

0

#19 User is offline   pandadoodle 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,654
  • Joined: 18-June 11
  • Reputation: 140
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 01:13 PM

Shame not to curve the footer off than to leave it square?

What about brining the green closer to the white and leaving the white divide as a pin stripe between the two colours
0

#20 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 01:15 PM

View Postpandadoodle, on 15 September 2011 - 01:13 PM, said:

Shame not to curve the footer off than to leave it square?

What about brining the green closer to the white and leaving the white divide as a pin stripe between the two colours


Not sure.
0

#21 User is offline   pandadoodle 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,654
  • Joined: 18-June 11
  • Reputation: 140
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 01:16 PM

Id move the header so its flush to the top of the browser and just bring it up so its not so flat looks a little odd compared to the footer with that shadow / outline behind it, just me though
0

#22 User is offline   Ben Evans 

  • Dedicated Member
  • PipPip
  • Group: Members
  • Posts: 144
  • Joined: 22-April 09
  • Reputation: 7
  • Gender:Male
  • Location:London
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 15 September 2011 - 01:23 PM

I like the freehand style of the footer, the green and yellow circles are quite nice but kind of makes it look like one of those cheap cafes with plastic table cloths, you know the ones.

I hope you are keeping the menu from the original site, I like that!
0

#23 User is offline   tomsel 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 80
  • Joined: 10-November 10
  • Reputation: 4
  • Gender:Male
  • Location:South Wales
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 15 September 2011 - 01:24 PM

Hi Oakleaves,

I quite like the second design :)

I haven't read through all the comments, but personally I would say get rid of the padding at the top of the container, so bring the header to the top of the page.

Also, I find the white text on the orange background quite tiring to read. It's quite straining to look at. Maybe a different shade of orange?

I realise that it just has sample content there right now, but as for the headings there's no real need to use images for them. Again, not sure if you intended to change that but though I'd mention it. It's just a simple font, not one that would have to be loaded in especially for the site and any positioning can be done purely using CSS so there's no need to bump the filesize up by using unnecessary images. :)

Other than that I quite like it.
0

#24 User is offline   oakleaves 

  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,395
  • Joined: 16-July 11
  • Reputation: 173
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 15 September 2011 - 01:26 PM

View PostBen Evans, on 15 September 2011 - 01:23 PM, said:

I hope you are keeping the menu from the original site, I like that!


Hi Ben, yes the menu will be carried over. Funnily enough that's the only part of the old site I actually liked!
0

#25 User is offline   Jason Dexter 

  • Expert
  • Group: Gold Membership
  • Posts: 711
  • Joined: 07-March 11
  • Reputation: 121
  • Gender:Male
  • Location:Nottingham
  • Experience:Web Guru
  • Area of Expertise:SEO

Posted 15 September 2011 - 01:28 PM

View Postoakleaves, on 15 September 2011 - 01:09 PM, said:

Cheers mate, really appreciate your feedback

edit - what about the banner image, border on that?


Something like that, I reckon.

Attached File(s)


0

#26 User is offline   brightonmike 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,995
  • Joined: 27-June 11
  • Reputation: 340
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 15 September 2011 - 01:36 PM

Personally, I'd get rid of the white, and have a larger image sit between the two colours. I'd then move the nav onto the green on the right hand side, with the nav curving to the same shape.
0

#27 User is offline   venchito14 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 10-December 11
  • Reputation: 0

Posted 10 December 2011 - 03:16 PM

The site is a little bit funky but its good. Well, I suggest to visit this website - http://www.paulkellydesign.com.au/ Take a look on how the contents and ideas are arranged. I hope that I help you a lot.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users