Wednesday, February 25, 2009

Color, Color, Everywhere

So, I think I've got a good color pallet down for this blog, which I'll outline here for the benefit of my readers. Basically it goes like this:

This is quoted text from someone other than me.

This is quoted text from myself, ie not my "live" voice.

This is quoted thoughts/actions from myself, ie not my 'live' thoughts/actions. These will always be contained within asterisks.

This is my "live voice".

This is my "live" thoughts/actions, which will always be contained within asterisks.

This is a title of an article.

Here's the pallet and color theory scheme:


It's mostly a Tetradic Color Scheme, with one of the complementary pairs having a pretty wide degree angle apart, but I think it suits the overall style better, rather than going for a truer, more brilliant green and purple, which I think would make the colors look too neonic.

This is considered to be the most difficult color scheme to make work, and usually the best way to approach it is to center heavily on two of the colors and then use the others sparingly. On my blog, depending on whether it's mostly a "live" post or a quoted one, it'll alternate with the green and purple being the primaries and the purple and blue being the primaries. So anywho, we'll see how this works.

7 comments:

Kirk Is said...

http://catb.org/jargon/html/A/angry-fruit-salad.html

Onideus said...

*sigh*

And you've learned nothing. Boy it's gonna be *GREAT* going through that other message you posted.

*rolls eyes*

Once again (for like the billionth time now) you are not keeping PURPOSE in mind. If the PURPOSE of my using those different colors was just to appear flash/cool/neat/etc then that link might make a bit of sense. HOWEVER, in this PARTICULAR case I am using multiple colors for the PURPOSE of making it EASIER for my readers to distinguish between text blocks, which is *REALLY* important for a blog like this in that many of my blog posts are *REALLY* fucking long and without some kind of distinguishing factor it would be mind stabbingly annoying trying to figure out who said what in the message. On Usenet for example blue is often used for quoted/replied text. You can make it even easier too with quote characters/tags, like on Usenet > and : are used. I don't usually do that here though because then the message has to be specially formatted by hand with hard line breaks in order to work with the space restrictions of the blog form. I could write a script for it, but I think the colors are good enough for now.

PS - That link hardly represents any sort of professional analysis in regards to color theory. Next time try and find something better, preferably something like this.

rexmo said...

I can still see afterimage lines after 5 minutes. While I do love to read your comments I may have to change my color to monochrome.

Onideus said...

Well, I may experiment with more hue saturation reduction, although with the exception of the green the other colors have already had their hue saturation cut down. The problem with going with zero saturation (monochrome) is that it hurts most peoples eyes trying to differentiate between text blocks. One thing I might experiment with is folding quotes, like have an image icon of sorts between the text blocks for the replied to text, and then if you click on the icon it'll pop open within the text. It could even use the same color in that I could have it darken all the other text when it's popped open. That would also cut down on the overall size of the posts which would equate to less scrolling. Of course then I'll likely get people complaining that they like to read the replied to text and don't like to bother with having to click all over the screen constantly. Ultimately there's no pleasing everyone, which is why I usually just try to please myself.

Kirk Is said...

It doesn't matter how many theories and dollar words you come up.... you might think you're dealing with Sus scrofa scrofa but everyone else sees it's just a pig.

I agree with rexmo. The "color theory" you really need to find is "which colors will be less likely to burn afterimage lines into my readers' eyes". So you've thought about saturation, but apparently not fully applied it... though I think your basic premise of "a black background is cool" is flawed.

(You might want to look at http://www.codinghorror.com/blog/archives/000682.html for some balances of readable but still contrasting colors.)

Your other flawed premise is "I'm only going to care about regular returning readers (but mostly just myself)" - people who have read enough here to pick up on the colors even when you're lazy about setting up a quote by preluding it in the text. Or maybe the flawed premise is "I think this color scheme is 'intuitive'". You did put some thought into the color pairs, though I don't think purple vs. blue has any reason why one is you and the other is someone else.

Also the dark green is a bit tough to read.

The other basic flaw which you kind of address in your response to rexmo is the use of color, as opposed to shape... I agree that clickable show/hide widgets would be annoying, but some variant on traditional blockquote tags... either just the indenting alone (which gives up a little horizontal space, but it's a good trade off) or with some CSS flavoring to change the background a bit - and I'd suggest the background rather than the foreground color would maintain readability.

For that matter... I don't know what CSS blogger supports, but are its limitations why you use font tags instead of CSS?

(For that matter, why isn't this whole site in Flash? I know, it must blogger.com's bad programmers)

Onideus said...

Part of being a graphic designer is knowing what's best for people even if they don't know it themselves. You might think color theory is just some foo fa nonsense and I'm sure to someone who isn't a graphic designer and hasn't studied it at all would certainly see it that way, however as I am a graphic designer I cannot simply ignore it nor can I ignore the fact that the text needs some kind of separation in order to keep it clear to the reader who is saying what and in what temporal context as well. Another part of being a graphic designer is knowing that you can't please everyone and you have to pick forms that will work for the MAJORITY, not the minority.

As far as the background...it's mostly a moot point. If I did in fact invert the colors and used a white background it would essentially turn the whole thing into one giant high contrast mess that would give most people a headache to even look at for more than five minutes. The black background was not picked because I thought it "looked cool", that's something that you would do (not being a graphic designer). I don't pick things because they "look cool"...ever. I pick them because they have very specific functional purposes in mind. In this case the use of the black background affords itself very well contrast wise to the use of multiple color arrangements that, on a white background, would simply not be possible. Even using dark colors on a white background would not work as well in that dark colors have a tendency to all look alike in such an arrangement.

Complaining that the dark green is "tough to read" is another moot point as there are quite literally THOUSANDS of different monitor types with HUNDREDS OF THOUSANDS of different possible combinations as far as their brightness control. I generally work around a gAMA of around 50,000 which is somewhere in between the general brightness of a general Mac and general PC monitor brightness. This is something you really can't complain about since it shouldn't require any more intelligence than a monkey to figure out how to increase the brightness on your monitor to accommodate (presuming it's really that much of burden/difficulty for you). Further that dark green is only used for thoughts, which I don't really use that often and the reason they're dark is for two very specific purposes. One, I want them to be contrasted against the regular type in a way to show that they're more private, not as easily seen, to imply that they're internal communications and not external. And the second reason is that, for the most part, they're actually not all that essential. You don't really *HAVE* to read them to get the gist of the message, they're more of an Easter egg of sorts, revealing what the author is thinking or how they're reacting emotionally to what they're saying. They're ~supposed~ to be SUBTLE.

On the part about"shape?" (not quite the right word for it, but okay). There are a few flaws in that idea which make it inherently inferior to the color option. Primarily for two reasons. One, it doesn't provide enough contrast between text bodies and when scrolling through large bodies of "ping pong" style messages it's more than easy to get lost as far as who it is that's speaking. The color on the other hand provides instantaneous recognition of who is saying what, without having to go searching through lines and boxes looking for tags that explain who is saying what. That of course is the second reason why it's inferior, it's CONFUSING, especially for older folk who will easily get lost in the mess of over redundant boxes, lines and added text trying to explain who is saying what and when.

There are some ways in which I could reduce the overall amount of color and use some white text or gray text, but overall that's really not going to make much difference at all and I like the harmony of the current color selections anyway.

As far as my use of font tags, I use them because they're simpler...no other reason than that. There's no point in using CSS unless you actually have a *REASON* to do so. And in this case creating a global style and applying it to div or p tags won't save more than a few keystrokes, which is completely moot in that I copy and past the tags in anyway.

As far as why the site isn't in Flash I'm presuming you just didn't read that last post I made to you, the one you replied to within hours of my posting it. I would suggest you go back and read it again...slower this time, preferably with less butthurt. And do try and pay close attention to the segments where I talk about the possible reasons as to why Flash wasn't used for the WHOLE YouTube site.

...given how much redundancy I'm seeing in just these couple posts of yours I'm actually somewhat hesitant to even take the bother to READ that last reply of yours, let alone reply to it. Often times I find when I'm engaging with someone of lesser intelligence they just won't "get" what I'm saying, or rather they'll ignore it completely, primarily out of butthurt and simply arguing for the sake of argument and the want to try and "get back" at me in some way. Those types become real obvious quite quickly in that they soon start making like a broken record, ignoring your counter arguments completely and just reposting their already ripped apart points over and over and over and over and over again. The speed with which they reply is also another dead giveaway. It often shows that they didn't read what you said very carefully and were quickly aroused to anger, acting on emotion without the benefit of intellect. Rather than actually reading the text slowly, taking it all in and letting it really sink into your mind. That's really the only way you can either accept the arguments or develop proper counter arguments for the most part. If you're replying within minutes of just skimming through a post though...yeah...you likely didn't read it very carefully, especially if you're just repeating yourself like broken record and ignoring any counter arguments or points (as you very often do).

Kirk Is said...

So call my self-assessment crazy (which you have) but I think I've been giving you more respect and more thought-out answers than most of the flamewars you've ended up in.

I wasn't disagreeing with the idea that color can be helpful, but it's certainly not sufficient... nor does it have to look as cool-90s "black backgrounds are SWEEEEET" as it does. I posted a link with some great, highly readable, easy on the eyes alternatives that still support color-based differentiation... so saying "my options were black background or white" is a false dichotomy. (And based on the bad presumption that color alone was the best way of setting apart quoting) Face it -- despite your disclaimers, your site is a black background because you think it looks cool. (Even if you state it as "I like the harmony of the current color selections anyway.")

If there are so damn many monitor combos, then I still think you're not doing a good job at aiming at the middle, something that will look good on most monitors.

I think shape/form plus color might work well, and then you wouldn't have to use such ass-ugly, 120-degrees away on the color wheel color combos - you could use something more subtle, though subtle doesn't seem to be your strong suit.

(Some places use a stylized div, like with big quote marks. I don't know if I like that or not.)

Also, to point out the obvious: expecting everyone, long term reader or some new wayward soul, to instantly understand your color system, and have that be the ONLY way to know in many cases, is idiotic. And not less confusing than those "boxes and lines and text" for poor old gramps.

So lets go back to your "I'm not Miss Cleo" guesses about why Youtube doesn't use Flash navigation:
1 maybe they switched to flash players later
2 maybe their developers just aren't that good
3 maybe they were just worried about the public perception

Frankly, none of these explanations are at all satisfying. 1. is a dumbass guess, and Youtube has shown itself capable of relaunching parts of itself... if Flash was better, they'd use it. 2. Is laughable. These guys have solved MONUMENTAL infrastructure problems and have made an embedded player that is both slick and indeed has some navigation elements. They could make the whole site that way, easily. 3. Is the best guess you put forward, but the public perception of flash based sites being less usable doesn't come from nowhere, not just "limited user experience". Flash tends to put geewhizness over getting to content, it encourages patterns where each site has its own navigation paradigm, many Flash sites do NOT support deep URL linking even when it's in their interest to do so, and this is all some of why not just Youtube but hardly anyone makes a complex, non-promotional site in anything but HTML/DHTML.

I think I've done a pretty good job of reading your stuff deeply and conceding points when they are made. You claim victory in arguments way too quickly, and that leads you to think that people who don't agree that you've conclusively established some idea just aren't paying attention.

Plus I've avoided shit like calling it "butthurt" because I don't think it adds heat but no light to the discussion.

Finally, you probably take a certain pride in your "addictive" qualities, and even in what you see as your riling up "kneejerk" responses. It's really not that special. If I'm engaged in a reasonably interesting and/or argumentative discussion, I'll put it into my few-times-a-day rotation... this is just one instance of that.