Episode 1 –

Hello world

In the very first episode of Web Materials, we introduce ourselves and briefly touch upon some of the topics we hope to discuss going forward.

Transcript #

[Intro music]

Vasilis: Web materials!

Espen: Is that what we’re calling it?

V: Yeah, I think that’s what we’re calling it.

E: ...I really like web materials, i'm surprised – i'm surprised there's no podcast called web materials or web fabric or any of these other other incarnations

V: Yeah, but then we're surprised not many people are interested in the material of the web so...

E: This is true, this is true. So, should we start by introducing ourselves a bit?

V: Yes, go ahead Espen, who are you?

E: Who am i? So I'm norwegian. I'm a... I was born in Drammen, this small town an hour outside of Oslo. I studied graphic design, then I moved to England and I studied graphic design there. And then I moved to Edinburgh, and then I started working as a magazine designer. And after a couple of years I kind of transitioned into web, pushing a lot of pixels around in photoshop and trying to make sense of early, early user experience. And then I found some lovely colleagues, we started ... we started a company called Primate. And I was there for seven years before I returned to Norway and then I worked briefly for a company called HyperRedink. That was a year and a bit. And then we moved back to to the UK to Scotland again and now I'm here, I'm freelancing and doing some product design for another company in Oslo. And I'm trying to figure out how, I can work with the material of the web better as a designer. It's taken me 15 years to realise that it is fundamentally different to print. So there you go. That's that's the short, short of my story. How about you? Who are you and where are you coming from?

V: So I'm Vasilis Van Gemert, I'm a lecturer at the University of Applied Sciences in Amsterdam, where I teach the next generation of digital product designers about the web. And before that, but that's seven years ago, I quit my job as a principal front end developer at mirabeau which is a large dutch full service web agency. I called it I quit working. So, I was always very frustrated there, and I guess we'll get to that why I was frustrated there probably the podcast is also about that. I have studied art. I've studied to become an art teacher but that's a long time ago, so that's my background. And I have, to design, I have this approach of maybe an artistic approach to design, and I have a scientific approach to design. So the science comes from my father who's a professor, and he always told me that there are no facts but there are hypotheses. So you can assume something, and then you can just work with that until you find proof that there's something else which makes more sense. But there is not such a thing as a truth, and it also means that you should doubt everything always all the time. So that's something I do. And then I have this artistic approach in which I say, okay I'll i just like to play with stuff and see what happens. So in short that's me and we'll get to know me better in the next couple of episodes I guess.

E: Yeah so...

V: I heard something very interesting you said that before you became a web designer you were a print designer and then at the end of your introduction you said it took you 15 years to realise that there's a difference between these two things. Can you tell me, what i was wondering about, is there a completely different approach to print design that we have to web design?. What are the main differences?

E: Well, so first of all, obviously earlier on then 15 years down the line I realised that there is, there are differences. Of course, you know first of all we're working with with essentially pixels on a screen as opposed to ink on paper so there's differences there. But what I learned, you know recently within the last five years maybe, is that I want, I'm starting to wonder that the differences of print and web goes beyond just working with relative units or percentages. I wonder if we should – we need to kind of change the whole mindset a little bit and i don't know to what, that's kind of what I'm here to figure out. But, but throughout it's like I spent far too many hours getting frustrated that we call it line height, and you know not leading, or we call you know there's different names for the for the spacing, you know we don't call them gutters, we call them tracks or whatever. Whatever it is it doesn't really matter now, but I used to get frustrated that print being such a established way and there's so many good design principles in, in graphic design via typography or layout or all these – all this knowledge. I felt like web sort of drew a line in the sand, and it was so based on technology that a lot of this theory behind design got lost. So then you have this new generation of designers designing for screens, and we've completely forget about typography, we don't worry about you know margins or proportions or whatever, and then it was a bit of a renaissance I think you know a decade ago when this started coming back in. But my whole career up until recently I felt like I wanted to bring design principles from design history, graphic design, onto the web. I still feel like that. But I'm also I'm also realising that just because CSS grid allows us to recreate the grids that we were used to from print it doesn't necessarily mean that the grids on the web should look like that or even work like that. Is there a completely new way of dividing up contents that works better for screens? Probably. But we're not doing that because, you know, we're – even the most fluid of designers are still essentially working on what's come come before, so. Yeah.

V: Recognisable. I like these ideas. This is, these are my thoughts as well. So I think about a decade ago I started reading all about print design, about typography and trying to translate, and these rules or guidelines that they use in print to the web. And there is some very interesting stuff that we can actually use and that that looks good. So a measure how wide should a piece of body text be, well there's not rules for it, but there are some guidelines that help you with designing, and these guidelines can even help you with designing a grid. These are interesting ideas. So studying graphic design, the the the art form of graphic design I think it makes sense. Makes a lot of sense. But then indeed, there is this question of should we base everything on this or should we extend it. And I think indeed we should extend it. There is so much more on the web and it's so much more complicated than a fixed canvas of this poster or paper that you're creating. That there's a different look should be there. And then there's also of course CSS. It changed from a language in which almost nothing was possible, to a language in which we don't even know what's possible. There's so much possible we haven't tried it out yet. So yes i'm certain that in the coming years web design will grow up and it will become something completely different than what we're used to now.

E: Yeah I certainly hope so. The question maybe is are we able to grow quick enough to keep up with the technology because it's changing so fast. I think now even people like yourselves, you know your your lecturer of digital design and as you know you use a lot of CSS and code in your work. Even you don't know the full extent of CSS. So then how how are – how's the average designer supposed to know what they can actually do with this new material? It's so it's so grand. The generation of print you know it took decades before new technology became available and now I feel like we have a generation of, of designers, and maybe I'm talking about my generation, the new generation that you're teaching they will grow up with CSS in their fingertips. My generation, we are very reluctant to even touch code. So how are we supposed to really explore the new material? If we're not, you know, touching it?

V: Okay. So I think I understand what you're saying. It's changing a lot. And there's all these new features, but it's not really changing that fast. I mean, grid, it took – the first time I heard about grid, I think that was in 2008. So it took over a decade to become real implemented. Right. So things are changing faster now. So I mean, border radius from the first implementation till it was, let's say, adopted to over a decade. But now, it takes about six weeks for a new feature that old browsers like to be implemented in all browsers. So that's, that's, things are changing quicker, that's true. And then you say it's CSS is so big. How can we learn that? Well, I'm not sure if you ever opened all the menu items in Photoshop or Illustrator? I mean, I've been working with Illustrator and Photoshop for over 20 years. And I still don't know what all these things mean. Right. So I think CSS is much easier than these programmes. Yet all designers use these programmes all the time. Do they understand the full scope of Illustrator? Of course not. Nobody does what maybe some people do, but most designers certainly don't. So it's just maybe it's a designers are learning the wrong tool. So instead of using learning something as complicated as illustrator, they should learn something as complicated as CSS. Or maybe tool makers are making the wrong tools. And this is something that I actually think is a problem, that we have the wrong tools for the job. So what the tool makers are doing is they're making tools in which we can design the website, we have the websites we have been designing. So but the tools are not there to create website that we can imagine. It's just what we have done before. And maybe that's why websites look like websites.

E: I think in a sense, obviously, you're right. Most websites now are designed by designers that don't code anyway, regardless of what tool they're using. And I think, I think in a sense, if people did spend their early careers or even time in university learning code, rather than learning illustrator or learning both, we would see different, vastly different web sites and what we see today, because I think, this experimentation that you really love with CSS and what you can actually do, it doesn't happen. It happens in a, in a front end environment where engineers and front end designers play, but it doesn't happen for for designers who are used to Photoshop or Figma or Illustrator. So certainly by using or learning a different tool, be it code or some sort of code based visual editor, we would we would see something else. But also, I think there's more than the tool that's keeping us to where we are. I do think, broadly speaking, you'd have to look at all the websites in the world and think there's probably a few things that just work. That we've you know, we've probably figured out some of it. You know, measurev line height, there's still some very, very basic typographic principles that we are, to some degree implementing. There are some patterns that are become very, very set, that it's hard to break. You know, we put the navigation at the top of our website. I don't think that's because the tools tell us to do that. I think that's because we all tell us tells us to do that we feel like it has to be at the top because it's always at the top. And my users are going leave if I put it somewhere else...

V: I wasn't even sure if they think about the users when they do that. So I once – when I still worked at Mirabeau, there was this interaction designer so and back then we had this waterfall way of working. So the interaction designer, he created a wireframe, and the wireframe went to the visual designer who opened it in Photoshop and started colouring by numbers. And then that Photoshop document was sent to me and all my knowledge was ignored. And it was only based on the good insights of the interaction designer. Now the interaction designer, I watched one interaction designer start a new project, so really from scratch, so we opened a blank document he created the header, edit the logo, edit seven or eight navigation items with lorem ipsum dolor sit amet, just words, and then he added a sub navigation to the left with 10 more navigation items, and then he added to the right, he added five or six widgets just room for widgets, and then at the bottom he added the footer with some links. And then... he just started perfecting, this and he didn't even look at the square, the small square in the middle that remained, he didn't ever look at it, and that was the content. And that's actually what your people, what your visitors are there for, he didn't look at it for the first day. And I don't think – I asked him, well, what, why? Oh no but this is what websites look like, so it wasn't this is what users expect, or this is what we what's proven to work. No that was just how we made websites back then, and we changed that idea, I mean nowadays websites don't have a sub navigation to the left, most websites at the top.

E: Yeah.

V: Most websites don't have widgets on the right. Or we still see them but but that's not the, it's not necessary anymore.

E: Yeah we've changed...

V: So I think these ideas they they they can change of course.

E: Yeah, they, the what a website looks like changes over time but we still have, we – everybody knows now what a website looks like. So it's changed from what it what it looked like back then with a with a sidebar widgets and stuff, but it's still there's still a fairly uniform look to it I think. And it's the expectations of us as designers and also our clients can be hard to get anything a bit different past clients and also past marketing people, with the with all the measurements and all the tests and all the, you know, perceived knowledge of no, it kind of has to work like this because what about our, you know, click through rates.

V: I'm very much looking forward to discussing some of these ideas in more more detail with you in the coming weeks. I mean this is incredible. I'm sure we will get into detail about, where should the header be?

E: I can't wait to discuss that. Should we have hamburger menus?

V: Yeah and what is a hamburger menu and where should the navigation be. Yep, very interesting questions. These are questions about real estate as well so we'll get back to the grid. So what should a grid look like. I think we will jump between print design and web design all the time just for reference because there are things out of knowledge there.

E: I think so yeah. And in the same way we will talk about design vs code. We'll probably have a episode where you get angry about current design, the state of current design tools.

V: Yeah we have a long list of topics actually. We'll talk about accessibility of course. About interaction, which weirdly enough is something that is largely ignored in the design community. Which is very strange, of course, because interaction is, such an important part of the web. Without interaction there was no web. Yet most articles are about grid. It's about layout..

E: Yeah. And most interaction is the hover state and that's that's that.

V: Yeah yeah yeah.

E: Yeah. I also want to talk about accessibility and contrast and visual accessibility. How – how reliant we are on algorithms and some, some dogma, some ruleset that other people have decided for us. Is that is that the way to go, you know, does the algorithm know exactly what contrast to use. I want to talk about content as it is. We touched on it before. How, you know, 10 years ago, and even today, a lot of a lot of design is basically style up a nice menu, have a nice footer, have some cool colours, and then we leave this blank empty space, that maybe we fill it with some stock imagery and lorem ipsum. But really, why is it that on the web, eh, we put the content in last. I mean in magazine design you don't do that, you have a template. And then you use the template to work with the actual words that your editor wrote.

V: And the actual images that the photographer delivered for this article.

E: It's very strange. We don't do that anymore. Yeah.

V: Yeah. Very interesting to discuss that. So I guess this is something that maybe is, the way that CMSes is are built?

E: Yes.

V: It could be that CMS is don't allow us to, create these beautiful layouts and different layouts in our direction, as easy as it is on in magazines.

E: Yeah. It takes a long time to build a website comparatively. Whereas, as I say, the reason why I think tools like figma will stay for a long time coming is the sketching is so much quicker. And in InDesign, or Illustrator, making a layout, it's quicker to make amends and to try new things, which is why you can experiment more visually. And you're right once, especially once you have a CMS behind it. It's like, Oh okay, let's go spend the day trying to get this this new layout to work? Or should we just use the layout we have? And also because we have the CMS, the responsibility of writing and inputting content, it's, it's left in the air. But we were we struggle with it for seven years at Primate. Whose job is the content? Oh no, we'll do it, says the client will write the content, don't worry. When do you need it by it? Well, can we have it now? Oh no, no, no, we'll write it later. But you know, a couple of weeks before launch. So then what are you supposed to do?

V: Yeah, and then there's, of course, I mean, so we have this editorial process, which is maybe in the way of good web design. We have designer tools and designer knowledge and designer fear of code, maybe, that's in the way of proper design, web design. And then there's developers, who are mostly concerned with developer experience. Now I'm exaggerating, but this is something that I, I see that – I mean, if you look at the tools they're making, it's mostly for themselves and not that much for the user experience. And so there's also the constraint from the developers who say, No, no, no, you cannot design it that way. Because we use this and this layout tool.

E: Yeah. And even, even the setup of the tools themselves... the barrier to entry, to start some project from scratch, if you want this framework or that preprocessor, suddenly, you have to ... I don't know, for someone who's uninitiated, it feels like you have to hack your machine and get into terminal and type all these like weird commands, just to even start putting some CSS on a page.

V: This is also a very interesting topic, that when we started with the web, you just wrote some HTML, and some CSS and try to figure out how an FTP programme works. You copy your code to the server and you're done. If I look at my students now, they open a terminal type some NPM code, then they wait for a few minutes, because all this stuff has to be downloaded. And this is just for a simple CSS course. Well, all they have to do is type some CSS in the CSS file. No, a complete server is download it and run every time. So that changed as well. So the idea of the web that it's there for everybody... Well, everybody can still use it, but the... it's still it's becoming harder and harder to start with it, I think.

E: Yeah, I think now, the web is there for everybody in the same way, a piece of paper and a crayon is there for every print designer out there. You know, you can't – it's becoming harder to just publish something really easy. Having said that, without, without putting money in anyone's pockets, Netlify it has, for me at least done something incredible, which is when I built, I can't remember what I built, some small tests and I just wanted to share it with someone online and it was literally drag and drop from my folder to this folder and boof it was up. So there are, you know, there's maybe there's, there's... there's developments happening in that area as well.

V: Sounds like netlify reinvented FTP that's incredible!

E: Exactly. FTP without the FTP software in the middle.

V: Great. I'm so much looking forward to discussing discussing all these topics in more detail. So the plan, if I understand correctly, is we will do an episode every now and then.

E: Yes, very strict schedule of every now and then...

V: Yeah. We have a long list of topics. I mean, feedback from the listeners, if there are any, is very welcome, of course. So if you have anything to say, dear listener, please contact us on Twitter or email or any other contact means that you are able to find. So, another thing we are planning is, of course, we have a website with this podcast. I mean, a podcast about web design should have a designed website. And we are thinking about art directing every new episode. It doesn't mean that we make a completely new layout or design for every episode. But we want to iterate on the previous episode. Or we want to contemplate the topic we discussed. So if a topic is about grid, well, maybe we should experiment a little bit with grid in the art direction of that episode. So this is something that we're planning. Are there any other plans?

E: No, I think I think you're covered it. We do one topic a week we talk about it, we... we try and design or create something around it. And then we keep going until we don't have the time or or we grow too old.

V: Or until we're done.

E: Until we're done. Yeah that's true. Yeah, maybe we'll finish the internet.

V: Yeah. Maybe we just yeah, we finished it. And we come to a conclusion after a few weeks.

E: That would be nice. Yeah, a couple episodes in, we sit down, we just write the final blog post that decides everything.

V: So much looking forward to this. There was one more thing. But I forgot about that. Oh, yeah. And of course, we will add a transcript of every episode. So if you don't like listening, or you cannot listen to the podcast for any reason, you can read it. And we'll see how we design that as well. Maybe we can do something clever with the transcript as well. So.

E: Yes maybe, really, really pale grey text on a clean background. So cool design. You know, trying to really challenge contrast a little bit.

V: Good. Yeah. Because we're pretty hard to understand anyway. So it should be hard to read as well. Right?

E: Yeah I think we should match. Yeah, that's a good idea. We should match the type of typography to our accents. So that is equally challenging for everybody.

V: Excellent. Espen.

E: Right. Have we reached the end of the first episode Vasilis?

V: I think we have.

E: Excellent. Well, it's good talking to you.

V: It was really good talking to you. Looking forward to the next episode.

E: See you then.

V: Okay, bye bye.

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're only really introducing the basic concept of the podast, i.e. the material of the web, so I (Espen) have kept things extremely simple, using only default CSS colours, default fonts, and, with the exception of the logo, no images.