Use Composite to Improve Your iOS Design Workflow

Composite is an app for the Apple iPhone that connects with Photoshop (CS6+) so you can basically mirror your app design really easily. But that’s not all it’s capable of, what makes Composite special is that it is also capable of creating clickable prototypes right on the iPhone from Photoshop.

It uses your network for this so that means that your iPhone and Windows PC or Mac have to be on the same network for it to work. Also, if you’re on Windows, make sure you have Bonjour installed to make it work.

On the downside, the app costs $9.99 but it’s worth it and in this blog post I’ll explain why.

Advantages of Composite

There are other apps like Composite out there, for example: Skala preview for Mac. I’m not saying that Composite is better than Skala or that Skala sucks but Composite is compatible with Windows and doesn’t require a desktop app which is great news for Windows users.

Composite can be used for 2 use scenarios.

  • 1. You’re designing an iOS app and you’re not sure what it looks like on the retina display;
  • 2. You’re designing an iOS app and you want to test the flow by making a clickable prototype that uses iOS transitions and gestures.

Scenario 1 (Mirroring)

When you’re designing you don’t want to be spending time waiting for things to sync and stuff like that. You want the process to be as smooth as possible, or at least, that’s what I wanted.

Because it just mirrors your Photoshop file onto your iPhone you no longer have to save a .png / .jpg somewhere and open it up on your iPhone every time you make some changes which you want to test. You can just open Composite, connect to your PC and the preview on the iPhone gets updated automatically.

Scenario 2 (Prototyping)

Composite states the following on their website: “Composite is a brand new way of creating interactive prototypes”. Is it really a brand new way to create interactive prototypes? I honestly don’t know, but it works really good and that’s what counts.

I was a little skeptical about what the interactive part of the app would be like. I thought it wouldn’t feel like an actual app but after I downloaded the demo .psd I found out that I was wrong about that.

Being able to create prototypes this easily is really useful for testing the interaction, maybe even with a test user. This way you can spot flaws at an early stage meaning you can solve things proactively.

However, you need to prepare your psd’s to make them prototype ready for Composite. It uses layer comps for different screens and you can link to these by naming your layers or even layer groups. You can also use animations by adding the name of the transition to the layer name as well. I will cover this later on in this post.

Setup the connection

Composite iOS

The setup is really easy. The only thing you have to do is to configure a remote connection in Photoshop. You can do this by navigation to edit > remote connections, choose a username and password, hit the checkbox that says “Enable remote connections”.

Now if you start the app you can just select your computer and connect after you’ve entered the correct password and you’re good to go!

Let’s do a test run

The guys from Composite offer a free demo .psd on the app website which has seven interactive screens. I’ve downloaded this demo .psd to test drive the app to experience what it feels like to use a fairly static prototype, well it’s pretty good. It is a basic task manager app that doesn’t have mind-blowing elements to it.

The demo .psd uses animations to make it feel more realistic. However, these animations are limited to the ones that were available on iOS6. They say that iOS7 animations and gestures will come soon though so that’s a nice forecast for sure.

How to use Composite

As mentioned already, the app responds to layers / folders with names that use a special notation. For example, to link to a specific screen you can add the name of the layer comp between square brackets ([ ]), like: login button [login]. This will be triggered when the user taps on the location where the group / layer is positioned.

The same goes for animations, they are just as easy. To use animations you can just add “+ animation” behind the layer name. So if we use the example I used before you’d get: login button [login]+push.

The different animations that are built in at the moment are:

+push
Slides in the new page from the right, so the old one slides out to the left.

+pop
Slides in the new page from the left, so the old one slides out to the right (useful for going back).

+modal
Slides in the new page from the bottom, old one stays in the same position until it’s covered.

+close
Slides down the old page so that the new page is right behind it, not very useful for opening pages but great for a closing interaction.

+flip
This flips the page into the page that is triggered.

The app’s future

The current app only supports iOS6 transitions and gestures but I’m sure they’ll update it to make it iOS7 ready. Even though the app only supports iOS6 transitions it still works on iOS7 so that’s a good thing.

Also, the current app is only available for iPhones. But there’s a question on the support page which might make us wonder if it’s going to be available for Android too.

Conclusion

Composite for iPhone is a great way to make interactive prototypes with ease, it mirrors your designs and it’s easy to setup. On top of that it is compatible with Windows machines.

Well worth the $9.99 if you ask me!

Advertisement