View Full Version : hows this layout

08-13-2007, 02:51 AM
Well this layout is still heavily in development so i decided to post it here to see what you guys think about it so far. personally i think it looks kinda plain but im still thinking of ways to liven it up.

heres the link:

this is just a little web design site im probably going to make public in about 6months. Im still no pro designer but more of a student with a goal of starting a freelance design site when i have proficient knowledge of the languages to do so.
but all i need to worry about right now is the look of the layout, guys what are the pros and cons of this layout. do you guys think the box is too isolated from everything else, any suggestions for making it look less plain? etc...
and to save you some time, yes it is all validated coding.

08-13-2007, 12:42 PM
It looks good (mozilla) i'm not sure about your blue mouse over on the menu, and the borders dissapear on mouseover which makes it look a bit weird, as the text just shifts slightly. I like your mousover and then the line dissapears and it matches your content, but what annoys me is how the text shifts, try adding this to your mouseover border-left:1px solid colourofli; so add a border at the left to your non-mouse over li classes so it doesnt shift.

And you should get rid of the horizontal scroll bar at the bottom of your content, it looks messy , try replacing overflow: scroll; with overflow:auto;

Looks pretty thought, its small and contained well.

08-13-2007, 04:21 PM
Well I took your suggestions to thought and felt that they were pretty good ideas so, i did get the horizontal bar removed and the border stays on hover so the text doesn't shift.

08-13-2007, 04:27 PM
im glad i was helpful, your site looks good.

08-14-2007, 11:37 PM
Your color choice is not working. The blue background with the warm desaturated reds are not harmonious. Consider a more muted warm background.

Overall I think the site needs more. It's relatively simple. Also I would get rid of the scrollbar.

08-16-2007, 03:59 AM
On the background, it would probably look better fading from a dark colour instead of a light one. The nav links over the dark red are hard to read. the blck text doesn't stand out enough. The word "Home" (although probally just a work in progress) looks...eh. I would still add some moe padding for the content area and add a little line-height.

All in all good start. i really think you can do a lot more to make it "pop".

08-16-2007, 06:05 AM
I used to design like this too. I noticed you are using 'overflow: auto;' instead of a floating frame. While it doesn't harm your Search Engine Optimization value... still from my experience, a majority of visitors do not like scrollbars within a site. Unless it's a site of a famed artist or of their likes.

I say let's welcome a rising star, at least for a start, your code is clean.

08-17-2007, 03:49 AM
Well ive redone the layout. I didnt like the previous one, so instead look at this one.


How is this look, id like opinions before I code it.

08-17-2007, 07:53 PM
Ah, much much better! Tip for you, that background image is going to be huge. I advise either using a gradient OR a repeatable diagonal bar as the background image.

Oh and the title shouldn't be blue on blue, it's hard to read.

08-18-2007, 03:05 AM
Lol, hows it hard to read, I can read it by scanning just fine =P
and as for the BG itll be a repeated diagonal but the gradient will end up just being really thing and repeated on its x axis. so really the bg will probably be a total of about 40kb worth of images, just repeated. but one thing i dont know how to spice up is the nav because it looks boring.

08-18-2007, 08:46 AM
Your title is hard to read, take it or leave it (especially the "visualizing your way" part which I had to read like four times before I got what it said). Blue text on a blue background is bad usability according to the W3Cs accessibility guidelines.

Enter your colors here to determine if there is enough contrast:

Colour Contrast Analysis (http://www.wat-c.org/tools/CCA/1.1/) (http://www.wat-c.org/tools/CCA/1.1/)

It's a helpful tool. =)

08-18-2007, 07:57 PM
EDIT: well I coded the layout so what do you guys think now heres the link:

08-20-2007, 07:28 PM
I'm not a big fan of that background. It's too busy, and it's pulling attention away from the content. The "ocustruct" from post #8 is better looking than the most recent one, but the most recent "visualizing your way" is better. Actually, I think you'd be much better off with the ocustruct from post #8, if you made the "web design" the same colour as the final t. It would resolve most of the readability issues there.

The font on your menu bar should match the font from ocustruct - that would give it a little more life. Right now the menu is pretty bland. If you go with a solid (very) light blue background, I think you could get away with some sort of gradient button for the menu.

The footer needs something, too. Not sure what. At the very least, it should be right aligned, as opposed to centred.

08-20-2007, 07:43 PM
Well it looks better than your first.

But I don't like it either , too blue.
You need some second color for this layout to work.

Have you considered making the content area white & changing

It should give it a better look.
Atleast better look than it's right now.

08-21-2007, 04:21 PM
orange goes nice with blue... complimentary colour.
or a neon green sort of colour...

08-21-2007, 04:56 PM
yeah I was actually thinking of going with an orange or red to give it a second color. I think ill try that :)

08-22-2007, 12:17 AM
Go for orange. ;)
Neon green & red will not help this design much.

08-22-2007, 09:08 AM
Blue text on a blue background is bad usability according to the W3Cs accessibility guidelines.

Enter your colors here to determine if there is enough contrast:

Colour Contrast Analysis (http://www.wat-c.org/tools/CCA/1.1/) (http://www.wat-c.org/tools/CCA/1.1/)

It's a helpful tool. =)

I have blue text on a blue background. Does this mean that I have to go back to the drawing board? :( I think (hope) I'm okay b/c I have a white stroke AND I blurred a light blue oval where my text resides. That tool doesn't take things like that into consideration. (correct me if I'm wrong)


@ Thread Starter
I think the thing you're going to have to realize is that staying within one family group (aqua blue, coral, green-blue, royal blue, lt.blue, etc.) isn't always safe and at time can be really tacky. I don't think that all of your different variations of blue compliment each other very well. As others have stated, you are going to need to add more color.

Here is a site with a similar background concept but I believe they achieved to have it work a bit better than what you currently have going on. I think the white top is a distraction. Perhaps you can lower the opacity on that layer or perhaps change the blending mode.

As you've stated the block menu is not really working to well in terms of design. Something needs to be done about that aswell. I would DEFINATELY scrap anything thats the color blue in your content div. I think that color is extremely off. (my opinion of course)

08-22-2007, 08:10 PM
I have blue text on a blue background. Does this mean that I have to go back to the drawing board?

Lol, StupidRalph I can't see what you are talking about. There's a little slice of an image at the very top of the screen but that's all. I think you have some positioning issues. Putting a stroke on things definitely helps though. White on dark blue is very legible. And shout out to my Atlanta neighbor! :cool:

08-22-2007, 09:41 PM
WoW are you serious...my code even validates as XHTML Transitional. It'll even validate as Strict if I were to change the doctype. (if you view my source you'll see why :D ) What browser are you using? Here is a jpeg of the image:


I think I'm going to start my own thread so that I don't infringe on the thread starter's site review. The client has now changed the domain name to exclusive DJ pool.com. So it'll have to reflect that new name. I'll post it in the graphics/multimedia section.

And you're from the ATL? No wonder, you can understand my humor. I thought I was listening to 107.9 when I was reading your post. Good too see someone else from Hotlanta here. :thumbsup:

08-22-2007, 11:57 PM
Elementis- orange would be a good color.

StupidRalph, I've attached the screenshot of what I am seeing. I don't know what is wrong honestly *shrugs*.

I'm using FF with a screen resolution of 1280 x 800.

08-23-2007, 12:12 AM
Weird indeed...I changed the CSS around. I had background-position set to center but I changed it to top. Appears fine in Firefox now. Its weird b/c I test in the same browser and resolution but it appeared perfectly fine until I just clicked it. (I don't think I was in any of my other browsers but it could be possible as I was testing another site I'm working on but FF is my default.)

08-24-2007, 03:18 AM
KK im am most definitely changing it to orange, but i also might scratch the banner and do something else, since the banner seems to distract from the content. Im also going to darken the blue background so it doesnt stand out as much. now my problem is thinking about what i want the header to be since i wont do the banner. im just thinking of maybe doing a giant version of my logo over the content replacing the banner but then i still need a LITTLE something else to make the logo look good up there.

08-24-2007, 09:00 AM
omg orange... interestingly attractive..

08-25-2007, 07:17 AM
its now kinda orange! how is it now?


08-25-2007, 10:42 AM
Your color choice seem to me somehow too flashy. You may try it out with light blue or light green may be. That make the appearance more elegant.

08-25-2007, 05:37 PM
lol thats funny the color change made it go from plain to flashy xD well ill think about changing it once i get a few more opinions on the color scheme

08-25-2007, 09:19 PM
a lil nit pick but if you hover over the menu items, you acctuall have to hover over the text it's self, add some padding to the a tag and it makes it much easier to click on, it may not be much for us, but some one who is monility impaired will find your site much more easier to navigate! also you can use a:focus like a:hover so the links change colour when you tab through your page. Just two simple steps to apply to improve the accessability of your site!

09-06-2007, 03:42 AM
Your first layout was ok, I just dont like the colors on the header