need feedback on this design.

[ilugd]

I really suck at design and so figured on getting some advice on the layout of my personal website which I am trying to develop.
the picture below is just a mockup

[victor_rambo]

Please give URL of the website in question

[ilugd]

this is just done in photoshop
I havent done the codingyet. Just click on the thumbnail to see the full photo.

[debsuvra]

Originally Posted by ilugd

I really suck at design and so figured on getting some advice on the layout of my personal website which I am trying to develop.
the picture below is just a mockup

Originally Posted by ilugd

this is just done in photoshop
I havent done the codingyet. Just click on the thumbnail to see the full photo.

Colors are a bit gaudy there.

[victor_rambo]

Please create a HTML file of the design you have thought so that we can easily suggest you the changes!

[xbonez]

the green color on the right column is a little gaudy...change that to a slightly more sober color and its fine

[apacheman]

this calls for an expert designer...rohit bal must be consulted...

[NucleusKore]

Please use websafe colours. Since you said photoshop, use the web palette

[ilugd]

i did use the web pallette, maybe i will use a shade much more lighter and also with more yellow in it. Will do it today evening and post it back up again. Please do continue to give more ideas. Is the font ok? Is the logo and the top banner bearable??

[blueshift]

2 things: Colors and Logo

The browns, blueish violet and green doesn't really go well. I am giving you aweful website to select the appropriate colors. Check this link.

Second is the logo font chosen and its design. A shadowed logo on left is not good. Also change the font and redesign the logo.

will comment further after you changed it.

[ilugd]

thanks blueshift. I really appreciate the suggestions from all of you. I will repost the photo when I am done today evening.

[victor_rambo]

Originally Posted by ilugd

thanks blueshift. I really appreciate the suggestions from all of you. I will repost the photo when I am done today evening.

Instead of photoshoping it, use any WYSIWYG HTML editor, its easy for us to make modifications and give it!

WYSIWYG HTML editor ya it is really good..

[ilugd]

I got a headache. I tried all sort of combinations but am not happy with anything. got really frustrated with the logo and so removed it. Tried some and felt this was sort of better. maybe the right navbar could have a bit of a different color or a lighter color with black text. But it looks strange.

[NucleusKore]

This one looks ok

[blueshift]

The logo is much good now.

This is another good site for matching colors. http://colormatch5k.com/

Also use bullets for menu items in left.

A gradient will look better in the header. Like this.



And as rohan said, try designing it in HTML editor. It will be difficult later to code that PS desigm afaik.

[ilugd]

ok, finally settled on something like this. Thanks very much for all your feedback. I am now going to cut the top banner and then load it for each page. That is how it is done, right?

The left nav bar will have a div style setup for the background color.
Bullets need to be made.
And blue shift, thanks especially for the gradient tip. I shamelessly ripped of your the color combination for the gradient.
should be setting up a temporary link for the html file in an hour or so.

[ilugd]

hmmm. Tried doing the design in dreamweaver. Most of it is worked out but there is a problem with the css margins or something. The calculations don't work out. I want the page width to be always 800 pixels wide so that the banner will be correct, but the right navigation bar is not fitting in.
The link is here. http://jsemmanuel.110mb.com/newindex.html

[fahimbepari]

Try to use a horizontal navigation bar as it gives u lots of space and more easy to access.
here is my webpage http://www.klecivil.webs.com/

[goobimama]

@ilugd: I'm sorry if this is harsh, but that design isn't going to work. Unless it has some major work done on it. Again, please don't take this the wrong way.

- Your left navigation bar is too plain.
- Top banner looks like it's done in MS Word
- enclosing the content with those two sidebars is just too cluttered. There needs to be some kind of flow in the text. Decide what your navitation is going to be like
- Try some rounded borders. Also give the entire page a background. Could be a tiled image, top to bottom gradient, or just a pastel colour
- The white text on dark red isn't pleasing to the eyes.

I don't suggest HTML editors cause you feel restricted in freedom of design. With photoshop you can do anything and then decide what you don't want/can't implement in the design.

Hey aren't you the same guy whom we all tried to guess what your userID meant? like "I Love You Gorepathi Dhukre"?

[ilugd]

yeah, same guy.
I don't mind your corrections at all. I much prefer constructive criticism to anything else.
Oh, I am also the same guy who kept a beard for 2 months, as another user here said, the transformation guy. Also the one who bruised his skull by banging the head on the keyboard. (now that it doesn't pain anymore I feel the incident was a bit funny.)
Let me look at your suggestions one by one
- Your left navigation bar is too plain.
maybe some bullets in that would look better
- Top banner looks like it's done in MS Word
sigh... I have no design sense whatsoever. I think some sort of picture in that would look better.
- enclosing the content with those two sidebars is just too cluttered. There needs to be some kind of flow in the text. Decide what your navitation is going to be like
I am going to remove the right nav bar. That is not really needed, I guess.
- Try some rounded borders. Also give the entire page a background. Could be a tiled image, top to bottom gradient, or just a pastel colour
<grin> You are the apple guy, right? you want an apple look I guess. Anyway, I don't think I will implement that right away, as I want a plain look.
- The white text on dark red isn't pleasing to the eyes.
Bull's eye, I felt that too.

Anyway, I am on another project right now, and will look into this tomorrow. In any case, once the design gets a bit tolerable, I will start producing content, which is what I am good at. I guess I will slowly keep tweaking the website design as time goes.

[goobimama]

Guilty as charged! The avatar and user title says it all I guess! Still, with the power of CSS, rounded corners are really easy to do and look great.

As for the top banner try out a pattern overlay or something. Will give it some sort of definition.

Anyway, keep up the good work...

[ilugd]

hey, thanks everyone and this is really getting interesting. (though a bit slow, sigh...)
please check the link again at http://jsemmanuel.110mb.com/newindex.html
the stylesheet is at http://jsemmanuel.110mb.com/mainstyles.css

I need some help here. In the left navigation bar, each menu item is at <li> item. I want some space between the border and the text of each button. As soon as I put in border: 10px; the stylesheet stops rendering. Is there some other way to do it?
Also, how do we make it so that when the mouse is over the button, it changes color?
I also want to reduce the space that is automatically being given above and below each text in the left navbar. That would make the buttons look slimmer and also align the first button just below the banner.

and goobi, rounded corners are the next step.

[goobimama]

Shey! Avatar bhi change ho gaya! Kya style mara. Though I prefer the old bearded-lady look...

[ilugd]

lady?? barf...

[Faun]

how bout this one (torrent spy look) but thats made by me except for the background image.

[ilugd]

thanks bro. but I don't want to change my design again right now. I just need to sort out the bugs in it. Can you please help me to put some space before the text in the li's using css?

[Faun]

Originally Posted by ilugd

thanks bro. but I don't want to change my design again right now. I just need to sort out the bugs in it. Can you please help me to put some space before the text in the li's using css?

Like this

[victor_rambo]

use padding
Eg:


{
padding: 10px;
}