Luxury or not, the lifelike use of light, shadow, and texture creates a sense of realism in your interface that invites touch. As you saw in Chapter 3, designing a tapworthy touchscreen interface involves many of the same considerations as designing a physical device. When your design supports the illusion of an actual physical object, you create a sense of solidity, reliability, and even affection. The iPhone OS does half the work for you by providing the lifelike physics that makes your lists bounce, your screens flick, or your keyboards clatter. Your own carefully crafted graphics complete the experience. There's more at work here than simple aesthetics though: touch is a powerfully personal ingredient of how we experience the world. Interfaces that invite and respond to touch forge a direct connection that screens mediated by keyboard and mouse do not. Lifelike interface elements on a web page are simply pretty, but on the iPhone they say, "touch me." On a practical level, that realism provides guidance on how to use your app, but emotionally it creates an appealingly personal realism that draws people into your interface.
These nods to realistic light and physics reflect how digital devices are merging with the physical world though certainly not replacing it. At best, iPhone interfaces that strive for "realism" can provide only miniature replicas of real-world objects. You're not going to fool people into believing that they're playing a real piano, holding a hefty book, or scribbling on an actual legal pad. Those are tricks the iPad is better equipped to pull off, thanks to its expansive screen. Simulating a physical object can still be effective and endearing on the iPhone (page 197), but more modest interventions with standard controls can add similarly inviting realism without creating an entirely new interface. Subtle lighting effects on table views and buttons add tapworthy textures even for interfaces that don't directly crib the look of a physical object:
That's subtle lighting effects. Nature has a softer touch than most Photoshop filters, and the most realistic color gradients are the ones you barely notice. Use a gentle radial or linear gradient on elements to suggest top lighting, or simply add a light and a dark line between table cells to create a beveled border. Textures should be similarly subtle, toned-down visual suggestions that seem to catch the light without creating high-contrast creases and bumps. (Pro tip: pull back the opacity of texture graphics to soften their impact.)
Light casts a shadow. When you add a top lighting effect to an interface element, don't forget its shadow below. A 1px–3px shadow is enough to suggest depth without drawing undue attention. Again, subtlety: shadows are never pure black but should be a darker shade of the background color below. (Do this by turning down the opacity of your shadows.) If your background is black, use a lighter color for the drop shadow to give a glow or reflection effect.
Figure 6-6. Adding a color gradient to the top half of table cells gives them a convex rounded appearance. In the Bills on Your Table app, the gradient starts as a darker shade at the bottom edge of each cell and fades to the lighter shade at the center. The app fashions a fold effect between rows by adding 1px white and gray lines respectively to the top and bottom of each cell. The final effect is an undulating sheet of creased paper.
Etch or raise button text. The drop-shadow rule goes for text, too. Instead of painting flat text on your buttons and controls, make labels seem raised or embossed by adding a 1px drop shadow to the text. A dark drop shadow makes a button label look raised, while a light-colored "shadow" creates a highlight that makes it look etched into the button.
Nothing's perfect. The world is full of imperfections, rough surfaces, and blemishes, and the mind naturally rejects fields of flatly uniform color as too good to be true. Even when you're after flat matte buttons, for example, consider adding a light mottled texture (Photoshop's Add Noise filter is a quick and dirty tool for this). If you're after a high-gloss plastic or glass appearance for an element, no texture is necessary, but a slightly textured background helps put your glossy creation in relief. Likewise, take the edge off perfectly square corners and make them rounded.
Crisp borders. Even the "nothing's perfect" rule isn't perfect, and immaculately crisp borders are the exception. Pristinely straight lines are vanishingly rare in nature, true, but sharp borders create clear definition for buttons, table cells, and other elements. The eye catches on jagged lines and slips on blurry borders, so keep borders clean with sharp 1px outlines.
Figure 6-7. Two-dimensional graphics have their place in iPhone apps, too. Sit-up training app CrunchFu (left) adds a translucent background to each list item so that the overall background shows through with a glassy effect. The flat graphics of the Flickr app (middle) combines with lots of white space to create a sleek modern look. TouchOSC (right), a remote control for musicians, uses colorful graphics to create the look of a sci-fi soundboard.
Pause for a quick unreality check: borrowing the look of physical objects and textures can yield a warmly intimate interface, as you've seen, but not every app is after something so cuddly. Unambiguously artificial visuals have a place, too, particularly when you're after a sleek, high-tech look. After all, Apple's own standard iPhone table views and buttons are simple flat sheets that don't resemble physical objects at all, but they're plenty serviceable as we spin through email messages or tap through our contacts. The stuff of science fiction rarely looks commonplace (that's how you know you're looking at the future), and clean, almost sterile screens of two-dimensional graphics and translucent overlays can lend technical luster to an interface design.