Grow your CSS skills. Land your dream job.

Colour Schemes – Choice of 4!

  • # June 4, 2009 at 6:20 am

    Given that i have recently created a half decent site, which has actually been approved by the boffins on here (thanks for all the help guys :) ), i now have to pick a colour scheme.

    The boss wants ‘blue’ … this is what i have:

    http://www.meonvalleytravel.com/testing … fault.html (option 1)

    http://www.meonvalleytravel.com/testing … lour2.html (option 2)

    http://www.meonvalleytravel.com/testing … lour3.html (option 3)

    http://www.meonvalleytravel.com/testing … lour4.html (option 4)

    Think i am swaying towards either Option 3, or Option 2.

    Would love to know what you think! cheers guys

    # June 4, 2009 at 8:12 am

    Hey Infocentre,

    What a change.. Nice if I may say so..

    Regards to colour schemes, I’ll go with Option 2, the colours seem to blend nicely. Well thats my opinion, not sure what the rest shall say, but the choice of changing the colours, made the site alot better and easier to look at.

    Rob
    # June 4, 2009 at 8:31 am

    I would also say number 2. the text has a much better contrast in that one too :)

    # June 4, 2009 at 8:41 am

    I was hoping that this would make my choice easier! lol, unfortunately it doesnt. More feedback! i need more results to base the decision on!

    cheers guys

    # June 4, 2009 at 9:09 am

    hey man, nice layout, I used firebug to change some colors, and I came up with this:

    http://img5.imageshack.us/img5/8884/picture1qoa.jpg

    Its a bit dark, but easy to read. I tend to like darker layouts, lol

    Let me know if this helps you in any way.

    # June 4, 2009 at 9:46 am
    "cpj238" wrote:
    hey man, nice layout, I used firebug to change some colors, and I came up with this:

    http://img5.imageshack.us/img5/8884/picture1qoa.jpg

    Its a bit dark, but easy to read. I tend to like darker layouts, lol

    Let me know if this helps you in any way.

    Thanks for that! again – all you have done is increase my headache by adding another design that looks great! lol..

    come on people, lets get Decisive! ;)

    # June 4, 2009 at 10:20 am

    I would go for n° 2

    I’m not a designer so i only decided as normal visitor of your site

    # June 4, 2009 at 10:42 am
    "infocentre" wrote:
    Thanks for that! again – all you have done is increase my headache by adding another design that looks great! lol..

    come on people, lets get Decisive! ;)

    Yeah, I didn’t really give my opinion of the first 4 you posted, haha, oh well here goes it:

    option 1: The Greens are far to strong, especially with white text, the blue menu bar is ok, but the background blue of the body is a bit myspace 2002, which isn’t a good thing. I would dull the saturation of these colors a little, except for the menu, and see how that looks.

    option 2: The background color of the body is spot on. As well as the contents blue background, very nice. But for some reason these greens kill it for me, even as the link color. I would suggest removing the background color from the "second_header" completley, and changing the menu color to Olive ( #808000 ). I looked at it this way in firefox with firebug, and it looks pretty snazy, dark…again, but snazy, lol.

    option 3: Again, not a fan of the 2002 myspace blue background. CadeBlue would look nice ( #5f9ea0 ) but only if you made the "second_header" black ( #000000 ).

    option 4: Blue baby blue! So much Blue!!!! But I think the body bcakground needs to be setup as a darker blue than what you have, seeing how your logo is white and such, I’ll suggest: SteelBlue ( #4682b4 ). The other colors are good.

    All in all, i would have to say this, you have every layout setup with white text / white logo, so nearly every background color must be dark in nature for the white to be readable. For me, I’ve always thought that high saturated colors are terrible for any website (example: any site built in the 90′s). Take CSS-Tricks forums for example, the colors are low saturation and tinted with white, on top of white, which makes it easy on the eye. White text for me usually isn’t a good option, but if done right, can look pretty darn good. If you were to choose a light color as a background, i would suggest using the color #444444 for your text, its my default standard on the site’s I build.

    Hope that this helps from this designers eye ;)

    ~ Chris

    # June 4, 2009 at 10:55 am

    very helpful and infomative Chris,

    I have to say however, i think we are not going to see eye to eye on this one (sorry!) but everythin ‘dark’ just dowsnt doing it for me – i need colour in my life!

    Options one and four for me were just filler – i think i will be going with option two (most votes ;)) and was actually my personal favourite. I see what you are saying about the ‘white on bright’ with the text, but i think i will make this work in the ‘secondarry_header’ with a fade (from left to right) into a darker cyan colour.

    I did your suggestion of the olive green nav bar – kind of looked like the colour i chucked up after! lol. And having that secondary_header the same as the background made the flow dissapear in my eyes.

    HOWEVER, like i said – some really helpful points there, and i will show you how i get on in the next hour or so!

    Thanks!

    # June 4, 2009 at 11:04 am

    No problem, olive made you puke!? hahaha, i think its an elegant color if used in the right manner…so to you, I just said that puke can look elegant, haha, awesome :)

    I’ll be looking forward to what you come up with. Question though, who is the final "sayer" of this project? Your Boss? A Client? Might be wise to get their opinion as well ;)

    Oh and be sure to check out my first post: http://css-tricks.com/forums/viewtopic.php?f=3&t=2615

    ~ Chris

    # June 4, 2009 at 11:21 am

    i suppose in the right place at the right time you may get away with that hideous colour! lol (just kiddin ;))

    This is what i have come up with..

    http://www.meonvalleytravel.com/testing … ult_6.html

    I am a little split on the border. For me, where there is a fade in one block ‘second_header’ there needs to be a a gap to a solid colour. So the gap is there (15px) and then i fet there should be a borded to complete the seperation..

    Thoughts on this!

    The fade is a fade to the Bg colour, althoug i also tried it to black which looked OK

    Cheers

    # June 4, 2009 at 11:31 am

    Hmm very interesting, I think what you had before with the tightness of the layout worked really well, adding that bottom margin and borders took that and threw it out the window. I firebugged those both out, and with that gradient, it looks good.

    Try it out :)

    ~ Chris

    # June 4, 2009 at 11:40 am

    Ok, same link again – i think your right! the way that second_header flows into the background looks great.

    http://www.meonvalleytravel.com/testing … ult_6.html

    I think i might be happy with it now.. ! :D

    # June 4, 2009 at 11:58 am

    Agreed, now for you to get another opinion than mine, LOL

    ~ Chris

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".