Introduction to iPhone Design

This post is the first in a 10-part iPhone Design series featured on Mobiletuts+. Every week, we will dive into a variety of aspects of how to design beautiful and usable mobile interfaces for iOS. To get a reminder each time a new post arrives in this series, be sure to subscribe via email or our RSS feed!

Series Overview

Are you a web designer, excited by the idea of designing iPhone apps, but unsure of how to get started? Or perhaps you’ve designed a couple of apps, but are looking to boost your skills with some fundamental knowledge of why we make certain design decisions for mobile? This series is for both novice and intermediate-level designers who want to make a big splash in the mobile design space!

The topics you can look forward to in this series include both hands-on techniques and examples as well as mobile related design theory. The following is a line-up of what we will cover over the course of this series:

• Designing for the iPhone Audience and the App Store
• How to Use iPhone and iPad Design Templates
• Designing Apps that Use All Available iPhone Functionality
• How to Design for the Different Types of iPhone Apps
• The Mobile Design Process
• The Pros and Cons of Using Apple Default vs. Custom Graphics
• Understanding Your App’s Target Audience
• Icon Design Tips for iPhone and iPad
• iPhone Mockup Tools and the Wireframing Process
• Creating Screenshots and Icons for iTunes

Designing for Mobile vs. the Web

Can’t I just start designing apps? After all, designing for mobile is just designing for a smaller screen, right?

Not really. Designing for mobile is different than designing websites or desktop applications, and the differences are multiplying rapidly as more mobile devices with additional functionality and unique hardware considerations hit the market. Let’s take a look at the differences between designing for web vs. mobile to get a better understanding of how users interact with each platform.

Designing for the Web

For the purposes of this article, the term “web” refers to laptop/desktop-based websites and web applications. When we design for web-based applications, typically the hardware our design will be viewed on is taken for granted. We’re not going to pick up and tilt or touch our monitors or laptops. In fact, the tactile interactions are typically limited to:

• Mouse clicks
• Keystrokes
• Microphone input
• Speaker audio output

Designing for Mobile

Mobile is a completely different beast. Not only are we working with new and diverse hardware, but mobile design also has the potential to impact us in very different ways emotionally. Mobile is a personal and people-centric platform. After all, think of what we call many of these devices: handsets. They fit in our hand, our pocket, or next to our wallet. We use them to make phone calls and to socialize, and they are almost always by our side. These factors all influence our emotional perception of the device.

In terms of hardware capabilities, there are a ton of interaction points that all directly influence design considerations. These include:

• Gesture detection (pinch, flick, drag, etc.)
• Single and multi-touch detection (allows for direct interaction with content)
• On-screen, software keyboard or wireless, physical keyboard
• Microphone input (often used for tasks such as navigation)
• Speaker audio output
• Location-aware information and feedback

Are You a Good Fit for Mobile?

As designers we all have strengths and weaknesses, areas of expertise and areas of disinterest. Before jumping into the basics of iPhone Design, it’s a good idea to look at the characteristics of talented mobile designers.

The good news is you can learn this. The question is, how interested are you in doing so? Designing for mobile devices requires a dedication to user experience beyond anything most have witnessed in designing for the web. Rarely are we creating mobile interfaces that are meant to be pondered and enjoyed purely for the aesthetic value. A great majority of mobile interfaces are task-oriented and user-focused.

The truth is, with most utility-based mobile apps, people aren’t looking at your design for very long. If they are, you’ve done something wrong, and if they can’t figure out how to get around what you’ve done wrong fast enough, they leave. They delete. They then write a nasty review.

Designers who have the easiest transition to mobile are those who embrace a high standard of usability and creativity. The idea that designing for the user experience first somehow deflates creative potential is the exact opposite of reality.

Designing for mobile is one of the most exciting and creative playgrounds around for designers today. It’s literally an open playing field, ripe for innovation. To explain what it’s like to be a mobile designer, it’s best to take a look back into product design history.

Before you could buy a mobile device that performed multiple tasks, we had one product that fulfilled one task. A touch-tone phone, an alarm clock, a flashlight – each of these individual objects required a dedicated product development team, a designer, and a marketer.

Today, of course, all of these tasks can be done on one device. Pretty amazing! What’s cool is the same planning, attention to detail and aesthetic design that went into the phone, clock and flashlight of yesteryear still goes into making of each of these apps today!

Think of it as not just “there’s an app for that,” and instead as “there’s a product for that.” You’re not just designing apps. You’re designing products.

Mobile is a Blank Canvas

What’s most exciting about designing for mobile devices is that most of the time you’re working from a truly blank canvas. Of course, there are fundamental and universal design rules to be considered, but the truth is that many of the design rules and expectations as they relate to mobile are still being defined.

The challenge for designers is to create designs that are true to the user, to the brand, and to the task at hand. Sometimes, that means using standard controls and delivering an interface that is purely utilitarian. At other times, it means ignoring all standards and creating a design that is completely unique. Either way, the user must intuitively understand how to use the app within an instant.

What Software Do I Use to Design Apps?

This is the first question designers new to mobile seem to ask. Good news, pixel pushers: it’s Photoshop! That said, with the proliferation of devices, screen sizes, and resolutions, vector shapes (or vector smart objects) are also a big part of designing for mobile devices.

My personal preference is to create vector shapes in Illustrator, and copy and paste those objects into Photoshop as a shape layer. For vector objects that aren’t overly complex, I prefer this method over using smart objects so I’m not constantly switching back and forth from Photoshop to Illustrator.

We will dive into all of the details of the various screen sizes, resolutions, image file types, and dimensions of tap areas in another post in this series: “How to use iPhone and iPad Design Templates.”

How are Apps Made?

iPhone apps are developed using several different methods. We’ll dive into “How to Design for Different Types of iPhone Apps” in a later post, but, generally speaking, iPhone apps are written in the Objective-C programming language using an Apple program called Xcode. Apple provides all of the development software you need to make an app for free when you register as an Apple developer. However, in order to install the software, you will need an Apple computer running the latest version of the OS X operating system. A further consideration is that in order to actually build and test applications on a physical iPhone or iPod touch device, you will need to enroll in the Apple Developer program and pay an annual $99 USD fee.

Why Are Some Apps Templated and Some Custom Designed?

The apps you see that appear to be “templated” are usually using the default UI elements provided by Cocoa-Touch and are following Apple’s standard User Interface Guidelines. These guidelines define graphical standards and usage patterns for the default UI elements and they make it easy for any developer to build and design an app. Typically, you see a black tab-bar along the bottom and a titled, nav bar along the top. The tabs jump you to different categories of information, while the nav bar helps you navigate within those categories.

The apps you see that do not incorporate the standard UI elements have been custom designed. Almost all casual and serious games are custom designed and some fun tools and utility apps incorporate custom designed graphics as well.

The decision to use custom versus standard graphics is often based on the overall budget available for the project. Just having the budget to design the custom graphics isn’t enough; a budget must also exist for a developer to implement the custom graphics. Custom app design integration can sometimes be very difficult for the developer or development team, and that time can add up!

Given the increased time and money necessary to build a custom UI, it is important to consider how much custom graphics stand to actually enhance the user experience beyond what is available with the default, Apple supplied UI elements. A good example of an app that just does one small thing and really doesn’t need much custom design is UDID Sender. This app grabs your devices’ UDID (kinda like the license tag of your iPhone) and will email it to a developer so you can install pre-release versions of apps for beta testing. This kind of app really doesn’t need custom graphics.

Ready to Dive In?

Great! The next post in this series will let you get your feet wet by playing around with some pre-fab design templates. I’ll talk you through some basics of how to design your first app, including standards, best practices, and basic design rules and theory for mobile.

A Special Offer from Jen Gordon @Tapptics

Send me an email and i’ll send you a 20% off coupon for a years worth of downloads on Tapptics!