Have you ever seen Gerhard Richter painting?

It is phenomenal to watch. He might start one of his large, abstract paintings by carefully applying oil paint to the canvas with a thick brush. Then, he begins to scrape, smear, or add new layers of paint with a large, home-made squeegee. After each change, Richter pauses, takes a step back, and looks at the result: What did just happen with the picture? What composition has come about? Where have interesting parts emerged? What is the next move that might bring the piece one step closer to completion? And which action would be a mistake? There is a lot of intention and carefulness in this process, yet Richter equally respects the results of accident and chance. He lets go of a certain kind of control to let things happen that are surprising and exciting. But at the same time, Richter always exerts enough control to influence the result. He decides what to keep and what to destroy. It is the ultimate creative process: a constant dialogue.

So much about this reminds me of designing and building for the Web: The unpredictability, the peculiarities of the material, the improvisation, the bugs, the happy accidents. There is one crucial difference, though. By using static wireframes and static layouts, by separating design and development, we are often limiting our ability to have that creative dialogue with the Web and its materials. We are limiting our potential for playful exploration and for creating surprising and novel solutions. And, most importantly, we are limiting our ability to make conscious, well-informed decisions going forward. By adding more and more layers of abstraction, we are breaking the feedback loop of the creative process.

Ask any artist, musician, or writer and they might tell you that this conversation at the heart of the creative process is what makes their work special and so fulfilling. No piece of art exists in its final form in the head of the artist before the first brush stroke is put on the canvas. No musician has a full piece of music in her head without a conversation with instruments or the score. And no novel is done before the first word is put on paper or a computer screen. Constant reflection and refinement are key to creating any piece of work. This is what lets creators of any profession learn and grow, and, ultimately, achieve mastery. And the same is true for any user interface, design pattern, piece of code, or content on the Web.

There are a lot of amazing new technologies just around the corner. CSS Houdini with the Paint API, for example, or various other Web APIs like the WebXR Device API for creating augmented or virtual reality experiences or the Web Speech API to design voice user interfaces. If we want to explore and create amazing things with those new technologies, we need to be able to have that creative dialogue with the materials in front of us. And in most cases, this means: We need to work directly in the browser. We need to paint with code.

So maybe this is the perfect time to get your hands dirty with some real paint and finally learn to code? Or, if you are a developer, to inform yourself about white space, contrast, color theory, and web typography to be able to take that step back and look at your work. And even if all of this isn’t an option for you and your team at the moment, you can still look for ways to bridge the gap between design and development and to enable that creative dialogue. Carry out little experiments together, dissect examples together to get an idea of what is possible, build prototypes together, and design and decide in the browser together.

We all love to design and build for and with the Web. Yet far too long we have adhered to ways of working that are residues of the print era. This served us well for a while, but the Web isn’t like that anymore. The canvas has changed. The materials have changed.

It is time we finally start painting with the Web.

❦

Interviewer: How do you know when [your paintings] are finished?

Richter:

-

This is the 63rd post of my 100 days of writing series. You can find a list of all posts here.

~

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.