Color choice question

[JeremyC]

Hello I am looking for some design advice. I work for a small company and we are in the process working up a new design for our site. I am having a bit of difficulty trying to figure out a reasonable color scheme that will compliment the colors that the company uses in it's print media which is displayed below.

colorscheme.jpg

I am not a great designer but I know that these color will more than likely not produce the desired results. All the company's print media are a mix of only these three colors, and usually all three on the same poster or brochure in large rectangular color blocks. This is creating a bit of a conflict for a few reasons. If we use this principle on a website how can you call attention to important elements if the users eye is constantly being distracted by bright colors everywhere. Secondly keeping people on the website for as long as possible is more and more important to the owners yet I don't see how that is possible if we are making their eyes bleed.

A lot of the mockups that come my way have a lot of bright red background with bright yellow text over it, or bright yellow background with black text for headings, it's mess of colors that bleed all over themselves. It has been a big fight to get the content areas to be mostly white background.

I guess my question is this. If you were in this situation what would you do? I have a hard time trying to verbalize just how bad that color scheme is for a website where we both want and need users to stick around without causing a seizure. My idea would be to go with a minimalistic style design of white and black and use these colors as accents and call to action elements. Any ideas?

[samanime]

Those are very primary colors. In fact, they are the primary colors. =p

I wouldn't use any of them as a main color. I think what you should go with would be to use those as accents on a largely gray (light grays/white and dark grays/black) design, but use those colors to add some pop.

I'm not sure what you mean by "large rectangular color blocks". Are you talking about something like a checker board type look? If you are, you could make use of that same design element in smaller doses to give your site a bit of flavor and some brand recognition. You could either use them as a background for small areas (though I would lighten it up so the blocks are barely noticeable) or use it as like a repeating line or something to border some content.

I would look at what are some common elements used in your print media, and how can you reuse those (in much smaller doses) to help unify the design, while still keeping it simple and clean.

[JeremyC]

I'm not sure what you mean by "large rectangular color blocks". Are you talking about something like a checker board type look?

Not quite, imagine an average sized poster that is divided into three sections height wise with bands of red, blue and yellow with a mix bold text and images that cropped into circles with a heavy yellow, blue or black stroke around them.

Honestly there isn't a lot to work with in terms of attractive web design. I understand to a do it with the print media, it's to catch people attention in an already busy retail environment. However on a website we already have and the priority should be keep their attention rather than put them off by a color scheme that is too bright.

[techmichelle]

How to get your point across in meetings is a totally different skill :-) You might suggest doing test pages. Did your convert your cymk print colors to rgb colors? The idea behind different versions of a site allows people to check out the different ideas. This group is probably not going to go for the minimal style you are suggesting, designers face this and use some very artistic work arounds. Color is okay :-) With the test pages have them check out the page on their pc, not on a printed piece of paper. After they narrow the test pages, then see if they would ask a customer or two which test page they like.

[samanime]

Ah, that could work even better.

What you divided your pages vertically into three and then used one color element in each block? So you'd basically have 3 monochrome color schemes stacked on top of each other in a simple and clean layout. It'd be subtle, but it could tie together your brand.

Also if you use strong bold fonts in print, you could use some similar ones for main headers as well.

Just so you know, I'm kind of shooting in the dark since all I know is you have colors and no clue about the content, so just throwing out some general ideas.

[JeremyC]

Subtlety is going to be a difficult one, every time i bring up doing any type of monochrome color scheme i'm told it's not bright enough. I might try suggesting that we find a graphic designer who has web experience to help us out with this. I don't have enough knowledge to effectively argue it, i just know that we can't design a page that looks like it's from the 90's and expect people to stick around for long.

[Black Max]

Here's a start. Your four colors' hex codes are ec3024, feef03, 0368a9, and 000000 respectively.

If I go to Kuler and plug in 0368a9 into the Create section, I could certainly design a site using some of the color combinations: I think the colors provided in the Triad and Compound sections are particularly appealing. (The colors derived from the red and yellow shades are a bit garish, but there are some possibilities there also.) Naturally, Kuler just gives you a starting point. Collior is another good resource for creating useful Web color schemes, though it focuses more on variants of a given color instead of a larger variety of related colors.

Using a color scheme derived from one or two of the main colors (as opposed to trying to use the four given colors and end up with a site color-coded by Playskool) is something you might consider, and something your bosses might find appealing.

[deathshadow60]

One of the classic sayings that we have to drill into the heads of print designers comes to mind.

The Internet is NOT print... worse though, those color choices likely have contrast issues in terms of text if they are all that's used, even in print; though the emissive vs. reflective formulas are different the principle is the same -- and unless you're using yellow on the blue, and not putting text on the red at all, there's insufficient contrast for the text to be legible in the first place.

That said, I'd have to see an example of how it's used in print to truly weigh in on it, but I would likely try to limit things to one or two color spectrums, not three... though an occasional splash of conflict/contrast can tighten up the design.

The big thing in my mind would remain color contrast of text on background... The yellow is ok on the black or the blue -- the red is useless as a background OR as text compared to the other colors -- thanks to that yellow not being 'true' enough.... spectrum cleaning to FF0000, FFFF00, 0066AA, and 000000 may be a bit more 'workable' in that regard as then the red is dark enough to work with the yellow for foreground/background (though useless with the blue or black). Maintaining at LEAST 50% luminance (and ideally 75%) difference is always a challenge, especially if you're dealing with print designs made by people who may have learned colorspace, but never learned how it relates to legibility of text.

... or how the rules are different for print (reflective) vs. screen (emissive).

[TehYoyo]

Theoretically, these colors are the basics of color theory. You have the three primary colors and black.

As has been stressed, print is very different from web...what works in print won't necessarily work in web.

Is the companies logo composed of black, yellow, red, and blue? (Hopefully not).

When it comes to site and company branding, really the logo is what I think about. Not the ads.

~TehYoyo

[JeremyC]

One of the classic sayings that we have to drill into the heads of print designers comes to mind.

The Internet is NOT print... worse though, those color choices likely have contrast issues in terms of text if they are all that's used, even in print; though the emissive vs. reflective formulas are different the principle is the same -- and unless you're using yellow on the blue, and not putting text on the red at all, there's insufficient contrast for the text to be legible in the first place.

That said, I'd have to see an example of how it's used in print to truly weigh in on it, but I would likely try to limit things to one or two color spectrums, not three... though an occasional splash of conflict/contrast can tighten up the design.

The big thing in my mind would remain color contrast of text on background... The yellow is ok on the black or the blue -- the red is useless as a background OR as text compared to the other colors -- thanks to that yellow not being 'true' enough.... spectrum cleaning to FF0000, FFFF00, 0066AA, and 000000 may be a bit more 'workable' in that regard as then the red is dark enough to work with the yellow for foreground/background (though useless with the blue or black). Maintaining at LEAST 50% luminance (and ideally 75%) difference is always a challenge, especially if you're dealing with print designs made by people who may have learned colorspace, but never learned how it relates to legibility of text.

... or how the rules are different for print (reflective) vs. screen (emissive).

I forgot to add it but mostly the text on the red is white, although there are times when they use yellow text on red which vibrates horribly.

Theoretically, these colors are the basics of color theory. You have the three primary colors and black.

As has been stressed, print is very different from web...what works in print won't necessarily work in web.

Is the companies logo composed of black, yellow, red, and blue? (Hopefully not).

When it comes to site and company branding, really the logo is what I think about. Not the ads.

~TehYoyo

That's another discussion, currently the company logo is silver which would leave a lot of possibilities for design. Our current site is black a monochromatic blue color scheme. However, the general attitude is to not brand to the logo and instead brand to three individual products with three different logos which is where the tri-color scheme is coming from. This is really my major point of contention in the design process. How can we brand a website to three unique products while at the same time keeping it coherent and clear to potential customers. Never mind try to build any type of community around the brand. I've been bringing it up lately but it's hard to broach the subject when there are 4 owners with 4 different opinions.

[amilyjoe]

You can make a great color combination by these colors, because these are the basics colors. Though basic color includes RGB but yet these colors too comes in primary colors and you can do a lot of stuff with these. Good luck for your experiment with colors.

[behati]

I can think of a few ways to work those colours in, but generally speaking it should be more important to make sure the site is readable and accessible to potential clients, rather than stressing out because it's not the same type of red as in the print.. Surely you can persuade your coworkers of this?

Generally there are a few "guidelines" that are worth checking out when it comes to colourchoices.. also this article sheds a bit of light on it: http://www.css-101.org/articles/the_...ble_to_all.php

[amberbam]

I really like the website kuler.adobe.com It can be great for giving ideas for a colour scheme. You can create your own scheme or find ones that other people have put together by typing a search word, or search by a main colour.

[TehYoyo]

I think the last three posters need to read the original post and the subsequent discussion...those posts didn't really help the discussion at all.

JeremyC, I think what you're trying to do is very difficult. This throws in another color into the mix...silver.

The problem (to me) is that you're trying to brand 4 things in one site...really just impossible, in my view. If you really can't persuade your clients, I don't know what you could do.

One thing that I like is when people use a mainly monochromatic site but with splashes of color thrown in...like a mostly white site with maybe some red, yellow, or blue thrown in? Maybe you could devote sections that link to products certain colors?

~TehYoyo

[JeremyC]

I think the last three posters need to read the original post and the subsequent discussion...those posts didn't really help the discussion at all.

JeremyC, I think what you're trying to do is very difficult. This throws in another color into the mix...silver.

The problem (to me) is that you're trying to brand 4 things in one site...really just impossible, in my view. If you really can't persuade your clients, I don't know what you could do.

One thing that I like is when people use a mainly monochromatic site but with splashes of color thrown in...like a mostly white site with maybe some red, yellow, or blue thrown in? Maybe you could devote sections that link to products certain colors?

~TehYoyo

That is what I have been trying to explain to people here at work. They have all these plans that they are making about building a community around our brand but really there is no clear brand to build it around. Just yesterday I was told that our new goal is to get more Facebook followers and when I asked how were were going to do that there wasn't an answer. It's frustrating how people can demand results and yet not provide a plan for achieving them or allow you freedom in creating a plan.

In my opinion it really boils down to a fundamental misunderstanding of what the modern web is. And it very hard convince anyone of anything when they have their own preconceived notions of what is right or wrong and no facts to base them on.

Thank you all for you input.

[deathshadow60]

And it very hard convince anyone of anything when they have their own preconceived notions of what is right or wrong and no facts to base them on.

Wow, that kind of makes it sound like... wait, does this site have a prohibition on that topic or no... huh, guess it does.

It's also hard to deal with when there's so much out of date info or worse, just outright bad advice out there -- people read something in Newsweek or Forbes about IT, they think it's the gospel. Kind of like what my grandfather used to say about the media "when they cover anything you were involved in or know about, they get every detail wrong. If you can't trust them on things you know about, how can you trust them on things of which you know nothing?"

Or as I've more than once had to explain to people "Taking technical advice from Forbes is like taking financial advice from Popular Electronics"

[TehYoyo]

That is what I have been trying to explain to people here at work. They have all these plans that they are making about building a community around our brand but really there is no clear brand to build it around. Just yesterday I was told that our new goal is to get more Facebook followers and when I asked how were were going to do that there wasn't an answer. It's frustrating how people can demand results and yet not provide a plan for achieving them or allow you freedom in creating a plan.

In my opinion it really boils down to a fundamental misunderstanding of what the modern web is. And it very hard convince anyone of anything when they have their own preconceived notions of what is right or wrong and no facts to base them on.

Thank you all for you input.

I think that's just one of the frustrations of being a web designer and developer. Yes, you love the web and working with it, but you have to manage the business end as well and deal with clients, etc.

Can you explain to them what you need to do and why it's so difficult to do what they want and still make it good? Obviously, don't offend anyone, but I think it's a good idea to be honest and have them realize why your design looks so bad (or maybe it looks great) than have it turn out bad and apologize later. This isn't a comment on your design abilities.

~TehYoyo