13 ms·
Design for Hackers: Why Monet Never Used Black, & Why You Shouldn't Either
- Robin_Message 16y agoThat'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!
- kadavy 16y agoHehe - 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_Message 16y agoAh, it was pink, whoops.
- jacquesm 16y agoWow, 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/ http://colorschemedesigner.com/
- someone_here 16y agoThe author is likely using a high gamma, which is common among designers.
- teilo 16y agoHigher 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 16y agoNice 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://colorschemedesigner.com/# http://websitetips.com/colortools/sitepro/ http://websitetips.com/colortools/sitepro/ http://www.colorsontheweb.com/colorwizard.asp http://www.colorsontheweb.com/colorwizard.asp http://960.gs/ http://960.gs/ http://webdesignledger.com/inspiration/15-stunning-examples-of-data-visualization http://webdesignledger.com/inspiration/15-stunning-examples-...
- kadavy 16y agoI 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 16y agoSame 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 16y agoFWIW 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).
- russell 16y agoI 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.
- greglockwood 16y 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?
- billswift 16y agoWhile 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 16y agoBy 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.
- greglockwood 16y agoYes I do. You, sir or madam, are a smart one.
- abstractbill 16y agoI don't see any receding or extruding. I just see a migraine.
- mrbird 16y agoWhat 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 16y agoThe 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.
- telewriting 16y agoUse 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 http://www.apple.com/pro/color/tools/caponigro/contrast.html
- billswift 16y agoIt 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.
- andrewl 16y agoNASA's Ames Research Center has a great site called "Using Color in Information Display Graphics": http://colorusage.arc.nasa.gov/ 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 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.
- kadavy 16y agoIt seems ironic that NASA would have something to say about information design, considering... http://www.asktog.com/books/challengerExerpt.html http://www.asktog.com/books/challengerExerpt.html But, maybe they've learned their lesson?
- andrewl 16y agoMaybe. 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_s 16y agoThere 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 16y agoOn 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.
- acqq 16y agoMost 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.
- chc 16y agoBut by the same token, if gray is easier on some people's monitors, using high-contrast text is also an example of "everybody has what I have."
- acqq 16y agoThe major question is then: should the text be adjusted for the people who read or for the people who don't. I believe that super-high contrast and too bright screens are more common among the people who watch videos and photos or play games more than read the texts on the screen.
- city41 16y agoFine 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 16y agoDo any of the problems or concerns that painters have with black art apply to using white on a monitor?
- city41 16y agoThat'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.
- abp 16y agoHm, but problems exist from a programmers view, because you get blind by starring at shiny white editor windows constantly. 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?
- telewriting 16y agoColor 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 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 16y agoAnd yet the main body text of that page is "black" (well, unhued anyway)
- mynameishere 16y agoHere'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_user 16y agoThis 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 16y agoIdeally, time would not matter to your application in the way it matters to movies, unless it's a realtime simulation.
- tptacek 16y agoWeb applications aren't books. By your logic, links also shouldn't be highlighted either.
- joe_the_user 16y agoI 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.
- KevinMS 16y agoBlack is very commonly used in art http://www.google.com/search?q=brush+painting 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.
- icegreentea 16y agoNot 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 16y agoNice 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 16y agoI'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 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 16y agoI remember how surprised I was when a painter friend of mine pointed out that shadows on snow were blue, not gray.
- adamc 16y agoWhen 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.