Comunicación diseño y desarrollo web

Effective communication: web design and development in harmony.

Communication

The first thing that comes to mind when the subject of communication within a multidisciplinary team comes up is the title of John Gray’s book, ‘Men are from Mars, Women are from Venus’, but adapting it to the context: Developers are from Mars, Designers are from Venus and Business is from Mercury, so the first key to everything is communication.

At Doowebs we have the facility to work together, which greatly facilitates communication between the three disciplines: Development, Design and Business. So when it comes to making decisions we all get involved to focus the solution and the efforts of each project.

Having such different projects, such as a corporate website for a bank or an e-commerce of handmade products, not all of them have the same objective. So when it comes to making decisions, we debate which would be the most optimal to achieve the objective set by the client, and as Aristotle said: ‘In the middle ground is virtue’, so with the client’s requirements and the limitations of each aspect we decide where we give more time or priority to the code or the design. At this point it has been very helpful for us to empathise and understand the needs of the other aspects. In design, for example, we have been trained in the basic logic of programming and in some of its languages.

When we reach a conclusion, it is validated by the three pillars of the project and we have communicated the decision to the whole team in order to continue working along the same lines.

Another key point of communication is to speak the same language, when naming the elements we use a nomenclature in the same language (in our case we chose English) as well as the same name of the element.

It is also important that once the prototype has been created, the interactions devised by the designer are reported and justified to the Development team. This makes it easier for both the developer and the designer to focus their efforts on creating the project and not waste time developing or designing elements or animations that, as defined in the objective, do not bring significant value to the user.

The design

The second point is the design deliverable, this is a set of wireframes and/or prototypes where you can see as realistic as possible the final design (layout of elements, colours, animations…) Once Development has the design deliverable, if we have done it correctly, the developer does not have to have any doubts about the design and will be able to reproduce it in code.

For this, in the Design department of Doowebs we have created several Design Systems in Figma and we have documented them. We also make prototypes with the corresponding animations. So at the end the developer has the Figma document, with the set of elements and the prototype, and a document where each element is specified separately.

As we have programming knowledge in the department we have added a plus of value: As we work under the atomic design, we have added in the documentation the styles in CSS language of each atom of the design system (titles, texts, buttons, form elements …). With this we also help to reinforce the first point about communication and having a common language, as the classes of the design atoms are named according to the Figma design element.

Conclusion

Here are some key points about the importance of communication and how we implement it in our team:

  1. Cross-functional communication: You recognise the diversity of roles and skills in your team and how everyone contributes from their perspective. Effective communication aligns everyone’s objectives and efforts towards a common goal.
  2. Collaborative decision making: Joint decision making between Development, Design and Business ensures that all perspectives are considered and resources are optimised to achieve the client’s objectives.
  3. Empathy and cross-training: The fact that team members are trained in the basic skills of other disciplines shows a commitment to understanding each other’s needs and limitations. This fosters an environment of collaboration and mutual understanding.
  4. Validation and communication of decisions: By validating decisions by the three pillars of the project and communicating them to the whole team, it ensures that everyone is on the same page and avoids fragmentation.
  5. Communication standards: The choice of a common language, in this case English, to name elements and concepts is essential to avoid misunderstandings and confusion. Standardisation of terminology facilitates collaboration.
  6. Clear design deliverables: Figma’s wireframes, prototypes and design systems give developers a solid foundation to work from. Detailed documentation also ensures that there are no ambiguities in implementation.
  7. Added value through documentation: Having the Design department provide CSS styling for each design element is an excellent practice. This not only helps developers implement the design, but also maintains visual consistency and efficiency in development.

In short, effective communication and collaboration are essential in multidisciplinary teams, and at Doowebs we address these aspects to achieve successful joint work on diverse projects.