Kseniia Shyshkova Photo
Kseniia Shyshkova
Head of PM
Articles
7
min read

What does it take for designers and developers to work in perfect harmony

A few 3D models with logos of Design's and Developers' tools
Summary

Developers hate designers, while designers hate developers — this is the nonsense you might hear a lot. The article sheds light on their relationships and strategies to bridge the gap between them, if any.

Developers hate designers. Designers hate developers. 

I often hear such misconceptions but let me stop you right there! None of those statements are true. Well, except for some particular situations involving particular conflicts. But come on, people argue no matter the occupation.  

Speaking of designers and developers, they aren’t wired to cross swords all the time. They can have misunderstandings and some issues, but we’re here to work them out. 

In this article, I’m gonna grab your hand and walk you through the best strategies for bridging the gap between designers and developers. So that they can come up with a super functional digital product at the end of the project.

5 Tactics to ensure a smooth designer-developer cooperation

Remember that iconic action-adventure game “It takes two” by Hazelight Studios? I personally love it! But if you haven’t played it, no problem. I’ll explain my point. 

There was a guy named Dr. Hakim. He was hell-bent on fixing May and Cody’s struggling relationship. And to accomplish that, he gave them their first and foremost task — to learn collaboration. Because “Collaboration is the key to a successful relationship. Huh? Col-lab-or-a-tion!”. And you know what, he is right. It is essential in every relationship, including designer-developer’s. 

Below I’m gonna describe some principles without which any project is doomed to fail. Because they aim to improve the designer-developer collaboration. All right then, let’s not futzing around! 

A screenshot from the video game 'It Takes Two' developed by Hazelight Studios, featuring the main characters

Principle #1: Walk a mile in the developer’s shoes

You might have heard about HTML used to build the website structure. And probably know that CSS complements that structure with different styles while JavaScript is responsible for a webpage behavior. 

But it’s vital to understand that the front-end has been developing for many years, and dozens of new libraries and frameworks appear daily. Developers are adapting, learning new technologies, and pushing the web forward. And what does that mean for designers? I’ll explain.  

Even the best web designers might not know the ropes in coding, but it never hurts to possess some understanding of the front-end and some of those burgeoning technologies. It’s crucial if you want to be a better collaborator. 

Knowing basic programming principles facilitate cooperation, allowing designers to assess the time frames and developers’ capabilities when implementing the design. They can also better comprehend edits and recommendations from web developer companies or separate engineers and perform their job accurately. 

I work at a product design agency as a relationship manager, so I know what I’m talking about. At work, we’re always in touch with clients and their developers. Basically, we step into their team for as much as the project lasts. And without coding expertise, we would simply fail to perform many tasks from developers. 

Luckily, it isn’t an issue at Lazarev.agency. We believe that good design never happens in a vacuum but only as a result of tight cooperation. And when a web designer and developer are on the same page, it’s much easier and better for the project.

Principle #2: Bring engineers into the game ASAP 

Developers are those who bring design ideas into work. Without them, your design is just a bunch of wireframes and mock-ups. See, I don’t say “a bunch of pretty pictures” because I don’t want to downplay the designers’ contribution to the project. I’m just saying that engineers implement everything, and the sooner they’re brought into the game, the better it is for the end result. 

Developers should be able to glance over the project and say, “Oh, this is going to be difficult, and I know a slightly similar thing that’s gonna be easier.” or “That looks exciting. We could animate it”. Their expertise can help you deal with creative stumps and prevent your design from running off the rails.

It is all about trust between engineers and designers. At Lazarev.agency, we put a major emphasis on that. We always ask a client to bring the developers into the project if it isn’t obvious to them. Such initiative isn’t only essential but helpful since engineers can provide us with ready-made sections if they’re available. That indeed facilitates and speeds up the project. 

For sustainable communication, we usually use Slack and Figma. But we’re also open to Jira, Trello, and other tools convenient for the client. 

Principle #3: Easy-to-follow style guide is a must

An example of an organized design system

A component approach is used in the development, meaning that large site elements are divided into small ones: buttons, navigation menus, tabs, modal windows, etc. These components are reused in hundreds of other pages or even other components. Each has its logic; at some points, it reaches hundreds of code lines.

To make the engineers’ lives easier, designers should create a unified, consistent style guide. It’s a document that demonstrates how interface components should be visually represented. A style guide or, to put it differently, pattern library, UI Kit, or interface inventory streamlines assets export and new components development. Such a tool will come in handy equally for both freelance web developers and those who work specifically in the client's team. 

Developers use it to create such components as text fields, buttons, pop-ups and others. They also leverage this tool to develop CSS styles that will be applied to the project. That allows assembling all the elements without spending much time on design and development. 

It's crucial to understand that developing even a simple element is a time-consuming and expensive job, especially when making it convenient and scalable. So it’s easier to design and program each element once and then use it in all projects.

Style guides are also beneficial for freelance web designers as well as those who work in the client’s company. They stimulate a consistent visual identity. Thus, the interface system remains logical and harmonious, contributing to a better user experience. At the agency where I work, we provide engineers with a UI Kit in 99% of projects to ensure the design is implemented just like we’ve planned. 

However, our role doesn’t end once the design is handcuffed to the development team. We’re responsible for the final product as much as engineers. So we carefully organize and group everything when passing our mock-ups. We also adapt the design for mobile, tablets, and other extensions, if necessary. Such an approach makes a QA design check and further cooperation easier. 

Principle #4: Don’t forget the prototypes 

To ensure an A+ collaboration, don’t underrate the importance of interactive prototypes. They allow developers to plan the scope of tasks and better understand the design concept and how users will interact with the product. 

Without prototyping, engineers won’t be able to comprehend the most important thing — how the final product should work. 

You don’t need to stick to a granularity approach when working on a prototype. It’s enough to break the flow into blocks and use minimum effects when animating elements. That will prevent developers from facing any confusion. 

And if your prototype is quite complex, add explanations. That’s especially vital if it won’t be demonstrated by a designer but by a project manager. So open up your Figma, Marvel, Principle, InVisionApp, or any other convenient tool and get the ball rolling. 

Principle #5: Keep limitations in mind

Screenshot of the industrial chemical marketplace website displaying navigation options

Napoleon Hill once said, “Your only limitation is the one you set up in your own mind!”. Well, Napoleon could say whatever he wanted, especially in his books. But regarding the design-developer collaboration, there are some limitations to be aware of. For example, the product’s loading speed and cross-browser compatibility may put a spoke in the designer’s wheel when animating many flying 3D objects. So it’s always better to discuss such solutions with developers first. 

The client may also impose limitations on your work by asking you to use ready-made component libraries to speed up the project. And you should take that into account. 

If that’s what the customer wants, we leverage the library when developing UI at Lazarev.agency. What can we say, the client is always right. Engineers benefit from it too. In this case, they don’t spend much time developing certain elements and their logic from scratch. 

Before getting started with the project, we explore the library, read the documentation, select the components and test them. By “test,” I mean that we analyze the adaptation to different screen sizes, the logic of work, and possible style or animation changes. By the way, when changing the visual appearance of some components, we don’t alter their logic, meaning the principle of opening a dropdown or choosing a date in the date picker. Why complicate developers’ lives?

One last thing 

When all’s said and done, what’s your idea on designer-developer cooperation? I hope we are on the same wavelength now. And you agree that tight collaboration is a must when it comes to the end result. 

The last piece of advice I’m gonna give is to treat developers like end users considering their pain points and needs. Because only effective cooperation between designers and engineers can result in high-quality products that customers will love. 

All right, guys, thanks for reading this article till the end. Follow me on LinkedIn for more information and enlightening materials. Hasta la vista, and good luck!

Marlena Stablein Photo
Marlena Stablein
Director of Operations, Blavity
Valeriia Mashyro Photo
Valeriia Mashyro
Project Manager
Viktoria Levchuk Photo
Viktoria Levchuk
Content Manager
Kyrylo Lopushynskyi Photo
Kyrylo Lopushynskyi
3D Designer
Konstiantyn Potapov Photo
Konstiantyn Potapov
Project Manager
Oleksandr Golovko Photo
Oleksandr Golovko
UX Researcher
Anna Hvozdiar Photo
Anna Hvozdiar
Director at Prytula Foundation
Ostap Oshurko Photo
Ostap Oshurko
Design Lead
Nielsen Norman Photo
Nielsen Norman
Stas Tsekhan Photo
Stas Tsekhan
Head of HR
Anastasiia Balakonenko Photo
Anastasiia Balakonenko
Design Lead
Oleksii Skyba Photo
Oleksii Skyba
Webflow Development Lead
Isaac Horowitz Photo
Isaac Horowitz
Founder at Blockbeat
Danylo Dubrovsky Photo
Danylo Dubrovsky
Senior UX/UI designer
Hanna Hvozdiar Photo
Hanna Hvozdiar
Director at Prytula Foundation
Oleksandr Holovko Photo
Oleksandr Holovko
UX Designer At Lazarev.
Emily Thorn Photo
Emily Thorn
CEO at Thorn Associates
Oliver Hajjar Photo
Oliver Hajjar
CEO & Co-Founder at ShopSwap
Kenneth Shen Photo
Kenneth Shen
Managing Partner at Half Past Nine
Safwan Al Turk Photo
Safwan Al Turk
CEO at Conscious Baboon
James Crane-Baker Photo
James Crane-Baker
CEO at Gigworkers
Laith Masarweh Photo
Laith Masarweh
CEO at Assistantly
Katie Wadsworth Photo
Katie Wadsworth
Head of Product at WellSet
Matt Hannam Photo
Matt Hannam
Executive Director at Kin
Jorden Beatty Photo
Jorden Beatty
Co-founder at DASH
Kumesh Aroomogan Photo
Kumesh Aroomogan
Founder at Accern
Andrey Gaday Photo
Andrey Gaday
Head of Design at Lazarev.
Aman Kansal Photo
Aman Kansal
Co-Founder at Encyro Inc
Nicolas Grasset Photo
Nicolas Grasset
CEO at Peel Insights, Inc
Jens Mathiasson Photo
Jens Mathiasson
CPO & Co-founder at Fieldstream
Josh Allen Photo
Josh Allen
CEO & Founder at Tratta
Kenneth Shen Photo
Kenneth Shen
Co-founder at Riptide
Tommy Duek Photo
Tommy Duek
Founder of Teachchain 
Maxence Bouvier Photo
Maxence Bouvier
CEO at Mappn
Ibrahim Hasani Photo
Ibrahim Hasani
Co-Founder & Head of Engineering at Metastaq
Boyd Hobbs Photo
Boyd Hobbs
President & Owner, NODO Film Systems
Nick Chapman Photo
Nick Chapman
Founder at Pika AI
Anna Demianenko Photo
Anna Demianenko
Design Lead
Oleksandr Koshytskyi Photo
Oleksandr Koshytskyi
Design Lead
Kseniia Shyshkova Photo
Kseniia Shyshkova
Head of PM
Volodymyr Khliupin Photo
Volodymyr Khliupin
Head of UX
Yurii Shepta Photo
Yurii Shepta
Head of Marketing
Kyrylo Lazariev Photo
Kyrylo Lazariev
CEO and Founder

Don’t
miss
Anything

00 FPS