Great, so you've decided that your app is going to be charming and gregarious. As you translate this broad personality statement into actual pixels, one route is to build a completely custom interface from top to bottom, like the Voices and iShots examples shown in What's Your App's Personality?, an approach you'll learn more about later. The easier road is to dress up standard iPhone elements, giving them a facelift with colors and images that match the personality you're after. By tinting toolbars or outlining table cells and buttons with specially crafted graphics, you can transform the iPhone's stodgy blue and gray standbys into something dramatically different.
This makeover approach gives your interface a fresh identity that, so long as you're only tinkering with color and adding background images, still offers your audience the easy familiarity of standard controls—nothing new to learn. Even so, there are a few conventions to observe and gotchas to tiptoe around:
Figure 6-2. Wine Steward uses good old table views, but creates a vintage ambience by draping a backdrop image across the screen, with a parchment graphic in the background of each table cell that makes each entry appear to be written on an aged wine label. The burgundy-tinted navigation bar maintains the app's wine flavor.
The carpet should match the drapes. If you tint one toolbar, tint them all. The navigation bar, toolbar, and search bar should all get the exact same color treatment, giving your content a consistent frame in the identical color. (Tab bars, however, should always remain black, a convention that gives them a sturdy authority across all apps.) Ditto for transparency; if you choose to make any of the toolbars translucent, follow through for the rest. The status bar figures in here, too. The iPhone OS allows apps to have a black or white status bar, or you can make it translucent to let a background color shine through. If you choose a dark color for your navigation bar, make the status bar black; for light colors, make the status bar white. (Otherwise, your app looks like it's growing out its roots after a bad dye job.)
Don't be garish. Be tasteful and understated in your toolbar color choices. Brassy bright colors create a distracting glare, drawing the eye away from the main event. It's a mortal sin in interface design to let your app's interface chrome upstage the content. It's fine to use bright colors in toolbars when they blend with similarly bright colors in the rest of the app; just remember that the operative word here is "blend."
Go into the light. The standard toolbars have that signature Apple gloss, painted with a color gradient that gives them a rounded, top-lit appearance. When you add a custom color to toolbars, the gradient effect sticks around, now tinted with the new color—no muss, no fuss. With a little custom code behind the scenes, however, your app can replace that gradient with a graphic, perfect for adding some subtle texture to your toolbars. If you do that, just be sure that your brand new toolbar maintains the original gradient's illusion of a top-down light source. Details like this seem small but work quietly to maintain the visual consistency of the standard controls across apps. You'll find more tips for managing realistic light and texture in Keep It Real.
Clever adaptation is charming; too clever is confusing. Making slight tweaks to familiar icons or controls can give your interface a jaunty, playful independence. These interventions should be small, though—a wink more than a broad overhaul. The Meebo instant messaging app replaces the dots of the standard page control with tiny speech bubbles, a clever hint that you're paging through different chat conversations. The built-in Notes app replaces standard toolbar icons with its own hand-sketched versions. In both of these examples, the essential form of the controls remains intact and immediately recognizable. But if you stray just a few degrees too far, you risk making a standard control unrecognizable. Color and form are important: the standard blue arrow of the detail disclosure button, for example, tends to lose its significance if you drain it of color or remove its outer border. (Henry Ford swoops in again with an admonition from 1922: "There is a tendency to keep monkeying with styles and to spoil a good thing by changing it.")
Figure 6-3. The blue arrow (the detail disclosure button) signals that tapping will take you to a detail screen for the selected content. For better or worse, many apps set up this button to take you to a different view than tapping elsewhere in the same cell, so it's important that it stand out as a separate button. Things (left) uses the standard blue button to good effect, but Reeder, an excellent app for reading news feeds, uses a custom version. Without the signature outline and blue color, Reeder's custom button blends in too much. It's not clear that tapping the button will take you to a different view than tapping elsewhere in the table cell (which it does).
Contrast is your friend. Designers love gray text—we just can't help it. Gray is pretty. It's subtle and has an elegance that brutal black does not. But friends, it's not easy to read. If your audience has to squint to read the screen, your gray text isn't doing its job. The iPhone's small screen and frequently distracting environment put a premium on effortless reading and scanning, the crucial core of the glance test. Ebony and ivory, baby: favor black and white for text, and go with high contrast colors for other important interface elements. (After choosing your color scheme, test early designs with the "White on Black" setting turned on in the General→Accessibility screen of the built-in Settings app. This option for the visually impaired inverts colors for higher contrast, like a photo negative. Your app should be easy to read with this setting both on and off.)
Be frugal with fonts. Standard iPhone Helvetica fits the bill in nearly every case; stifle the instinct to stray to other typefaces. The navigation bar in particular is sacrosanct: with the exception of logo graphics, always use Helvetica for screen titles. The navigation bar is such a fundamental part of the interface that it feels like part of the overall iPhone system; consistent use of the Helvetica system font is always the right thing to do there. Elsewhere, using a different sans-serif font (Arial, Verdana, or Trebuchet) in place of Helvetica just feels weird on the iPhone; a lateral shift that succeeds only in making your app seem like it's not a proper iPhone citizen. Changes to more boldly different typefaces, however, can be appropriate under specific circumstances. Serif fonts (Georgia or Times) work well for displaying long-form text like news articles or ebooks, giving apps a stately, traditional feel. Marker Felt, the iPhone's faux handwriting font, is just fine for notepad and grocery-list apps when you want to display users' personal notes in a casual scrawl. Just know that Marker Felt, like most script typefaces, can give your app a kindergarten feel that might not fit the personality you're after. That didn't stop Apple from using it in the built-in Notes app, though, and the font does have an unabashedly personal feel. Proceed with caution and taste.