My App Design Setup

Brian Harper
Aug 15, 2014 · 5 min read

In his book, Kitchen Confidential, Anthony Bourdain harps on the importance of a proper mise-en-place, or setup, for line cooks in a bustling kitchen.

The universe is in order when your station is set up the way you like it: you know where to find everything with your eyes closed, everything you need during the course of the shift is at the ready at arm’s reach, your defenses are deployed. […] If you let your mise-en-place run down, get dirty and disorganized, you’ll quickly find yourself spinning in place and calling for backup.

While the physical urgency in a professional kitchen is probably higher than most tech offices, the right setup for an interface designer can be the difference between hours of creative flow and hours of fruitless frustration. Everyone’s ideal setup is unique, but here is my current app design setup.

Image for post
Image for post

Vertical Arrangement

Clean Desktop

Desktop icons can also pile up easily as I save files. I tend to manually file them away when they start taking over the desktop. If you’re looking for a more elegant solution, I hear Hazel can take care of these things.

Photoshop

Shortcuts

alt(option)+drag copies whatever you have selected. That can be a single layer or multiple layer groups on the canvas or on the Layers panel. It’s like copy/paste in one motion with control over where the copy will land. For more precision, try alt(option)+arrow keys to nudge copies.

right-click to select layer. This basically summons the Layers panel to the canvas and just shows you the layers and groups present at the pixel you right-clicked on.

command+= & command+- to zoom in & out. Done in quick succession, this will resize a window to show the full canvas.

command+` to cycle focus through windows or tabs. Most of the time, I use this to remind myself how many windows I have open and to close (command+w) what I don’t need.

Actions & Workflows

Image for post
Image for post
The Actions Panel in Button Mode

As the patron saint of app design, Marc Edwards of Bjango shares and maintains his set of Photoshop Actions & Workflows. These cover most of the things you’ll reach for on a daily basis if you’re designing apps. If you want to create your own, recording new ones from the Actions panel is simple enough. And if you assign hotkeys for Actions, you can even activate them from an iPad with the Actions app.

Automator Workflows are like Actions for Mac OS X. You can create workflows using Automator.app’s visual scripting interface. If you’re creating iOS assets, Bjango’s Automator Workflows for batch-adding/removing “@2x” from filenames are a huge timesaver.

Multiple Contexts

Image for post
Image for post
This is not a glitch in the Matrix.

If you have the actual phone or tablet you’re designing for, I recommend using a tool like Bjango’s Skala Preview. This can beam your active Photoshop window to an iPhone or Android device in real-time. Testing mockups in context answers important questions like, “Is 9pt type actually readable?” Because the first time you see your design on an actual device shouldn’t be after the developer sends out a build.

Layer Comps

Image for post
Image for post
For sanity’s sake, don’t check Position or Appearance

When it comes to exporting Layer Comps, Photoshop ships with a script that will export all of a PSD’s Layer Comps at once. You can find it under File > Scripts > Layer Comps to Files…

Linked Smart Objects


My next post will dive into using Linked Smart Objects, Generator, and Dropbox to create and iterate on Flinto Prototypes. Cats will be involved.

In the meantime, add your feedback here or find me on Twitter.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store