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:
- Installation instructions are available on Axure website.
- 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.
- Create your prototype in Axure (use 1024×768 canvas size for iPad and 320×480 for iPhone)
- Go to Generate menu > Prototype… (F5)
- Select Mobile/Device on the left
- Tick Inclulde Viewport Tag
- 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=”
- Generate you prototype HTML
- Put the app-icon.png file from downloaded archive to the folder with your generated prototype.
- The prototype is ready for uploading to any web server.
How to use the prototype:
- We use our prototype as fullscreen iPad or iPhone web application.
- Open your prototype home page in Safari on device. You should use link without Axure sitemap, just your canvas.
- Here is my iOS Wireframe iPad demo.
- Press export / send to icon in Safari and tap Add to Home Screen.
- Enjoy fullscreen application by tapping an icon on the home screen of your iPad or iPhone.