A team in the office working on a computer

Finding The Designer-Developer Unicorn

Understanding the designer-developer workflow is critical to building custom websites. In a tale as old as time, this union is riddled with potential miscommunication or issues. Breaking down the barrier between these two roles should be the foundation of any successful creative team.

But how do you achieve this? It’s very rare that a team is going to have access to a mythical creature like a unicorn who can design and code. So throwing that option out the window, here’s a general idea: invest in tools that streamline communication and empower designers and developers.

Although they are very different skill sets, it’s time to stop viewing them separately. Conversations concerning design and development should focus on collaboration. Most of the time, designers and developers are thinking about the same issues, just very different. As a designer, I naturally gravitate towards the tools I use every day while developers have theirs. How do we get these processes to communicate together?

Introducing Sketch + Zeplin into our workflow radically changed the way we talk about websites at our agency. Instead of focusing on the surface level of what the website should look like, we inserted mandatory touchpoints of collaboration into the workflow. We communicate early and often, bringing in thoughts on UX, functionality, coding languages, and client business goals to a single playing field. Conversations about the functionality blossomed into more productive brainstorms about how the design of a website could come to life in both arenas.

The Sketch + Zeplin workflow acts as a translator. Every team member can hone their superpowers while being set up for success in communication and collaboration. From my perspective, perfecting the designer-to-developer workflow hinges on these 4 critical tenants:

Customizing a Sketch workflow that is tailored to your team

Sketch is a powerhouse in this industry. This simple interface makes the design and collaboration process accessible to everyone. Handoff is perfected when you start with the people on your team. How do they communicate? What channels of communication resonate with them best? We get the most out of the Sketch App when customizing the workspace to address the challenges of everyone involved.

Early discovery & Handoff Meetings that include stakeholders, designers, and developers

The earlier the better. Making things work in the way they were designed is half the battle. Getting input from developers on how a design might translate to a web component saves time and reduces avoidable issues for the project. Our best web projects have come out of this prioritization of these interactions together.

Reducing the knowledge gap between departments

Teams fail when someone is in the dark. This could be due to multiple, disjointed channels of communication or even just simply a lack of awareness of what your teammates do. A lot of information gets lost in translation through juggling client feedback, input from stakeholders, and daily challenges. A seemingly simple conversation can turn into a critical moment for the project.

For example with Sketch, updating and exporting designs is easy from the design perspective. Sketch + Zeplin allows our team members to notify developers about changes throughout the project and provide them with a summary & explanation for it all.

Keeping design files, assets, and comments accessible to everyone

Communicating where the assets live leaves more time to identify missing pieces and address issues. The Zeplin interface takes the most complex designs and delivers a clean and clear implementation. The design comes to life with snippets of code and automation of the project. The developer gets a clearer picture of where to start, while the designers have full range to express their vision for a site. Both parties are empowered and able to communicate in a way that makes sense to them,

In Summary