Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Image by UX Indonesia from Unsplash

Developers And Designers - Part 1

Oct 18, 2020
3 min read

DESCRIPTION

Finding a common language is not a simple task. Developers think in a more abstract way, focusing on functionalities, trying to reuse components, avoid duplications in the first place. On the other side, designers treat things more visually, need to present them to clients, and argument value behind their designs. But, designers also have common properties, components, and sometimes, even patterns to avoid duplication and repeating themselves. Developers and designers have more similarities than they think. They just don’t speak the same language, hence the confusion and miscommunication happen from time to time.

Introduction

I worked in an Agile environment, including Scrum and Kanban. Iterations, sprints, demos are all part of that. There is a lot of communication and collaboration needed to succeed.
In this series I’ll try to share my experiences working as a Frontend Developer and Tech Leader, describing collaboration with designers on different aspects of the project, from product development, features creation to building a design system.
The formula will be a problem description and its possible solutions.

Problem - Lack Of Understanding

Not all designers are developers and not all developers are designers. It’s great if developers can understand Atomic Design, usability, accessibility, the importance of spacing between elements, typography, color rules, but usually, the main focus is to implement functionality without considering all of it, just following a design.
It can lead to more code duplication, lack of UI, UX patterns consistency, as it all won’t be caught during the design review or implementation. And the end result will be confusion for users.
On the other side, It’s fantastic if the designer understands the concepts of Grid System, had some hands-on HTML, CSS, maybe even basics of JS, and is familiar with browser limitations. Additionally, understands what are props in React or other popular frameworks, knows a bit about components composition, etc. Unfortunately, sometimes this knowledge is ignored and the final design increases implementation time due to skipping some of the mentioned concepts.
We tend to focus on delivering tasks in a manner that is convenient for us under the time pressure and without realizing, making the work more complex for others. The reason for this is usually a lack of knowledge or not understanding each other workflows.

Solutions

Happily, there are ways to solve this problem. Apart from daily standups, sync. meetings, you can proactively try to aim for more in-depth activities to improve the understanding and work on finding a common language.

Workshops

When starting a new project, getting to know each other, ask for a workshop to go through the design and implementation processes. On-site with a client or remotely, brainstorm about some MVP, internal application consisting of 2 to 3 views.
Create a design together with developers, ask common questions, pay attention to the details, and try to explain all the important concepts to them.
Then, let developers take a lead and look at how they build an application, drawing on the board all of the components, relations between them, possible ways to avoid duplication to final implementation.
This should give all of you a fair knowledge about the workflows, tighten up the collaboration, and bonus points for integrating with a 🍕+ 🍺.

Processes

During the workshop time you can additionally brainstorm about the combined flow between product (clients), designers, and developers for the future.
It could consist of a list of steps when creating a new feature, who, when, and why should be involved. Furthermore, you can sketch some initial FAQ or documentation. But, as always, prepare for the next increments, nothing is final in IT. 😅
Note: This also works for existing projects when having troubles in collaboration between developers and designers.

Closing Notes

And that's it for Part 1 - Collaboration Between Developers And Designers series. The next part will be about Chaos In Planning which should be released this Sunday. Stay tuned!
Big thanks for reading the article, you're awesome! 🙇‍♂️
You can also find me on:
Thanks for all the support. ❤️
logo with a rocket of the BigDevSoon application

Level up your Frontend skills

Code real-world projects based on Figma designs.
spread the word
Did you like this post? Share it with the world! 🌐