A Useful Collection of iPhone/iPad Apps Developer Tools and Resources

by in Toolkits on 12th Apr 2011 · Comments

The iPad was the 2010 must-have gadget of the year, and the iPhone and respective iPod Touch have been incredibly popular over the last few years. It's clear that the success of these devices can be attributed to the endless number of useful, fun, and interesting applications provided by the community. There is no doubt that the Apple platform for these mobile devices has taken the world by storm and allowed us to customize as we see fit.

A Useful Collection of iPhone/iPad Apps Developer Tools and Resources


App development for the iPad and iPhone has become more popular than ever, and tools and resources are being created every day to help the aspiring app developer along. In this post, we'll cover a collection of the most useful tutorials, GUI kits, icon sets, and more for iPad/iPhone development.

Getting Started

iOS is the operating system used to run applications on devices such as the iPhone, iPad, and iPod touch, along with related technologies. It is based on the Mac OS X environment, but specifically made for mobile use. Therefore, development for these apps among Apple's various platforms is much the same, with a few exceptions. In order to get started, one should download the iOS SDK.

The iOS SDK contains the code, information, and tools you need to develop, test, run, debug, and tune applications for iOS. The Xcode tools provide the basic editing, compilation, and debugging environment for your code. Xcode also provides the launching point for testing your applications on an iOS device, and in iPhone Simulator — a platform that mimics the basic iOS environment but runs on your local Macintosh computer.

- iOS Overview

In order to download the latest SDK, head on over to the iOS Development Center: Download iOS SDK 4 (must register).

For application development on Windows, here are a few more options: iPhone Development On Windows - 7 Options.

Tutorials & Guides

In order to help you get started, if you're a beginner we've compiled a list of helpful tutorials for application development. These tutorials and tutorial websites cover everything from setting up your first application with the basics, to advanced and specific techniques and practices.

iPhone Human Interface Guidelines

This is the official document and how-to guide for designing and implementing programs on the iOS platform. This detailed, yet simple step-by-step guide is ideal for any beginner to start creating iPad and iPhone applications.

Human Interface

iOS Application Programming Guide

This is the official document and how-to guide for designing and implementing programs on the iOS platform. This detailed, yet simple step-by-step guide is ideal for any beginner to creating iPad and iPhone applications.

iOS App Design

iOS Development Guide

Here we have the official development guide for programming in iOS and creating applications with iOS. This document is more geared towards the development side of things. The guide works with Xcode, Apple's IDE for working with the iOS.

Development Guide

Your First iOS Application

A step-by-step and very simple tutorial on creating your first iOS application. This tutorial delivers a simple final result, but also covers the basic structure and concepts behind application development in detail.

Your First App

Start Developing iPad Apps

Here is the main center for iPad development on Apple. One can find many of the guides above, plus a lot more. Here is also where the SDK is available for download, and plenty of other resources.

Apple Developer

Web Development For The iPhone And iPad: Getting Started

This post on Smashing Magazine is a great collection of everything from design concepts and inspiration, to final implementation and testing when it comes to iPad/iPhone development.

Smashing Magazine

iPhone Tutorials & iPhone Development Blog

A tutorial blog who's niche focuses entirely on iPad and iPhone development. What's great about these tutorials is that they are problem-specific, and range from beginner to advanced. It can also introduce you to new concepts or practices in app development.

iPhone iPad Tutorials

How to Make an HTML5 iPhone App

While staying up to date and ready for the future in the world of web development, this tutorial creates an iPhone app from scratch with HTML5. This simple Tetris application introduces HTML5 into application development, with code samples and explanation.

Six Revisions

iPhone and iPad SDK Development Tutorial

First Step Towards The App Store

In case you're more the visual learner, there are plenty of video tutorials for iPad/iPhone app development as well. Set up the SDK and get started with application development while following along with this tutorial.

iPhone/iPad Development Tutorial (Introduction and First Lesson)

Similar to the above video, this tutorial offers an introduction to application development, and has a series of more advanced videos that follow.

Showcases & Inspiration

Like with the web, creating applications is no different — design and development inspiration is needed just as much. There are a few showcases available on the web if you're in need of some ideas. Many are independent projects, and of course at the end we have the official Apple app store to browse through.

CSS iPhone
CSSiPhone

Well-Placed Pixels
Well Placed Pixels

Mobile Awesomeness
Mobile Awesomeness

Apple WebApps
Apple Apps

GUI Kits & Vectors

Take these free downloadable vectors for easy designing, either during the wireframing and brainstorming process, or as a final design concept afterwards. All of these PSD's or otherwise are fully customizable to fit your exact needs when designing iPad and iPhone apps.

iPhone PSD Vector Kit

Designed by Renee Rist, and featured on Smashing Magazine, this free GUI kit for the iPhone/iPod Touch comes with six different interface options and several more button elements. It's perfect for any developer or designer who would like to create wireframes for brainstorming, final design concepts, or mockups for clients.

iPhone PSD Vector Kit

iPhone GUI PSD Version 4

This is a collection of several high-quality buttons and interfaces, along with an iPod device PSD for a variety of design possibilities. This customizable PSD can create endless versions when it comes to iPhone interface design and development.

iPhone GUI PSD Version 4

Yahoo! Design Stencil Kit version 1.0

This stencil kit is of high-quality, made by the Yahoo! Developer Network. The kit is available for download for Omnigraffle and Visio, and also as a PDF, SVG, or PNG file. The design elements include everything from ads, calendars, and carousels to buttons, tabs, and pagination.

Yahoo! Design Stencil Kit version 1.0

Ultimate iPhone Stencil

This stencil kit for Omnigraffle contains everything an app designer or developer would need, direct from exact screenshots: backgrounds, title bars, buttons, selectors, and other iPhone UI elements. Everything is fully editable, from text to colors, and more.

Ultimate iPhone Stencil

iPhone 3G Stencil

Another stencil for Omnigraffle, this kit sits on a transparent background and can resize nicely to any size needed. It contains all of the standard elements for an iPhone 3G: buttons, fields, map elements, keyboards, icons and more.

iPhone 3G Stencil

iPad and iPhone Design

This huge stencil kit for Omnigraffle contains everything a designer would need for wireframing and/or prototyping. The kit contains both elements and templates for the iPad and the iPhone. This set was created according to Apple's Human Interface Guideline.

iPad and iPhone Design

FreshBooks iPhone Application GUI

After the Freshbooks application was created, the developer chose to release the stencil kit and design elements used within that specific application. While it only contains those elements found in the Freshbooks application, it is helpful nonetheless.

FreshBooks iPhone Application GUI

iPhone GUI as Rich Symbols for Fireworks

A GUI elements kit specifically made for Fireworks. Initially designed and implemented by Jorge Correa, the project has become a group collaborative collection of rich elements for Fireworks.

iPhone GUI as Rich Symbols for Fireworks

iPhone UI Vector Elements

There aren't a whole lot of GUI element kits available in vector format, although it almost seems to be the most reasonable format for many design elements. Because of this Mercury Intermedia created a GUI kit for the iPhone in vector format, perfect for Adobe Illustrator.

iPhone UI Vector Elements

iPad Vector GUI Elements: tabs buttons menus icons

This kit for the iPad focuses on menus and buttons, but with that focus comes a large variety and quality standard for these specific elements. If you're looking to enhance the navigation of your next app, this is the kit for you.

iPad Vector GUI Elements: tabs buttons menus icons

MobileMe Full GUI Beta10

This GUI kit for iPhone is a complete set, containing every element you could possibly need. It is definitely one of those kits that are handy to have in your library of resources. With each update, elements were added and bugs were fixed, and this is likely one of the most complete GUI kits available.

MobileMe Full GUI Beta10

Sexy Vector Cell Phone

This is a fully-scalable and customizable vector iPhone. This is great for adding elements from another kit to the final design, or for an application website design.

Sexy Vector Cell Phone

iPhone 3G-3GS PSD

Here is another iPhone design by Studio Twenty-Eight, made as a customizable PSD. It is completely made from scratch, and was recently updated with the iPhone 3G and iPhone 3GS versions.

iPhone 3G-3GS PSD

Apple iPad: Fully editable PSD

Here is a fully editable PSD for the Apple iPad, great for final client mockups or just for initial design concepts. The entire design was created with vector masks, so it is fully editable and scalable.

Apple iPad: Fully editable PSD

Apple iPhone 4G .PSD

This PSD is one of the only available design resources for the iPhone 4G. This PSD is a huge resolution graphic (5000x), with several layers (123), and organized into 35 layer groups. It is fully customizable and easy to use for final design mockups.

Apple iPhone 4G .PSD

Printable Stencils

While prototyping on the screen is fun and all, there are also many printable templates available for download in case you're the sketching type. Below are a few of these quality templates. These can be used for anything from initial brainstorming concepts to final design layouts and etc.

iPhone Application Sketch Template v1.3

Above is a wireframing template for designing on paper. Each square is worth 10px, and there are additional blue 'ticks' for guides on the Status Bar, Navigation Bar, Keyboard, Tab Bar, and Toolbar. The guides are for both vertical and horizontal layouts.
iPad Application Sketch Template v1

iPhone Stencil

iPad Application Sketch Template v1

Similar to the above template, and by the same author, here is the equivalent version for iPad design. Again, each square is worth 10px, and there are corresponding marks for common iPad element heights and widths. These templates are both create for designing, or at least brainstorming initial ideas for designing.

iPad Application Sketch Template v1

iPhone Wireframe Templates for Sketching

Here is a set of three identical iPhone templates for sketching, available in both PDF and for Microsoft Visio. While mostly meant to be a printed template, the Visio format allows designers to use as a screen-based wireframe template as well.

Printable iPhone

iPhone App Wireframe Template

This guide doesn't feature any grids or other precise guides, but it does allow for effective brainstorming for both vertical and horizontal iPhone design. This template also has an area for hand-written notes and plenty of margins for side notes and additions.

Full of Design

Icon Sets

Of course, the last thing a good iPhone or iPad app needs are quality icons. Good icons can set the theme of an app's design, and also allow for good navigation. Below are just eight of our favorite icon sets, perfect for the development of these devices.

Free iPhone Toolbar Icons

This free set is licensed under the Creative Commons Attribution-Share Alike license, and is available for personal and commercial use. This set features all the common toolbar icons for any iPhone app. Perfect to use as-is, or as a base for personalized icons.

The Working Group

Icons for Mobile Apps

This set contains 200 icons in the free edition, and 80 more in the premium one. Perfect for both the iPhone and iPad, these icons are relevant for toolbars, menus, and more, and are designed to easily adjust to varying screen sizes between applications.

Glyfish

64 Free Tab Bar Icons

Appbits has created a set of 64 free icons for both commercial and non-commercial apps. These icons work perfectly in normal resolutions and in high-resolution iOS platforms. The set features some standard icon categories such as arrows, RSS, ecommerce, stats, and some more quirky ones like a Pacman character, flames, and movie scene icons.

App Bits

Icons: Free iPhone Toolbar Icons

This set offers several more free icons for the iPhone, available for commercial use under the Creative Commons Attribution 2.5 Canada license. The set features several resizable and scalable icons, plus 60x60 pixel versions as well.

PixelPress

30 Free Vector Icons

This set of free icons has an inset design to them, matching the style and design of many other iPhone/iPad apps, and especially the default tools on these devices. This set is perfect for toolbars, menus, or even other design features throughout an app.

Dezigner Folio

Icon Sweets

Over 60 free vector icons are included in this set. They are perfect for both the iPhone and iPad, or just for web-based use. These icons are available for both commercial and non-commercial use as well, absolutely free.

Icon Sweets

Touchscreen Hand Gestures v2

As both the iPhone, iPad, and a number of other devices are coming out with touchscreens, there are becoming many more icon sets available to fit the user interface needs of these devices. This set for Omnigraffle features a gesture icon set perfect for instruction, or as touch-screen cursors.

Touch Screen Gestures

Vector Gestural Icons

Gesturecons is another set of hand gesture icons, perfect for a touch-screen world. Icons for wireframing purposes are free of charge, while a license for final commercial use is a mere $100 for unlimited projects.

Gesture Icons

Conclusion

With so many resources available today, and even more constantly being published, it can be incredibly easy to get started in iPad/iPhone design, and the results can be rewarding. As we move into the future, mobile devices and operating systems surrounding mobile and touch screen environments are taking over, and our job requirements as web designers and developers are soon to be transformed forever. Application development can be a fun, exciting, and yet challenging way to make your idea come to life in a mobile environment, and to grow your expertise and business.

If you know of any other great resources, whether they be tutorials, books, graphics, or useful tools, please share them with us! We'd also love to hear any additional tips and experiences with iPhone and iPad development from our readers.

Kayla Knight is freelance web designer and developer with several years of experience. In her spare time she enjoys the busy college life, and writes for some top design blogs.