The first thing we need to do is get a clear visual overview of the project, and for this purpose we gather all the various pages/screens that were designed into one document.

All repeatable elements from all pages into one PSD file

We sometimes print out this document on paper, so we can get a good overview of everything together at once. Then we start looking for visual patterns that repeat over different objects or even pages. Typography, sizes, margins, colors — all the parameters that can be translated into a clear cascading style-guide. We even used to annotate the repeating elements using a marker, specifying the fonts, sizes and colors for headings, paragraphs and all other parts of the layout, always looking for common denominators. This annotation process proved essential for planning our CSS classes, and we discovered it’s much better to separate this workflow and fully do it before any actual code is written (as opposed to going back and forth between a PSD and a code editor).

Example of printed annotations

The only thing still missing is some sort of easier way to spec the exact measurements of each element so we can also view them all at once and not have to go into Photoshop and check items manually over and over again and manually write them (info panel for sizes, character panel for typography properties, color picker/color panel and then copy-paste color codes). The devil is in the details, and making these specs can save hours of work later, making sure the designs are implemented as close as possible to the original.

This is why we started developing our own tool for measuring and making design specs within Photoshop. It started out as a bunch of scripts that we wrote, that were not so user friendly… but they worked! Not only we got the specs we wanted for coding, but even more importantly we could print out an overview of the project, or make a style-guide even if it was not supplied by the designer. It didn’t really matter if we made the design ourselves or collaborated with someone else, this offered us the opportunity to plan our code structure, highlighting special exceptions that require some other coding approach, or even ‘fix’ the designs so they are more consistent and follow a clear style-guide. Of course that later in the coding process it also helps tremendously that the specs have all the information (sizes, margins, colors) needed for the CSS parameters.

We started looking at projects from an overview point that was not possible before, and even relinquished the need to physically print the designs. Now we could review all fully specced pages on-screen, giving us a clear style-guide for the project that translates well to meaningful CSS classes that are reused and allow us to harness the power of CSS specificity to the fullest extent.

Full specs for a web page made with SpecKing

We found these scripts so useful for us, so we decided to make a proper plugin panel for Photoshop that we believe would be beneficial to many. We learned to use a few more tools and services (among them the Photoshop API that is not the clearest in the world — but more on that subject on another day…) and launched our own Photoshop plugin. It’s called SpecKing, and it saves us hours of work on each project, allowing us to code better and with more style… We have a growing number of users that use our plugin on a daily basis, and we find it important to listen to their comments and suggestions so we can continue evolving the process and keep updating the plugin with more features in the future.

We find that the process we described above — Design, Annotate, Plan, Code — is the most effective for our studio workflow. We would be happy if you give it a try in your projects, and tell us what you think about it…