There is a divide between web designers and web developers that seems to separate two distinct worlds, often accused of failing to understand each other. On one side are the designers, with their aesthetic vision and creativity; on the other, front-end developers, immersed in programming languages: a dense cascade of symbols reminiscent of the sequences in Matrix — with the sole difference that no red pill will reveal their meaning.
The assumption is simple: it is difficult to appreciate what we do not understand. If a designer is unfamiliar with code, or a developer does not recognise the value of a carefully designed user experience, the final product may suffer as a result.
So, does a good designer need to know how to code? And can a developer do without a sense of aesthetics?
Towards dialogue
Not long ago, web designers and developers worked on parallel tracks, observing each other from a distance and rarely crossing paths. Designers created static interfaces in Photoshop, while developers were tasked with translating their intentions into code, in a process involving minimal communication. This clear separation created fertile ground for misunderstandings and compromised outcomes: visual details lost in translation, complex features simplified out of necessity, and an inevitable game of telephone between those who envisioned the user experience and those who brought it to life.
The growing complexity of the Web has made communication between the two an increasingly important factor, requiring an iterative approach based on continuous collaboration. Rather than handing the project over like a relay baton, they now need to build a common language together, based on reusable components and living documentation.
Today, as in the past, the objective remains shared. The new challenge is to establish a constructive dialogue and a collaborative way of working throughout every stage of design and development, so that we can identify and resolve inefficiencies together.
Web designers and front-end developers: a shared language
Different backgrounds and different approaches are said to lead to different problems; when design tools align with development logic, the gap between visual design and technical implementation also narrows, reducing the problems arising from these differences. This hybridisation concerns not only the tools used for web design, but also the front end as a whole, where the integration of form and functionality is becoming increasingly organic.
The result? A blurred boundary between the two roles, a shared language that is beginning to converge, and common approaches; with designers thinking in terms of components and developers immersing themselves in UX.
Web design tools: the Figma case
If not the most popular, certainly one of the best-known tools in the web design sector, Figma is a collaborative tool that simplifies and streamlines each stage of the design process. Interactive prototyping, variable management and CSS code export are just some examples of its ability to act as a bridge.
Web designers and web developers: Autolayout and Flexbox
What is interesting is Figma’s alignment – as a web design tool – with concepts familiar to the world of development. When a web designer uses Auto Layout, they are, more or less consciously, adopting a mindset similar to that of a developer. After all, Auto Layout is simply the more stylish sibling of Diplay flex: sections and dynamic components resize by adapting to the content or to the device on which they will be displayed, just as they do with Flexbox in a coded interface.
Variables and JSON
I Design tokens define and document design decisions. In simple terms, they are variables: a standardised way of describing colours, typography, spacing, borders, shadows and any other recurring property. The concept of variables, traditionally associated with coding, is now also part of designers' workflows.
Just as they would be used in programming languages, design tokens can be created and managed through Figma’s local variables panel. When exported as JSON files (JavaScript Object Notation) – a data format used to represent information structures – tokens facilitate integration with development systems. One Figma plugin in particular makes the process more straightforward. It analyses local variables and generates a JSON file compatible with Tailwind CSS, one of the most widely used utility-first CSS frameworks.
In summary, adopting design tokens and using shared formats enables collaborative working, with tools and language providing the main points of connection.
From web design to web development: a new mindset
Conversely, in recent years we have seen a range of development frameworks emerge and influence one another, adapting to the evolution of the Web. Concepts such as responsive design, mobile first and design system have become part of web developers’ everyday vocabulary, developing into guiding principles for creating consistent and adaptable digital experiences.
FE Libraries
When it comes to CSS frameworks, the undisputed leader is Bootstrap. With its well-known 12-column grid, it has made the concept of responsive layout more straightforward, allowing designs to adapt to different devices. Its mobile-first approach has also been transformative, encouraging developers to design interfaces with the smartphone version as their primary consideration.
A prime example of a Design System is MUI (Material-UI). Based on Google’s renowned Material Design, it is now one of the most widely used libraries for building React interfaces. Its ready-to-use components help create dynamic interfaces, fluid and particularly intuitive, bringing the work of web designers and web developers into closer alignment to provide a smooth digital experience.
Necessary hybridisation
Returning to the initial question: does a web designer really need to know how to develop and, conversely, does a developer need to think in aesthetic terms?
We do not need to become experts in everything, and we cannot predict whether hybrid professional roles will be the future. But one thing is certain: the interaction between different skills is inevitable. The real difference lies in each person’s approach: allowing ourselves to be influenced by disciplines outside our own and, above all, cultivating curiosity, opens up new perspectives. Understanding the work of professionals in complementary roles not only broadens our perspective, but also makes us better colleagues and more well-rounded professionals. And who knows, we may even discover unexpected passions and new, unforeseen paths.
