Design for Hackers: Why Monet Never Used Black, & Why You Shouldn't Either
kadavy.net
kadavy.net
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 :)
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.
Also, in my opinion, to much white can make a good design look too offensive on a monitor. Decent gray, for example, does much better as a background color, i think?
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.
Thank you.
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! :)
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.
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.
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://webdesignledger.com/inspiration/15-stunning-examples-...
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).
http://www.amazon.com/New-Drawing-Right-Side-Brain/dp/087477...
A good book to read after you are done with Drawing on the Right Side of the Brain is Nicolaides The Natural Way to Draw. It's a lot of hard work, but it's worth it in the end.
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.
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-...
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.
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?"
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.
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.
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.
"Design for design sake" is just another way of saying you don't share the designer goals of engaging an audience and enhancing creative cognition. There's nothing wrong with that, people have different needs, so "good" means something different to a designer than it does to you.
"Design for design's sake" is what I call design that interferes with the purpose of what's being designed for. An example would be a chair that is "creatively engaging" but is uncomfortable to sit in.
You just compiled your CLI program, and you're testing it's output. You're staring at specialized typefaces and an optimized screen. Creativity involved (you aren't a good programmer if you lack creativity).
The other side: you're a store manager, programmer manager, or X manager, you have to make a fast presentation of your key notes. You start PowerPoint, and select some template. (Creativity Involved?)
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
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.
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...
By your logic, links also shouldn't be highlighted either.
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.
This comment, on the other hand, appears to begin from the premise that because books use black and white to good effect, fine art has nothing to teach information design.
It's distilled, oblivious snark.
The comment might be a bit snarky but statement "you should never use black" is pretty blanket as well, even if the article does have lots of interesting information.
Incidentally, long before this article was ever written, Edward Tufte was recommending that people avoid black and white. I assume that's part of the reason Hacker News has that cream-colored background.
“The usual metaphor for screens (projection and computer) these days seems to be black type on a white background, that is, a paper metaphor. This sometimes results in video glare, with lots of rays coming from the background. Sometimes the old fashioned computer screen seems less tiring, showing lit-up text on a dead backround.
“So you should try to reduce video glare, perhaps by reducing the figure/ground contrast. For example, our screens on this website usually have a light tint on the ground to reduce the electric blue-white video glare. Of course on the computer screen, one can just turn down the brightness control when working at night or in a darkened room. Television control rooms and airplane cockpits generally have darkened backgrounds upon which to display lighted data.
“On paper, white type on a black background can result in filled-in serifs because of the printing process. It is also harder to read white type on a black ground (there surely must be some evidence about this). But we should never be working at the edge of legibility in any situation, so legibility tests might not be relevant.
“For projection presentations, obviously the figure/ground contrast must be sufficient to overcome the ambient light. Check your presentation room out in advance, test your projectors, find out how to control the room lighting and the window curtains if necessary. You should simply look at the various design solutions under real conditions to see what is going on, and not depend on verbal discussions such as this to decide!”
-- Edward Tufte, March 19, 2002 http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0...
Really, as long as your luminosity contrast ratio[1] is somewhat decent, you'll be ok.
[0]: http://www.informationarchitects.jp/en/100e2r/ [1]: http://juicystudio.com/services/luminositycontrastratio.php
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.
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.
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.
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.
But, maybe they've learned their lesson?
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.
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.
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.
The typography examples didn't work for me, they're all black on white.
I use this quite frequently: http://colorschemedesigner.com/
I see the opposite, with the red block receding and the blue block extruding. What does that say about me?
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.
a hacker's mindset leads surprisingly well to design, and I think the design side of my brain has helped in my coding.