I am currently designing a complex app for a large energy corporation and I need to provide diagrams explaining the dimensions of my UI elements, layout constraints, typefaces, colours etc to my developer.

I was wondering if there is a resourceful way of doing this which will save time for both parties?

I want my developer to have a clear idea of the layout to make his life easier. Any help would be appreciated, maybe just an example of a smart way of representing it on a simple pdf. Working on Mac.

  • In my experience, it's the Visual Design team's responsibility to put together a document called a Visual Style Guide that addresses all these issues. Nov 12 '14 at 15:29
  • When I worked for Sony I know the visual designers used a Photoshop plugin which let you select elements and layers in the design and a plate would appear in the design printing all info about the element with a line pointing to the element. I don't remember the name, but dig around for Photoshop plugins which helps with creating visual design specs and you're bound to find it. I remember the one they used was a paid one. Nov 12 '14 at 15:34

As a developer, I've received design information in lots of different ways. One of the most effective was a simple hand drawing of the interface with a css-class name for every element. I quickly created an html document for each screen in the interface and sent them back to the designer. We then worked concurrently. As she played with css to make things match the style-guide, I coded the actual functionality. It was an amazingly successful collaboration.


I think you might be looking for specctr.com

It's a PS plugin (originally only for FW) that automates the process of turning designs into specs.

Your exports can be as simple or as involved as you like, and contain everything a dev would need to work with i.e. dimensions, spacing, colors, gradients, shadows, fonts, etc.

It takes some getting into, and you have to commit to it, but I've been using it in FW to great effect for some time.

Not the answer you're looking for? Browse other questions tagged or ask your own question.