Design for Hackers: Why Monet Never Used Black, & Why You Shouldn't Either

http://www.kadavy.net/blog/posts/d4h-color-theory/

by kadavy • 16 years ago

428 76 16 years ago

That's a really nice explanation, and although I wasn't sure about the effect when I saw the orange square on the black background, the text hierarchy example is fantastic. Duly noted and voted!

kadavy5• 16 years ago

Hehe - if you saw an orange square on a black background, something is either wrong with your monitor or your vision :) Did you mean something else?

Robin_Message2• 16 years ago

Ah, it was pink, whoops.

jacquesm• 16 years ago

Wow, articles that are both readable and about design.

The typography examples didn't work for me, they're all black on white.

I use this quite frequently: http://colorschemedesigner.com/

someone_here• 16 years ago

The author is likely using a high gamma, which is common among designers.

teilo• 16 years ago

Higher than 2.2? I highly doubt it. Every designer I know uses 2.2, which is the standard for the web. Windows has been 2.2 for years. The only hold-out was Apple, who used to be 1.8, but switched to 2.2 in Snow Leopard. Before SL, designers would regularly calibrate to 2.2, of necessity.

edw519• 16 years ago

Nice post. Bookmarked and saved in my folder for great web design resources.

Although I'm not sure why anymore. No matter how much I try, my designs always come out horrible. Every time I ask someone for their opinion on a concept, they're first answer is, "Hire a professional designer."

Funny, I can visualize 9 layers deep into embedded code or enterprise data, but I have trouble with orange, purple, and all fonts.

FWIW, here is a list of the other links in that folder. Maybe they'll help someone else more than they've helped me.

http://colorschemedesigner.com/#

http://websitetips.com/colortools/sitepro/

http://www.colorsontheweb.com/colorwizard.asp

http://960.gs/

http://webdesignledger.com/inspiration/15-stunning-examples-...

kadavy5• 16 years ago

I love colorschemedesigner.com. I hope to write about color schemes soon, and include info about them in my SXSW presentation (if it gets accepted).

leftnode• 16 years ago

Same here, I'm incredibly envious of great designers. For any non-personal project that I intend on making money with, I always hire a designer.

awolf• 16 years ago

FWIW I was once in the same boat as you. About three months ago I decided that being able to create decent designs was a tool I needed to have in my toolbox.

What worked for me: I learned to draw. It took a lot of practice as I really sucked initially. I recommend getting a notebook with grid lines and a ruler.

It takes a lot of patience to pay attention to all of the details but it pays dividends. With drawing as an intermediate step between having something in my brain and having something in pixels I'm much better at capturing a vague visual concept, iterating, and bringing it to life.

I suspect this process will be different for everyone- this is just what helped me (after years of limping through the design process).

darnton• 16 years ago

If you want to learn to draw and don't know where to start, get a copy of Drawing on the Right Side of the Brain by Betty Edwards. You will be stunned at how quickly you can improve.

http://www.amazon.com/New-Drawing-Right-Side-Brain/dp/087477...

abp3• 16 years ago

Hm, my approach is a little different. I agree if you mean decent drawing skills.

I can draw mockups, even with colors by hand, that look in some ways like the design i want. Then i go on(and cheat a little) and let a friend who is skillfull in photoshop cast it into pixels.

Thats some kind of a pair designing process. He does some layers with different components from several mockups and we constantly play with the colors and styles we want, until we get the components in various polished forms.

That way, we develop in a few hours, first digital drafts of our core concepts. Yes, drafts. Three is a good amount, i think. From that we select, probably with customers the best fitting one. Or the best fitting components from all three. Then we can go on and put a prerelease draft together. It's really a lot of trial and error, but in the end it pays off, i think.

The thing you absolutely need for a good design process is enough inspiration and a open mind, in my opinion.

That way drawing the mockups and pair designing the drafts, is a continous flow of good and better ideas until you reach what you need.

nnash• 16 years ago

I've never really used drawing much other then for making rough thumbnail sketches for websites or icons. Knowing basic techniques, like perspective and lighting, greatly helps to improve a sense of realism in more advanced/trendy site design concepts and icons.

seancron• 16 years ago

I know what you mean. I've been trying as well to become better at design, if only so I can proudly say I designed my website myself. I've bookmarked several articles about design, but one that really helped me get started was http://www.betaversion.org/~stefano/linotype/news/169/

It's full of useful tips and tricks that I would never have thought of on my own. And for completeness, here are the rest of my bookmarks. Hopefully they'll be helpful for someone.

http://www.smashingmagazine.com/2010/01/28/color-theory-for-...

http://www.smashingmagazine.com/2010/02/02/color-theory-for-...

http://www.smashingmagazine.com/2010/02/08/color-theory-for-...

http://sixrevisions.com/css/font-face-guide/

http://sixrevisions.com/web_design/the-960-grid-system-made-...

bmelton• 16 years ago

You might also really enjoy Snook.ca.

The Six Revisions font-face-guide reminded me of this article (http://snook.ca/archives/html_and_css/becoming-a-font-embedd...) that Snook wrote, and which I have declared to be the most complete guide on font embedding whatsoever.

It might focus more on 'front-end development' than design per se, but much of what he offers is invaluable.

russell• 16 years ago

I am not an artist, but my GF is. She never uses black and rarely uses white. Instead she uses two or three pairs of complimentary colors in a painting from a (virtual) color wheel with much more gradation than the one shown in the article. She uses the cool compliment for shadows, for example. The result, using a palate of only four or five colors, is a painting of surprising richness.

greglockwood2• 16 years ago

> As you can see on the left side of this example, the blue block recedes...On the right side of the example, you see the opposite effect, with the red block looking almost as if it is a tower extruding towards you from the blue block.

I see the opposite, with the red block receding and the blue block extruding. What does that say about me?

billswift3• 16 years ago

While I saw the different toned squares like they stated, the intense blue and intense red squares looked completely flat to me, neither seemed to be in the fore or sunk. I think there is a lot more, both mental and physical, variation in people than most seem to expect.

jcl• 16 years ago

By any chance, do you wear glasses with a strong prescription? Color fringing makes the apparent depth relationship of bright colors dependent on the viewing angle.

greglockwood2• 16 years ago

Yes I do. You, sir or madam, are a smart one.

abstractbill• 16 years ago

I don't see any receding or extruding. I just see a migraine.

mrbird• 16 years ago

What is the best color background for showing photos or videos? Flickr is white, for example, but some other sites use black. Is there an optimal choice?

wtracy• 16 years ago

The main thing is to not pick a saturated color that will clash with anything in the picture/video.

Otherwise, a very light color (white or close to it) or a very dark color (black or close to it) will probably make the picture/video more visible.

FWIW, older users seem to prefer light backgrounds, and younger users seem to prefer dark backgrounds.

telewriting2• 16 years ago

Use a neutral gray (this could be black or white). What you want to avoid is framing the image with any "color". Context affects what colors are seen. Knowing a little about something called simultaneous contrast is helpful: http://www.apple.com/pro/color/tools/caponigro/contrast.html

billswift3• 16 years ago

It depends on the effect you want. Since I usually want the details to be highly visible, I usually go for a background the same color but a shade lighter than the major color in the photo. That minimizes the contrast between the photo and its background, bringing out the details within the photo.

andrewl2• 16 years ago

NASA's Ames Research Center has a great site called "Using Color in Information Display Graphics":

http://colorusage.arc.nasa.gov/

It has articles, tools, a bibliography, even an entire section devoted to designing with blue:

http://colorusage.arc.nasa.gov/blue_2.php

It's geared more for functionality than beauty, but that suits me fine. I mostly do web sites for other departments in my company, and clean, functional, and not actively unpleasant are all I need to deliver. They're also pretty much all I'm capable of delivering. Beauty is way beyond my abilities.

kadavy5• 16 years ago

It seems ironic that NASA would have something to say about information design, considering... http://www.asktog.com/books/challengerExerpt.html

But, maybe they've learned their lesson?

andrewl2• 16 years ago

Maybe. Or maybe the group that did the above site was already around at the time of the Challenger disaster, but half of NASA had never heard of them. From what I've seen in large organizations, it's not unusual for there to be departments doing valuable work that could make the company millions, if only anybody knew they existed, or understood what they were talking about. I wouldn't be surprised if NASA's color site was originally an under-the-radar project done by three guys who just loved color and information design.

I have reactions similar to yours when I think about Microsoft employing Simon Peyton Jones, or the fantastically advanced people working at IBM's Watson research center. They do not represent the Microsoft or IBM I've come to know.

scott_s4• 16 years ago

There is still enough contrast as to be readable, but the contrast isn’t as harsh as black vs. white.

Still readable, yes, but I find the black more readable. Taking webpage design cues from schools of painting is a fine strategy as long as you remember that webpages have a different goal from paintings. This implies that everytime you transfer something from a school of painting to webdesign, you have to ask yourself "Does this principle undermine the purpose of a webpage?"

nroach• 16 years ago

On my monitor, the black text was more readable as well. The brown text required perceptible effort to read. I agree with scott_s. If you goal is to deliver information, the black text is superior.

acqq2• 16 years ago

Most of the texts with "gray on white" are very hard to read on my monitor. I know that on bad LCD monitors gray is easier to read, but not everybody has bad monitors.

So generally regarding light gray texts, one more example of "everybody has what I have."

Regarding the article: a lot of painters used black too. Even more printers. Don't you think that the books would be printed with gray or colored ink if that would be more readable? I'm sure enough experiments have shown that it just isn't. The arguments are very suspicious.

alsomike3• 16 years ago

Maybe you will find this interesting: graphic designers have lots of rules about the proper use of typography when laying out a document, like correct kerning, use of old-style numerals, ligatures, etc. The reason for following those rules has to do with the same principles of harmony and naturalness in this blog post, but when researchers tested the impact of "good" typography vs. "bad" typography, they found no differences in performance measures like reading comprehension or reading speed. They did find differences on other measures - in the good typography condition, participants underestimated the amount of time they had spent reading (a measure of engagement with the task) compared to participants in the "bad typography" condition.

But the most interesting finding was when they tested creative cognition - on that test, the "good typography" participants scored much better than the "bad typography" participants. This might explain why we designers insist on good typography (and other design principles). Creativity is a big part of our job, and we want to avoid things that might impair the performance of our creative cognition. But for people in other, "left-brained" professions, enhancing creativity is less important and engaging people is less important, so it makes sense that they would see design rules as irrelevant extra work of little value.

Designers rush to judgment when they see "bad" design because it almost literally hurts their brain. But, maybe the person who designed it or the audience for it doesn't have that kind of brain - and that's OK.

scott_s4• 16 years ago

I think high contrast text is good typography.

But for people in other, "left-brained" professions, enhancing creativity is less important and engaging people is less important, so it makes sense that they would see design rules as irrelevant extra work of little value.

If you assume my work requires no creativity, or that I think design rules are irrelevant, then you are mistaken. I don't like design for the sake of design. I do like design that looks good and enhances a things intended purpose.

joe_the_user4• 16 years ago

Yes but it's important to remember; designers != painters.

The thing about the original article is that it's a fascinating peaking into the world of full, creative color theory. But it also seems like if what you get out of the page is "don't use black text", you've literally "learned just enough to be dangerous". It is important to keep in mind that if you're a geek who's going to wade in aesthetic theory, learning enough to

kadavy5• 16 years ago

This sounds absolutely fascinating - do you know where I can learn more about this study?

billswift3• 16 years ago

The best thing to do with text on a monitor is to keep the text black but make the background less bright. I actually prefer bright yellow on a CRT since that seriously reduces the glare while still being as easily readable as black on white paper. On an LCD where glare isn't a problem, almost anything warm pastel is good; you lose contrast more with cooler colors.

radley• 16 years ago

The black actually is more readable. The problem is that the author over-compensated to make his point and selected a dark neutral (#5-6) instead of a neutral dark (#3-4).

The simple answer is #0 black doesn't anti-alias very well and distracts the reader. Almost anything #2 and darker will look the same (for text), especially on cheap PC monitors. #3 range works best for print-like black and #4 will hint of off-print black. #5 is the beginning of "over-designed" fuzziness.

city413• 16 years ago

Fine painters will almost never use black. The pigment in black paint is very deadening and harsh, it's difficult to work with. It's much better to take the time and create dark hues from the rest of the color wheel. A standard exercise in color theory classes is to create black from the primary colors. Most people end up with brown, but a beautiful, rich black and nearby shades can be accomplished, and it's worth the effort.

It's an entirely different ball game though when you switch from a subtractive color system (which is what painting is, the primaries being cyan, magenta and yellow) to an additive one (which a computer monitor is, with the primaries being the well known RGB). In an additive system dark hues are only accomplished by removing light instead of adding pigment, so the problems a painter faces with black don't exist quite in the same way. So comparing website/app design to Monet is a tiny bit far fetched.

It seemed like a lifetime ago but I used to live and breath this stuff, even got a degree in painting. I guess it wasn't entirely useless :)

lmkg• 16 years ago

Do any of the problems or concerns that painters have with black art apply to using white on a monitor?

city413• 16 years ago

That's an interesting question. My hunch is to say no, as color on a monitor is so pure and perfect. It's essentially digital while a painting is analog, really analog. How the pigments that form the various colors interact with each other varies so much. Even just take red for example, there's red paint made with cadmium, some with iron oxide, others with plants, pyrrole, etc. All these different types of red act so differently. Red on a monitor is just defined by 8 bits, typically.

But with all that said, this was another lifetime ago for me. I've been a programmer for over a decade now and haven't seriously painted in about that much time, so I'm not the expert I wish I was anymore. I should get back into it.

icegreentea2• 16 years ago

Digital paintings still shy away from #000000 black in paintings. It still often looks wrong. It'll flatten out just about anything you put it on. The relationships between colours stay the same in RGB as in pigment. It's just that colours mix differently. Adding true black to your real life paintings has this huge possibility of totally blowing up any colours near it if it mixes in by mistake. Digital well... that's up to the artist's self imposed limitations.

That said, all the rules about black disappear once you talk about greyscale images.

As some sister comments point out, while the relationship between colours remain the same in RGB as pigment, the role the relationships and colours play are different from on a website, to print, to a painting.

I also suspect that sub pixel rendering could screw around with off black fonts.

abp3• 16 years ago

At least, you were able to put the argument token from painting away, by applying your skills as a painter.

Thank you.

blahblahblah• 16 years ago

To further confuse non-painters, although painting is done with a subtractive color system and, technically, cyan, magenta, and yellow are the primaries of such a system, painters don't actually mix their colors from a palette of cyan, magenta, and yellow. If you ask a painter what the primary colors are, they will tell you yellow, red, and blue. A typically painter's palette will consist of a couple hues of each of the primaries + titanium white (except in watercolor, where the natural white of the paper is typically retained instead of using a white pigment). For example, you might use cadmium yellow light, yellow ochre, cadmium red medium, alizarin crimson, cerulean blue, and phthalo blue for your palette. Mixing from a limited palette such as this helps to give the painting a color scheme that is harmonious (and is worthwhile practice if you're a designer who wants to really develop a good feel for color harmony in your designs). A common mistake beginners make is to load up their palette with every tube color they can find at the local art supply store. The end result is a painting with colors that clash like a bad 1970's leisure suit and/or ugly dull muddy color that doesn't pop at all.

demallien• 16 years ago

Really? I have to admit that this surprises me. Black and white aren't on the same dimension as the hue. Playing with just the primary colours doesn't allow you to change the lightness of the mix. Depending on the lightness of your primary palette, you're going to produce some shade of grey, not black...

That said, I'm not actually trying to contradict you, I'm just stating my understanding of the theory - I'd love it if you can explain to me where I've gone wrong! :)

city413• 16 years ago

This might be a bad analogy as I don't bake, but I imagine it's sort of like a really high end confectioner making an elegant dessert. When it comes to sweetening it they have many choices. They probably won't choose HFCS or stevia, because those two choices are rather "viral", they tend to invade everything else and dominate the flavor. Black pigment is sort of like that too. It has a deadening effect and often conflicts with the color palette an artist is going for. Yes red+black will equal a dark red, but kind of a flattend out muted one. Red+green+a smidge of the right blue can often yield a better dark tone that matches the palette and intent of the painting better.

It also depends on the painter. Monet was all about exploring light and understanding light. For him the colors he chose were vital as was his ability to mix color, so oil paint was the natural choice for him. But take Lichtenstein, color was very secondary to his message and he even wanted bad color in a lot of ways. He painted in pure black pigment all the time, he even used acrylic paint which Monet would have scoffed at. I don't think anyone would try to suggest Lichtenstein was less of an artist, just his needs/message were different. When I first posted here and said "fine painter", I was refering to painters where the paint and pigments themselves are vital to their message, like Monet.

stan_rogers• 16 years ago

"Black" isn't. There are very dark browns and blues. Despite what the grandparent posting said, fine painters actually do use black, but not to produce darks (at least not in oils); the most common use for lamp black (the most neutral of the black pigments) is to create the iris colour for blue eyes in oil portraiture. For deep shadows, though, black pigments are very problematic in that it is extremely difficult to control the transition out of darkness.

Because painting is a subtractive medium, one can obtain nearly the same level of darkness using other dark pigments in combination. An "old masters" chiaroscuro typically uses burnt umber plus a warm blue, such as aquamarine, for the great lake of "blackness" from which everything else emerges. Each of those pigments alone prevents the reflection of a rather broad segment of the spectrum, and together they approach true blackness. That, then, allows the artist to manage the transition out of darkness into either a warm or cool tone smoothly by decreasing the amount of the unneeded tone before lightening.

Painters who use the Impressionist pallette will never go anywhere near that level of darkness -- their shadows will generally be just below a mid tone using the main colour of the object, cobalt or aquamarine blue, depending on the warmth or coolness of the main tone, and the complementary colour of the main tone, all in juxtaposition rather than as a mixture. The apparent darkness comes from contrast. The same principle, though, is used to create shadows in classical painting techniques (but with mixture) -- a darker version of the main tone plus the complement and often a touch of blue.

These rules apply to oil painting. Pure pigments in oil are darker out of the tube than you might imagine due to the optical properties of the oil (which is why white paints are sold in huge tubes). In a medium like soft pastels, which doesn't encapsulate the pigment in a continuous film of a binding medium, blacks are used to create the bottom end of the spectrum out of necessity. Even then, though, a pure black is almost never used.

telewriting2• 16 years ago

Color in a painting behaves quite differently than color on the screen. When dealing with a monitor we are looking at additive color, when looking at a painting it's subtractive. The more color I add on the screen the brighter the color becomes e.g., RGB 255 255 255 would be white. The more paints I mix together, the darker the color becomes.

The color wheel given doesn't describe additive color relationships. In RGB land, the complements for the primaries are generally given as follows: red cyan, green magenta, yellow blue. Please see http://en.wikipedia.org/wiki/RGB_color_model

The reason that green and red "pop" is because we have the largest number of red and green cone cells in the fovea, that area of the eye responsible for our most central vision. Colors are not by default "cool" or "warm" they are only such in relation to context. We could have a "cooler" blue next to a "warmer" blue.

mikeklaas• 16 years ago

And yet the main body text of that page is "black" (well, unhued anyway)

mynameishere• 16 years ago

Here's a tip: Open a book. Any book. Note the color of the ink. Now use that color for your fonts and try to ignore the wankers trying to confuse art with information conveyance.

joe_the_user4• 16 years ago

This seems like an important point.

Design and aesthetics are such big, exciting fields that it seems like one enter them and never leave, meaning you start thinking about visual qualities of a page and forget that it exists to convey information.

Consider: A single, amazing image can takes months to create. That's two dimensions for painting. A single, amazing moving picture can take man-years to create. That three dimensions for film. How long should it take to create a single, amazing, roughly four dimensional moving image? (The dimension for an application being height, width, time and user interaction) It should take a long time indeed - meaning that anyone designing an interactive application must ignore/discard 99% of the possible ways to do things superbly and settle for things that work in one dimension or another.

Black and white is terribly ugly in standard image aesthetics. That doesn't mean it won't work very, very well when a number of the other dimensions are considered.

Obviously, a long topic...

extension• 16 years ago

Ideally, time would not matter to your application in the way it matters to movies, unless it's a realtime simulation.

tptacek3• 16 years ago

Web applications aren't books.

By your logic, links also shouldn't be highlighted either.

joe_the_user4• 16 years ago

I think the point is you should focus on design principles intended to for conveying information - if that's your purpose.

Web applications can have zillions of purposes and zillions of aesthetic considerations to go with them - fluffy pink hearts might work very well for Victoria's Secret, etc.

kadavy5• 16 years ago

Color of ink on a book != color you perceive, when compared to a monitor.

The most pleasing books to read are on a cream stock (The Elements of Typographic Style comes to mind), and thus have a bit less contrast than #fff vs. #000.

eru• 16 years ago

Black ink on cream paper may have more contrast than black on white on a screen.

KevinMS• 16 years ago

Black is very commonly used in art

http://www.google.com/search?q=brush+painting

Impressionists had they fancy rationalizations for why they didn't use black, but in my opinion, because of their painting technique and style, black looks dirty and smudgy.

icegreentea2• 16 years ago

Not just the impressionists. Most of the "classic" western painters and most people trained in those schools don't use black. One reason is that that black does not exist in nature. Or rather, almost never exists in nature, and these schools of art sought to "reality" or whatever.

The rules regarding black in paintings still applies, if you're attempting to create a somewhat 'realistic' scene. Other wise, use of black should be done carefully. One of the things that pure black does in a coloured piece of art (ignoring grey scale and almost greyscale) is automatically flatten the image. You'll notice that most Chinese brush paintings actually use diluted black ink. The fact that many of them are basically greyscale or monochromatic just means they can get away with more black.

Also, mixing in pure black into paint to darken a colour will almost always result in crappy looking shadows. Especially in pigment, but even in digital art. For example, if you tried to drop skin tone into a shadow by putting 20% opacity black it, it would look like crap.

tl;dr, in art, black is to be used carefully to achieve a desired affect. same deal in design.

RobLach• 16 years ago

Nice link. For the past year of so I've been keeping up with design blogs and trying to do most of the art and design I need on my own.

a hacker's mindset leads surprisingly well to design, and I think the design side of my brain has helped in my coding.

jjcm• 16 years ago

I'm a web/logo designer, and here's why this is wrong:

First off it's trying to apply the rules that dictate one medium to another. While certain basic principles often transverse mediums, this does not. They're trying to state that what works for blending colors in an art medium will work for trying to convey information on a content delivery medium. Remember though that in impressionist paintings the focus is on the lighting and the brush strokes, generally with an ordinary subject matter - or rather, the focus wasn't on the information, but on how it was presented. This is almost entirely opposite to what the web brings to the table - the focus is on the information, with the presentation being a way to best show that information. If you focus on the design over the content, you'll end up with a pretty site, but one that isn't functional. As programmers and hackers, all of you should know how well that ends up.

Also though, keep in mind that Monet was one painter out of millions using one style out of thousands. What about ink and wash paintings (http://en.wikipedia.org/wiki/Ink_and_wash_painting)? Their entire focus is on the subtle and effective use of absolute black. Remember that there is no universal dos or donts in design, just guidelines. Saying you should "never use black" (or any color for that matter) is like saying you should never use X tool in your arsenal. You should never purposefully limit your tools, rather you should learn how to effectively use all the tools you have. Given the right conditions, even a goto statement can be the correct choice.

jwecker• 16 years ago

I remember how surprised I was when a painter friend of mine pointed out that shadows on snow were blue, not gray.

adamc• 16 years ago

When I got to the part about "Warm Colors Pop, Cool Colors Recede", I was startled by the text. My eye had already been drawn to the figure, and for me, blue popped and red receded.

Design for Hackers: Why Monet Never Used Black, & Why You Shouldn't Either

Related Stories