Useful Collection of iOS Tools and Resources for Designers

Written by Kevin Liew on 07 Mar 2012
112,759 Views • Mobile Development

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.

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)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 StencilOmniGraffle 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 v2iPad GUI PSD v2Another one from TeehanLax,com, - iPad version. Recreated from sketch, well-layered and vector-based.
  • iPad Vector GUI ElementsiPad 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 StencilOmniGraffle iPad StencilSimilar to iPhone, this is the iPad version. This stencils works with OmniGraffle, OmniGraffle Pro and OmniGraffle for iPad too.
  • iPad Sketch ElementsiPad 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.

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 IconsTouchscreen Gesture IconsA set of well-illustrated multi touch gesture for wireframes, presentations and documentation purposes.
  • Touchscreen StencilsTouchscreen StencilsGesture Icons with drawing of hands performing common touchscreen gestures like tap, slide, point, drag, pinch, and spread.
  • GestureconsGestureconsHuge collection of vector based icons created to aid in the design, development, implementation and promotion of multi-touch interfaces.
  • Touch Gesture ReferenceTouch 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 IconsGesture IconsA new proposed system of how multi-touch gesture icons should look like without confusing the users.
  • Open Source GesturesOpen 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.
  • GesturconsGesturconsA minimal designed icon set which cover most of the multi touch gestures
  • Multitouch Gesture IconsMultitouch Gesture IconsNice illustrated hand based gesture icons for wireframe.
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

3 comments
Desmond Fun 12 years ago
I hope u can list www.iconbeast.com at the above as well.
They have some really great icons for iOS app developers.
Worth a check.
Reply
Kyle 11 years ago
I use Stenzils.com pack for iOS design. it's vector-based and fast
Reply
elidor 11 years ago
you can find ready to use ui/ux for iPhone at:
http://crowdi.me
Reply