There are a number of tools and shortcuts available for folks in the UX field to capitalize on, making their lives easier day to day. Here are three I use to speed up my workflow and make things easier on myself when it comes time to get down to business.
As more teams start thinking about a mobile approach this tool will become invaluable. Air Display lets us create second monitors out of our devices. This means we can preview our working files on tablets and phones without having to save images to Dropbox or the like and then pulling the images down to the device.
I learned a hard lesson when I had to design for HDTVs at Comcast, if you don’t preview your work on the intended device it has a high chance of coming out wrong (too big/small). Air Display lets us avoid this situation by letting the designer see their work in action.
The ideal setup using Photoshop is to duplicate the working window found under Window > Arrange > New Window for “yourfile.psd”. This creates a mirror of the file you are working on so you can continue to work on your laptop monitor.
These are built into Photoshop by default. The purposes of layer comps are to quickly make variations of you design without creating 20 groups with the same content only with minor changes, and quickly export those options. Layer Comps save the current state of your layers including position, visibility and layer style. I recommend only using visibility setting (selectable when you create a new layer comp) until you get the hang of what’s going on.
I use them in almost all my working files because I have to quickly iterate and I want to keep my file size lean, this way Photoshop performs at its “best”. If you’re interested in trying out layer comps I’d be more then happy to give anyone a quick run through.
This one comes with a background in HMTL/CSS but it’s still very handy when passing files and work to development teams. Our mobile team has been working on a “live” style document found here. This document lets our Dev team to quickly pull CSS and create the look and feel we want. Allowing them to focus heavily on building the functionality and when it comes time to do the CSS we have given them a jumpstart.
The advantages CodePen gives us is many people can edit and update, and it refreshes the page as you work. That means you don’t have to continuously update or upload files.
These are just some of the tools I like to use, I’m sure there are more out there and I love to hear about new ways to do our work more efficiently.