The Pros and Cons of Apple Default vs. Custom Graphics

In the first article in this series,”Introduction to iPhone Design”, we briefly discussed why some iPhone apps use Apple templates while others are custom designed. In this article, we’ll take a closer look and discuss why this is an important question from a design, development, and business perspective.

What Are “Templated” Apps?

In this series, I will use the word “templated” as a way to describe, in layman’s terms, the consistent look of the pre-built controls Apple provides for developers in their Interface Builder application. These controls aren’t “templates” in the truest sense of the word, but this is nonetheless a useful metaphor used in this series to compare Apple UI controls to “custom designed” controls.

The image below is a screenshot from Apple’s Interface Builder application. Interface Builder is a tool that developers can use to build apps quickly – without the help of a graphic designer. You can see from the image below that developers do not choose complete “templates” for their applications, but rather they drag-and-drop various pre-skinned “controls” onto the views displayed by the app.

Why Use Pre-skinned controls?

This is a common question from web designers who are accustomed to designing every button, box, and form on a web page from scratch. Why can’t we do that? Why not let everyone just design apps however they want?

A few reasons:

• Apple wanted to encourage developers to build applications quickly and without having to hire a designer, and they also wanted third party developers to create a (mostly) consistent user experience.
• Apple needed to create a design standard to be used for their OWN apps.
• Finally, you can imagine a conversation like this: “Hey we are Apple, the design rock stars, who better to define the standards of mobile design?”

So why stray from the designs that Apple has already created and tested? Let’s just say it’s an evolution of style. Apple’s standard controls and the theory behind how they work is a fantastic baseline. It’s a baseline that works brilliantly for a lot of apps, including their own. However, they too are responding to the demand for graphically rich user interface design. Check out one of their newest apps, Game Center, to see how they are making use of customized controls.

Top 5 Reasons to Use Apple’s Default Controls

Budget

If your project requires staying within a very small budget for production, using standard controls is a good way to keep costs down. Depending on the type of app you are producing, standard controls allow you to create and launch an app without hiring a designer. Just remember, if you are creating a game or a fun tool, there is a good chance the standard controls will not produce the type of results you’re after.

Simple Functionality

Some apps are very simple in the functionality they perform and require very few interaction points. Apps of this kind are often built using default controls. Emoji Free is an example of an app that simply installs an emoticon keyboard on your phone. It would be cool to have custom graphics for this app, but, practically speaking, the app is only opened twice and for only a minute each time to get the keyboard installed. Instead, the Emoji team decided to spend their design budget on cute icon illustrations. A good move.

Serious Tool

If you are building a serious tool, a rich, fun, graphical user interface is the last thing on the users mind when working with the app. Take Apple’s Mail app for example. The app uses all of the standard controls. Does anyone miss the fact that there isn’t a lot of color and texture? Probably not -we just wanna read our email.

Iterative Approach

Some developers want to take a phased, or iterative, approach to their app development process. This includes starting with a very simple build of the app, created with standard controls. If the initial version of the app shows promise and the costs can be justified, then a custom-designed version is often a wise upgrade.

Branding and Visual Metaphors

Many apps that use standard controls do so because they do not have a strong brand, logo, or visual metaphor for the app itself. The image below illustrates this point.

Starbucks is a strong brand with lots of recognizable graphical assets. They have designers on staff and a marketing team in place guiding every move for the brand, including their iPhone app. Even though this app could be considered a serious tool, the user expects to see zero standard controls and the Starbucks brand slathered all over – and they do!

On the other end of the spectrum, you have the HTML Practice Handbook, a great example of an app using standard controls. This app has a clean layout and hierarchy, but does not have a strong brand or visual metaphor. The developer isn’t marketing the “brand” of the app or bringing together a concept around the app, so standard controls make sense.

Top 5 Reasons to Use Custom Graphics

Available Budget

If you can carve out a small budget for graphic design – go for it! The Flash Distillation app below is a great example of an app that could have easily used ALL standard skins and layout tools. Instead, they put a little bit of money into design to spruce up the list views. The well designed grid layout makes skimming the list and reading about acetone and acetic acid a little easier!

Improved Functionality

One simple reason most apps create custom graphics is to meet some functional need of the app. When apps require more functionality than standard controls provide, custom designed and coded elements need to be created to make the app work in the most efficient manner possible. Take Jamie Oliver’s app, chock full of very relevant information that needs to be accessible, without crowding the screen.

The screen on the right displays information about the “Taster Pack” within the Reference Library, as well as buttons on the image that take the user to relevant videos. The screen on the right shows a relevant sub-navigation that applies to each recipe – custom designed and coded.

Attention Getter

One of the best ways to stand out from the competition in the App Store is to have custom graphics. Take the example below. Both apps allow you to record your voice, then warp it to sound like various animals and characters. When a person is searching for voice warping apps, which one will they choose?

Gaming

Games are one area where custom graphics are almost always necessary. In fact, if anyone has seen a game built using standard UI controls please leave me a note in the comments – I want to see it! Most games for iOS are created using Quartz 2d, OpenGL, or Unity3D. Just take a look at this image from the game for the Tron movie. It just isn’t happening with standard controls.

Fighting the Status Quo

What if you have the budget to to challenge the status quo? A great example of a company looking to re-invent the way we interact with our email on iPhone – Humail. According to MacStories, Humail is “not meant for power users who have to deal with hundreds of messages every day. Instead, Humail could be a nice and interesting alternative for anyone who uses email to stay in touch with friends and family, casual users who get a couple of new messages in the morning and that’s it.”

Conclusion

Do what you think is right for your app. Ask yourself:

• What is the competitive landscape? Can you get away with launching a basic version and relaunching a custom version later?
• What will your audience expect to see?
• Will the app greatly benefit functionally by using custom graphics?
• Will the budget I allot for custom graphics pay off?

If you think through these questions you’ll probably find yourself with a pretty robust, strategic plan for making your app a success!