Painting With the Web

A painting by Gerhard Richter in the exhibition of the Albertinum in Dresden, Germany

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:

When nothing disturbs me and I have no idea what to do more, what I could add or destroy. This is very surprising, often, when I’m painting, again and again, every day and it feels like it is never-ending […] and it will never become a good painting. And suddenly, it’s finished. Oh! Good. Thanks.

-

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

~

40 Webmentions

Photo of Guillaume Deblock
Guillaume Deblock
"Painting With the Web" – by @m_ott matthiasott.com/notes/painting…
Photo of Matthias Ott
Matthias Ott
Thank you, Colly! ☺;️; Sites like yours are a prime example of the sort of creative expression I was thinking about when writing this. Looking forward to reading your post!
Photo of Simon Collison
Simon Collison
Love this. I wish more people would see and feel the web in this way. I’m tinkering with a lengthy post/rant about the creative potential and self-expression that attracted me to the web, and how we’ve strategically devalued that. I’ll be sure to reference this.
Photo of Ryan Downie
Ryan Downie
Can you tag me when post goes live please. Working on something along these lines (formulating anyway)
Photo of Sara Soueidan
Sara Soueidan
❥; Painting with the Web matthiasott.com/notes/painting… by @m_ott — The connection between analog art and the Web (digital painting with code in the browser) is what made me fall in love with this craft and choose design engineering as a career. This article itself is a piece of art.
Photo of Jeremy Keith
Jeremy Keith
Painting With the Web · Matthias Ott – User Experience Designer November 1st, 2020 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 ...
Photo of Adactio Links
Adactio Links
Painting With the Web · Matthias Ott – User Experience Designer matthiasott.com/notes/painting…
Photo of Ana Rodrigues
Ana Rodrigues
For me this is what comes to my mind when I think about the web as a material. Time to let go the fear of judgement of mixing "web materials" and explore more. I'm not afraid of graphic design software, so I shouldn't be intimidated by the browser either. Great read Matthias!
Photo of Simon Collison
Simon Collison
Love this from @m_ott. He laments our unwillingness to exploit the web's materiality and describes web design/dev as it could be. To get there, we must loosen up and find the work through a dialogue of reflection and refinement. matthiasott.com/notes/painting…
Photo of mir
mir

Painting With The Web - Matthias Ott

…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.matthiasott.com This. This. ...
Photo of Ana Rodrigues
Ana Rodrigues
For me this is what comes to my mind when I think about the web as a material. Time to let go the fear of judgement of mixing "web materials" and explore more. I'm not afraid of graphic design software, so I shouldn't be intimidated by the browser either. Great read Matthias!
Photo of Val Head
Val Head
"...We are limiting our potential for playful exploration and for creating surprising and novel solutions..." Thoughtful reflection on how we work with the web from @m_ott : matthiasott.com/notes/painting…
Photo of Zac Halbert
Zac Halbert
Painting With the Web, by @m_ott. A great argument for why designers should learn to code. matthiasott.com/notes/painting…
Photo of Deborah Edwards-Oñoro
Deborah Edwards-Oñoro
"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." matthiasott.com/notes/painting… #WebDesign
Photo of Bryan Matthews
Bryan Matthews
Painting With the Web, by @m_ott matthiasott.com/notes/painting…
Photo of Kate Lomax
Kate Lomax
"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." - Painting With the Web by @m_ott matthiasott.com/notes/painting…
Photo of Halfvet
Halfvet
Mooie poëtische blogpost van designer Matthias Ott die in de werkwijze van schilder Gerhard Richter inspiratie vindt om te ontwerpen voor het web. matthiasott.com/notes/painting…
Photo of VisionSnap
VisionSnap
Painting With the Web CSS Tricks matthiasott.com/notes/painting…
Photo of Thom Krupa
Thom Krupa
I like the comparison of Richter's approach and building for the Web. It relates to creating anything really. Data, UX, tools are important. But take a breath and try to make an honest, creative inner dialogue. You may be surprised by the results. matthiasott.com/notes/painting…
Photo of HJ Chen
HJ Chen
"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."
Photo of philipp pape
philipp pape
Painting With the Web · Matthias Ott – User Experience Designer matthiasott.com/notes/painting…
Photo of Andy Weisner
Andy Weisner
Painting With the Web, by @m_ott matthiasott.com/notes/painting…
Photo of Matthias Ott
Matthias Ott
Thank you, Ana! 😊; I’m so glad the article was helpful!
Photo of Austin Mayer
Austin Mayer
UX/UI isn't your export, it's what gets delivered to the user. It's code. I've been trying to live in the design <> dev gap my entire career and this piece by @m_ott perfectly sums up why. matthiasott.com/notes/painting…

Likes

Reposts