Rapid prototyping with Photoshop for iPhone with zero effort

When I first started working on designs for mobile websites and apps I sent myself screenshots to my smartphone to look at them on the device they are going to be experienced with. Thankfully it’s a lot easier today.

If you’ve never tried some sort of rapid prototyping for iPhone (or any other mobile device) I urge you to try it right now. You will be amazed how different your design will look and feel.

A small example: One of the first thing every designer learns is aligning elements. Centering an element mathematically may be right when you look at the numbers, but may feel wrong. Sometimes you need to move those elements one or two pixels so that everything just feels right. And that’s exactly what you will notice with the rapid prototyping workflow I’m going to show you.

So, what are the benefits?

1. Elements may look right on your desktop monitor, but in the end they will be seen on a smartphone with a high density display — you will notice that some things look off and need retouching.
2. You get an idea if your design is actually usable. Are touchable elements huge enough? Can you reach them with your thumb?
3. With added interactivity you can show an first impression of how the design will look and feel to your clients.

What do I need?

1. Computer with WiFi & iPhone
2. Adobe Photoshop
3. Composite App (http://www.getcomposite.com/)

Let’s do this

Download Composite App on your iPhone. As far as I know this is by far the best app for this purpose, sadly it seems to be the side-project of a single person and doesn’t get much updates. But it works really good like it is right now.

Now make sure your Computer and iPhone are on the same WiFi. Click on the Edit menu in Photoshop and chose Remote Connections… and activate it. Remote Connection is a build in server in Photoshop.

Type in a name and password. Now open up Composite on your iPhone and connect to your Mac.

Let’s create a new document in Photoshop. It should have the same pixel width as the iPhone you’re using (which means we have to work in 2x or 3x on the iPhone 6 Plus).

Your photoshop document now get’s mirrored to your iPhone. The app automatically updates as soon as you change something in your document (the larger your file, the longer this will take).

Tap your iPhone’s display with two fingers to hide the menu inside the app. You now got a perfect impression of your design. Of course you can scroll up and down, the app even provides the bounciness feel of iOS.

What about interactivity?

That’s the fun part! Ok, most of it, because you need to use layer comps. If you hate them as much as I do: I’m sorry, but you’ll like the outcome.

Adding interactivity by adding the names of layer comps

First things first: Got a fixed header in your design? Simply write !fixed at the end of the name of your layer or group. It even works with footers or button areas at the bottom.

So, let’s say you have some screens of your website or app inside this photoshop file. Now create layer comps for every screen. If you have no idea what layer comps are have a look at this article.

Now, to add interactivity you can now add the name of a layer comp to any layer or group you like. Have a look at my screenshot.

You’ll notice the highlighted texts like Cart [Cart]. While the first Cart was just the name of the group the added [Cart] is actually the name of my layer comp in brackets. So if you later tap on the elements inside this group you’ll change the layer comp to view your cart.

Hint: Add layers with 0% opacity to extend the tappable area of an element.

With those two basic features you can already create an interactive prototype. In Composite app click on the hand icon in the lower right to switch to interactive mode (and remember to tap the screen with two fingers to hide the menu).

If you like you can add animations as well, simply by adding those behind the name of your layer comps in brackets, e.g. Cart [Cart] +pop.

• +push
• +pop
• +modal
• +close
• +flip
• +fade
• +flip-left
• +flip-up
• +flip-down
• +slide-left
• +slide-right

You can even determine how fast the animation will be with +transition(300), where the 300 will make the animation 300 milliseconds.

www.patrickqueisler.de