Review: Two amazing products to add to your design workflow

August 14, 2013
Review of Pixelapse and InVision

I want to tell you about two amazing products, Pixelapse and Invision. The two overlap a little bit, so you could choose just one of them — but I use both and I'll tell you why.

Visual version control with Pixelapse

I use SVN and GIT for code. I also have version control for design files — Pixelapse. With this tool, I create a restore point every time I save a design file (PSD, AI, etc to about 50 file types).

Once the tool is installed, save your design files into the special folder that Pixelapse creates. Every time you save a file, it uploads the file to the service.

Now, I make changes to my files without worrying about saving dozens of iterations in case a design idea doesn't work out. I can just go back and download a past version of the design.

This tool changed my workflow. During design and review, I keep my design files in the Pixelapse folder. Once a design goes to development, I take it off Pixelapse and move it to its final resting place. For Digett, this is Google Drive. Not to worry though, I can still restore the full version history of a file by viewing and restoring deleted files in Pixelapse.

In the screenshot below, you can see the thumbnails representing each time I saved the file. I could view and restore any version in this timeline of thumbnails.

Visual feedback and review with InVision

In the past, I always found it a challenge to get feedback on a visual design. I have tried everything from printing PSDs to screencast movies to presentations with a projector. I'm not talking about client feedback — I'm talking about internal team review. I want a tool that allows:

  • Me to quickly send designs for internal team review
  • Team members to easily comment on portions of a design
  • Team members to see each others feedback

I want a tool that powers collaboration, not just a way to send a PNG file to a coworker.

Enter InVision.

With this tool, I output a screen-sized static image (PNG, JPG) of a design to the InVision sync folder on my computer. The file is auto uploaded to InVision and from there I can send it out for feedback and manage the review process.

I also use InVision to add dev notes. Often, there are behaviors, font attributes or other notes that I want to pass along to the developer. I can add these notes to InVision and the developer can see all of the notes.

In the screenshot below, you can see a conversation about some copy on a print brochure. The comment could just as easily be placed there to discuss heading color or other visual aspects of the design. When I implement a piece of feedback, I can mark it complete to hide it from my default view.

I find myself surprised and delighted on a regular basis with InVision. There are lots of other features I'm not mentioning — hotspots to allow you to mock up a design and email notifications to name two more.

Try these tools … I bet you will like them!

What about you?

I have seen lots of other Photoshop version control tools … do you have one you prefer? Let me know!