Haven’t you seen many times designers and developers that seem to misunderstand and disagree? In the end, this translates to a great deal of time wasted on both sides, which is why it is very important to work on preventing these problems. And it is that, when we enter the world of work, we realize that creativity is not the only valuable facet of a professional, but that the organization has a very important role, because the creation of a digital product is teamwork.

Today, I want to speak based on my experience of what is on us, the designers, to prevent a good amount of these conflicts. A series of good practices for designing for developers. 

Let’s empathize with developers

We have to think that the implementation of the designs is the last step to pass the product to production. In other words, the functionalities, behaviors and the different casuistry should be considered and correctly defined before proceeding to develop them. Every product starts with design, but we need feedback from developers to explore possibilities, and doing it together brings many benefits.

Once the functionalities are defined, the designers are the ones who think about how the product is going to be used, and what will happen in each interaction that the user makes with it (or even what happens when the user stops doing it). That is, based on what we see in users, we make the decisions that we believe are most convenient. Later, it is also our mission to make sure that we do not make mistakes, so that when the time comes to implement it, we all know the behavior in any of the situations that may arise.

Go beyond a few simple screens

If we design some screens but do not define a relationship between them, it is very easy that the flow is not interpreted properly. Therefore, the first step should be to define the user flows, long before getting into the interface.

Take into account the different states of a component

What happens when we press a button? What happens when a list is empty? We have to take into account all the possibilities so as not to leave room for doubts. If something is to be developed, it has to be previously designed.

Consistency in design

Screens that have 3 colors, another three screens with 4 different colors and a last one with 2 similar colors, but if you look closely, they are not the same. If we are choosing colors with the eyedropper or there is not a clearly defined color palette throughout the entire product or brand, it will not only be chaos for the developer (and for us). Those inconsistencies will also negatively affect the user.

Anticipate problems

The reality is that on many occasions, for one reason or another, it is difficult to put together a single team that integrates design and development. We know that would be the ideal, but it tends to be difficult. Usually we find separate pieces working on their own project: the designer on their screens and later the developer painting what he sees of the designed screens, where there is rarely fluid communication. However, we must do everything possible with the other party in mind to arrive at the best result. Every time the developer asks how something works or how it moves that we had not thought, one of the following things usually happens:

• The developer does what is most convenient for him.
• We have to go back and probably redefine various interactions.

Let’s do our job well

To work efficiently with developers, it is essential to take into account the way in which we work. And to clearly communicate what we have designed to the developer, we first have to understand it ourselves.

Start small

When we begin to design a product, it is always a good idea to start with the global view of it, and then to refine the details little by little. That is to say, we will start with the concept, the solutions they cover and the functionalities, and from there we will land it on user interactions and a visual interface. In the visual section, in the same way, we will first define the main elements, base sizes and main colors, and from there to more specific details.

Create a basic style guide

Anything that can be standardized will add to the simplicity of our product. We will try to create patterns and rules so that it acquires consistency throughout the entire experience with the product.

These rules should be reflected in some way so that developers are aware of what we have defined. Depending on the time we have, we can leave a comment, create a simple artboard with practical examples or even a complete design system. Some small examples that save a lot of time could be: having the assets grouped and ready to export, elements and components with their different states, a basic guide to styles… The better we document how our design should behave, the better. Ideally, it should be self-explanatory so that anyone understands it without having to ask us.

Work with components and variants

It is very important to keep our designs organized. Whether it’s a small or long-term project, it always pays to create a system that is maintainable and scalable.

This means that we should define the elements and components that we are going to reuse throughout the project. Thus, every time we want to add a change, we will not have to go screen by screen applying the same change.

In the same way, we should study the colors that we are going to need throughout the project, for different states and even for the shadows. Likewise, we should create the typographic styles to avoid inconsistencies as we pointed out above.

Let’s be better designers!

And here are my tips to be a better designer. I have the firm belief that by applying these points on a day-to-day basis, we save a lot of time and effort, both for ourselves and for the people we work with.

If you know of other ways to work efficiently, I encourage you to leave it in the comments so that we can all learn together!