Curious how others deliver SPECS?

over 8 years ago from , User Experience Designer

I know there about a million different ways to do this in a clean cohesive manner. Just wondering what others do when they hand off UI Specs to their development team?

I'm sure most have heard of it, but I use specctr to spit out my fonts, hex, measurements -- saves me a lot of time. Are there any other tools out there that are worth looking into?


  • Marcelo SomersMarcelo Somers, over 8 years ago (edited over 8 years ago )

    Ideally you're not throwing PSDs over the fence to your dev team, but instead have a designer that can be involved in the front end dev process.

    I've had a lot of luck recently with building out pattern libraries for projects where new components in a design get built and styled independently of the pages. It's like building your own Bootstrap for every project.

    The other upside is that building independent, reusable components in CSS leads to much more maintainable code in the long run than the "slicing PSDs" approach.

    2 points
  • Ray LuongRay Luong, over 8 years ago (edited over 8 years ago )

    It depends.

    We loosely follow Lean UX. So if a concept is still in its early stages, it's more effective for me to sketch an interaction on pen and paper and use that as an ephemeral spec.

    We use Confluence for more complex specs that we know are going to evolve over time.

    To show interactions using high fidelity mocks, we use Invision, which has been great so far since we can make quick click/hover prototypes and add comments directly on the screens.

    In terms of tools that spec exact visual dimensions, I haven't encountered much better than specctr. Though if you are working closely with your development team, I recommend crossing tools — developers should be familiar with and have access to your design tools. Our developers do this with the design tool we use Antetype. Our designers often build out components with CSS and send snippets.

    On that note, evolving style guides are effective and sustainable. Check out KSS. Our process at DataPad is evolving, but I see us using CSS to spec more and more.

    2 points
  • David BlumDavid Blum, over 8 years ago

    I use http://frontify.com - it's perfect for speccing and closing the gap between design an frontend. At the end you also get a generated style guide which is awesome.

    0 points