Do designers think in CSS?
As a web designer, both for websites and applications, I often find myself caught in a mental model that leads me to design in a certain way. For example, I might draw a rectangle, thinking it will later have the .container class to assist with alignment, or I may define a font size that I know won’t end up being exactly the same number of pixels, or I could design an element while considering which micro-animation will make it feel just right.
In other words, what I’m doing is introducing the “web factor” into the design process: its subsequent implementation in CSS. And that makes a lot of sense, right? I’m not designing something to print on a T-shirt or in a magazine. No, I’m designing for the web. And there’s no way to separate web design from CSS.
Well… actually, there are ways to make that separation. In fact, it may be considered normal to do so… But does it really make sense? CSS is the very foundation of the visual experience on the web. Does it make sense not to consider it during the design process?
CSS4 & CSS5
With recent advances in CSS, this question has become even more relevant. In the past, I tried to avoid certain decisions that could complicate their later implementation. But now it’s different. When I design, I no longer think about what “hack” I might need to use to make the design work in CSS. No, in fact, now I think: “This element is going to look much better when I implement it in this way.”
This means that CSS is no longer a limiting factor. In fact, it now seems that the limitations or over-complexities/hacks are in the design tools.
So, I ask the question again: Does it make sense not to consider CSS during the web design process?
Obviously, the answer is no. It doesn’t make sense.
Design for the web
But then, what does it mean to consider CSS during the design process?
Maybe designing directly in the browser with CSS? Is that the idea?
Probably not. The truth is, a “visual direction” is needed before starting implementation. I doubt that starting with an empty HTML file, as if it were a blank canvas, is the best approach.
We need a clear visual direction. But at the same time, we can’t cling to static images when we know that the web, by nature, is not. The web is not only not static, it’s absolutely chaotic.
So, where is that middle ground?
The answer is simple in theory, but not so easy to implement:
Both disciplines must work together. Canvas design and CSS design cannot be isolated processes where one begins when the other ends. They must be integrated, work in parallel, and enrich each other. Only in this way can we achieve a design that is truly for the web.
The web designer role
And of course, it is in this “design for the web” that the importance of someone who connects the design on a canvas with the nature of the web comes into play. I think this role goes by many titles. I’ve seen titles like “front-end designer,” “UX engineer,” “web design engineer,” and several others. But we can probably simplify these titles and simply call whoever fulfills this role: Web designer. After all, that’s the function.
So, what does it mean to be a web designer in 2024? I don’t dare to give an absolute definition, because I’d surely leave out important aspects. But what I am sure of is that being a web designer doesn’t just mean designing static images for the web. Instead, it means working with adaptability across an endless number of devices and screen sizes, adaptability in layout, typography, spacing, margins, images, and practically all elements. It means designing interactivity and accessibility. It means designing animations and transitions. And of course, being a web designer means designing with the most powerful tool currently available for web design: CSS itself.