designspecks_thumb

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.)

 

how to speck

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.

 

creatively-driven_blog_final_specs

 

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:

how to create a web style guide

And here’s a part of the components guide for the same site:

 

How to create a web style guide

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.

Resources:

I use speckKing to create fast specks and I test out my mobile comps on either Skala or Live view.

 

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.

1 Comment
  • Thanks for the tips. I’ve never had to hand my design over to a developer before. I usually do the front end coding myself(html/css) and then hand that off to a web developer to do the back end programming. I’m not sure how comfortable you are coding your site in htm and css but that could be another option for you. I understand that sometimes you don’t always have the time because desigining takes a while too.

    Have you written a blog on how to find a good web developer and what to look for when finding one? That would be really useful. Thanks.

    1 February, 2015 at 6:29 am