The web through Beyond Tellerrand
Today, I'm talking about a conference that happened at Beyond Tellerrand named “Painting with the web” by Matthias Ott. I had to watch it on youtube for one of my classes and I found it really interesting so I wanted to share my discovery with you !
What's Beyond Tellerrand ?
Beyond Tellerrand is an annual event that was created by Marc Thiele in 2010. It takes place twice a year, once in May at Düsseldorf and once in November at Berlin. The concept is that some designers and developers come to give a speech about a certain topic. Beyond Tellerrand is an experience that lasts 2 days and makes you feel like you are on another planet. It’s like a short adventure where you grow, learn new things, and discuss with people that have the same passion as you with the web. It’s also thinking beyond what we are used to, it’s opening your mind to new perspectives, new points of view. Marc Thiele found a really good name, it shows well the mindset of this event.
Who is Matthias Ott ?
Matthias Ott is a German independent UX designer, design engineer and interface prototyping teacher. He also runs workshops and has his own newsletter, “Own your web” about personal websites. As a speaker at events like Beyond Tellerrand, he tries to initiate people to work with the method of design engineering, a way of working that makes designers and developers work together. He also encourages people to see the web differently: that designers see the web as a dynamic, adaptable medium and not just as a static creative space.
At first, I have to admit, I didn’t really like the way Matthias communicated his thoughts, it was a bit too condescending for me. But then he explained really well the process that designers should use for him, creating with the web rather than on the web. And I can just agree with that.
A summary
Throughout his speech, Matthias Ott questions the way we, as web designers, think about and approach the design of a website. He talks about our relationship with the web as a medium, it’s not just about the tools that we use but also how we act with it. His point is, “What if we stop painting on the web and start to paint with the web ?”.
The web is not fixed
Matthias begins his presentation by mentioning Gerhard Richter, a German artist known for his creative process. After each move he takes a step back and looks at the result, he looks at what just happened to the canvas and what move can be next. It’s a constant conversation because no work of art arrives fully formed in the mind of its creator. And this process of working reminds Matthias how we create websites with some differences. The first big one is the canvas. Richter starts every painting with a canvas with fixed dimensions and clear boundaries. But when we start a project on the web, our canvas is completely different, it’s not fixed. There are many different sizes of screens, plus it can zoom, scroll… And still most of us start our design on something static like Figma or AdobeXD. And that’s the main message of Matthias: we use a creative process as if our canvas were fixed like a poster when they are actually not fixed at all, it’s fluid. Designing without taking into account its nature means ignoring what makes the web unique.
Reconnecting with our medium
He then talks about a topic that makes sense for many designers: the distance between the designer and the result. That’s the second large difference between Richter’s process and our process for the web. When it comes to painting, the feedback is immediate, but when we design for the web, we create at a distance because our tools simulate the web, they aren’t the web. We are breaking the feedback loop of the creative process also by separating design and development. And by doing that, it also creates a gap between what designers design in their tools and what is actually possible to create with the web platform, like CSS.
Understanding the web
For Matthias, it’s important to understand well how your medium works. So he continues his speech talking about Tim Berners-Lee and his inventions: the World Wide Web, the hypertext transfer protocol HTTP and the URLs. Matthias also talks about the new structured document format HTML. The purpose of this format was really simple, it was to have a structure, a meaning to those pieces of text. At the beginning it was just about something structured, logical rather than something presentational. And then when people started to want to adjust the presentation of their documents, HTML slowly started to be jumbled with all the presentational tags. That’s when Tim Berners-Lee and Håkon Wium Lie created the Cascading HTML Style Sheet, CSS.
The power of our medium
Matthias insists on the power of our medium, how the web is flexible and uncontrollable, and that we should see that as a strength. It makes the web the most accessible and robust medium. The thing is that we have to keep in mind while we are designing that we are not controlling but suggesting the experience, and then we let the browser figure it out. Today, our medium is even more powerful, we can use Fluid Type, the display P3 color space or the OKLCH color space, CSS Grid, accessibility tools, animations,… But again, for this to happen, designers have to know what is possible to create.
Conclusion
To conclude, Matthias suggests that we continue using our static tools, but we start using HTML, CCS and JavaScript earlier in the process. He finishes his speech talking about design engineering. So that means working as a team between designers and developers and not working one by one.
What do I highlight from this conference?
I really enjoyed watching this conference. I love listening to people that are passionate about something, especially when I also like the subject ! So after watching the conference twice and reading the transcription more than once, I noted a few things that I learned during this presentation and some important things that I feel are important to remember when we create websites.
Figma vs coding
Firstly, I understood the difference between “designing on the web” and “designing for the web”. For me, I think that it’s important to design the big pieces of our projects on a static canvas. Firstly, so you have something to show to your client and you’re not working hard for nothing, and secondly, so you know where you’re going. But I think that sometimes we’re working too long on the static part, and we’re losing time for the real result. So now I know that when I start a project, I need to remember that the web is not a static canvas: it’s not because something works on Figma that it will work on every browser or screen and it’s not because something doesn’t exist on Figma that I can’t do it in my code. And sometimes when something doesn’t work like I wanted, I tend to see the flexible part of the web as a weakness, but now I see it with another point of view because it makes the web more accessible and robust. Only the web content can adapt to different screens, and only the web users can adjust the presentation of the content as they want, that makes the web kind of something magical !
The web history
Secondly, I think that it was a good idea for Matthias to remind people of the web history. I feel like it’s important when we learn coding why something is like this and not like that, why this rule exists, why we use that method… If we learn why we are coding that way and not in another way, we tend to understand and remember more quickly even though the rules might change in the future.
A suggestive experience
Another important thing is that we, web designers and web developers, have to keep in mind that we are creating to suggest an experience. And this experience will adapt to user needs and preferences. Plus, the fact that the website is intuitive is more important than the fact that it’s beautiful and special.
Design engineering
I had never heard of that term, but I totally agree with this one. Actually, when I chose my studies, I didn’t know yet (and I still don’t know) if I wanted to be a web designer or a web programmer; I would love to be both. So I think working that way on a project is a good idea, and I think it can enable working faster on a project. Plus, designers can be more informed about what is possible now in code, and developers can give their opinion on the design.
Fluid typography
I didn’t know that it was possible to do something like that, but it’s a really interesting and convenient method. The point is to create a system that scales the elements proportionally and fluidly. You use the clamp function and you choose a minimum and a maximum value. And this method is combined with a method that I learned in one of my classes: typographic scale. It creates a system of harmonious font sizes by choosing a certain ratio for them.
Experimentation is important
Matthias finishes his speech by insisting on the fact that we should play more with the web and explore it more. A personal website allows you to experiment with CSS and JavaScript, do whatever you want, learn the things you don’t know how to do yet, take risks… It’s like your playground.
Last thing
That’s it for this newsletter ! I hope you enjoyed reading it and maybe learned something new. I really recommend you watching Matthias Ott’s conference and taking a look at his newsletter. And of course, if you would like to share your thoughts with me, I would love to discuss it with you !