How to “speck” your website comps for a developer
I wanted to talk about a skill that I haven’t seen a lot of resources on, but it’s a really important part of the process when working on websites and apps. It goes by many names, but I call it “specking”. I’ve also heard it called “redlines” or “Style guide”.
What is Specking?
Specking is marking up a comp or design with all the precise measurements and styles that it takes to build that design. Essentially, it’s the blue prints behind your design and it requires a lot of math. It’s not my favorite part of the process but it is as equally important as the research and design phases.
This is one of the phases that, if not carried out correctly, may lead to the developers creating something that isn’t exactly what you imagined.
Some things you want to speck:
– widths/heights of elements (icons, logos, images, arrows, thumbnails, form fields, etc.)
– spaces between elements (margins, paddings, etc.)
– font specs (font name, size, color, line height)
– colors (backgrounds, rules, borders, etc.)
When you are specking for a website, it’s a good idea to also give the number of columns along with the actual pixels. The reason why is that as we all embrace responsive design, nothing is ever fixed. It helps the developer define the site in percentages if they know how many columns.
The last thing I do for websites is to create a typography style guide and a component style guide. This helps developers even further with styling the typography and understanding all the different states of my elements.
Here’s an example of a typography style guide:
And here’s a part of the components guide for the same site:
As you can see it takes a lot of time to really document a website. It isn’t enough just to hand over a psd to a developer and hope that they notice all the minute details that you worked so hard on.
I hope this sheds a little light on how to properly document design specks. If anyone has any other resources or tips, I’d love to hear them. I’m always looking for better and faster ways to carry out this vital step of the process.