Grow your CSS skills. Land your dream job.

Web Site Color Scheme

  • # July 29, 2009 at 7:30 am

    Good morning all,

    I was wondering if I could get some advice on a color scheme I should use for this site.

    http://www.cartel-auto.com

    I love the development side of web design but I am lost with the graphic design side. Can you guys give me some ideas for a color scheme to use with this site? I want to people drawn to the header then the logo then the content.

    # July 29, 2009 at 8:28 am

    Hey James,

    As a first point, it is nigh impossible for anyone to tell you specifically which colours to use – as a business site, the chances are that the business already has some sort of corporate colours they like to use in their logo’s and literature, so their website should reflect that. If they don’t (and many small companies don’t have a clue other than "well, the sign is red…") you should ask them to think about it before you make any committments on their behalf. Maybe they’ll be happy with just a black and white style page with their logo being the only real source of colour? Or maybe they want to extend the colours in their logo throughout the site?

    The important thing is how you use the colours you’ve got. There are plenty of brilliant designs using just black and white, for example, which technically means no colours at all.

    As for what you’ve got – there are two aspects you should look at:
    1) Style: You start off sleek and minimalist with the logo and nav bar, but then proceed to lamp everything else in big coloured boxes with big borders that don’t line up with each other. Browse around and look at a few sites you like and take note of the style in which they are built. See how the accomplish that style and then try to reflect that yourself. Whatever style you choose maintain it throughout.

    2)Colour: Abandon the colour scheme you’re using, becaue it just doesn’t work. http://kuler.adobe.com/ is a good site to see all sorts of different colour combinations that do. Google a ‘colour wheel’ and learn about contrasting and complementary colours, as well as ‘cool’ or ‘warm’. That’s basic design knowledge that’ll stand you in good stead.

    Hope that helps!

    # July 29, 2009 at 12:44 pm

    As it stands I think the site has too many dominate colors. Its difficult to find a focal point on the website because green and red are so incredibly strong. Your menu is almost lost on the site because it’s colors are fairly dull compared to the objects surrounding it. You aren’t far off with the color scheme because green and red are complimentary colors, you just need to use a darker, more gray shade of one of them to make it work. I suggest using a color scheme website to help you out. The one suggested in the post above is pretty good, although my personal favorite is http://www.colourlovers.com/.

    I do like the black box with the check marks, I think you should keep that. It is very clean and highlights the companies services appropriately.

    # July 29, 2009 at 4:54 pm

    Thanks for the input. I am going to play with the color wheel tonight. I will post tomorrow and see if made some progress.

    # July 30, 2009 at 11:35 am

    Good morning. I talked with my brother last night and he wanted a wrench added to his logo, so I made that change last night. I also made the background a dark blue and the content box a light blue. I am still learning about the colors play together but I believe it is coming together well. I wanted to see if the experts agree.

    Also, I want to make the content box stand out a bit more but not be overpowering. Do you have any suggestions? Or point me in the right direction and I will research myself. Thanks.

    # July 30, 2009 at 12:24 pm

    Far be it for me to tell you how your site should look, but I will say that large areas of "flat" colour rarely look good on the web.
    Here are a few links that may be of some use:
    http://psd.tutsplus.com/articles/web-design-week-on-psdtuts-you-can-now-sell-photoshop-templates-via-themeforest/
    http://blog.themeforest.net/tutorials/common-mistakes-in-web-design/
    http://psd.tutsplus.com/designing-tutorials/elements-of-great-web-design-the-polish/
    http://psd.tutsplus.com/articles/web/45-step-by-step-tutorials-on-web-design-with-photoshop/

    You might also want to have a look around for some stuff on designing with grids.

    And here’s one of my favourite web design articles of all time – http://carsonified.com/blog/features/design/how-crap-is-your-site-design/

    Hope that is some help. :D

    # July 30, 2009 at 11:01 pm

    @ Apostrophe – that carsonified article is excellent, very well written too. I must remember that C.R.A.P. ! :D

    @ James – Already looking a lot better, but – when looking at your colour wheel, be aware that the prominent colour of your logo is red (a warm vibrant colour that contrasts with green and complements orange and purple – it also looks most vibrant against a black background), while the predominant colour of the page as you have it is blue (a cool calm colour that works with orange, green, and purple).

    Also look at the HUGE amount of empty space on the page, despite which I still have to scroll down to read all the content (at 1280 X 1024 res). Have a look at a more efficient layout. Perhaps two columns rather than two stacked divs? As regards how best to divide up your page best, have a look at this article from Smashing Magazine:
    http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/
    It may be a little on the overkill side of things for you yet, but you could pick up some useful pointers from it….

    # August 2, 2009 at 8:25 am

    Thanks everyone for your input. I am going to take the day and review all the articles you guys posted. I will post again once I made some changes. By then I should have learned some new techniques to apply.

    # August 18, 2009 at 4:33 am

    i steal palettes from colourlovers.com, too. love that place.

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

You must be logged in to reply to this topic.

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