Align design & development

Designers and Developers, when joined together we are able to create high quality products. We aught to work together as a team, but most of the time we don’t.

Well, not really. We have the natural tendency to drift away from each other, which affects the product’s quality. And it doesn’t have to be that way. In this article I would like to share my thoughts and ideas about connecting the disciplines and improving the workflow. Which brings me to the following question:

"How do you stay aligned and safeguard design?"

Not really working together will affect the quality of the final product. Combined with assumptions and a lack of communication, you’ll have a state to be concerned of. Understandable, we’re getting in even more trouble when ignored. Resulting in a final product that is ‘totally’ different from the original design — not satisfying the team nor client. Where ‘totally’ is not like developing random odd pages, but moving that button 3px to the left. This may sound like a "doom scenario” to you, but it appears within small, medium and even global tech companies. So it’s kind of an important subject.

Connected workflow
By definition, our project workflow preferable involves both a designer as developer. During design, possibilities and fancy ideas are checked with the developer and their thoughts should be aligned. This is the moment where the developer approves the solution and agrees it’s feasible within time and budget. On the other hand, the developers should check the implemented design with the assigned designer. We all have an eagle eye for something, so make sure to use it when appropriate.

Is the above paragraph somehow new to you? In that case you’ve something to talk about in your team. Either way, there are always ways to improve workflows — even if you’re a 'design ninja' or 'frontend guru’. Let me address some of the subjects, which touches the aspect of quality assurance and strengthen the layers of your workflow. Because when one layer (partly) slacks, we’ll already have room for improvements.

Don’t be a stranger
Probably the most important one to get you started; don’t be a stranger to your teammate. Grab a coffee and get acquainted. Talk about ideas, optional features, responsive behaviours and the final result to achieve. Development should never be detached from design and vice versa. A designer is totally dependent on the team’s developer to transfer their design to a final product. Whereis the developer dependent on the designer to understand all ideas and flows. Yes, this may take you an hour or two, three. But trust me; it’s totally worth it and will get you more aligned. Also saving you those hours working at night — because "someone misunderstood something”. In the end you’re in this together to perform the trick of delivering the best product. Team up!

"Understand the other discipline and talk, instead of just work, work, work, work, work."

Shared language and knowledge
Once you’re no stranger anymore, try to talk the same language. Name your ideas / flows / modules / pages / to-dos and use these names within your entire team, including the client. It will help you to understand each other, without making assumptions about the subject. This may sound really obvious, though it’s far from being a standard. When done properly, it will save you a lot of miscommunication and time.
The moment you talk the same language, you can actually start sharing knowledge. Knowledge about cross-discipline tasks and the know-how of default tasks within a project. That custom dropdown for example — just three layers in Photoshop, Sketch or Adobe XD but how is this actually been developed? Are there any restrictions or best-practices? Or that moment where the developer is building the brand's UI and finds out he needs specific hover- and inactive-states in the styleguide. When we’re sharing knowledge, we don’t limit the other discipline but actually helping them with valuable information.

Continues involvement
When working side by side, we should continues share results and polish the project on the go. Don’t wait until the end where you might receive a bulk of feedback. Communicate often, give feedback and finish those small tasks during the general flow. This includes comparing cross-discipline results to improve quality. I’m not going in depth on this, because I wrote a separate article about it. But the key is to compare the result in your browser with the final design, there are browser plugins available to do so. Simple checks like this will show minor and major flaws, which we can fix before client review. We focus on delivering high standard products after all. We don’t want to have that awkward moment where the client reports a bug which could have been foreseen and fixed in just 15 minutes.

Our industry is all about working on continues evolving platforms and devices, in a variety of teams with which we produce high standard products. It’s important to have a connected workflow between design and development, make sure you are aligned and really work together. Subjects like "avoiding assumptions, team up with your peer, share knowledge and always stay involved” will help you get you to an improved workflow.

Let's always aim for the unachievable result. Because only then, we are challenged to grow!