Apple has been a leading industry in the mobile world for years with its iPhone and iPad series. Despite the hype it can create with every official release like iOS 5, it’s also holding a large portion of market shares in the mobile platform, and this is probably the reason that most clients will want their app to exist in the Apple’s app store, thus becoming the reason for developers to learn and build the iPhone app.

(Image Source: Apple Developer)

The good news is, iPhone application development is not as hard as you might think, and this post exists as a comprehensive guide to walk you through the complete process of building an application for iPhone. We’ll be discussing the reasons, phases, and tools for developing the app, and ultimately you will follow an easy tutorial to design the basic iPhone application using the Xcode 4.2.

So whether you’re learning for business or you just have an amazing app idea that might make you a millionaire, let’s get started on building your first iPhone app!

Note: You will need a computer with Macintosh Operating System (Mac OS) for Xcode installation, application development and app submission, there’s no way you can do it on Windows legally.

Why Develop for Apple?

I see this question asked frequently so I want to explain why you should be interested in iPhone development. Just like I’ve stated in the introduction, iPhone currently holds a large portion of market shares in the mobile platform. I think this reason should be enough for you to learn to develop the iPhone application as whether you’re developing for yourself or clients, most people probably hope their app can be accessed by many people in the world.

From the viewpoint of development, Apple likes things simple, and this applies to their products and frameworks. iOS is the operating system which powers all Apple’s mobile devices. These include iPod Touch, iPhone, and iPad. So keep in mind when you’re developing apps for iPhone, you could be developing for all of other devices with the iOS!

Besides, what makes the above feature even greater is how much the coding work can be saved. When you write code for iPhone application you’re using the same programming language for all Apple’s computing devices. That means when you’re developing the iPhone application, the app can later be integrated into iPad and even Mac.

Objective-C is the core programming language powering all of their frameworks. Along with Objective-C, you will also develop iPhone app with the Cocoa Touch, the programming framework driving user interaction on iOS.

This is all just a bit of information to get you started on iPhone app development. The development is quite a complicated process but relax, take it slowly. So the reasons are here, and the decision is yours. Whether the answer is yes or not, you can always hop right into the next topic: designing apps for iPhone.

Planning your iPhone App Structure

In the standard ideology of creating an iPhone app you’ll want to go through a few phases. The first phase includes planning and sketching. First of all you need to have an idea for what your app is going to do. Why would people want to download it? And what features do you want to include? This is the most important phase as if you do it right, you’ll save a lot of confusion and troubles in the coding phase. Worst, it gets you back to the drawing board.

(Image Source: Cultured Code)

I recommend to sketch some rough ideas for a few pages (or views) of your application. Just draw a rectangle shape, maybe 5 or 6 shapes on a sheet of paper, then draw the features you want on each view of your app. You can think of views like different pages in a website. Each view will offer different functionality such as a login form, a list of contacts, or a table of data.

Below I’ve constructed a brief collection of the different UI bar elements:

• Status Bar – Displays device’s current battery level, 3G connection, bars of reception, phone carrier, and a whole lot more. It’s recommended that you always include these elements.
• Navigation Bar – Gives your users the option to navigate between page hierarchies. This often includes a button on the left side of the bar to enable the user to return to the previous app view.
• Toolbar – Appears at the bottom of the iPhone app. This will hold a few icons tied to some functions such as Share, Download, Delete, etc.
• Tab Bar – Very similar to the toolbar, except now you’re working with tabs. When a user clicks on a tab icon it’ll automatically be highlighted, and it’ll display a glossy hover state. This bar is used to switch between views instead of offering direct functionality.

This list only contains the toolbars you could find in most apps. There are some other views and styles to consider, which you can find them in Apple’s iOS UI Element Usage Guidelines. I highly recommend to refer to this documentation when you have doubts about iPhone’s UI elements.

In the interest of time I won’t be describing every UI element. There are too many elements to consider, and you won’t end up using all of them in your single app. But as you sketch out your views, you can draw inspiration from the guidelines suggested above, and other iPhone apps you’ve enjoyed using them.

Designing Photoshop Mockups

I’m assuming most of you are fairly comfortable working with Adobe Photoshop. It is the premiere software for creating graphics for website, banners, logos, and mobile mockups. Designing graphics for the web is a fairly straightforward process, but it’s a bit more complicated when it comes to iPhone app design. If you’re looking to build an app you really should create pixel-perfect mockup designs from the start.

To begin, we should discuss Photoshop settings. Since we’re designing for iPhone we need to consider 2 different design styles. The regular iPhone display is 320 x 480 pixels. However the iPhone 4 includes a retina display which doubles the amount of pixels within the same screen size. So you should double the resolution to 640 x 960 pixels and design your layouts to this standard.

This means you will also need to create 2 sets of icons for your mockups. Originally icons would be set to 163ppi but you’ll need to include icons with 326ppi for iPhone 4. The icons are traditionally marked with @2x at the end of their file’s name, such as “icon@2x.png“. To learn a bit more about this I recommend Smashing Magazine’s article, iPhone 4 Retina Display: Techniques and Workflow. It includes some great tips for Photoshop users to build and scale icons properly.

Now let’s optimize our new document settings. First we’ll need to edit some preferences, so access to Photoshop > Edit > Preferences > Guides, Grid and Slices. We’ll be setting our Gridline every 20px with subdivisions at 2. When designing for retina display 2px line will display 1 point on the screen. This is an important rule you need to keep in mind for scaling down your app.

I tend to find it easier to build my designs with higher resolution then scale them down, but you can try both methods and see what fits you best. We’re using 640 x 960 pixels at 326ppi – save this as a custom preset if you think you’ll use it frequently.

Building with Template Elements

Now you can use the Photoshop to create a pixel-perfect layout on your own, but this proves to be a very exhausting and tedious work. I will recommend the iPhone 4 GUI PSD by Teehan+Lax. It includes all of the design resources you need to build any standard iPhone app layout. After the download finishes, unzip your new file to get the PSD file, and just open it with Photoshop.

(Image Source: Teehan+Lax)

This is a huge file with just too many elements. To make things easier you can press v activate the Move Tool and click on the “Auto-Select” on its option bar, then select the “Layer” rather than “Group”. With the settings, you can click on any element and Photoshop will bring you to its corresponding layer!

Feel free to play around with the mockup, or you can even create your application’s prototype from the mockup. Depending on your app you could include a slew of features within the core area, many of which you could find in this PSD file. It’s also possible to go to these elements’ layers and edit the fonts, gradient colors, and other design styles as well. Just make sure you don’t resize anything since all the bars and UI elements are set to default standard sizes.

Developing Apps in Xcode

The developer tool for iOS and Mac OS X programming is named as Xcode. If you’re running OS X Lion you can find Xcode and all applicable packages for free in the Mac App Store.

After the installation is completed, launch the Xcode and its welcome screen should come up. From here you can load an older project or choose to make a new one. For now you need to click “Create a new Xcode project“, then the template window will come up with a few options. Under iOS > Application, click on “Single View Application” and hit “Next”. You can give the new app a name, such as Test (preferably no spaces), then on the Company Identifier, type in any word such as mycompany, and finally pick a directory and hit “Save”.

Xcode will build the file directory and send you into a new window for working. You should see a lot of file options listed, but the folder which is named after your application is the primary focus.

With the new Xcode 4.2 you have two options for designing front end elements. The classic xib/nib format is standard to Mac OS X and iOS apps, which requires you to design a new page view each time. However, as you are creating more views in a single app the amount of nib files can become far too overwhelming, so a new storyboard file holds all of your nib views in a single editor pane. From here you can remove and add UI elements and features with ease.

Additionally you’ll come across .h and .m files in the same folder group. These are short filenames for header and implementation code. These files are where you write all the Objective-C functions and variables required for your app to run. It may be a good idea to explain how Xcode works with MVC (Model, View, Controller), which is the reason that we need 2 files for each controller.

MVC Programming Hierarchy

To understand how the app works you’ll need to understand its programming architecture. With Model, View, Controller (MVC) as a foundation, Xcode can separate all of your displays and interface code from your logic and processing functions, and there isn’t really another option to choose. MVC may seem confusing at first but if you tried to understand it and start building a few basic apps you’ll come to love the structure.

(Image Source: Esri)

To make it easier to understand, I’ve presented each object in the list below:

• Model – Holds all of your logic and core data. This includes variables, connections to external RSS feeds or images, detailed functions, and number crunching. This layer is completely detached from your views so that you could easily change views and still have the same data working.
• View – A screen or display style in your application. A table list, profile page, article summary page, audio player, video player, these are all examples of views. You can change their styles and remove elements but you’ll still be working with the same data in your Model.
• Controller – Acts as an intermediary between the other two. You connect objects in your view to a ViewController which passes the information to and from your Model. So in this way it’s possible to have a user tap on a button and register this in your model. Then run a log out function and through the same controller pass a message “successfully logged out!”.

So basically your model holds all the information and functions that you’ll need to display somewhere onscreen. But models cannot interact with the screen, only views can. Views are mostly all visuals, and it can only pull data through a ViewController. The Controller is actually a much more refined way of hiding your back end data from the front end design. In this way you can renovate the design several times over while not losing any functionality.

With this knowledge it shouldn’t be hard to begin building your first few apps. As mentioned earlier, Objective-C is the core programming language you’ll be using to develop the app. It’s built on the C language with updated syntax and a few additional paradigms. You’ll need a lot of time to get familiar with the language, but for the beginner lesson I recommend the tutorial series from Mobiletuts+.

Design View with iOS 5 Storyboards

Now that we’ve looked into the technical aspects of an application, we should spend a bit of time designing the interface. I’m assuming that you’ve kept the “Storyboard” option checked when creating the project, which means you can find a single MainStoryboard_iPhone.storyboard file somewhere in the folder group located on the left side of the window. Click on the file to select it and open the view.

A new sidebar should appear directly to the right of the folder group. This is called the Document Outline and it’s a sort of quick preview method for checking all of the available views in this storyboard.

We want to start by adding just a few page elements into our view controller. We need two different elements: a Navigation Bar and a Tab Bar. Before we grab them, access to the Attributes Inspector (View > Utilities > Show Attributes Inspector) on the right side of the window, then look for the Status Bar label. By default it’s set to Inferred which uses the standard iPhone status color, but you can also choose Black or Translucent Black if your app design fits the color better.

The Objects Library

If the Utilities pane at the right side of the window isn’t visible, you can enable it by access to View > Utilities > Show Utilities. On the Utilities pane, look at the bottom for a panel called Object Library. It got a drop-down menu with the “Objects” as the first item of the list. If you couldn’t find it, you can select View > Utilities > Show Object Library.

From the drop-down menu of the Object Library, find and select Windows & Bars. Now click on the Navigation Bar, drag it into the view window and position it directly under the black Status Bar (with a battery icon). We can customize the bar’s title description now. Double click on the text which currently reads “Title“, and you will see a label named “Title” on the Utilities pane, which you can change the title description to “Test” from there. Hit “Enter” to witness the change.

Again in the Windows & Bars panel, scroll down to find the Tab Bar, then drag it into the view window and place it at the very bottom of your app. By default these 2 elements look fantastic.

Now maybe you want the Navigation Bar’s gradient to match the tab bar at the bottom, and to do this you can click on the Navigation Bar and look to the right at Attributes panel in Utilities pane. The very first option is called Style, which is set to Default. Change the Style from Default to Black Opaque and we’ll have a matching color set!

Let’s also add another tab button in the bottom bar of the app. Move your mouse cursor to the Windows & Bars panel again and scroll down to Tab Bar Item, directly underneath Tab Bar. Drag this into your app window and place it in the middle of the 2 existing Tab Bar buttons. If you double click on this new button you can see some additional options in the Utilities pane, you change the item’s image and title from there. For example, I have changed the title to “Bookmark” for the newly added Tab Bar item.

So this is a brief tutorial on designing views within Xcode. It’s not a terribly difficult process, but it will require a bit more time to get used to the interface. Play with a few more elements if you feel comfortable, also you can head to Apple’s iOS Development Resources for more learning resources, it’s never a bad thing to discover more!

Stay Tuned for Part II

This concludes our first part of the guide for iPhone app design & development. In the next part we’ll delve a bit deeper into Objective-C and Cocoa Touch, and you’ll ultimately learn to build a functioning iPhone app, stay tuned!

iOS Design Gallery

For designers out there I’m also hoping to bring you some inspiration, so I’ve included a list of awesome iPhone app views below. The list features a large variety of inspiring app elements which you have probably never noticed before. Feel free to share your ideas, app views or questions in the comment section below, thank you!

Race Splitter

Satisfaction Remote

Tweetbot for iPhone

Reeder

Foursquare

MailChimp

Instagram

Joystiq

Piictu

Darkness