Colours and/or Colors [Archive]

Jason Batten

06-21-2005, 01:16 PM

http://www.web-source.net/216_color_chart.htm

Let's talk colours!

Do you obey the ever nasty looking colour chart or are you a rebel of the colour code and say tough luck to people with older monitors?

The first design I made for my gaming web site was my pride but as I soon realised it did not look so great for everyone. I had a lot of complaints about ONE colour being too dark. Sadly it was a main colour for headings. It was a dark site and I done my best to change the colour to suit all but it didn't work. In the end I just did a re-design. No complaints after that :D

It's all part of that question, do you cater for user compliance or do you make the user cater for you...

How do you get around colour issues?

BuzzLY

06-21-2005, 02:36 PM

I have a color chart that I wrote that helps me figure out what colors look good together. The link is in my sig.

Nowadays, I tend to use almost any color for my personal sites. If I put together a commercial site, it's really up to my clients. I can make recommendations, but in the end it's up to them.

It seems a bit silly in 2005 to adhere to the 216 "safe" colors, but I guess some people have old enough browsers to still require them.

In any case where I need to adhere to the safe color scheme, I would create a "xyz_safe.css" stylesheet to complement each of my "xyz.css" stylesheets, and give the user the option of switching to a "safe palette" page. But only if it were important to my client for me to do so.

pohopo

06-21-2005, 03:00 PM

I agree. A few years back I would try stick with the safe colors, but now I am much more open to what I use. Besides looking at what colors go good together I also take into account color blindness so I don't use two colors that will look like one color to a color blind person.

BuzzLY

06-21-2005, 04:46 PM

That is a good idea, and something many people (including me) forget to check. There are online sites where you can check to see what your site looks like to color-blind people. Most are blocked to me, or I'd give you a link. This Google page (http://www.google.com/search?num=100&hl=en&lr=&biw=1132&q=color+blindness+web+page+test) should give anyone a few good links.

I wish I could figure out how to run my color picker app through a color-blindness filter. That would be a good tool to include...

vaaaska

06-21-2005, 08:01 PM

THE NATURAL WORLD!!! BOOYAH!!!

(The only thing real in this world is perception).

Jason Batten

06-22-2005, 06:41 AM

Your colour picker is very good buzzly. I think I might replace it as my own colour picker :D

With the thing about clients, yeah :( I have completed my first job although I am waiting to upload it for them. The colours atm look IMO professional, clean and generally "nice" the colours my client is still trying to push against my advice are red, yellow and black. I mean the core colours of #000000, #FF0000 and #FFFF00... nasty... very nasty I would be ashamed to apply those but it looks like I have to...

vaaaska

06-22-2005, 08:56 AM

http://www.boxesandarrows.com/archives/natural_selections_colors_found_in_nature_and_interface_design.php

BuzzLY

06-22-2005, 09:08 AM

Thank you. Feel free to use it all you want.

Are they insisting on those exact hex values? You could try muting the yellow and red a bit...

BuzzLY

06-22-2005, 09:10 AM

Originally posted by vaaaska
http://www.boxesandarrows.com/archives/natural_selections_colors_found_in_nature_and_interface_design.php Page not Found

davidjam

06-22-2005, 10:48 AM

I have attached some code for adjusting colors using the more natural means of hue, saturation and brightness (hsv). To implement is as easy as this:

$original_color = "rgb(150,150,245)";

// FIRST, create the new color object with the rgb value

$color = new color($original_color);

// SECOND, adjust the color with $color->adjust_color()
// My example shifts the hue 120º, desaturates by 0.3 and leaves the brightness as is

$color->adjust_color(120,-.3,0);

// FINALLY, use it somewhere with $color->color

print "<body style='background-color: {$color->color};'>";

Credit for the bulk of this code goes to MikeSnead: original thread (http://www.phpbuilder.com/board/showthread.php?s=&threadid=10300938). All I did was roll it into a class and add the adjust_color() function.

BuzzLY

06-22-2005, 11:05 AM

That's cool, if you know a lot about HSV. How does the average user know how much to adjust each value?

Jason Batten

06-22-2005, 12:12 PM

Yeah my client wants those exact colours because they "jump out". We made a logo for him but he does not like it as he created his own... it has the colours and is just those colours with New Times Roman text :bemused:

I feel like I am battling common sense here :(

davidjam

06-22-2005, 12:29 PM

Originally posted by BuzzLY
That's cool, if you know a lot about HSV. How does the average user know how much to adjust each value?

Well, this is more for the developer than the "average user". Basically all you need to know is a little color theory. i.e. the color wheel is 360 degrees -- therefore, 180 is a "complementary color", 120 is really two primary colors clockwise (I like these combinations). As for the saturation, that is like the difference between pure (1) or muddy (less than 1) and for brightness between bright (1) and less bright (less than 1).

OK, you're probably wondering what the use is. Well it is the color *combinations* more than just singular colors. So, say you have a color that your client likes -- i.e. dark blue -- and you want a secondary color that goes nice with it, so you adjust it (for instance) $color->color_adjust($adjust_hue = 120, $adjust_saturation = .3, $adjust_brightness = .2). (I have no idea what that makes, but some kind of light yellow). And there you go, you have your secondary color.

Now, whenever you adjust your original color -- say, the customer changes there mind to greenish-blue -- then the secondary color changes automatically.

Well, I think that's cool!:)

BuzzLY

06-22-2005, 01:26 PM

Originally posted by NetNerd85
Yeah my client wants those exact colours because they "jump out". We made a logo for him but he does not like it as he created his own... it has the colours and is just those colours with New Times Roman text :bemused:

I feel like I am battling common sense here :( I hear ya. When you are doing work for a client, though, sometimes you need to simply do exactly what they want, despite the fact that every fiber of your being wants to rip him apart. The bottom line is that he's paying you, and you need to give him what he wants. It's your job to make well-informed suggestions, but in the end, it what the customer wants that counts.

Here's a trick you can use for future projects: Create a page or logo that you know looks like crap, and that you know the client will not like. Let them "guide" you to a better looking page/logo. This will give them the illusion that they have contributed to the project, because that is really what the issue is -- they want to make sure that some part of the site has their own handiwork in it. Give them that, and you can usually have your way with the rest of the project.

Good Luck!

leatherback

06-22-2005, 03:32 PM

Hey Buzzly..
Thanks fo rthe tip. I actually did that for a project. Now I am stuck to building a crappy-looking site, because the client thought that design looked great! Aaah..

So it might backfire..

J.

pohopo

06-22-2005, 03:39 PM

I hear ya. When you are doing work for a client, though, sometimes you need to simply do exactly what they want, despite the fact that every fiber of your being wants to rip him apart. The bottom line is that he's paying you, and you need to give him what he wants. It's your job to make well-informed suggestions, but in the end, it what the customer wants that counts.

It is also important that you get what they say they want in a project plan or requirements doc that they approve. Also let them know any changes to the doc could potentially increase the cost of the site. (this is called change control). If you don't do this you can screw yourself when the client wants a ton of changes at the very end.

BuzzLY

06-22-2005, 04:00 PM

Originally posted by leatherback
Hey Buzzly..
Thanks fo rthe tip. I actually did that for a project. Now I am stuck to building a crappy-looking site, because the client thought that design looked great! Aaah..

So it might backfire..

J. Yes, it could. The key is to get to know your client, and find out what they like and don't like. I view the beginning of a client relationship similarly to the beginning of any relationship. You have to take time to get to know them, and find out what makes them tick.

If you really want to learn how to develop customer relationships, I suggest you take a look at these books (http://store.millerheiman.com/asp/prodlist.asp?cat=Books&family=). I used to work at Miller Heiman in a previous life, and they know how to sell. I personally recommend taking a look at The 5 Paths to Persuasion (http://store.millerheiman.com/asp/proddetail.asp?prodid=00000000000002A7&cat=Books&family=&sort=Product_Name).

davidjam

06-22-2005, 04:25 PM

I agree in giving the customer a "sense" of control via providing well thought out "choices", but I have actually offered different logos/designs in the past, assuming they would go for the ones I thought were superior, and oh so many times they have gone for the crap. Just like flies...

Partly my design style doesn't fit cowboy country. And thus I shall git on my horse and head out toward the rising sun... (with my wife and chickens of course!) :)

vaaaska

06-22-2005, 05:17 PM

Originally posted by BuzzLY
Page not Found

Strange...it was just a copy and paste.

I want things to look flat - if it can be achieved through any color combination then it's just right for me. I totally can't stand all this gradient baloney where people are trying to emulate natural light - it just doesn't work for me.

The link (http://tinyurl.com/mrgy) again. Hope it works...but I've posted this before around here.

(Edit: the link is just too long...the forum stuff is creating an empty space. It should work now via tinyurl).

vaaaska

06-22-2005, 05:26 PM

Originally posted by davidjam
I agree in giving the customer a "sense" of control via providing well thought out "choices", but I have actually offered different logos/designs in the past, assuming they would go for the ones I thought were superior, and oh so many times they have gone for the crap. Just like flies...

A tangent...I think I've given up on providing alternate views of things. Unless, they are paying for me to do something two or three or more times - then I'll contract with somebody else to create a version (just like a large agency). As a one-man show it simply makes no sense. It's always made more sense to research everything, work on ideas, then boil them down for a singular presentation. More time on getting the message across as opposed to throwing something out there and hoping it sticks (pun intended David). ;)

Then again, I find words and actions to be far more powerful than a logo 99.9999999% of the time. Which goes both ways if you know what I mean.

davidjam

06-22-2005, 05:57 PM

Sorry netnerd if we're too OT... the only thing I would add to your comments vaska is to have someone you trust, someone with some tact and visual sense to check out your process at certain critical points. At least until you get enough experience (read "instinct") to provide your own ICF or rather, Internal Critiquing Filter... the ability to know how far to push experimental design and how savvy your customer is going to be with your directions.

I thought that was interesting what you said about gradients. I think I will write a book: "Rounded Corners", all about my experience here in hick land.

vaaaska

06-22-2005, 06:39 PM

Originally posted by davidjam
Sorry netnerd if we're too OT... the only thing I would add to your comments vaska is to have someone you trust, someone with some tact and visual sense to check out your process at certain critical points. At least until you get enough experience (read "instinct") to provide your own ICF or rather, Internal Critiquing Filter... the ability to know how far to push experimental design and how savvy your customer is going to be with your directions.

I thought that was interesting what you said about gradients. I think I will write a book: "Rounded Corners", all about my experience here in hick land.

re: ICF..certainly true. I would hope everybody bounces their work off somebody who understands how they operate.

Rounded Corners...I know what you mean. Did you know that you can create rounded corners with CSS? Ack...

Jason Batten

06-23-2005, 12:55 AM

Creating a not so good design then presenting a better design to a client seems to go either way. I will give it a go for sure though.

Suppose I should get off my butt and start planning my next job... alright real motivation is I am out of money :o

I do like some gradients. The colour "fading" effect on title bars is cool yet I am unable to do it. Told yah I was bad with graphics :o. I have recently been able to create an indented line (woot). But apart from those two effects I don't go extreme. I use CSS roll-overs. I also do slight rounding of corners where you just colour one pixcel of the the desired corner(s).

Example.
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="200" height="50">
<tr>
<td height="1"></td>
<td bgcolor="#FFFFFF" width="1" height="1"></td>
</tr>
<tr>
<td><p>some text</p></td>
<td width="1"></td>
</tr>
<tr>
<td height="1"></td>
<td bgcolor="#FFFFFF" width="1" height="1"></td>
</tr>
</table>
I am sure some if not all of you know that trick. I learnt it from a friend, I use to use images. I like to create sites with only HTML/CSS if I can. Of course nothing beats a good title image.

Also, my brother changed the theme of XP and now all the backgrounds are grey. Bare with me, Since I have been crusing some sites with 'normally' white backgrounds, they are now grey. Which is obviously due to the webmaster relying on the default white setting. I was totally unaware of this, I never thought of it. Just a tip! it is always the small things with over look, like missing a $ or ; BAH!

planetsim

06-23-2005, 01:13 AM

You better hope goldbug doesnt see that due to some blindness inflicted just by seeing that because if he does, im sure he wont just give his $0.02 on the matter.

Anyways as for clients are concerned dont give them too much choice or otherwise you will never finish. Limit them if they have a particular design they want do it and do an alternate version which incoporates what they want but uses your know how on good design. Unless there stubborn they will usually like yours better.

vaaaska

06-23-2005, 05:57 AM

Actually, I'm ok with some gradients. It's just that they are used way too much - become a cliche of themselves. Every color region gets a gradient! Oh yeah...

I once heard an explanation that it gently guided your eyes down the page. Whatever.

When I read a magazine and the lamp reflects off the page I'm not guided down the page by the play of the light. I'm guided down the page by the words I read. By my own eyesight. I have enough concentration to do that much - as opposed to being cowpathed in less than 7 seconds through a page.

+++++++++++++++

Netnerd you do know that your example there could be pulled off with pure css, right? You don't need a table for that kind of thing...unless you are really using some tabular data.

Note: I'm not the kind of jerk who claims that all use of tables and iframes is evil, there are certainly appropriate times to use them - especially when you are doing something a little more creative.

Jason Batten

06-23-2005, 06:02 AM

I use tables and like them :D

You mean CSS absolute evil positioning? :confused:

Elizabeth

06-23-2005, 08:53 AM

Nice colorful sig, Buzz...

..my eyes! my eyes!...

BuzzLY

06-23-2005, 10:09 AM

Originally posted by NetNerd85 <table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" width="200" height="50">
<tr>
<td height="1"></td>
<td bgcolor="#FFFFFF" width="1" height="1"></td>
</tr>
<tr>
<td><p>some text</p></td>
<td width="1"></td>
</tr>
<tr>
<td height="1"></td>
<td bgcolor="#FFFFFF" width="1" height="1"></td>
</tr>
</table> ACK!! :eek:

I use CSS for such "tricks." You should not use tables for anything but displaying tabular data. You better not let goldbug see that post ;)

[edit]Note to self: read the entire thread before responding... however, I stand by my statement.

vaaaska

06-23-2005, 10:26 AM

Originally posted by NetNerd85
You mean CSS absolute evil positioning? :confused:

What does absolute positioning have to do with creating a simple:

<div class='box'>Some text</div>

I use position:absolute probably 0.01% of the time (only when it's necessary).

BuzzLY

06-23-2005, 02:39 PM

Originally posted by Elizabeth
Nice colorful sig, Buzz...

..my eyes! my eyes!... You like that? I wish I could take credit, but the Queer Eye guys did a signature makeover on me.

davidjam

06-24-2005, 10:44 AM

OK, so how does one create rounded corners with CSS? Presently the only thing I have that I think visually "needs" the corners rounded are my tabbed forms. It does look more intuitive -- i.e. this is a tab, not just a box. But everything else is just square 1px borders.

And I agree about over-use of gradients, soft effects, etc. I think that the use has something to do with culture, branding, trust and all that, in connection with operating systems mimicking the buttons and lines like what you see on electronics industrial design. I don't know how far I can attempt deconstruction of something as pervasive as this visual-language culture. (sorry, I panicked, I didn't know what else to call it, but it is a kind of visual language...)

Weedpacket

06-25-2005, 02:35 AM

Originally posted by davidjam
I have attached some code for adjusting colors using the more natural means of hue, saturation and brightness (hsv). Ooh, nifty. I've been working on icon sets for graphical buttons. When putting these together you need a consistent way to indicate normal, disabled, active, and mouseover states. Loading the normal state icons and having plugin operators to produce the different variants is a much nicer way to go about it than writing another section in the style's documentation on tweaking the pics in Photoshop.