How do you prepare design specs of PSDs for developers?

8 years ago from , Product Designer, Author & Maker

Once we're done with our new design we slice it and prepare a "spec" with instructions for developers.

Usually it's a design with some measurements and fonts info on it.

It looks similar to this http://www.pngexpress.com/images/spec_illustration.png

So until now we did it completely manually, and I want to improve our workflow, so I started to Google and all I found is this $30 script for Photoshop even without trial :( http://www.pngexpress.com

It looks like something that fits our needs but I wondered if there are any other tools that can help us to make specs or may be you used this PNG Express thing and can share your feedback?



  • Rune Lund-Hermansen, almost 8 years ago


    I'm the guy behind PNG Express. Sorry about the lack of a trial, but I'm trying to focus my time on things that improve the actual product instead. I know that doesn't help you, so as a way to try it out I can offer you a refund within 3 weeks of your purchase if you're not happy with it.

    Let me know if you have any questions at: info at pngexpress dot com

    8 points
  • Gadzhi KharkharovGadzhi Kharkharov, almost 8 years ago

    I use Napkin (http://aged-and-distilled.com/napkin/). It has some nifty features that speed up the process of preparing specs quite a bit: you can put a screenshot on canvas, then add some detailed zoom-ins around it and add rulers with pixel metrics (which are calculated automatically). Doing specs in this thing is like 10 times faster than in PS or Sketch. Also the app is built very nice, native OS X thing with thought-out details on UI and experience.

    2 points
  • Jonas RabbeJonas Rabbe, almost 8 years ago

    As a front-end/UX software engineer it's sad that no more people have answered, because I was hoping to get some new inputs.

    My approach is always to build reusable components, and a spec "simply" shows which components to use, and what the flows should be. Of course, the spec for building a reusable component is different because that's where you are actually getting the assets in, etc. (and it differs immensely if it's web/mobile/desktop development you are doing, although it's often hard to defend why that is).

    Throughout my career I have had exposure to an insane amount of different spec formats, and still haven't gotten something detailed enough that I didn't have to regularly check in with the designers for clarification.

    0 points
  • Paul @StammyPaul @Stammy, almost 8 years ago

    I use a PS plugin called Redliner to do that.

    0 points
  • Asher SimondsAsher Simonds, almost 8 years ago

    I'll create work on a grid and create specs where it might look confusing but I work together with our frontend developer to bring our products to fruition. So really for me there isn't clearly-separated steps of design and develop.

    0 points
  • Wes OudshoornWes Oudshoorn, almost 8 years ago

    I only do web work, but I don't spec. I do two things: All of my designs are perfectly aligned on a 10px/10px tiny grid. Speccing is counting boxes. I limit the variation between items, so most of the time you can guess that it's 30px everywhere.

    But more importantly, giving designs to a developer is bad practice. We're living in a world where our professions involve so much more than pretty pictures, and development is more than lines of code.

    We're shipping products, and that's what we need to feel responsible for. Rather than speccing your work, sit with the developer at his desk. Explain your process and ask for his input. Just sit with him as he implements, explain the color scheme, grid, etc to him. He'll start seeing the logic, and your deliverable is not the PSD file, but the actual product.

    0 points
    • Artiom Dashinsky, almost 8 years ago

      I'm completely agree with you, but we're creating apps for smartphones and tablets so we're not always can use a perfect grid and unfortunately sometimes we're working with external developers so we can't sit with them :(

      BTW, for web I'm not creating specs too ;)

      0 points
  • Artiom Dashinsky, almost 8 years ago

    Here is a clearer example of what I mean by spec http://cl.ly/image/3D2W022a3r3a

    0 points