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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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 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.
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
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.
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.
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.
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.
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.
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.
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 60×60 pixel versions as well.
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.
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.
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.
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.
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.