Jump to content

How to Design a Unique Visual Identity for Your iPhone App -- Vote for Your Favorite Tips

+ 7
  joshclark's Photo
Posted Jun 18 2010 09:24 AM

My new O’Reilly book about iPhone user experience—Tapworthy: Designing Great iPhone Apps—hits bookshelves in the next few days (the ebook is already available). I thought it’d be fun to share a few of the book’s big-picture design ideas here. Tapworthy is a different kind of iPhone book. It’s not a code book and not a marketing tome; instead, it describes how to “think iPhone,” examining how the device’s ergonomics, psychology, and culture affect design considerations. That means it’s not (only) for geeks but for everyone involved in the design process, including developers, managers, marketers, and clients.

Chapters six and seven of Tapworthy review how to craft a unique visual identity and how to introduce your app to users. From those chapters, I’ve distilled ten tips for doing just that. Let's make things interesting: I’ve posted each tip as a separate reply below, so you can vote up the ones you think are most interesting/useful and of course add your own tips to the mix. Have at it!

13 Replies

+ 3
  joshclark's Photo
Posted Jun 18 2010 09:27 AM

Choose a personality.
Don't let your app's personality emerge by accident. Before you start designing, choose a personality for your app. The right personality for the right audience and features makes an app irresistible and creates a bonafide emotional connection. Tapworthy designs have the power to charm and beguile.

Posted Image Posted Image
Voices (left) has a Vaudeville personality appropriate to a funny-voices novelty app. iShots Irish Edition (right) creates a gritty dive-bar ambience for its collection of drink recipes.

+ 2
  joshclark's Photo
Posted Jun 18 2010 09:29 AM

Favor standard controls.
Because they're commonplace, the standard set of controls is sometimes dismissed as visually dull. Not so fast: commonplace means familiarity and ease for your audience. Conventions are critical to instant and effortless communication. That's why road signs around the world are standardized. Drivers hurtling down the freeway shouldn't have to do double takes to figure out what a sign means. When instant and effortless communication is critical, conventions are a designer's best friend. Buttons, icons, and toolbars are the road signs for your app, and iPhone screens that use standard controls have a no-nonsense seriousness that lends them a similar authority and don't-make-me-think understanding. Before creating a brand new interface metaphor or inventing your own custom controls, ask whether it might be done better with the built-in gadgetry.

Posted Image
No matter what language you speak or what country you're in, the familiarity of standardized road signs give drivers clear and unambiguous instructions. Standard controls in iPhone interfaces lend similar authority to the apps shown here. From left to right: Now Playing, Bento, and the built-in Settings app.

+ 1
  joshclark's Photo
Posted Jun 18 2010 09:30 AM

Add a fresh coat of paint.
Standard controls don't have to be dreary. Use custom colors and graphics to give them a fresh identity. This technique requires a light touch, however; don't distract from the content itself or drain the meaning from otherwise familiar controls.

Posted Image Posted Image
Wine Steward uses standard lists (known as table views in iOS) but creates a vintage ambience by draping a backdrop image across the screen. The app adds a parchment graphic to the background of each table cell, making each entry appear to be written on an aged wine label. The burgundy-tinted navigation bar maintains the app's wine flavor.

+ 3
  joshclark's Photo
Posted Jun 18 2010 09:31 AM

You stay classy.
Luxurious textures applied with taste increase your app's perceived value. The same sumptuous materials of beloved personal totems—a leather-bound notebook, a glossy gadget, a retro timepiece— can likewise be put to good use in your interface to conjure the same attachment.

Posted Image Posted Image Posted Image
Organic textures add a sense of luxury to the design. From left: iHandy Carpenter, Cinder, and Cross Fingers.

+ 1
  joshclark's Photo
Posted Jun 18 2010 09:32 AM

Keep it real.
Realistic lighting effects and colors create elements that invite touch and even create an emotional attachment. They also provide subtle guidance about what your audience can interact with.

Posted Image Posted Image
In the Bills on Your Table app, adding a color gradient to the top half of table cells gives them a convex rounded appearance. 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, a texture that invites touch.

+ 5
  joshclark's Photo
Posted Jun 18 2010 09:34 AM

Borrow interface metaphors from the physical world.
Lean on users' real-world experience to create intuitive experiences. People will try anything on a touchscreen, for example, that they'd logically try on a physical object or with a mouse-driven cursor. The card decks, spinning dials, push buttons, sliders, and light switches of the iPhone's standard toolkit require no learning; we already know how to use them thanks to our experience with their real-world counterparts.

These physical look-alikes are most effortless when the interface is the same size as the gadget that inspired it. When iPhone apps mimic a real-world handheld device, for example, the iPhone actually seems to become that device, and you inherit the time-tested ergonomics of the original, too.

Besides these practical benefits, using an everyday object as an interface metaphor imbues an app with the same associations that folks might have with the real McCoy—a shelf of books, a retro alarm clock, a much-used chessboard, a toy robot, and so on.

Posted Image Posted Image Posted Image
When apps clone physical objects in both size and appearance, their operation is immediately obvious. Here, PCalc, Guitar Toolkit, and Rowmote create intuitive interfaces by mimicking a calculator, guitar tuner, and Apple remote control.

0
  joshclark's Photo
Posted Jun 18 2010 09:35 AM

Don't be afraid to take risks.
Make sure your interfaces are intuitive, sure, but don't be afraid to try something completely new and different. Designers and developers are hatching fresh iPhone magic every day, and there's still much to explore and invent. While you should look hard at whether you might accomplish what you need to do with standard controls, it's also worth asking, Am I going far enough?

Allow yourself to explore the possibilities, and don't be afraid to experiment with offbeat concepts. How about a singing robot? When developer Russell Black and designer Lily McDonnell created a sophisticated sound synthesizer for the iPhone, the predictable thing would have been to use a keyboard for the interface. Instead, they created Bebot, a crooning cartoon robot. You tap or slide your finger around the screen and Bebot sings and warbles. Under this sweet exterior lurks enough sound-engineer nerdery to engage serious musicians and sound enthusiasts. Yet the adorable interface makes the app accessible to mere mortals, a unique-to-the-iPhone musical instrument.

Posted Image
Tap and slide across Bebot's screen to make the animated robot perform your synthesized tune.

+ 3
  joshclark's Photo
Posted Jun 18 2010 09:36 AM

The app icon is your business card.
The icon carries disproportionate weight in the marketing of your app, and it's important to give it disproportionate design attention, too. Think of the icon as a packaging label—it's great if it's pretty, but it's even more important that it be descriptive and identifiable at a glance, for both branding and usability. Avoid cryptic or inscrutable imagery, and don't be overly clever with the visual metaphors. More commerce, less art. Make your app icon a literal description of your app's function, interface, name, or brand.

Posted Image Posted Image
App icons for Cellar and Canabalt borrow their colors, styles, and textures directly from the app interface to create recognition and fidelity.

+ 4
  joshclark's Photo
Posted Jun 18 2010 09:38 AM

Use a dull launch image.
While your code fires up at launch, the iPhone displays your app's launch image. Disguise this image as the app background for a faster perceived launch. This approach creates the illusion that the app has started immediately—you already see its interface—and that it's already hard at work loading your content even though the code hasn't even started rolling yet. After the app finishes loading for real, it replaces the placeholder launch image with the app's first screen, as if the app has filled in the content of the previously empty screen. Always cultivate the illusion of suspended animation when switching in and out of your app.

Posted Image Posted Image
The launch image should depict an empty version of the app's first screen. The launch image for the built-in Weather app includes all the interface details except the content itself.


Contrast this faux interface strategy with a launch image that shows a lavish splash graphic featuring an illustration or logo. The second approach feels like an ad. While a fake interface image suggests, "I'm working for you," the logo says, "I'm talking about me." The practical result is the same—with either image, it takes the same amount of time to load—but the psychological difference is pronounced. The bland interface image makes the app feel like it's loading faster. It also suggests more respect for the user's task than a marketing message, no matter how lively that message or graphic might be.
0
  joshclark's Photo
Posted Jun 18 2010 09:39 AM

Be kind to new users.
Provide simple welcome-mat pointers for first-timers. Beware of more complex help screens; they're warning signs of an overcomplicated interface.

For example, Articles is a Wikipedia reader that has nothing to display until you search for your first article. Likewise, CardStar is an app that manages chain-store membership cards, but there’s nothing to see before you add your first card. In both apps, the first screen is empty, but they add welcome mats with quick notes pointing out how to get started. If your app requires action to start adding content to the first screen, use a welcome mat to hint where to begin.

Posted Image Posted Image
The first screens of Articles (left) and CardStar (right) are empty on first launch but add quick tips to help you get started.


Tapworthy

Learn more about this topic from Tapworthy.

So you've got an idea for an iPhone app -- along with everyone else on the planet. Set your app apart with elegant design, efficient usability, and a healthy dollop of personality. Tapworthy takes you from concept to polished interface design with plain-spoken principles and a rich collection of visual examples for designing exceptional interfaces for the iPhone and iPod Touch.

See what you'll learn

0
  Bright Choice's Photo
Posted Sep 01 2013 11:00 AM

Thanks for your beautiful ideas which will surely boost the new talent who posses the vision of creating such Apps and come up with more beautiful, knowledgeable, work oriented, usable and interesting apps in nearby future. The best part which I liked is the visual part designing.
0
  goldy1212's Photo
Posted Jan 28 2014 01:41 PM

Thank you for an informative post, it was really interesting! Diamante encrusted shoes
0
  fenny's Photo
Posted Mar 27 2014 10:56 PM

we shouldn't ignore the daily security in our life such as the GPS tracking or other method used by someone to steal our privacy. Therefore camera jammers with a good function of cutting off cell phone signals as well as other frequency bands signals can help to create the security system to protect us. And then we can enjoy the quiet and peaceful environment.