• Feed RSS

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

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

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.




Written by: Kayla Knight for Onextrapixel - Showcasing Web Treats Without A Hitch

"