Our website builds always involve alot of collaboration. Bringing a project from strategy to design to development requires different skills sets and points of view that come together to deliver a fantastic website for our clients. This kind of collaboration is essential but can come with challenges. For example: what if a team member wasn’t available for a meeting where key design elements were discussed that impact workflow? What if the intent behind a design scoped out by a team member in one meeting was misinterpreted by another person involved in the execution of that design? What if there are remote participants who have been involved sparingly in the early part of the project (to save budget) but are critical during the latter stages of implementation?
Zeplin: Stay on the same page, efficiently
We’ve recently been using a tool called Zeplin to help our design and development teams collaborate more closely and make the handoff from one to the other more seamless. Here’s why we like it:
- Allows for easier transfer of design to code (below is a sample of how the tool exports styles)
- Shows developers every place a particular design component is used
- Easier to identify inconsistencies Less guesswork for how design should be implemented.
Who Benefits?
Easy answer: everyone. Any tool that allows easier dissemination of requirements among a diverse design and implementation team is a win for the project, for us and for the client.
What do teams need to plan for?
Like with every new tool or process, there’s a little overhead at the start for team members to learn and use best practices related to both. For Zeplin this modest impact falls mostly on designers, as they’ll need to add appropriate annotations, labels, and development notes that translate well for the development team. But those are tasks that already happen in the context of other documentation, emails, and conversations. Zeplin streamlines this process. In Sketch for example, designers should optimize their files for the front-end development team handoff, including naming “symbols” so they get exported into components, naming colors, setting up font styles and cleaning up unused elements.
Where Have We Used It?
We’ve been using Zeplin for about a year now. Take a look at UCSF; we needed to make some technical and design updates on a very tight timeline. We used Zeplin to get actionable handoffs from designer to developer quickly, and well documented. And yes, although every public website implementation we’ve done is of high quality regardless of the tools we’ve used, Zeplin made a quick turnaround much more manageable.
Read More About It (and something related)
For more detailed examples, best practices, and product features we suggest going to the Zeplin blog. For some related reading that touches on further collaboration notes between design and development teams, please read Zakiya's Pattern Lab post from earlier this year.
(editor's note: this post began as Zakiya’s idea and is a result of our conversations that followed. For more detailed technical discussions, please feel free to follow her at: https://twitter.com/zakiyarules)
