Sharing Web Design Comps with Compy

Posted on September 12, 2011

If you design websites you probably have clients or a boss you share comps or concepts with for review and approval. Some times you have the luxury of meeting with these stakeholders personally to show the comp while explaining your design rationale. However, it’s awfully common that a face-to-face meeting isn’t an option and you have to send them an email with an image of your Photoshop comp. This presents an additional problem because the recipient may use any of a number of tools to open this file and may not see it in the right context or size.

I personally have to deal with this issue almost on a daily basis and have tried different methods with no luck. A few months ago I developed Compy, a simple system that lets me share the comp as an image inside a website. I like this method because I know the client will be opening the comp in a web browser and I don’t have to worry about zooming or weird scrolling.

How it works

Using Compy is relatively simple. You will need a Dropbox account or, if you are a more advanced user, a web server. All you need to do is create a public folder in Dropbox (or your server) and drop the contents of the latest release of Compy.

Using Compy

Export your jpg comp to this folder and rename the html file to the exact same name as the image. For example, if you have the file home-page.jpg, just change the name of the html file to home-page.html.

That’s it. No code needed.

Now you can get the public link from Dropbox and send that to your client. You can also use Compy with multiple images by duplicating the html file and renaming it after the corresponding jpgs. The great thing about Compy is that it will automatically adjust the height of the page it displays based on the image so you don’t have to deal with code.

Disclaimer: I’m making Compy public because I think it could help other designers with my same problem. The tool works great for me and I’ve tested it in most modern browsers (including IE6-IE8) with no issues. However, Compy is still in beta and it’s distributed “as is”, with no warranties of any kind. There’s a lot of room for improvement and I’ll be making updates and improvements as soon as I can.

You can go to the Github repository and download the latest version of Compy.