Axure iOS Wireframe Widgets Library

Axure iOS Wireframe Widgets Library

This Axure iOS Wireframe widgets library includes all iOS UI controls, most of them are interactive such as:

  • Modal and popover windows
  • Different scrollable listst
  • Interactive Google Maps with pins
  • iPad and iPhone fullscreen Web Applications
  • Fully customizable and resizable

How to use this library:

  1. Installation instructions are available on Axure website.
  2. We use tricks to make a prototype working as a fullscreen iPad or iPhone web application with nice App Icon on iOS springboard. It makes a prototype as close to real native iOS app as possible.
  3. Create your prototype in Axure (use 1024×768 canvas size for iPad and 320×480 for iPhone)
  4. Go to Generate menu > Prototype… (F5)
  5. Select Mobile/Device on the left
  6. Tick Inclulde Viewport Tag
  7. In the User Scalable field input exacty this line:no”/> <meta name=”apple-mobile-web-app-capable” content=”yes”> <meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”> <style>*{-webkit-text-size-adjust: none; outline: none; -webkit-touch-callout: none; -webkit-tap-highlight-color:rgba(0,0,0,0);} input, textarea{border: 0 !important; background: transparent !important;}</style> <link rel=”apple-touch-icon-precomposed” href=”app-icon.png”/> <meta param=”
  8. Generate you prototype HTML
  9. Put the app-icon.png file from downloaded archive to the folder with your generated prototype.
  10. The prototype is ready for uploading to any web server.

How to use the prototype:

  1. We use our prototype as fullscreen iPad or iPhone web application.
  2. Open your prototype home page in Safari on device. You should use link without Axure sitemap, just your canvas.
  3. Here is my iOS Wireframe iPad demo.
  4. Press export / send to icon in Safari and tap Add to Home Screen.
  5. Enjoy fullscreen application by tapping an icon on the home screen of your iPad or iPhone.

Get Updates Here