Don’t forget the good UX tools. 

I know there are plenty of ways to accomplish every tasks nowadays and we all have favorites. I have selected a few of mine to share with you below.

Guide Guide 
Guide Guide is a photoshop extension for creating guides and grids, this is awesome since it’s not that easy to do accurately in photoshop – I actually recall this giving me headache during most of my attempts… Don’t ask me why Adobe hasn’t bought it and made it an official feature already. Anyway, Guide Guide’s inventor recently updated this awesome tool for Adobe CC 2014, adding a new look and extra features. Just download the new one and install it with your extension manager.


Generate – Image Assets 
When I stumbled upon this supercool feature in Photoshop, I was so happy. I ran to Kleine and told him that he will owe me 2000 SEK for this tip. For those who do not know, within our UX-team, the one who gain a useful tip will owe the other one 500 SEK, but I felt this was such a big one it was worth a lot more. This feature automates the creation of image assets as well as update and replace them when the Photoshop original has been updated. It saves a lot of time and makes the job much more fun. What you need to do is just enable Generator in Photoshop plugins settings, enable image assets in the  file menu – generate, name your layers or grouped layers with a suffix (.png, .jpg, etc) and it will start generating assets. Check the full reference on

Using Indesign for Blueprint
After trying out various of tools for making blueprints, I would say that i prefer working with indesign. I find this tool great for this purpose because of a very structured visualization of interaction flow, with both shading, color coding, consistent typography and links. There are endless of room for notes, automated table of content for easy navigation etc, etc. This tool was discovered while working on a huge project where no other tool would meet our needs in terms of tracking all the updates and clearly communicate between project leader, developer, testers as well as UX colleagues. However, worth mention is that I’m lucky to be familiar with Indesign, as it is a very extensive tool for page layout, it requires some familiarity.
See example here

Indesign Blueprint

Correct Vector icons from Illustrator
There is actually an easy way to make illustrator icons aligned to the pixel grid when importing it to photoshop. This to avoid blurry icons and manually path editing. Just turn on pixel preview and snap to pixel in the view menu. Last thing to do is to find the transform panel and check the align to pixel grid to let Illustrator work the magic.

Layer comps for exporting mockup. 
It is well known that UX designers deals with files that hold hundreds of photoshop layers and no matter how organized one are, keeping track of and export different states of mockup can sometimes be very demanding. It is when layer comps can be handy here. It has also recently been updated along with photoshop CC 2014 and became a powerful tool to facilitate a UX designers work. Open the layer comps panel, take snapshot of different layer compositions and go to file / script / layer comps to files for a better control of you mockup exports.

Leave a Reply