Communication Tips and Tools for Improving Your Workflow from Design to Development

The transition from design to development is the weakest and slowest part of many of my web and application projects. This is how it goes: I’ll pour over these design templates, hand-crafting their every button and typographic detail, for weeks or even months. I work through rounds of revisions with the client. Finally when everything is approved, and we can’t imagine a more perfect design, I package my babies up, upload them to Google Drive or Dropbox and share with the development team. And it’s like a black hole.

We’ve now initiated the Transition. And the Transition is not always smooth. Sometimes there are questions, or small elements still needed. A modal window here, a font change there. But sometimes the questions are bigger, and sometimes changes are called for. It slows down the process and creates confusion. And I realize that all of this could have been avoided so easily: with better communication from the start of the project.

Better communication allows us to work as a cohesive team with unified goals. It minimizes the differences between designers and developers, allowing them to grow and learn, and makes way for a more thoughtfully considered finished product.

Here’s a list of tips and tools for improving your workflow and strengthening communication between your design and development teams.

Establish regular communication
Take the time to find the balance of communication methods and frequency that works best for you, your team and the type of project you’re working on. This could include a combination of emails, shared documents, workflow apps (like Basecamp, Trello, or Slack for example), and/or just the old-fashioned meeting. The important thing is to keep everyone connected throughout the entire process and facilitate conversations.

Involve the whole team in all meetings
Developers are often excluded from initial “design” meetings and similarly, designers rarely continue attending development meetings once the design has been completed. By keeping everyone involved, we’re there to hear the needs, preferences, problems and strategies to solve those problems, of the other group. Besides learning first-hand from their experiences, we’re opening ourselves up to discovering adjustments that we can make on our end to better facilitate or complement the other’s work.

Familiarize yourself with the basics of other roles
It’s unrealistic to expect a designer also to be a star developer or vice versa. By learning some of the base concepts, terminologies, and core skill sets, you’re better equipped to consider how the rest of your team thinks and to have detailed conversations throughout the entire process.For designers: HTML, CSS, SEO basics, CMS basics (functionality, some open source examples)For developers: basic navigation of design software (Photoshop/Fireworks/Sketch), saving optimized images, basic design elements, and sense of spacing

Find real-world examples
This a useful strategy to check out potential solutions in action and decide if they’re right for your project. Examples also provide a very clear point of reference to communicate ideas to the rest of your team.

Choose design software that everyone is comfortable with
There’s an array of design software these days, but what you as a designer prefer, may not be as useful from a developer’s standpoint. Be sure to communicate with each other at the start of a project, in order to make a choice that works for all: designers, developers, and the project itself.

Create collaborative style guides
A style guide is a shared document that outlines the key styles and formatting used throughout the site/application/etc. It not only helps you to maintain consistency, particularly for large projects or large teams, but also serves as a common reference point for both designers and developers.

So. Maintaining open and improved lines of communication between designers and developers throughout the entire process not only ensures a higher quality finished product, but also helps both designers and developers to learn and practice skills from the other. This will directly influence their work and the team’s overall progress.