Episode 2 –

Are we done yet?

In the second episode of Web Materials, we wonder if webdesign has matured so much that we can decide that it is done. If that’s the case, this second episode is also our final episode!

Shownotes #

Transcript #

[Intro music by xyce]

Espen: More than graphic design, but less than the entire internet.

Vasilis: Question I prepared for today is: are we done yet?

E: Yeah, that's a good question. And I feel like I have the I have an immediate answer to it. But I suspect that there's more under the surface. So I guess what you're asking is, are we done with the internet? Are we done evolving? are we are we finished now?

V: Yeah. Is it good enough? Is this what it is? And if, the, if the answer is yes, well, then we can just end this podcast, I guess.

E: The last episode. Yeah. I mean, for me, for me, there's more than one answer here. There's, there's certainly there's two answers, a design answer and the technology answer. And if you look at it from a design perspective, I feel like we're, we're just getting started. And if you look at it from a technology perspective, we've we've done a lot, there's been a real watershed in the last decade or so with with the technology, what we can do, certainly, if you compare it to design disciplines before the web. But I suspect that's never going to stop either. So there's going to be a million nuances or different ways of doing the same thing going forward, even though we've tackled a lot of the big issues. And a thirdly, I suppose, for me, for us, for you as a you know, anyone who works on the web, I'm certainly not done. I also feel like I'm just getting started.

V: Yeah. Okay, now, because I see. Well, I've met a few people who actually really think, yeah, if you, if we look at interface design, then we're done. There's no room for innovation there. It's just everything works as it should work. This is just matured, and lets us pattern libraries. And, there's, there's no need for more wasting time there to see how and if we can improve things. Espen are you still there?

E: I'm still here, you're dropping out a little bit. But what I'm hearing is that you've met people who feel like certainly on the interface side of things we've, we've finished. Where we've made all the patterns, they're as good as they'll get. And we're wasting our time if we're trying to reinvent the wheel anymore.

V: Yeah. So so for instance, I saw a former colleague of mine, who's also former student of mine, Daan Rongen, he is now studying at the Master of Arts at the University of Arts in London. And he is, he did a talk at Smashing Conf last year. And he, he was basically promoting a more artistic approach to web design. So to sum that, we said that we should do some artistic research. And he did a try out of his talk with a few, for a few colleagues and friends of his. And one of these people he asked after the talk, he asked, but why why should we do this? We're done. The, our frameworks have matured, our frameworks are accessible, everything works as it should work. Why should we waste time on trying to find new ways to do stuff when everything, is working really, really well, because that was basically what he said. And I was really surprised to hear this because in my view, things are not done at all. And we haven't explored, well we have maybe scratched the surface a little bit. But there's whole regions of design that we have ignored largely. So for instance, if you only look at accessibility, this is something that we have completely ignored from a design perspective. So there's a lot of engineering going on and checklists going on when we're talking about accessibility, but there's no real design there. And there's just so much to explore in that field only. So I think not we're not done.

E: Yeah, I absolutely agree. I think, I think there have been major progress happening on UI and you know, basic usability patterns. And we've seen the rise of the, you could almost call it industry now, of design patterns and design systems coming in the last, what, five years. And certainly, I think from a economic perspective or a budget perspective, you got to admit that it is dangerous to try and reinvent everything on every single project. You know, I think in a sense, it's good that we, the basic framework of usability has been maturing for a while. And now we're at a place where you can make a lot of decisions quickly. And with relative safety know that your end user is going to understand roughly what's going on. I think it would be crazy to start from scratch or to it to explode all these foundations for the sake of creativity. However, I also feel like, in the same way, in the in the 1900s, you know, there was a wave of modernist designers and Jan Tschichold was one of them. And he wrote this book, The new typography, which redefined how to do editorial design or print design for for his generation, right. And before that, it was very much center aligned text on a big, on a page, everything was was aligned along the centre, everything looked the same, it was like mega boring. And he comes along and says, look, we can use grids in a completely different way, we can express ourselves, it should be, you should, you should kind of connect your typography to the thing that you're trying to talk about. And out of that exploded this whole new way of looking at printed materials. And that's, that's pretty much how I feel we are in web right now. There's, there's a very set way of doing things. And the tools have just now bubbled up to the surface where it's so accessible, that anyone can experiment. And maybe now we'll see an explosion of different expression. Not so much, you know, the colour of buttons, or the placement of search fields and stuff like that. But the actual editorial, content design, what do you do on the actual page? Why are we still thinking that just centerlines, middle of the page text is best? Maybe 20 years down the line, we'll realise, oh, it was best. But we're not really exploring that much else.

V: Yeah. And that's, that's something that I am a bit worried about. That, I mean, if you look at, 20 years ago, we had flash. And there was so much artistic research going on. I mean, most of it was crap. But at least there was research going on. And at least we tried to in... well, tried to figure out how things should work and how interaction should work. And these things were really interactive back then. And if I look, now, there's, no artistic research. While the materials that we work with, CSS has changed, incredibly, in the last five years, it's just, it's just so... what I'm maybe trying to say is, maybe we should try to... restart some sort of a flash Renaissance. Where I'm not saying that we should go back to flash, but what we should try to get the artistic mindset that we had back then, back into web design, because that's, that's something that I'm really missing that a more artistic approach to web design. This is not something artsy, because this is something that we have seen in the past a lot. So for instance, if you look at in the Netherlands, the PTT, which was the the government owned, or company for posts, Telegraph and Telephone, huge company, of course, they would assign large design projects to artists, and ask these artists with their teams to create, well, just these incredible new designs, new ways of looking at design. The same with Dutch money. I mean, real artists would design our money. And if you look at that money, I still miss that money. It was beautiful. So these large, more artistic assignments. I think I missed those on the web. Or am I just, missing a part of the web? Is that there? Do you know?

E: No, I think I think there are people that do really interesting stuff. And there's certainly tonnes of experimentation going on with animation and with CSS and making things interactive, but I also feel what you're talking about. And I think, that artistic approach to design has largely, but sure it was there in a flash era, you can say, you know, there was that was, just as I was graduating Uni, I think that was going on. And my first websites were in Flash, and they were overly interactive and overly animated, and extremely inaccessible, and horrible for all sorts of reasons. But I did feel like I was designing something different or creative every time. A challenge now, I think, and I think a lot of certainly front end developers and front end designers will recognise this feeling of, ugh, this has been designed by a print designer. They get some sketch. And it's like, maybe funky looking and cool, but it's super inaccessible, or almost impossible to build, or it's stupid for one reason or another. And. But what print design has, and still, they've always had in this still has have is this, approach to content, which means you can, you can find a really challenging illustration or photo, and you can write a really interesting line of copy to go with it. And just those two elements will create some sort of emotional response. And, you know, that's, that's how you make good magazines, or, you know, good front pages, or good book covers or goods, anything is that you've, you create something and it's not even animated, it's completely static. It's not so much redefining the physical format of a magazine, but you're doing something with the visuals that makes you go, oh, wow, that's cool. Or you know, it's not, it's not looking at the thickness of your button outline. It's literally look at the text and the image together, and you feel something. And that's, I feel like no one's doing on the web. It's literally, here's our design system. You put your image in there, you put your text in there. And look, now we can build a website much quicker than you could last year. Yeah. And that's, that's great for scaling, but it's not great for creativity.

V: So what we're missing are the, we used to call them DTPers. Is that what, desktop publishers?

E: I suppose so, some people call this art direction as well.

V: Art direction?

E: Yeah, where I'm coming from an art director would would be someone who comes up with a creative concept for the cover, or the layout or the product, the thing, the thing that you're working on. There would be an AD with an idea, you would have a copywriter for the text, and then some visual artists to put it together at the end, whether that was 3d or photography, or illustration, or, or whatever it was.

V: So there was a much, there were just many more tools to play with, when it came to filling up a website, or in that case magazine, with content. And here, it's just adding content to a content management system. And then it will be just put into the format that we chose five years ago.

E: Yeah, I have a, I showed you this, earlier, actually. But I have this example from from my experience recently, where we did, I'm working with the company on Oslo on the design of Santander, Consumer Bank's online magazine. So they, this magazine is to reach out to people who are interested in cars, for example, so that down the line, maybe they will borrow money from Santander to buy a car. So they have, all this content around cars, electric cars, and diesel cars, and charging and toll roads and all this content that people might be interested to read. And there's good journalists writing these articles. And the design is decent, and it's accessible and all these things. So we were tasked with making it more, appealing or, or visually interesting, in order to to, to expose people for more, to more content or create a stronger connection with the what they were reading. And this started two years ago, and I made these sketches. And I had, you know, video backgrounds. And I had, I really tried to focus on how we can make the thing behind the text because we were still using a hero image in the traditional format. So my focus is on how can we make that hero image work with the text on top of it. So we have different sizes of texts and different types of background image, whether there's a video or some sort of overlay or it doesn't really matter the technical stuff. My point is that in my sketches, it looks cool because I've spent time picking the correct image and the correct video and you know the right amount of words so that it looks good together, because that's what designers do. Right? And then a year later it's implemented. And then you have a bunch of editors writing articles, and they try to get to grips with this new block that's appeared in the CMS, and they put the content in, and they put a video in or a picture or whatever it is. And it just doesn't work. It looks odd, it looks off, it doesn't sing. There's nothing there. So then I'm drawn back into it. That's now an art director, essentially, working with the modules that we developed to make them communicate better. Do you use them correctly, or I don't have to explain it. But it's, it's you need that designer eye or creative eye to actually put things together in a way that elevates the content. But it doesn't matter if the technology is there.

V: ... an educational problem? So what I see is that that web content managers, they have no background in graphic design. Then, when you used to look at magazine, the people who made the magazine who worked with a DTP software back then, or even nowadays, they're all trained as designers. So they really do have an artistic look or graphic design look, they know about how things should look, they know about proportion, and about colour and about contrast. And here, look at people who are often not even trained at all for, they're just hired to enter text into a field.

E: Yeah, I think there might be something like that going on, when I was doing magazines, it was never, it never got to the point where we would make a template in InDesign, and the editor or the writer would would lay out the pages themselves, there was always a designer, you know, they would write the text, we would lay it out, we would maybe refine the text, maybe they would add a page or remove a page or we tweak some words. So there was a degree of overlap and collaboration, but ultimately, to make this spread look good, that's the designer's job. You take the text, you get your photos, you do your creative thing, and then you make a layout. What's missing now, I think, is that design job, the designer stuff happens three months before anyone puts any content in. So you build the modules, you make the CMS, you write all the content, and then the designer is already worked on three other projects, and he's not or she's not even involved anymore. So how can we then expect this content to look as if it's been designed?

V: Well, there are some exceptions. Now that I think about it. So there's in the Netherlands, there are a few newspapers who are experimenting with collaboration between web designers with designers and, and journalists. So there's the Volkskrant , for instance. And they did some very interesting, still doing some very interesting. Not even long reads, for these are just projects where... a story is told with, together with a journalist and a designer. So there was a few years ago, an excellent example of this is, the... I don't remember exactly how it's called. But basically, the journalist wanted to tell the story that... Do you? do you agree with Donald Trump? So this was before he was elected. And what... the story was that you would probably always have agreed with Donald Trump, because somewhere in the past, he had all opinions.

E: Right?

V: So and he had written this long read. And then he started to discuss this with a real web designer. And this designer came up with the idea. No, we should turn this into a game. Where do you agree with this quote, or do you agree with this quote, and then there would come out you agree with Donald Trump, but it would be more time based where you agreed with Donald Trump 20 years ago, or nowadays, something like that. Which was really interesting. And it was more a game. It was funny, very well designed, very interactive. And the idea of the story, well I still remember it, right, so it worked.

E: Yeah, absolutely. And I've seen those coming through as well. Mainly in magazines and newspapers, actually.

V: Yeah

E: There's there's papers in Norway that do the same thing. Every now and then they'll have it feature, like I say, doesn't necessarily have to be a long read. But it's usually something that one, they want to focus on is like a special report or something like that. And it's, it's not always super interactive, or radically different. But you can tell when someone spent time choosing the right images, maybe there's transitions going on, or maybe there's like, certain elements that stand out from the rest of the reads, that just makes this thing feel a bit more considered. And I think also, New York Times are really good at this. Absolutely. Even down to the point of sometimes they just use GIFs [he pronounced it with a soft J] as the main image of a story. And it's like, oh, yeah, that works. Or they have, they have completely different stories where maybe the first 10% is art directed, and obviously hard coded where the CSS and the pictures, everything works together well, to create this memorable introduction to a piece. And then you get into the, to the to the content, and it's largely like reading any other web page out there, which is fine.

V: And I guess that's similar to how magazines worked. Right?—

E: Exactly.

V: The first page would be a beautiful spread. And then if it's two more pages, then it will be just the standard grid of the magazine.

E: Exactly. There's, it's like, there's two parts to it. One is the creative expression of what this article or piece of content is about. And then there's the usability of literally just reading the rest of the text. Yeah, no doubt we have the same duality on the web, right? We have usability, is a real real concern, usability, accessibility, standards, patterns that everybody should understand. But then we also should have this creative expression, elevating content to something more than just text.

V: And this is something that content management systems, as far as I know, have not really been interested in. So if I look at the content management systems that I know, there is no room for art direction there. Well, you can add an extra plugin or do some really nasty hacking to, to allow some art direction. But I guess this is here as much room for improvement to allow for people who know what they're doing, to do some art direction. But I also think that there's a problem here with the people who know what they're doing. So I'm not sure if we're, if there are enough universities who are teaching people to design for the web. Not even sure if that exists, the schools. So for instance, if I look at, I did a master study at the Art School in Rotterdam, two years ago, wonderful, wonderful place to be, of course, two years long, I was just in this, this heaven of arts. And they had all kinds of labs laboratories, they would call them so they had the wood work laboratory and the metal work laboratory. And of course, they had a fabrics and they had a print. So and they're they're these all these old fashioned print things. Beautiful to work with. But there was no CSS lab. So there was a lab with computers. Yeah, there was not really something that was just, there's no focus in our schools or no interest, I think even in what we are interested in, in the browser and in CSS. So it's it's not even taught in an artistic way. It's not It's not even considered to be an artistic medium. So there is I think, I'm afraid a lack of artistic people who can actually work with the browser.

E: I totally agree. Not sure if I lost you now Vasilis.

V: No, I'm still here.

E: Yeah, yeah, no, I totally agree. There are certainly people in our industry today who are mega talented, and can can wield CSS like a magic wand. A lot of them maybe come from a technical background. So they're extremely good at the technical side of CSS, and they have all sorts of wonderful tutorials and examples of how you can do this or that, which to me is very inspiring. What we don't have are a lot of artists who come from, you know, a design or pure arts background. Who have learned CSS as a tool.

V: Yeah.

E: So I think the result is, there's a lot of technical stuff out there, there's, there's so much content on, this is how you use this tool to create this effect. There's not so much content on, it is a straight up creative ideas the way you would see maybe in in other mediums.

V: So what I see a lot, for instance, is creative people, so on Codepen, for instance. And this is something that we do with our students, as well as we ask them to recreate an existing artwork with CSS. So this is what we see a lot. So of course, one of the first thing people do is try to create a Mondrian, with CSS. But I think it's just recreating right, it's not really, there's not much artistic research going on there. And this is, of course, a very good exercise. I mean, it teaches you teaches you a lot and but then, what's the what are the next steps? So, what? What would we as 21st century artists make with this material? So it's more maybe even a Bauhaus approach that I'm thinking of, right? Bauhaus used to look at the material, new materials that came out back then. So plywood, and I think, all all types of metal were new back then metal tubes. And the reason why the chairs that they designed look like they look like they do is because they took the material as a starting point, and started designing from there. And I think what we're doing here is nowadays is that we take, or a subset of the materials if you use something like Figma, which is basically a subset of CSS, or we would use other tools to think of how it should work. And so we say we use plywood, while the browser is more like metal tubes or something like that. And this is why I think much of the design is rather confused. But this is also probably something that has improved in the last 10 years. I'm not really sure.

E: I think so I mean, like you say Figma, there's, there's a, there's a real connection to CSS in that Figma will translate for you some of your decisions into CSS, but that's more of a, you know, copying whatever values you've made there, you're still constrained by what Figma can do not is not CSS first. Does that make sense?

V: Yeah

E: And I think the way we work with Figma today is akin to someone working in Photoshop to create the print layouts, you know, you would never sit in Photoshop for three months and design a magazine and then give it to someone else to put into InDesign. It's why would that's you're just wasting a whole step there—

V: Yeah.

E: So so but that's what we're doing now we spend a lot of time making visual representations of what we want things to look like. And then someone else, makes it. So if we can somehow combine this role so that the person who comes up with a creative idea also makes it there will be a stronger connection. And only then, can we really think material first.

V: Yep. Okay, so I think we can easily agree that we're not done.

E: We've just started Vasilis. Yeah, I really do think so. I think what's happening now is the same process as what happened when desktop publishing became accessible. You know, I was the first generation of print designer where InDesign became the tool that everybody used, just just as I graduated, people stopped using QuarkXPress, and they started doing InDesign. And so QuarkXPress, InDesign, this whole revolution, suddenly made all these things possible for one person to do, which before maybe required a big studio and a photographer, and I don't even know the techniques they used, you know, people would literally scrape letters off these lino... what's called? the lino type sheets?—

V: Yeah yeah yeah.

E: It's like this whole, completely cumbersome way of doing things existed for decades—

V: Yeah.

E: And then that's the publishing comes along, and now anyone can do it. And I feel like we're almost there, right? Like making rounded corners on a div was extremely cumbersome. 10 years ago, now anyone can do it. And typography was extremely cumbersome. 10 years ago, now it's just there. So maybe we're just opening the door to a new generation of designers working with CSS first. And I doing anything that was previously super complicated to do is now a couple of lines of code or a few characters even.

V: I guess on the other hand, that's also maybe, one of the, I'm not even sure if that's true. I mean, if things are getting, if we are losing quality, because it's easier to access, so this could be right. If you look at the process of desktop publishing, 40 years ago, it involved many specialists. So in every step, there was a specialist. And now this is done by one person. And can we make the same quality?

E: Is a really good question. And I think, I certainly think desktop publishing opened the door to a lot of crap. But but so did so did flash, right. Yeah. And I think the New Yorker is still probably, I never worked there so I don't know. But I would assume that's put together with InDesign. All the world's best magazines are put together with InDesign. So it's not like InDesign is stopping you from creating amazing work.

V: No.

E: And opening the floodgates of CSS, I think, yeah, we're, we're seeing a lot of crap. And we're gonna continue to see a lot of crap for decades. But I, unless you see the crap, you're not going to see the nuggets of gold hiding in there, I don't think.

V: No no I'm going to disagree with what I stated here before. I think if you open it up to more people, more people will be able to play with it. And so more talent will be able to develop, of course, there will be more crap, but there will also be more talent.

E: I think so.

V: Yeah.

E: Let's not, I think I think it's important to say, at the end here, I don't want to step on the wonderful work that's been put down by UX and usability and accessibility champions over the last 30 years, it's I think it's important to recognise that there are elements of web design that have matured and that do work. And we don't have to re define the browsing experience, just because we want to be creative. You know, things like ideal measure, or font size, or margins and padding. So there's, there's, we're pretty decent at putting together some text that's readable. So let's not, you know, we don't have to destroy everything in order to make something creative.

V: Okay. Okay. So let's not destroy stuff in the next episodes. Let's explore. I'm really curious about these. Maybe we could call them defaults in design, or, guidelines. We could explore some of those.

E: Yeah.

V: But I think we agree. Yeah, there's some good stuff on the web. So maybe I'm a bit more positive after this conversation than I was before I started it. Very—

E: I'm certainly very positive. I think courses, like the one you teach Vasilis is definitely going to raise a new generation of designers.

V: Yeah

E: That will have a positive impact on on what we do. There's so much boring stuff online, but there's a lot of boring stuff in print design, too. It's just we need to we need to get better at using the tool, the material CSS, and then I think creativity will will follow.

V: Okay. Fantastic. Espen, I think we've reached the end of Episode Two, don't you think?

E: I think so.

V: Okay, so

E: We nailed it again.

[Outro music by xyce]

Why does this page look like this? #

For this podcast, we want to visually – and technically – play with the themes we're discussing, meaning we're leaving the door open to art direct each post individually. In this episode we talked about artistic approaches to web design. The nice thing about an artistic approach, if you ask me — Vasilis van Gemert — is that the result may feel or look off, or even wrong. It is not necessarily about creating the perfectly usable design, it is about exploring, and stretching the possibilities of the material, CSS.

I used Espen’s first design as a starting point, and I accepted the constraints he chose: only CSS colour names, default fonts, and, with the exception of the logo, no images. I used his colour pallete and only added the colour plum. I used writing-mode, for a more efficient use of space on wider screens. And I played with the rather new text-decoration properties. They are wonderfully unpredictable when you blow them up to ridiculous sizes. But the thing I like most about these new properties is that every browser implements them differently. Text-decoration-style: wavy with text-decoration-thickness: 1.2em looks entirely different on Firefox, Brave and Safari. Most designers still live by the strange idea that their websites should look the same in every browser. In this design I tried to do the opposite: it is a celebration of the differences.