Useful Collection of iOS Tools and Resources for Designers

Introduction

Apple App Store has just reached 25 billions downloads few days ago and it's still counting to hit even higher downloads. No doubt about it, iOS development has been a hot topic, a phenomenal industry that makes billion of dollars. A successful app requires a good planning.Wire-framing is one of the important processes in planning stage to understand the flow of your app and also to identify possible issue with the usability and potential technical issue. Sketching and prototyping able to let you understand your app better. If it's not your own project, it will be far easier to explain it to your clients as well.

If you're a designer or developer and about to step into iOS development, here are a collection of tools you will need. We don't cover iOS tutorials in this post, but focus on the wire-framing tools and visual resouces that would able to help you to kick start your career. We have collected many sketch pads, UI stencils, toolbar icons and even gesture icons for your presentation, guide or documentation purposes.

Sketch Pad

For myself, I prefer to draw it out with paper and pencil. It's quick to add, modify and erase. If you preferred hand draw, this will be a goodie to you. The following is the collection of printable sketch pad for both iPhone and iPad, choose the one that you like and print it out and start sketching.

• iPhone Wireframe Templates for SketchingSketch Pad from Interactive Logic. There are two layouts, and both layouts are in PDF and Viso (VSD) formats.
• iPhone Idea SheetThis storyboard sketch pad is very useful to show the walk through of a concept.
• iPhone Application Sketch TemplateiPhone Sketch Pad with Grid.
• iPad Idea SheetSame to the iPhone version, This storyboard sketch pad, iPad version.
• iPad Application Sketch TemplateiPhone Sketch Pad with Grid.
• High Level iPad App WireframingA high level iPad App wire-framing with fields to explain each iPad screen in more details.

UI Stencils

UI Stencil is the best tool for quick prototyping and wire-framing. Instead of develop the functionality, you can mock it up quickly with the following stencils:

• iPhone GUI PSD (iPhone 4S)This iOS 5 Photoshop template makes it easy to mockup retina display iPhone apps. This file now includes countless changes and additions to align to iOS 5. Good effort from the team, they recreated everything in Photoshop as fully editable shapes layers (works best with Photoshop CS5).
• OmniGraffle iPhone StencilThis is the ultimate stencil for folks designing iPhone apps. This stencils works with OmniGraffle, OmniGraffle Pro and OmniGraffle for iPad.
• iPad GUI PSD v2Another one from TeehanLax,com, - iPad version. Recreated from sketch, well-layered and vector-based.
• iPad Vector GUI ElementsThis set contains almost all ipad UI elemments, including buttons, tabs, menus, keyboard, balloms, etc etc... very useful for designers and developers, it includes scalable and totally editable vector versions (adobe illustrator)
• OmniGraffle iPad StencilSimilar to iPhone, this is the iPad version. This stencils works with OmniGraffle, OmniGraffle Pro and OmniGraffle for iPad too.
• iPad Sketch ElementsFor rapid prototyping we found we needed a more malleable approach. This is when we turn to the iPad Sketch Elements AI. This collection of common iPad elements in a sketch – like style allows us to easily and quickly mock up flows of custom wireframe screens.

Toolbar Icons

Glyph, symbols and simple icon sets are the popular choice in iOS. In fact, nowadays, a lot of web designers started to include them in web design. The tricky part of using this kind of icons is the find the relevant and the one that best describe the action to avoid confusion. Here we have more than thousands of icons to choose from, and I'm pretty sure you will able to find one that best suit your app.

• iPhone icons
• 200+ Exclusive Free Icons: “Reflection"
• 260 free vectors icons
• Tabs - Interface Icons for iOS & Designers
• 20 Minimal ecommerce icons (vector PSD)
• Token Icons
• Meta Icons
• Free Wireframe Toolbar Icons for GUI designers
• Glyphish icons
• Pixicus Icon Set: 106 Pixel Perfect Icons
• Glyphicons
• gcons - Open Source Vector Icons
• Gentleface
• NounProject Icons

Gesture Icons

Gesture Icons are very useful for wire-framing, presentation and documentations. One of the problems with multi touch system is, we always trying to guess what kind of touch action can be apply to the app, so one of the solution is to have a proper documentation, with the right symbols or icons to indicate what kind of multi touch gesture can be used. The following is a list of gesture icon sets in different styles.

• Touchscreen Gesture IconsA set of well-illustrated multi touch gesture for wireframes, presentations and documentation purposes.
• Touchscreen StencilsGesture Icons with drawing of hands performing common touchscreen gestures like tap, slide, point, drag, pinch, and spread.
• GestureconsHuge collection of vector based icons created to aid in the design, development, implementation and promotion of multi-touch interfaces.
• Touch Gesture ReferenceThe Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces.
• Redesigned Gesture IconsA new proposed system of how multi-touch gesture icons should look like without confusing the users.
• Open Source GesturesGestureML is the world’s first markup language for multitouch gesture-based interactions. It is flexible and extensible, giving you full control over gesture interaction in your apps during development and even after the app is published.
• GesturconsA minimal designed icon set which cover most of the multi touch gestures
• Multitouch Gesture IconsNice illustrated hand based gesture icons for wireframe.

• TAGS:
• Framework
• iOS
• Mobile
• Tools