Creating UI Design Specification in Photoshop

Another GUI, web project, or any other kind of prototype that needs to be dissected by developers is designed beautifully and it’s time to send it for coding. To make sure that your design will be implemented perfectly – you may need to help the front-end developer by creating a reference sheet with annotated measurements for your mock-up.

Of course, you can use standard Photoshop tools to draw arrows and type annotations but, as you can imagine, it will take a considerable amount of time. Not to mention that it is extremely tedious.

There are tools for Photoshop, extensions and scripts, that automate the process. I’m not going to go into detail about each of them, and although some have little more features than others, these tools are all pretty basic. These Photoshop “plugins” measure distance, draw rules, and type-in pixel values for you, saving you time.

On a personal note, the simplest script will be sufficient and it is often the fastest to work with, especially if you assign a keyboard shortcut.

Free Design Specification Tools for Photoshop:
Pixelmeasure
Ink
MeasureIt

Paid Tools:
SpecKing
Specctr