Getting Started in iOS User Interface Design

iOS devices are becoming mainstream as avid technology buffs are playing with Apple’s latest technology. The release of the iPad tablet computer along with the HD iPhone 4 retina display has shown an impressive year for company branding.

We’ll be going over a few tips for designing a simple iOS interface in Adobe Photoshop. Out of the graphics software available Photoshop or a similar platform is the easiest option for UI design. With easy access to layers and project icons things become much simpler.

This process is similar to the artist or graphic web designer in that application prototyping requires strong creative energies. To put together an entire storyboard of app screens takes time and patience. With the tools we use today the process is much quicker and simpler than ever before.

Starting Off Generic

Designing for iOS isn’t much different than designing for the web. In fact it’s a bit easier since you’ll be working on a smaller screen with specific access points. Practicing with the native iPhone graphics is the easiest path for newbie designers.

Included is a small list of bells and whistles native to the iOS interface. These are the buttons and toolbars you see most commonly around the App Store.

These elements are commonly found inside Apple’s Interface Builder, which is software used to design resources for iPhone and Mac OS X apps. This is the software application developers can use to connect iOS graphics to backend Objective-C code.

Below is a small list of interface elements. This is not an exhaustive collection but should give you an idea of the basic starting points.

• status bar
• navigation bar
• tabs/tab bar
• sliders and switches
• input fields
• table lists

Many of these are available for free as iPhone and iPad UI kits. They will include layered documents for Photoshop and Fireworks containing all icons and page elements possible. Most developed UI templates will also include a graphic relating to an actual iPhone, screen sized to 480 x 320.

App Prototyping

Before opening Photoshop it can be handy to spend some time sketching out your idea first. This could be on a simple piece of paper or laid over an entire spread. This step all depends on your hand-drawn artistic abilities and how comfortable you feel.

Illustrators will generally sketch out frames for each piece to an iOS application. These are also known as views and can immensely help the app developers down the line by having a contained set of templates. If you are less artistically gifted and wish to jump right into the technology then check out a sample iPhone UI kit. Working from the newest releases Teehan+lax has a fantastic iPhone 4 GUI PSD release for free.

The file includes everything you would expect to find inside a standard application. Once downloaded I’d recommend saving the initial template in a new directory where it can be used as a reference point.

Prototyping is much simpler when you can work through a diagram similar to the iPhone design, included in portrait and landscape. The same goes for iPad kits which include the same framing style.

Best Practices

The suggested practices towards creating individual app prototypes is to save separate view states into a new directory. As an example you could create a new directory labeled myApp and inside create a folder named views.

Within here you can save individual .psd files labeled after which content they contain. This could range to include home.psd or settings.psd. After a bit of work you’ll notice creating complementary views becomes easier once the initial design is set.

Also it’s important to save copies of each file as a .jpg or .png. This alternate is beneficial to those who do not use Photoshop or would be too confused to mess around with layered files. When working on a project with many developers and closing deadlines this can become especially time efficient.

Example iOS UI Sets

Below are just a few examples of some great starter kits. These will include all of the core functionality which lives naively in Interface Builder. Note iOS3 and iOS4 do contain differing graphics as the screen resolution has been updated.

iPhone GUI PSD Version 4

iPhone WireFrames & Stencils

Fireworks toolkit for iPhone UI

iPad GUI Kit(PSD)

iPhone PSD Vector Kit by Smashing Magazine

iPad vector GUI Elements

These are just some of the best tips towards getting into iPhone app design. There’s a large world of mobile graphics out there and iOS is a hugely popular operating system. As the mobile app market advances there will be a huge spike in demand for mobile app UI and icon designers.

Getting started is always the hardest step but returns the greatest rewards. Pick up a few of these PSD kits and mess around for an hour or two to see what you can create. Often times practice does make perfect and designing for the iOS platform can be not only fun but a truly fulfilling learning experience.