...

View Full Version : hows this layout



elementis0
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:
http://freewebs.com/clanwop/ocutest.html

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.

littlemiss
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.

elementis0
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.

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

lithriel
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.

harbingerOTV
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".

cryonic
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.

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

http://i6.photobucket.com/albums/y248/elementis0/ocutest3.png

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

lithriel
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.

elementis0
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.

lithriel
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. =)

elementis0
08-18-2007, 07:57 PM
EDIT: well I coded the layout so what do you guys think now heres the link:
http://www.freewebs.com/clanwop/Ocutest2.html

Zurvan
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.

BeatShot
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
backround.

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

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

elementis0
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 :)

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

StupidRalph
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)

www.8thwondercdpool.com/epool.html

@ 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.

http://www.allhiphop.com
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)

lithriel
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:

StupidRalph
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:

http://www.8thwondercdpool.com/v2/images/banners/csep.jpg

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:

lithriel
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.

StupidRalph
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.)

elementis0
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.

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

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

http://i6.photobucket.com/albums/y248/elementis0/ocustructtest4.png

sd_code_FORUM
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.

elementis0
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

phill_ridout
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!

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum