: 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
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.
More posts by @YK2262411
2 Comments
Sorted by latest first Latest Oldest Best
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.
My company currently uses an Illustrator markup plugin called Specctr- it's not perfect and still requires a bit of TLC, but if you aren't using it already it you'll save quite a bit of time when creating UI specs.
www.specctr.com/
Adding dimensions, color/transparency, font information to any object is one click away
Marking up spacing between objects is also quick
Inexpensive
There are a few negative sides- loading the plugin is slow and occasionally crashes Illustrator (make sure to save before opening), and it doesn't handle marking up a bunch of objects at once well. On the whole, though, it's much easier than doing everything by hand.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.