I type out a lot of blog posts these days because we have a pile of interns and junior designers, or even fairly experienced designers who just don't have the same background.
For example, on Friday I presented my long post on The Interactivity of Paper to everyone, in case they'd missed the point.
Then I realized that I had laid out a perfectly good list of best practices, and explanations of enabling technologies, but had never really gotten to the point myself. So it's time for another post. Start with this:
Really, stop and don't just look at it, but right click and save it and get it to your phone somehow. This one is 320x480, the resolution of my HTC Hero 200. If your phone has a different resolution, make one of your own with the same elements. And get a magnifying glass (or better, a loupe) so you can see some of the details. We used the elmo, which almost can see the sub-pixel elements, which is cool.
Okay, what you will find is that you can, at normal viewing distance, see those 1 pixel tall lines, and 1 pixel dot arrays.
But the fish photo (and probably the gray ramp on the side, but some will exhibit banding) looks perfectly smooth. Didn't all those discussions of natural resolution because of the iPhone 4 mean that everything less than that looks grainy or pixelated? What is going on?
To find out, look at this:
That's what I've always known as a grayscale "ramp." It's the total range of grays from black to white (well, within the gamut of your display technology, but that isn't important now).
On most computer displays (and here certainly) it is not a true continuous gradient, but is composed of little steps, 256 different grays, each slightly different than the next. Here's two of them next to each other:
I promise this is two grays, but they are adjacent grays, so you can't tell the difference unless you have exceptional eyesight, a great display device and optimal viewing conditions. Among other things, I have in the distant past color corrected stuff for Hallmark, and I can't see it. Try pulling open your Digital Color Meter (et. al.) and seeing they are different, and I am not lying.
So what can you see? Well, here's 10 of the grays on the top, and the two end ones on the bottom (if that makes sense). You can't really see the step between any two, but if you drop the middles, you can see those larger steps.
What you can perceive is probably a smaller difference that this. And that's my key to this whole post. Go back to the Bad Astronomy article on resolution. If you didn't read it, do it now. I'll wait... Okay, a key concept is the point at which items become resolvable to your eye. But he did leave out one point. The smallest perceptible difference affects this as the resolvable resolution is measured at some optimal contrast ratio.
If a small item is visible with high contrast, then reducing the contrast will make it harder to see. A bright light is visible from a mile away, but a small flashlight of the same diameter is not. No matter how much this now seems obvious and second-nature to you, really think about it. How have you used this knowledge to design things. Take this nice bright warning triangle for example:
Now, let's say (purely as an argument) that your company switches to yellow as the primary brand color. Take your bright yellow triangle and put it on the masthead for the company:
Oops. And a similar phenomenon actually does hold true for closely coupled areas. Just putting a border or small amount of space between items is not that helpful. It helps, but does it scream like it did on the overall white background?
Okay, let's fix it by changing to red.
Hmm. Several things are happening, but among them is that the bright red and bright yellow share a key attribute. Yes, it's the word "bright." More specifically, they are highly saturated colors. Although we refer to color mostly in production-useful color spaces like RGB, thinking of color as HSV is more helpful. Colors have a hue or color, like red vs. green, a saturation or the intensity of the color, and a value or how pure the color is, vs. being combined with black (shaded) or white (tinted). Read the wikipedia article or ask me for more detail because we're going to move along now.
So, the red sure is bright, but in practice this doesn't work that well. It's easy to loose the highly saturated red on the highly saturated yellow. So, next there's a gray. Same exact shape just desaturated (S reduced to zero, so the H becomes irrelevant, and V is the only important measure). It's pretty much exactly as visible, maybe a little more so because the high saturation makes the exclamation mark hard to read.
My solution is the black one. Total opposites in the saturation range, as well as the value or brightness. Remember that you need to be quite a bit above the smallest perceptible difference, in several axes, to make things really readable. And while I am not going to discuss it here, there are even more axes. For example, just changing the icon in the middle of that triangle probably isn't enough to make users aware it has a new meaning. Consider all aspects of the hierarchy of design:
Position > Size > Shape > Contrast > Color > Form
That's the one I use, but any hierarchy will do as long as you understand it and stick to it.
By no means do you want every element to be as visible as possible. Your design will be jarring and unreadable if it is made like this. As designers, we have to decide what needs that prominence (warnings, traffic signals), what is less important, what actually sorta needs to be hidden (disclaimer text can be purposefully hard to notice) and so on.
Start thinking of this every day, and as you drive around. Ever been to a construction zone, where every vehicle was yellow and blinking, and there was such a sea of orange cones that you couldn't even tell where to go? That's over-use of prominent display elements. We all know websites like this also, and get direct mail like this every day.
Let's consider how to use small differences to make things subtle now. A good example is in photography. Check out these photos of a cupcake. It's okay, despite being pretty it's a mix or something so wasn't really that good tasting.
This shows off the same cupcake, saved in four different ways. These are exaggerated for our purposes, and it's a nice, clear shot on a blank (though not yet COB'd) background, so is specifically pretty hard to mess up. This is all because it's a lesson.
The first shot is correctly saved. Enough data is there that you get continuous tone. Edges are correctly dithered so they look like the shape, not pixels.
The next is filled with JPEG artifacts. Here, edges are confused, and do not look natural.
The third has too few colors, and banding of the background (especially) has occurred.
The fourth has enough color data for a dithered pattern, but has been set to an ordered, grid-like pattern so the pixels can be detected.
These are not just things that can happen if you don't know how to use Save for Web & Devices in Photoshop. Banding can occur if the device display or processor has problems, so you need to generally avoid subtle gradients. Even patterned pixels can occur due to display devices, so you need to make sure images are still readable, and avoid graphic text or details that may be lost.
The patterned pixels are worth covering more: Our brains seek patterns, and they will seek the easiest one. We want them to recognize "cupcake" but if there are straight lines, even that form no useful shape, those will jump out. This is why the banding is also bad, because our brains are so keyed to recognize the (relatively) straight edges. Be sure to try out options, and test as much as possible. Especially if you are on weird or cheap or highly variable devices. Mobile phones are getting pretty good now, but TVs and eReaders are still quite challenging.
Let's wrap up with one more set of examples, and some more specific hints to make your type better. Text is one of the more serious uses of all this resolution and legibility related stuff, because letterforms are small, complex and have meaning. They are also recognizable shapes, so people will tend to figure it out, but there's extra workload, which we want to avoid.
Ideally, type is a comfortable size and "perfectly smooth." Naturally, what we mean is not necessarily that it be so sharp you can't see the pixels, but that is be designed and rendered in every way so you don't notice them. I won't get into sub-pixel rendering, partly because you can't do much about it, but do read up on that and look for it.
You can follow along with these concepts on the handset if you downloaded that sample. Here's a tighter sample:
The top left is at natural display size, and the rest of the image is zoomed 800%. Note the notes. Times and Helvetica are fine for print work, and similar resolutions, but fall apart with square pixels, especially at small sizes.
Types for screen display have hinting to make sure full pixels separate each character, remove stress (curves) from uprights, so they display sharply and at full-intensity, have large x-heights, to give more space to detail the letterform. Those with serifs mostly use square serifs, which are also hinted to occupy a full pixel (even if at less than full intensity). Print-oriented type may get muddy, run together, serifs or even major portions can simply disappear. This reduces readability.
But don't simply think this is a lesson to say "use type designed for on screen display." Instead learn why that is important. Use it to decide which face to use. Use it to violate those standards for large type. Use it to come up with new design solutions for fields of color, for fixing that awful logo or figuring out how to get good images to display.
I am still trying to come up with a definition of design, and a series of procedures to assure good design. I am pretty happy with some of my progress. And a key component is understanding. Designers can only make the right choices when they know what the choices are, know why they are making them and can defend the choice when asked.
So if you learned anything today, read up and continue learning to become a better designer.
No comments:
Post a Comment