Composr

With Composr you can use register for a free account, upload image layers of your project, and quickly load them up on your iOS device. It is perfect for client demonstrations, interface architects, or user testing. Client codes make it a snap for customer to download the application, enter a simple passcode you define, and start experiencing your design on the device it was meant for.

Composr works with Composr.co where you can create a free account and begin uploading assets of your project. Once you are signed up create a project to get started. Under a project you can make multiple screens which can be linked together and showcase various parts of your application. On each screen assets can be uploaded, positioned, set to scroll, and action hotspots that can be linked to your other screen designs.

Once your assets are loaded and positioned correctly on Composr.co you can login through the iOS Composr application and view your projects on your device. Links will work showing your client how your application workflow is handled, and the parts of your app that are scrollable can be manipulated just like they would on the final application.

When working with Composr our workflow typically goes like this:

1. We get internal signoff on the design we want to present to our client.

2. We create a new project in Composr at http://www.composr.co

3. We create a new device with the dimensions of the device we are presenting on. If we are presenting on the iPhone select 320 x 480 or 'Apple iPhone' from the dropdown. For iPad enter 768 x 1024 or select 'Apple iPad' from the list.

4. Once our device is created we create a new screen called 'Home screen'. This screen is the starting screen of our application.

5. Back in Photoshop we flatten our layers for the major portions of our application. For example, we'll flatten a UI element that might be a main menu that is always positioned at the top, a side navigation that needs to stay positioned to the left, and a big background image that will be scrollable on its own. We have found in testing that we typically end up in about 3 images if we have things scrolling under one another. However, if the entire screen moves as one piece you will just need to flatten your design into one JPEG. To see an example, check out the demo application by clicking 'View Demo' on the Composr IOS app.

6. Then we upload the images to the screen we're working on and drag them into the main editor area. Using the tools we position and bring the various elements forward or send them back to get them just right.

7. If any of the elements are long and should be scrollable simply highlight them and click 'scrollable'. (Currently, only vertical scrolling is available.)

8. To link from one screen to another (you'll need multiple screens in place before you can do this) select any element and click '@ actions' button. Then click and drag anywhere in the layout to create an link zone. This is the area the user will need to click to link to another screen. Next, set which screen you wish to link to by selecting it from the combo box and click 'Save'.

9. If you wish to have an alternate layout for landscape views click the rotate button in the top right-hand corner of the editor and repeat steps 6 - 8 for the alternate view. Now, when a client rotates his or her phone or tablet the alternate view will be displayed. Otherwise we lock the layout to only show the initial composition.

10. At any time you can load Composr on your iOS device to see how your presentation is looking. To refresh simply log out and log back in.
Essentially, those are the basics. We plan on uploading a couple instructional videos in the next few weeks. Also, because Composr is relatively new we would love to hear any feedback you have on your experience, tools you could use to improve your composition presentations, etc. You can give us that feedback on Composr.co.