4

Design deliverables. What's your process?

over 5 years ago from , Lead Product Designer

Hi DN. I'd love to hear how you're handling ux design deliverables within a development team. I'm searching for tools to annotate/spec wireframes for hand off and haven't come across any elegant solutions yet. There's got to be something better than my Google doc specs linking to InVision prototype.

7 comments

  • Antonio Carusone, over 5 years ago

    I'm surprised more people don't use Zeplin. Do yourself of favor and check out Zeplin. Engineers love it, and it's the best way to handoff designs to them. You can annotate on screens, it has version history with commit messages, and it gives engineers everything they need, dimensions, spacing, colors, type styles, etc.

    1 point
  • Jeff van SteijnJeff van Steijn, over 5 years ago

    Maybe https://zeplin.io/

    1 point
  • Jennifer Nguyen, 5 years ago

    With my team, we use Zeplin and we haven't looked back ever since! It's been at least a year now and it keeps getting better.

    Here's why I prefer Zeplin over other tools for dev handshakes (Sketch Cloud, Invision Studio, Google Drive, etc).

    1) If your design team likes to use different tools, Zeplin is the neutral platform that brings everyone together. I prefer Sketch but sometimes I switch to Figma. My colleagues like Photoshop or play around with Adobe XD. The fact is, there are so many up and coming design tools that it wouldn't be realistic to always expect the developers to switch as designers switch. So Zeplin integrates with most design tools and all the developers have to do is log into Zeplin. That's it.

    2) Zeplin essentially takes your designs and automatically generate code specs.

    3) There's version control so you can see previous designs.

    4) You're able to comment directly on specific areas of the designs. The thing I don't like about Sketch Cloud is that you can leave comments on screens but they all live in a right hand side slideout.

    5)There's a Slack integration so you can get notified right away.

    6) Zeplin itself is a well designed platform. The folder and project structures are pretty neat.

    7) It also supports interactive prototyping. For example, if you made your prototypes interactive in Sketch, that actually gets ported over to Zeplin and developers can then click around the prototype. Although I will say, I wish they had a bird's eye view of this all. The only app I've seen that has a bird's eye view is Figma.

    8) The support team at Zeplin responds quickly and is super helpful.

    I'm in no way sponsored by Zeplin, I just love this tool so much and it has changed our lives and made our jobs so much easier!

    0 points
  • Jess EddyJess Eddy, over 5 years ago

    Hey there, there are various ways to enhance designer/developer collaboration, I've written a couple articles about the topic:

    https://blog.sydneydesigners.co/tips-for-designers-developers-working-together-to-implement-great-uis-e93ef179bf13

    https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

    Zeplin, which someone mentioned is great and you can annotate within it. You can also do annotations in Dropbox Paper and Redpen.io. Annotations alone will not fully solve the problem though and there's nothing quite like in-person, real-time collaboration.

    0 points
  • Joseph Decker, over 5 years ago

    A reliable way of ensuring quality is to deliver components including spacing guidelines. Think of a Design System, the complexity is in the way you’ve designed. Everything must be correct and should not differ to much from each other.

    Using a prototyping tool to provide them with a way of clicking through the flow is pretty handy. And will provide them with the necessary context. Depending on the tool, it can also be used as a way to communicate efficiently.

    Ps, keep responsiveness in mind.

    0 points
  • Karolina Grzesiak, over 5 years ago

    I use overflow app for flows - https://overflow.io/ There is also quite nice paid application for notes - https://marcosvid.al/sketch-notebook/

    0 points
  • Account deleted over 5 years ago

    Just leave notes in Invision and talk to the devs in slack, or if you can bothered write up a google doc with screenshots and explanations.

    0 points