I'm new to these parts, but figured it'd be a good spot to post my new web design. It is going to be a template available on ThemeForest, but before i submit it, i wanted some feedback.
Here's a little background...
This template is designed for a modern, sophisticated restaurant, one that wants an online presence that reflects the restaurant well. It's designed with a clean and elegant look using a color scheme of red, gray, and white.
The back-end is also designed for a non-coder because it uses simple to edit XML files as menus which then dynamically update the menu page and the featured item on the homepage. PHP and jQuery to create the menu and image gallery type thing on the home page.
Please be completely honest about anything, design, code, whatever. I know that it may not validate, that, and the contact page doesn't send an email because my free host im using temporarily doesn't allow contact forms to send an email. So those are two known issues, and im just so sick of staring at this thing that I could use some fresh perspective.
First off Zbridboy is..... its too big for my screen.
I as a person looking for thing on the net hate scrolling accross, I don't mind going up and down, but not accross.
I have a 17" monitor set to 1024x768, you have just killed off a lot of potential readers as far as I can tell.
I find the grey on the lighter red is a bit difficult to read, I would change the text of that grey.
Menu & Contact page is so far a good design.
I am not a fan of the links around the main images not in the same line, I think you are wasting space to be honest. and I would move up the main name closer to the top of the browser screen. why waste so much space on the site, you can make it tighter and still keep it clean while keeping it elegant.
also, I like the image of where are we as the blue breaks up the redness, but, I would make your address a link to maybe a google map, just to let people maybe find directions.
Move your bottom right dark div over to the left slightly and take it off the edge, try and keep the left and right similar. Why put a price on there? not unless the client wants it, but you don't have to, if you do keep it I personally don't like the ~ symbol
also the footer I would put the all rights reserved hten a break line for the themes, and keep that all centred.
other than me slightly killing it, I do really like it, but these are the things I would change.
Personally, I love empty space in websites, but used intelligently. So, in terms of your design, I personally wouldn't have so much white space above the logo... Reason is because on my monitor, which is 1280x800, I have to scroll down to see what I want to see. Again, some others might not mind, or be using a very very high resolution, but think of your average user. Your average viewer isn't going to have a huge resolution. Of course it's difficult to have everything on the page without scrolling, but when it's scarce information, you shouldn't have to scroll too much... It's not a blog.
Just my opinion. =)
And now, I've read the other post, so I must say I agree with the 2nd poster.
i agree with everything written above. Also, i notice you are using the non-compressed version of Jquery. You could save quite a few kB by using the min or pack version (http://code.google.com/p/jqueryjs/). Also make the logo image a link back to the hompage,and decrease the letter spacing in the footer.
Hmm unless the page has changed, im look at the site on my laptop which has a 13.3 inch screen and a 1280x800 pixel resolution, and there is no horizontal scrolling.
but i have to agree about the white space above the logo and the contrast of the main text, maybe change the grey to black and i would maybe make the title and image slighly smaller to create a better balance with the main content text.
thaks guys. im working on some improvements now, so i'll update the link when it's ready.
@ScottMacD - i did fix it, I meant to have the width set at 960px, but for some reason it was set to 1000px, so I changed and updated that. glad to see it solved the horizontal scrolling issue. ;)
Okay, I have not read any of the above posts, i just dont have time. here it goes..
1. The very first thing you should always do, is construct nice clean meaningful XHTML. Then get it to validate. All this should be done before you style anything. This site doesnt validate. The errors are minor excempt one. You have two wrapper ID's. You can only have one ID name. The others were alt text for images.
2. You need more meta data
3. in my opinion, you are using too many divs. You dont need divs for eveything. Divs are used to group common elements.
4. I love white space. but you have too much above header.
5. I'm confused. You have two menus on the home page? The first is your main nav, the second just swapped out images and doesnt go anywhere? If this is true, you have much more focus on meaningless image swap nav. It outshines the main naigation. Maybe these usless nav item should be something else besides text. Maybe small square images that line up bottom right of the image. This way the user is not so confused by whats my navigation.
6. I love the layout with whitespace!
7. I love the color scheme! But, red is sooo bright. It actually gave me a headache looking at the bottom red box. Then you have white and light grey text ontop of bright red surrounded with white. OUCH!! too much contrast. I would use red not for box backgrounds, but more for accenting things, borders, soft gradients and type.
8. You should do something about the form. It looks washed away. Its hard to notice it.
9. I think you should see how things look with red text and accents, rather then background colors.
@zbirdboy I see you are setting your main wrapper to 960px, that is why I am getting scrollbar, although now hidden, it is needed for me to read the footer properly, although I think the footer should be better designed, sorry
I would make your footer have a red background all the way accross, but keep the other DIVs (with green) smaller so that they all are justified with the main image at the top, like you have the main text below the main logo image (does that make sense?)
for example: your appetizers div should be exactly the justified with the main site, then the other two below that justified with that one, this will keep it looking better & consistant.
also in your footer, break up the all rights reserved and themes by forest to 2 lines, it kind of reads as the same line cause one is like a legal for your site the other is just hey here is themes. make them distinguished.
The green is a fantastic touch and in keeping with the food theme, hey it might not work, but why not use a cursive font to describe the food, like in a decent restaurant??? try it see how it looks and reads, if it don't work out it is easy to change.
another thing about the footer, I feel that the headers and the actual blocked area have all got the same distance between them, I would add another line to break up the centralised look, I mean between the bottom of appetisers, headings for where we are and the div block of the where we are (Thats just me though) http://www.honeycomb-web.co.uk/images/zbirdboy2.jpg
@ikthius - thanks so much for your awesome critique and great input. i'm going to try this again.
thanks to everyone for the help. the more i look at this, the more i think it could be soooo much better. im going to take some time, think it through, and start over from the design perspective.
this has been a great learning experience, and ill be sure to come back and post my new version.
@ikthius - thanks so much for your awesome critique and great input. i'm going to try this again.
thanks to everyone for the help. the more i look at this, the more i think it could be soooo much better. im going to take some time, think it through, and start over from the design perspective.
this has been a great learning experience, and ill be sure to come back and post my new version.
I do like how you are taking my comments on the chin and active;y seeing what I mean, some people just say well I like it so tough, but you are really trying to get the best out of this, well done you.
I know everyone looks at design differently, but with the fixes of width, centralisation and maybe the whitespace issue (sorry but this one is just not me) I think you will have a good we site there.
I'm new to these parts, but figured it'd be a good spot to post my new web design. It is going to be a template available on ThemeForest, but before i submit it, i wanted some feedback.
Here's a little background...
This template is designed for a modern, sophisticated restaurant, one that wants an online presence that reflects the restaurant well. It's designed with a clean and elegant look using a color scheme of red, gray, and white.
The back-end is also designed for a non-coder because it uses simple to edit XML files as menus which then dynamically update the menu page and the featured item on the homepage. PHP and jQuery to create the menu and image gallery type thing on the home page.
Please be completely honest about anything, design, code, whatever. I know that it may not validate, that, and the contact page doesn't send an email because my free host im using temporarily doesn't allow contact forms to send an email. So those are two known issues, and im just so sick of staring at this thing that I could use some fresh perspective.
http://chivalrie2.vndv.com/index.php
Thanks in advance,
Zach
I as a person looking for thing on the net hate scrolling accross, I don't mind going up and down, but not accross.
I have a 17" monitor set to 1024x768, you have just killed off a lot of potential readers as far as I can tell.
I find the grey on the lighter red is a bit difficult to read, I would change the text of that grey.
Menu & Contact page is so far a good design.
I am not a fan of the links around the main images not in the same line, I think you are wasting space to be honest. and I would move up the main name closer to the top of the browser screen.
why waste so much space on the site, you can make it tighter and still keep it clean while keeping it elegant.
also, I like the image of where are we as the blue breaks up the redness, but, I would make your address a link to maybe a google map, just to let people maybe find directions.
Move your bottom right dark div over to the left slightly and take it off the edge, try and keep the left and right similar. Why put a price on there? not unless the client wants it, but you don't have to, if you do keep it I personally don't like the ~ symbol
also the footer I would put the all rights reserved hten a break line for the themes, and keep that all centred.
other than me slightly killing it, I do really like it, but these are the things I would change.
But its a good one
Personally, I love empty space in websites, but used intelligently. So, in terms of your design, I personally wouldn't have so much white space above the logo... Reason is because on my monitor, which is 1280x800, I have to scroll down to see what I want to see. Again, some others might not mind, or be using a very very high resolution, but think of your average user. Your average viewer isn't going to have a huge resolution. Of course it's difficult to have everything on the page without scrolling, but when it's scarce information, you shouldn't have to scroll too much... It's not a blog.
Just my opinion. =)
And now, I've read the other post, so I must say I agree with the 2nd poster.
but i have to agree about the white space above the logo and the contrast of the main text, maybe change the grey to black and i would maybe make the title and image slighly smaller to create a better balance with the main content text.
Just a personal opinion
Well done
@ScottMacD - i did fix it, I meant to have the width set at 960px, but for some reason it was set to 1000px, so I changed and updated that. glad to see it solved the horizontal scrolling issue. ;)
new changes. start the critiques. ;) http://zlbstudios.zxq.net/index.php
also the grey on light red still is a bit difficult to read, the eyes get a bit sore for me.
And still too much whitespace for my liking, the bottom looks better and has a definite solid feel, but the top is too flimsey with white areas.
My two cents
I still like the menu though.
1. The very first thing you should always do, is construct nice clean meaningful XHTML. Then get it to validate. All this should be done before you style anything. This site doesnt validate. The errors are minor excempt one. You have two wrapper ID's. You can only have one ID name. The others were alt text for images.
2. You need more meta data
3. in my opinion, you are using too many divs. You dont need divs for eveything. Divs are used to group common elements.
4. I love white space. but you have too much above header.
5. I'm confused. You have two menus on the home page? The first is your main nav, the second just swapped out images and doesnt go anywhere? If this is true, you have much more focus on meaningless image swap nav. It outshines the main naigation. Maybe these usless nav item should be something else besides text. Maybe small square images that line up bottom right of the image. This way the user is not so confused by whats my navigation.
6. I love the layout with whitespace!
7. I love the color scheme! But, red is sooo bright. It actually gave me a headache looking at the bottom red box. Then you have white and light grey text ontop of bright red surrounded with white. OUCH!! too much contrast. I would use red not for box backgrounds, but more for accenting things, borders, soft gradients and type.
8. You should do something about the form. It looks washed away. Its hard to notice it.
9. I think you should see how things look with red text and accents, rather then background colors.
thats it. good start. get validated!
I see you are setting your main wrapper to 960px, that is why I am getting scrollbar, although now hidden, it is needed for me to read the footer properly, although I think the footer should be better designed, sorry
I would make your footer have a red background all the way accross, but keep the other DIVs (with green) smaller so that they all are justified with the main image at the top, like you have the main text below the main logo image (does that make sense?)
for example: your appetizers div should be exactly the justified with the main site, then the other two below that justified with that one, this will keep it looking better & consistant.
also in your footer, break up the all rights reserved and themes by forest to 2 lines, it kind of reads as the same line cause one is like a legal for your site the other is just hey here is themes. make them distinguished.
The green is a fantastic touch and in keeping with the food theme, hey it might not work, but why not use a cursive font to describe the food, like in a decent restaurant??? try it see how it looks and reads, if it don't work out it is easy to change.
change your home, menu & contact to be the same size as the other links & I still feel it is looking low. I will screenshot to show: http://www.honeycomb-web.co.uk/images/zbirdboy.jpg
another thing about the footer, I feel that the headers and the actual blocked area have all got the same distance between them, I would add another line to break up the centralised look, I mean between the bottom of appetisers, headings for where we are and the div block of the where we are (Thats just me though)
http://www.honeycomb-web.co.uk/images/zbirdboy2.jpg
ik
thanks to everyone for the help. the more i look at this, the more i think it could be soooo much better. im going to take some time, think it through, and start over from the design perspective.
this has been a great learning experience, and ill be sure to come back and post my new version.
thanks again,
Zach LeBar
@zbirdboy
I do like how you are taking my comments on the chin and active;y seeing what I mean, some people just say well I like it so tough, but you are really trying to get the best out of this, well done you.
I know everyone looks at design differently, but with the fixes of width, centralisation and maybe the whitespace issue (sorry but this one is just not me) I think you will have a good we site there.