Efficient workflows for handing off designs to developers

I work as a UX/UI designer for my company’s web sites. After I make the designs, I send the mockups to web developers, who implement them. It’s a little more collaborative than that, but that’s basically the process.

Since it’s been my tool of choice for a long time, I primarily use Illustrator. Especially with Google Drive’s ability to display AI files, the developers have seemed happy with what I hand off to them, and since I sit pretty close to them I’m available for questions.

However, more and more I’m becoming frustrated with how often things come up like differences in how Illustrator vs. browsers render things like colors, Illustrator’s total disregard for pixels (yes, I know there are workarounds, but I’m always fighting it), the time it takes to properly redline everything, and in general how different Illustrator thinks about a design vs. how browsers do.

What are some good workflows (+tools), that put your designs closer to what’ll actually be implemented and make it really easy for devs to know exactly what it’s supposed to look like on the web?

Even though I can do my designs in HTML+CSS, the time trade-off isn’t usually worth it for most things.

UPDATE (8 months later): I’ve changed a few things in my process that seemed to have helped. 1) Switched over to Sketch–this app “thinks” like the web, so my designs are much closer to what they’ll be implementing. 2) Started using redlining tools (e.g. Spectr) as well as Zeplin–I’m really fond of this. 3) I’ve started bringing developers into my process through mini design studios and discussions–this has probably had the most positive effect on our communication.

Answer

If you are frustrated with how your design tools render designs vs. the browser, then the solution is to start spending more of your time designing in the browser.

The reality is that the web is built with HTML CSS and JS. It’s not build with Photoshop or Illustrator. So it’s best to get into the actual medium as soon as possible.

In your case, you do have one great advantage:

I sit pretty close to them I’m available for questions

I’d suggest you deliver less, collaborate more. In other words, spend less time making .ai files, and more time sitting next to the developers. This allows you to do more of your design ‘in the browser’ which is where the details matter.

Attribution
Source : Link , Question Author : conan , Answer Author : DA01

Leave a Comment