6

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.

Improve this question
1
  • 1
    I kind of feel like this has been asked. but I can't seem to find anything at the moment.
    – Scott
    Jul 22, 2015 at 15:49

2 Answers 2

Reset to default
4

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.

Improve this answer
1
  • I think you summed up where I am right now. Everything you said makes sense, and is kind of where I was feeling I should lean, but I still wish there was a tool out there that would be like Illustrator/Photoshop/Sketch, but "thought" in HTML & CSS.
    – conan
    Jul 23, 2015 at 19:00
1

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.

https://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.

Improve this answer
4
  • 1
    I'd argue that spec'ing things like "the space between objects" in a mockup is counterproductive. The web is flexible, spec's aren't. Spec's need to accept that flexibility, IMHO.
    – DA01
    Jul 22, 2015 at 16:11
  • Currently Specctr ships with the option for % measurements and ems (not sure how well those work, but they're there). And flexibility in spacing isn't always necessary- I wouldn't want my buttons to start floating apart when I resize the screen :)
    – Leslie P.
    Jul 22, 2015 at 17:28
  • It's more to do with re-usability. If I build a button, I probably build it with pre-defined space around each button. What happens with mockups that are spec'd, is you end up with mockup 'a' maybe having 8px, and mockup 'b' having 12. Developers then write excessive an unnecessary code to accommodate that which turns into a maintenance nightmare. Instead, I'd suggest defining your buttons in a pattern library. That saves you from having to add the spec's to each and every mockup.
    – DA01
    Jul 22, 2015 at 17:38
  • I wouldn't say that using Specctr or mocking up designs in HTML/CSS should be exclusive of having a pattern library- maybe that should be a third answer? It would certainly reduce design effort while making the process more streamlined.
    – Leslie P.
    Jul 23, 2015 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.