Our web design tools are holding us back

When I was still working as a frontend developer, a long long time ago, all the designers I worked with used photoshop to create images of websites. Back then, photoshop had all kinds of features that were not native to the web, like border-radius, gradients, blend-modes and shadows. We had to use hacks in order to make our websites look like photoshop. Nowadays people use tools like figma. These tools use a subset of CSS, which means that it is much easier to build a working website from a figma mockup, without using any hacks. These new tools are holding us back though.

Progressive tools

The web fantasies that designers created with photoshop were impossible to create with CSS. They resulted in very complicated code bases, made with all kinds of hacks in order to make it look like it should. The websites that we built were bloated, slow, and buggy. But they did look exactly like the photoshop file, with all kinds of beautiful details. After a very long loading time.

I hated this way of working. I wanted our designers to understand web technology so we could build websites that look good, and work well. If it was up to me, the web would have no gradients, no shadows, no border-radii, no blend modes, no custom fonts.

I was wrong. It is true that websites would have performed much better back then if we had only used the features that CSS gave us, but it would mean that the web would still look like that today.

Since designers really wanted rounded corners, we added border-radius to the CSS specification. And gradients, and blend-modes, and shadows. And more. Much more. So much more!

Conservative tools.

Our design tools today use a subset of CSS. This means that what we design with these tools is easy to make, and will probably perform well, and result in a much better experience that those hacky websites I used to make. But here’s the catch:

This subset of CSS that these tools use is based on how websites look today. Or on how they looked in the last ten years — which is the same thing. Websites haven’t changed. This means that with these tools we can design websites that look like websites-as-we-know-them, but it is much harder, if not impossible, to come up with new ideas. If we accept that these are the tools we will use from now on, we accept that the web looks like it looks today. And behaves like it behaves today. Just like I used to think that the web was fine as it was before we had CSS3.

There are many people who think that the web is done. Websites work fine, they say, and people know how to use them. It may not surprise you, but I disagree.

We need real creative tools

With photoshop we could come up with things that we couldn’t build with CSS. But nowadays we can build things with CSS that are impossible to create with our design tools. We have scroll-snap, we have complicated animations, we have all kinds of wonderful interaction, grid, flexbox, all kinds of shapes, and so much more that you won’t find in the drop down menus of your tool of choice. Yet our websites still look and behave like they were designed with photoshop.

So from an artistic/creative point of view, the web could be much more interesting and diverse than it looks today. Every now and then you do see such a website. These are always designed by people who know and understand CSS, and not by people who depend on design tools.

But also from a human point of view we need better tools. It may be true that the web works fine for quite a lot of people. But every time I test websites with real people I am unpleasantly surprised by how hard they find it to use our websites. And when I test with real people with disabilities I am shocked by how impossible our web is to use. So from an artistic point of view we could create a much more interesting web, but from a human centered design point of view we can make a web that actually works for everyone.

In order to do so we need tools that are not based on a historical subset of what’s possible, but tools that allow us to experiment with all the thing that are possible today.

These tools would emphasise interaction. It is ridiculous that tools nowadays don’t force you to design all different states of buttons. These tools would also focus on user preferences, like screen size, light- or dark mode, language, reduced motion. They would help us with designing the invisible, like alternative texts, link texts, and heading level structure. They would be based on what’s possible, and not on what we’ve done before. And they would offer ways to experiment with early drafts of new specs so we can try out these ideas. They would, in other words, become real creative, and real webby tools.