Are our tools helping us?

Vasilis: Today, I thought it would be a good idea to talk about design tools, visual design.

Espen: Okay, so we're thinking Photoshop.

Vasilis: Well, and I think since Photoshop, we have some, a little bit more specialised visual design tools. But yeah, so I was wondering, what do they solve? What don't they solve? And should we improve them? Or do we need different tools? These, these are a bit the lines that I'm thinking about. So I'm not really a visual design tool user, but I think you are. So can you tell me a little bit more about them?

Espen: Sure. Yeah, I've used them and I still use them. You know, my whole career. It's, I started doing magazine design. So obviously, then you're using QuarkXPress or InDesign, hopefully. And then once I made the switch to digital, it was all Photoshop for a very long time, which, if we start there, it's an odd piece of software to make websites with, I think, potentially, the only reason was that Photoshop is pixel based as opposed to InDesign or Illustrator, which is vector based. So somehow, you know that that became the tool. And I guess that's where we started be getting concerned about pixel perfection and all these things. I was with Photoshop for a long time... years. And back then, let's the obvious question first, what is what? What problem does design tools solve? And of course, certainly, in my career, and working at different agencies, the main challenge of getting a design up and running, if you're not a developer, yourself is to explain to the development development team, what should this page look like. And so this design tool becomes a way of creating a picture that the developers can replicate in code. And obviously, way, way, way back, when I first learned any web design, there was an my graphic design course, we we use Dreamweaver and, and the way they taught us Dreamweaver was, here's a Photoshop file, slice it up into different pictures, and you click this button called make website or so I kinda remember something like that. And then suddenly, you had a table of pictures that you can then make clickable, right? So there was no live text, it was just, it was just pictures.

Vasilis: It was, you know that a front end developer in Belgium was called a slicer.

Espen: Oh, my God, that's amazing. Slicing, slicing seemed like mind blowing technology. At some point. I was like, Oh, this is so smart. I can just sell it all up and—

Vasilis: I was really good at slicing.

Espen: Slicing think obviously back then the picture was the website's in a way. And then you could remove some of the pictures and replace them with text. Certainly, that's what I tried to do. And it was really, really difficult. Working in Flash was a bit more visual, you've got you've got the sense that the visuals that you're working on are actually the visuals that will be displaying on someone's website. Yeah. But then, you know, when I started working on real projects with real, you know, CMS as an actual development teams and stuff, it was all we make a picture or several pictures in Photoshop at 960, you know, with the grid already set up. And then we make sure to the enth degree that all the margins and paddings are actually pixel perfect in our sketches, because you hand it over to some developer and they they literally go, you know, what, by the pixel and measure up and implement exactly what we did. This was before responsive design, of course. Yeah.

Vasilis: So and then. So we've been using Photoshop, Photoshop. When I stopped working at an agency, I think Photoshop was still... Well, it wasn't it ends at its end days. People started using Sketch back then. Right. Yeah. And I think since then, this is seven, eight years ago. I think. Things have changed a bit, right?

Espen: Yeah, I think so. I'm not sure. I think personally, I was a bit late to the sketch game. I gradually, like you say, maybe six, seven years ago, I gradually slid out of Photoshop and into Illustrator. I realise just working in Illustrator with multiple artboards. And scaling things was way easier. And so much of the work we do is is typography and vector based anyway, I just felt like this is a better tool, you know, no interactive features , no, no fancy, web specific features. But still, it was a much, much quicker workflow. And at the same time, you know, the whole industry started moving over to Sketch. And then a little bit later on Adobe released Experience design, I think it's called XD. Which I think that's maybe four, four years ago or so I started working with that. And for me, that was the real game changer, because it was a an app that was so light. And it was, how can I how can I put this it, was more more about sketching up something quickly, then it was about creating a finished piece of art. So Photoshop, Illustrator, for me, to certain degree sketches. Well, it's always about polishing something until you're really really happy. And then it's like, here's the final document, get the clients to sign off on this, pass it on. And then you get into this, you know, back and forth with developers afterwards to try and make sure that the translation into code is as good as possible. But Experienced Designer XD seemed to me like a massive leap in, in the approach or the philosophy of the software. So instead of being a tool, where you make the website, it's a tool where you make a prototype or a sketch, or you test out the concept and they had these nifty features, the scaling was different, they had some sort of grid feature where you could make an element that just repeated to make a grid, you know, there was like some real innovation happening. And then, after a year or two working with that, I started working for another company, and then they all use sketch, I learned sketch, Sketch was good, it was easy. It was felt almost, you know, obviously, it was it was made with with web in mind. And there were plugins, and there were sort of web specific functionality. Prototyping game became native in sketch at some point. And suddenly, then you had I remember the the jump from using sketch, and then uploading your flat visuals to Envision and then marking up the hotspots and creating a prototype in the cloud via Envision that seemed like a good idea. But then suddenly, prototyping became native, within Sketch. And then then I think you're really starting to look at a good visual tool for web design, because you can sketch something really quickly. Doesn't have to be high fidelity, but crucially, you can link things up and you can see, maybe not all the detail of interaction, but you can certainly get a feel for flow and user experience. And, you know, the the journey through the website, so to speak, as opposed to, you know, Photoshop files, which were very, very static medium.

Vasilis: I like the you mentioned a few times you mentioned, I think, something like high fidelity versus sketching. And I think this is a very interesting point that we've always used, or not always but how I remember Photoshop was used really to get the, the picture perfect. Yeah, right. And the visual designers I worked with, they would just keep on polishing those buttons until they really, really shined. Yeah, and this would take them hours. But I also remember working with an art director who didn't even know how to turn on a computer. So so these visual designers that I worked with, they made these beautiful, beautiful, just images of websites, and they would print them out. And then we would go to clients and they would sell these beautiful pictures of websites. But I worked with this art director once who didn't know how to turn on a computer and he used watercolour to paint the impression of a website. And this is different. It's not an image. It's not pixel perfect. It's an impression of what it might look like. Yeah, and I always like this method of working much more because it gives a good impression, but it's not about the details. It's about do we like it. We like a website that looks something like this. Instead of showing something incredible and incredibly detailed, and then saying this is exactly what you're going to get. And also think that that was a big problem of course with especially back then, that on the web, what you see is Definitely not what the other one is going to see. Yeah, right. So what you see. So WYSIWYG would be what you see is not what they get.

Espen: Yeah. Yeah, I mean, there's differences now. But certainly back then it was it was enormous, especially it just even between Macs and PCs. I remember tearing my hair out so many times by typography, even when, even when we could, in theory, start using fonts using what was called Cufon and other technologies. It was like it looked Okay, on my computer, and then you look terrible on someone else's computer. And you just don't even is it even worth going down this route? Because you didn't even look?

Vasilis: Because remember, Cufon was, I think it was a flash hack. You would put the font into a Flash file, and it would render it in a beautiful font, but it would load slowly. It would be ugly during loading. It was just horrible.

Espen: Yeah, it was it was horrible. But if we consider it a prototype of what we have today, because I think if back then people said, You know what, this is ugly, it's slow. Let's not even try. Then you wouldn't have what we have now. Right? You have to make the ugly, broken thing first to open people's eyes to Oh, hang on, we can actually push typography online.

Vasilis: So that one of the problems I had back then was that the things that people could imagine and could come up with with Photoshop, there was much more possible than was possible on the web. So, for instance, people would designers would use border radius and border radius didn't exist back then,

Espen: you know, I had a, I had an action set up in Photoshop to cut out one pixel of each, each corner of whatever, you know, layer I was working on just to create these, like micro rounded corners.

Vasilis: So much work. And so that that was I think one of the problems. For instance, they want to people use blend modes. There were no blend modes in browsers. But on the other hand, what exactly what you said this meant that browsers have it implemented now. Right?

Espen: Yeah, I think there was there must have been one army of developers hacking together the most ludicrous of designs, because I don't know why it went like that. I don't know why when I send someone a sketch, and they, it was impossible to implement, they still kind of did it, instead of saying, hey, Espen do this again, because is not working. And somehow—

Vasilis: I always did that. So I went back to the designers, and I said, This is impossible. And then it's a no, no, we sold it already.

Espen: Make it work

Vasilis: The client signed it off, you have to you have to fix it. And that the problem often was that. So ever, so that it was a real waterfall process, right? So first, the interaction designer would make a black and white thing, outline of the website, and then the visual designer would do some colouring by numbers and just colour in the thing. But they would just go on and go on. And then they would make it really beautiful. And then ask for a few more hours, or maybe a few more days to work on the project. But these days, of course, they're not extra days, these days were just taken away from the development team, which meant that for this even more beautiful and even harder to design even harder to build thing. I had fewer days. It was always so frustrating. And in the end, nobody was happy because it was never as good as the Photoshop file. And this was what we had promised and was always a bit of a letdown. But I think they did trigger back then that did trigger innovation. What I think right now is that they do maybe the opposite. So if you look at web design tools today, they are, they offer a subset of all the features that are out there. Right So—

Espen: yeah, yeah

Vasilis: I don't think that in sketch you will find some setting that you can increase the size of the underlying which we know is the one of our designs.

Espen: Yeah, no. So you're absolutely right, we've gone from Photoshop, just being capable of so much more than then because it's image image editing software, and then comparing that to really mentally rudimentary codes. Anyway. Now, I've stopped using Sketches, Figma these days, but it's the same thing. It can't, it can't do responsive design properly, it can't do fluid typography, it can't incrementally, you know, change the underlying size, it doesn't have any real connection to, I don't know, half of the CSS properties out there. It can't do variable fonts, I don't think yet. So obviously, there's a huge, huge gap between what you can do with your sketching tool and what you can do in the codes. But I will say that Figma, in the current iteration, for me, is the closest thing I've I've come to a perfect web tool. Granted, I haven't used Web flow, which maybe some people would argue is way more native, because it's, you know, it's actual code, and you can do responsive stuff there, etc. But what's really nice about figma these days is not only the prototyping, which is really good, you know, this, this one thing about web designers, yes, styling, and colours and fonts and trying to make things look beautiful. But also, you know, there's a huge, huge part of what we're doing is content and user flows. And, you know, this whole this whole experience thing, and I'm no user experience designer, per se, but I've been around the block enough to know that, you know, specific words, specific content, specific pictures, specific ideas, work, you know, they, they, they are the thing that hold up, whatever you put out there, so it's no longer for me anyways, no longer it's so important, the exact shade of yellow for this button. What's important is what the button says. And, yes, it's really important that the button is interactive and obviously clickable, etc. But we can, in my mind, I'm like, we can fix that in code. Let's let's do the interactive bits when we're actually working with something truly interactive, where it's more like, this is the vision for the website. This is what we're trying to do.

Vasilis: But I think there's also a problem there. So that's, well, in an ideal situation, you have a team of designers and developers working together. Yep. During a project? Well, at least how I remember and also what I see still see at some agencies is that the there is no collaboration, not really. So what it means is that the developer has to make design decisions later on. So how does the hover and the focus state of this button what what do they look like? You shouldn't leave those. Those are important visual decisions. And they should be made by somebody who's, who understands what, what things should look like. And in what, of course, there are many developers who understand this. But there's also many developers who really don't. Just leave design up to them, right.

Espen: Yeah, this is this is a problem in the industry for as long as I've been in it. And I'm sure before my time, and I'm sure after my time to which, obviously, back in the day, when we had Photoshop files, maybe part of the reason why we were so obsessed with pixel perfection is the idea that someone who spent their whole education and career to date solving engineering problems are not fit to make design decisions. So then, you know, here's the recipe, you have to follow it exactly like this, because this is what the designers did. That now we have a front end industry that's way more involved with design. So it's feasible to picture teams or or individual people that can do both, or crossovers, etc. So I think we're closer to the some sort of working process than we were, you know, 15 years ago. But you're right, we shouldn't just go, this is not my job. As in, you know, here's my sketch, Oh, I didn't do the hover states, but you do that. But what I'm saying is, is there's a whole bunch of attributes that are better designed and better experienced and better evaluated in the browser, rather than in some sort of figma file, and figma. Now they have something called obviously they have something called components which is like master elements. So you create the master and then you can duplicate it. So for example, a button you can have a button library, you have one master and all the different variations, okay? They have interactive components, you can actually fake hover states. And I guess you could fake focus states as well. So we're getting to a point where you can do this. And I certainly have for many jobs where you set up some sort of page where all the different interactive elements are laid out. And they have overstates, they have different sizes, you know, it becomes more like, what's it called the design system or something like that. But still, I feel Variable Typography, and fluid viewports. And you can only suggest so much in a design sketch. And the finishing really, for me has to happen in the in the in code. And until, you know, you work with front vendors who are capable designers, or until you work with designers who are capable front vendors, I think is going to have to be some sort of communication, some sort of stage where you go, here's the vision, okay, let's implement the vision. And then we work together to sort of finalise it.

Vasilis: Okay. I always have, I've been thinking about what a visual design tool should look like, a lot. And so what I felt always thought is that it should maybe have an opinion. So you see that in some developers tools where you cannot commit a change that you may, you cannot committed if it doesn't meet certain criteria. So if it's not good enough, you cannot save it. That's basically what they do.

Espen: Yep.

Vasilis: So there's, it has an opinion.

Espen: Yep

Vasilis: And I think, Matt, why not with web design tools that not sorry, you cannot save it because you didn't add a hover and a focus state to the button.

Espen: So I think is a very neat idea.

Vasilis: And there's more like, hover states, but know, your content is too easy. You should add real content. There will be headlines of at least two lines, and not all headlines will fit on one line.

Espen: Yeah,

Vasilis: Right, things like that. visual design tools could definitely help with that.

Espen: Yes, I mean, your first example, I feel like yeah, that's definitely something we could do. And it's seems to me that we can do it fairly easily, like in any design tool these days are certainly vector based design tools, you can choose the shape, usually you draw a circle, or you draw a square, or you draw a rectangle, whatever the to that list of, of elements, you could just say, make a button. And the button is a pre made component. It has text, it has maybe room for an image, it has a background. That's it. And then because the software knows you've now made the button, it could also say, Hey, here's the empty hover state and the empty focus that you have to do those two. But I think going in and saying, hey, you have no headlines on two lines, I think then you're you're wading into some AI territory, that's very difficult. And also, it's a bit of a, you know, it would be difficult to to differ between the examples where actually there are no headlines on two lines and the ones that needed so.

Vasilis: well, but maybe you should give a suggestion. I see you're using easy English short words, are you sure?

Espen: Yeah,

Vasilis: this is the content that people are going to put into this website.

Espen: Yeah. Or even if you put in lorem ipsum, or some, obviously fake text, he could prompt you to say, Hey, how about trying some real phrases here? But then, you know, that highlights another problem is lorem ipsum Is there obviously was there way before web and you use it to set bulk text to see, I guess how the font would work or you know, how many words can fit on one page and this and that publication. Now is just used as filler. And and this highlights exactly the same problem as we have with design and development is we have with design and content. It's like whomever writes the text does not work closely with the designer anymore. They sit in a different department in a different room in a different building at the different time.

Vasilis: Every time that's the problem. Yeah, the time is wrong. I think here because often the content is made after the website is designed, which is I always think is very weird, because what do you design right? You design thecontent if you ask me. Yep. But yeah, if you have no content,

Espen: what what are you what are you working on?

Vasilis: How's that even possible?

Espen: Yeah, I think you're right. And then at the same time, we have this massive upswell in, in design systems thinking and the generation and maintenance and sale of design systems all over the industry. So I think for large websites, you need some way of organising your visual components. And for me, that's where design system comes in. So from that perspective, you need to make buttons and you need to make list items or an article component is whatever it is that you're making. And to a certain extent, you have to make a template that can be filled with whatever content your marketing team needs to put in there. But that's, that's one type of website or one type of component. The other thing is, I'm trying to convince people to sign up to this yoga club, I need to use real words, to do that, I need to use real pictures to do that, I need to somehow convince people that this yoga club is really good and worth the money. So in that sense, styling of buttons isn't enough or choosing a font size or setting a grid. You know, it's meaningless,

Vasilis: of course.

Espen: Yeah. So, of course, designers should write this stuff into this.

Vasilis: Do you remember that that conference that we went to? We met in Oslo.

Espen: Yes

Vasilis: Long time ago, and there was this guy who did this talk about the I think it was the Norwegian, some sort of a Cancer Fund or something like that. Or you could call these people if you had cancer, and they would help you out or talk to you, remember that that was a one beautiful website. And it was designed around the pictures of the people. So the idea was that you, it had to be personal because you were in a very problematic situation, you were going to talk to somebody you didn't know. So it was very important that it was as personal as possible. So they had the people who were actually on the phone, they had taken pictures of these people. And they were on the website. And this was the most important feature that people with a phone number. And then what they did is they said to the photographer, you have to use a three column frame for your pictures. So it has to have equal space on the left and on the right, and the person in the middle. So we can crop it in three different ways. So we can base our responsive design based on these three grids. So from photography, up until up until all the different layouts, it was really thought out. But from this basic concept of it has to be personal. Yeah, I think this is real, real, real content design or an integration between designing content and designing from the content and with the content. I thought that was an excellent example.

Espen: Yeah, you're so right. And we sadly, I mean, we don't do that that much. What happens I find a lot of the time with with photography is particularly is go away to this company, or events or whatnot, and make sure you take a whole bunch of photographs. And maybe we can declare we need a picture of this and have that and have this thing. And other than that keep it vague, because we don't know where we're going to put these pictures or what sites they're going to be. That's the problem, right. And another problem with the web in particular is, you know what you're saying there of being able to crop the background. in print design, you could have a cover picture, and the picture is yellow, because you want yellow on this cover. And then you can put the text on top of it and part of the background is yellow. So you know, text on top of the picture works on the web, because we don't generally do what you're suggesting we have to put a dark overlay or a yellow overlay or some sort of way of obscuring pick the picture partially because we don't know how many words are going to go on there, half the size of it and any of those things. So this is as big a problem as the divide between design and code. Really.

Vasilis: Yeah. So what are the things I I've been thinking about what visual design tools should focus on there's a lot of invisible or less visible things that actually can use a little bit of design attention. So one thing that always, I thought was weird is that designers don't start or don't design the, the icon. Was it called the favicon?

Espen: Favicon. Yeah.

Vasilis: I always had to go back to the designers and ask them, can you design a favicon. And icons for if you save the website to your home screen or something like that there's many icons there. Other things, the title, the title in your browser that you can see in the browser that can use some design attention to you have all these beautiful Unicode characters, you can actually put them in there. And this works, right, there's something then you notice that if if it's there, then you can pay extra attention. Just by putting stuff like that. There's things like print style sheet, nobody ever looked at print style sheets, they're so interesting, you can do so much with them. Other stuff like this is maybe even in the opinionionated sector of design tools, that if you design a lot of motion, you should also consider the reduced motion preference of some people, right? And people can get nauseated by a lot of motion. So if you design lots of motion, maybe the design tool could suggest, what should it look like if people prefer not to see that much motion? It could help out with colour contrast, things like that. Right? Yeah, just being there. Yeah, that hard?

Espen: No, this, these are all fantastic ideas. I think. If even looking at typography, why isn't there a baseline h1 to h6, paragraphs, bold, italics, list items, all of this stuff could just be there. As soon as you open a new file, or at least when you open a new file, you'd have the option to use the boilerplate, whatever, that has a few button styles, all the typography, you need all the icon sizes, just pre made, you'll just have to fill them in. At least then you bring this stuff to the forefront. I think that's a good idea. If some of those things kind of get stuck in my design files, like the icons. Once you move to the next project, you just kind of copy and paste that that artboard so that you have all the icon sizes there.

Vasilis: Yeah, of course, you could save it as a template. Why not? So other things? Well, with typography, it can get pretty complicated, right? So what should, it's not just about the heading, the size and the margin. It's also the heading in relation to other content. So what should a heading to look like? What should the paragraph look like, which is directly the direct sibling of a headline? Things like that, right? There's this, it can get really, really complicated. So there you need. I think design tools can definitely help there as well. Yeah, sure.

Espen: Yeah. Not to mentioned responsive typography as well. h1 is one thing, but it's isn't because there's so many things on different screen sizes. So it's hard to nail it. But I think a start would be to highlight these things to offer them up as a built in templates are built in sort of tips or something like that is probably a really good idea.

Vasilis: And Webby units. I want fi h units in design tools.

Espen: Yeah, yeah, that's—

Vasilis: VH, right viewport relative units where you can, you can actually design poster like interfaces like we we always like that where the the headline is really just related to the size of the viewport. This is something we can actually do, which makes sense of course,

Espen: if you know the exact font and the exact words you're using, right?

Vasilis: Yeah,

Espen: Yeah. Yeah, you and people like you doing stuff like that with the units we have now. Will, in my mind, pave the way to it just being some sort of native attributes in the future. You just go text fit, boom. And then it adapts to whatever size or font are you using?

Vasilis: Yeah, yeah, yeah.

Espen: Yeah, no, that's I think some of these things are you could you could fake it, you know, in your design, and obviously, because your designs are more or less static. It's, it's, it's you don't need the vw unit to make a headline that fits across the artboard. You can just set it to scale and then with the awkward scales, the text scales with it. Because it's not an actual website, there's so many things you don't have to implement. It just kind of works as a sketch.

Vasilis: Yeah. Okay. And then there's another thing, I think design tools could be educational as well. So it could add a little bit of explanation. When, for instance, the contrast is low, you could explain why that is a problem. Why is this important to take a little bit of attention? Why should you pay attention to this thing? And what does it do? Oh, fallback phones, why should you think about fallback phones? what's the what's the deal there? and things like that. Right? If you add a little bit of explanation, it could be that people start thinking about it.

Espen: I think you're right. I think obviously, things like adding educational tips in the software will be at the bottom of the list of the of the development team of Figma, for example, but in an ideal world world, yeah, if you had fresh graduates coming into the industry, and this thing goes, and this is this fails, whatever contrast test, and then it tells you why maybe after a few years of using the software, you kind of just go automatically well, yeah, of course, I need to think about all these things.

Vasilis: Yeah.

Espen:Yeah.

Vasilis:Maybe you don't want the [Makes wrong answer buzzer sound] sound.

Espen: Exactly. Or maybe you're embarrassed if you share a file to a client. And it's got all these like, Amber and red flags on it saying that this thing doesn't pass the test. That's, that's basically how it works today with HTML, right? Some, some clients are more concerned and others with it. But if you run it through any of these validators, or contrast checkers, and it comes back with errors, you're gonna ask your agency to look at it. So —

Vasilis: yeah, so these are, these are all the Well, some of the things I've been thinking so much about these.

Espen: I think it's really interesting how your ideas are not, you know, trying to push Figma in the direction of Web flow, which is, you know, we could put a UI of graphical UI on top of code, and we could make finished websites. I mean, that's what Web flow does now. And you're using real CSS, but you have you have handles and you know, at an interface to click and manipulate your objects. So you feel like you're still using a design tool, not writing code. That's not what you're saying. You're saying, look, whatever tool it is, whether it's something working with code, or something working with vectors, like figma, why don't we put more of design theory or, you know, philosophy or practical issues into the, into the tool to make you think more about the web, which I think is super interesting, and also easier to solve than to make it some sort of magical website generator?

Vasilis: Yeah. And I think that really the, which, of course, it sounds weird, but I think visual design tools should concern, should be concerned with non visual things more. So the things that you don't see the invisible stuff of a website. So it's, it's not just one way that you can look at it. But there's many different appearances to websites, right? The really, really old browsers, you have to think about them. So what should that look like? What if grid is not supported? So right now, the idea is, if grid is not supported, you should use old technology to recreate the grid that we made? Well, you could also say, No, a single column is fine. Just put some whitespace left and right. But the whitespace left and right. I think these are design considerations, visual design considerations. But these are invisible when you just think about the the ideal design solution. So the chaotic structure and the invisible stuff. I really think these and semantics, for instance, I think this is really important. So the the structural hierarchy of a web page, why should that be left over to web developers? Why is that not something something that visual designers should care about? Because they do care about it

Espen: Hmm,

Vasilis: I mean, the visual hierarchy is always there.

Espen: Hmm,

Vasilis: Just doesn't make sense with the structural hierarchy is there Or what if you combine these things? Yes, it's complicated Of course, but I'm always thinking in that direction make make these web tools more Webby.

Espen: Yeah, you know, the, the end point of what you're asking For there is super complicated because you kind of just talking about making a website, right? If you really get into all the details about semantics, and markup, what you're doing is markup. But long before that, I think designers have a way to go in terms of just thinking about their elements. Not even in terms of perfect markup, like using articles or sections or whatever. But just thinking about design elements as HTML elements, meaning boxes, essentially, what box nests within what are the other box? And what's the relationship between these two things? How do they behave? Do they stick to the right do they stick to the left? We are. Most of us it's it's too easy to just look at this particular size design and perfectly move on to mobile size, design it perfectly. But at least with with figma, I'm sure in sketch as well. Now you the functionality is getting better at mimicking this box model of thinking. So you put things in a box, you can make that box stack left, the writers are sending kind of emulate Flexbox in there, you can emulate margin and padding. And you can stretch the box and see if it sticks to the top of the board or the bottom. These things are now here. And I hope that it'll, in a way bring uninitiated designers on board with the thinking. So when maybe they have a conversation with the developers and they say or how do how do we stack this, there's there can be a meaningful conversation to be had, rather than the designer supplying 12 sketches of the same thing at different sizes to explain what the what they think.

Vasilis: Yep. Yep. And okay, I have one more thing that I really want to say about tools. And that is that design tools. So I mentioned it before the design tools, they offer a subset of features.

Espen: Yep.

Vasilis: But what I wonder is, what is this subset based on? And, of course, it is based on what people do. So this makes design tools, extra conservative, in my view. So because it's based on what we have been doing, it is the opposite of innovative, you cannot innovate, you cannot make something that hasn't been done before with these tools. Right? It's always based on what we consider to be good practice. And if you think the web is good enough, then these are really good tools. But if you like me, don't think they'll ever be good enough. And you know, there's so much possible and so much more possible and so much to explore that we haven't explored yet. Then I see these tools actually as a problem, and not as a solution.

Espen: Yeah, I have to agree with you there. I think digital arts or digital creativity or things that push the boundaries, as it is now it kind of has to happen in code, you have to just play with the, the material of the web. But also, you know, let's let's face it, we need in today's digital design industry, we need a tool that can quickly express an idea or some layout or some thoughts, we need a tool to be able to do it on the on a lo-fi scale, just doing wireframes and clickable mock ups, it needs to be high fidelity as well, to explain some intricate, you know, visual balance of elements or something. We need to be able to share that with developers. Preferably, the developers should be able to access all the visual attributes and easily convert them to CSS or whatnot, we need to be able to share with clients to explain our thinking. And all of these things are kind of covered. But I think we come such a long way from Photoshop. But of course, with I don't know generative design or you know, a million attributes that no designer ever hears about because they're not there in our tools, we still have a long way to go

Vasilis: True. So I think funnily enough things change. Photoshop could have been considered a very progressive app, because we could come up with stuff in Photoshop that was impossible to do on the web. So it actually moved the web forward, right border radius, gradients, shadow box shadows, dark shadows, all this stuff was possible in Photoshop, and we wanted it and now we have it and blend modes, things like that. They all came out of Photoshop into the web. Now the tools are based on what we used to do. So they've become very conservative and we're not innovating.

Espen: But maybe maybe we'll see a change. Maybe Photoshop had a whole bunch of functionality actually meant for something else entirely. But we took it applied it to web design. And then it's it's, it's snuck its way into code and, and semantics as both or CSS certainly. And maybe we'll see the same thing happening with the likes of figma. And and Sketch. We'll see, we'll see stuff that's happening now in the let's call it the creative coding scene, or, you know, experimental code will trickle into design software, even now seeing that you can kind of emulate Flexbox, or maybe not grid just yet, but you can emulate certain things that are native to code. As soon as they move over to to the visual side of things will, will will move closer, I think to crossing that bridge.

Vasilis: That will be really nice.

Espen: I think so but I also feel I have this voice inside that says, look, everybody should just code anyway, that's the best interface to do these things. But will we ever get there? I don't know.

Vasilis: Probably not. But well, maybe I don't know. On the other hand, CSS is getting more complicated.

Espen: Yes, and coding, no matter how you look at it, coding is slower than, than throwing up a sketch in in Figma. I know you and probably many others will disagree with this statement. But you can duplicate a sketch so quickly, and you can do things so quickly, just just to get a feel for whether this direction is good or not. And I admittedly I'm a very novice coder. So it takes me you know, 10 times as long as it takes you to do something. But there's no doubt in my mind to just throw something out. To to look at it comparing, you know, 20 different fonts, for example, is like way easier in a visual design tool. And I'm not sure if we'll ever really cross that bridge.

Vasilis: Yeah, true. Yeah. Not sure, either. So do you have any last thoughts about design tools?

Espen: We've covered a lot. What was the question again? Are they good? Are they bad? What can be better? What problems do they solve?

Vasilis: What do they solve? What don't they solve? I think we covered that.

Espen: Yeah, I think in summary, the state of design tools now doing what most web designers do. They're pretty good. Like they cover a lot of stuff. They solve a tonne of problems. They're on their way of becoming a really good way of communicating between both development teams and client teams. However, like you said, they don't solve the problem of creativity using codes because they are based on what we already do and what we make and the websites that we want to produce. Not all these other things that are possible, but we don't currently do

Vasilis: 45 minutes, and you just brought it down to 45 seconds.

Vasilis: Today, I thought it would be a good idea to talk about design tools, visual design.

Espen: Okay, so we're thinking Photoshop.

Vasilis: Well, and I think since Photoshop, we have some, a little bit more specialised visual design tools. But yeah, so I was wondering, what do they solve? What don't they solve? And should we improve them? Or do we need different tools? These, these are a bit the lines that I'm thinking about. So I'm not really a visual design tool user, but I think you are. So can you tell me a little bit more about them?

Espen: Sure. Yeah, I've used them and I still use them. You know, my whole career. It's, I started doing magazine design. So obviously, then you're using QuarkXPress or InDesign, hopefully. And then once I made the switch to digital, it was all Photoshop for a very long time, which, if we start there, it's an odd piece of software to make websites with, I think, potentially, the only reason was that Photoshop is pixel based as opposed to InDesign or Illustrator, which is vector based. So somehow, you know that that became the tool. And I guess that's where we started be getting concerned about pixel perfection and all these things. I was with Photoshop for a long time... years. And back then, let's the obvious question first, what is what? What problem does design tools solve? And of course, certainly, in my career, and working at different agencies, the main challenge of getting a design up and running, if you're not a developer, yourself is to explain to the development development team, what should this page look like. And so this design tool becomes a way of creating a picture that the developers can replicate in code. And obviously, way, way, way back, when I first learned any web design, there was an my graphic design course, we we use Dreamweaver and, and the way they taught us Dreamweaver was, here's a Photoshop file, slice it up into different pictures, and you click this button called make website or so I kinda remember something like that. And then suddenly, you had a table of pictures that you can then make clickable, right? So there was no live text, it was just, it was just pictures.

Vasilis: It was, you know that a front end developer in Belgium was called a slicer.

Espen: Oh, my God, that's amazing. Slicing, slicing seemed like mind blowing technology. At some point. I was like, Oh, this is so smart. I can just sell it all up and—

Vasilis: I was really good at slicing.

Espen: Slicing think obviously back then the picture was the website's in a way. And then you could remove some of the pictures and replace them with text. Certainly, that's what I tried to do. And it was really, really difficult. Working in Flash was a bit more visual, you've got you've got the sense that the visuals that you're working on are actually the visuals that will be displaying on someone's website. Yeah. But then, you know, when I started working on real projects with real, you know, CMS as an actual development teams and stuff, it was all we make a picture or several pictures in Photoshop at 960, you know, with the grid already set up. And then we make sure to the enth degree that all the margins and paddings are actually pixel perfect in our sketches, because you hand it over to some developer and they they literally go, you know, what, by the pixel and measure up and implement exactly what we did. This was before responsive design, of course. Yeah.

Vasilis: So and then. So we've been using Photoshop, Photoshop. When I stopped working at an agency, I think Photoshop was still... Well, it wasn't it ends at its end days. People started using Sketch back then. Right. Yeah. And I think since then, this is seven, eight years ago. I think. Things have changed a bit, right?

Espen: Yeah, I think so. I'm not sure. I think personally, I was a bit late to the sketch game. I gradually, like you say, maybe six, seven years ago, I gradually slid out of Photoshop and into Illustrator. I realise just working in Illustrator with multiple artboards. And scaling things was way easier. And so much of the work we do is is typography and vector based anyway, I just felt like this is a better tool, you know, no interactive features , no, no fancy, web specific features. But still, it was a much, much quicker workflow. And at the same time, you know, the whole industry started moving over to Sketch. And then a little bit later on Adobe released Experience design, I think it's called XD. Which I think that's maybe four, four years ago or so I started working with that. And for me, that was the real game changer, because it was a an app that was so light. And it was, how can I how can I put this it, was more more about sketching up something quickly, then it was about creating a finished piece of art. So Photoshop, Illustrator, for me, to certain degree sketches. Well, it's always about polishing something until you're really really happy. And then it's like, here's the final document, get the clients to sign off on this, pass it on. And then you get into this, you know, back and forth with developers afterwards to try and make sure that the translation into code is as good as possible. But Experienced Designer XD seemed to me like a massive leap in, in the approach or the philosophy of the software. So instead of being a tool, where you make the website, it's a tool where you make a prototype or a sketch, or you test out the concept and they had these nifty features, the scaling was different, they had some sort of grid feature where you could make an element that just repeated to make a grid, you know, there was like some real innovation happening. And then, after a year or two working with that, I started working for another company, and then they all use sketch, I learned sketch, Sketch was good, it was easy. It was felt almost, you know, obviously, it was it was made with with web in mind. And there were plugins, and there were sort of web specific functionality. Prototyping game became native in sketch at some point. And suddenly, then you had I remember the the jump from using sketch, and then uploading your flat visuals to Envision and then marking up the hotspots and creating a prototype in the cloud via Envision that seemed like a good idea. But then suddenly, prototyping became native, within Sketch. And then then I think you're really starting to look at a good visual tool for web design, because you can sketch something really quickly. Doesn't have to be high fidelity, but crucially, you can link things up and you can see, maybe not all the detail of interaction, but you can certainly get a feel for flow and user experience. And, you know, the the journey through the website, so to speak, as opposed to, you know, Photoshop files, which were very, very static medium.

Vasilis: I like the you mentioned a few times you mentioned, I think, something like high fidelity versus sketching. And I think this is a very interesting point that we've always used, or not always but how I remember Photoshop was used really to get the, the picture perfect. Yeah, right. And the visual designers I worked with, they would just keep on polishing those buttons until they really, really shined. Yeah, and this would take them hours. But I also remember working with an art director who didn't even know how to turn on a computer. So so these visual designers that I worked with, they made these beautiful, beautiful, just images of websites, and they would print them out. And then we would go to clients and they would sell these beautiful pictures of websites. But I worked with this art director once who didn't know how to turn on a computer and he used watercolour to paint the impression of a website. And this is different. It's not an image. It's not pixel perfect. It's an impression of what it might look like. Yeah, and I always like this method of working much more because it gives a good impression, but it's not about the details. It's about do we like it. We like a website that looks something like this. Instead of showing something incredible and incredibly detailed, and then saying this is exactly what you're going to get. And also think that that was a big problem of course with especially back then, that on the web, what you see is Definitely not what the other one is going to see. Yeah, right. So what you see. So WYSIWYG would be what you see is not what they get.

Espen: Yeah. Yeah, I mean, there's differences now. But certainly back then it was it was enormous, especially it just even between Macs and PCs. I remember tearing my hair out so many times by typography, even when, even when we could, in theory, start using fonts using what was called Cufon and other technologies. It was like it looked Okay, on my computer, and then you look terrible on someone else's computer. And you just don't even is it even worth going down this route? Because you didn't even look?

Vasilis: Because remember, Cufon was, I think it was a flash hack. You would put the font into a Flash file, and it would render it in a beautiful font, but it would load slowly. It would be ugly during loading. It was just horrible.

Espen: Yeah, it was it was horrible. But if we consider it a prototype of what we have today, because I think if back then people said, You know what, this is ugly, it's slow. Let's not even try. Then you wouldn't have what we have now. Right? You have to make the ugly, broken thing first to open people's eyes to Oh, hang on, we can actually push typography online.

Vasilis: So that one of the problems I had back then was that the things that people could imagine and could come up with with Photoshop, there was much more possible than was possible on the web. So, for instance, people would designers would use border radius and border radius didn't exist back then,

Espen: you know, I had a, I had an action set up in Photoshop to cut out one pixel of each, each corner of whatever, you know, layer I was working on just to create these, like micro rounded corners.

Vasilis: So much work. And so that that was I think one of the problems. For instance, they want to people use blend modes. There were no blend modes in browsers. But on the other hand, what exactly what you said this meant that browsers have it implemented now. Right?

Espen: Yeah, I think there was there must have been one army of developers hacking together the most ludicrous of designs, because I don't know why it went like that. I don't know why when I send someone a sketch, and they, it was impossible to implement, they still kind of did it, instead of saying, hey, Espen do this again, because is not working. And somehow—

Vasilis: I always did that. So I went back to the designers, and I said, This is impossible. And then it's a no, no, we sold it already.

Espen: Make it work

Vasilis: The client signed it off, you have to you have to fix it. And that the problem often was that. So ever, so that it was a real waterfall process, right? So first, the interaction designer would make a black and white thing, outline of the website, and then the visual designer would do some colouring by numbers and just colour in the thing. But they would just go on and go on. And then they would make it really beautiful. And then ask for a few more hours, or maybe a few more days to work on the project. But these days, of course, they're not extra days, these days were just taken away from the development team, which meant that for this even more beautiful and even harder to design even harder to build thing. I had fewer days. It was always so frustrating. And in the end, nobody was happy because it was never as good as the Photoshop file. And this was what we had promised and was always a bit of a letdown. But I think they did trigger back then that did trigger innovation. What I think right now is that they do maybe the opposite. So if you look at web design tools today, they are, they offer a subset of all the features that are out there. Right So—

Espen: yeah, yeah

Vasilis: I don't think that in sketch you will find some setting that you can increase the size of the underlying which we know is the one of our designs.

Espen: Yeah, no. So you're absolutely right, we've gone from Photoshop, just being capable of so much more than then because it's image image editing software, and then comparing that to really mentally rudimentary codes. Anyway. Now, I've stopped using Sketches, Figma these days, but it's the same thing. It can't, it can't do responsive design properly, it can't do fluid typography, it can't incrementally, you know, change the underlying size, it doesn't have any real connection to, I don't know, half of the CSS properties out there. It can't do variable fonts, I don't think yet. So obviously, there's a huge, huge gap between what you can do with your sketching tool and what you can do in the codes. But I will say that Figma, in the current iteration, for me, is the closest thing I've I've come to a perfect web tool. Granted, I haven't used Web flow, which maybe some people would argue is way more native, because it's, you know, it's actual code, and you can do responsive stuff there, etc. But what's really nice about figma these days is not only the prototyping, which is really good, you know, this, this one thing about web designers, yes, styling, and colours and fonts and trying to make things look beautiful. But also, you know, there's a huge, huge part of what we're doing is content and user flows. And, you know, this whole this whole experience thing, and I'm no user experience designer, per se, but I've been around the block enough to know that, you know, specific words, specific content, specific pictures, specific ideas, work, you know, they, they, they are the thing that hold up, whatever you put out there, so it's no longer for me anyways, no longer it's so important, the exact shade of yellow for this button. What's important is what the button says. And, yes, it's really important that the button is interactive and obviously clickable, etc. But we can, in my mind, I'm like, we can fix that in code. Let's let's do the interactive bits when we're actually working with something truly interactive, where it's more like, this is the vision for the website. This is what we're trying to do.

Vasilis: But I think there's also a problem there. So that's, well, in an ideal situation, you have a team of designers and developers working together. Yep. During a project? Well, at least how I remember and also what I see still see at some agencies is that the there is no collaboration, not really. So what it means is that the developer has to make design decisions later on. So how does the hover and the focus state of this button what what do they look like? You shouldn't leave those. Those are important visual decisions. And they should be made by somebody who's, who understands what, what things should look like. And in what, of course, there are many developers who understand this. But there's also many developers who really don't. Just leave design up to them, right.

Espen: Yeah, this is this is a problem in the industry for as long as I've been in it. And I'm sure before my time, and I'm sure after my time to which, obviously, back in the day, when we had Photoshop files, maybe part of the reason why we were so obsessed with pixel perfection is the idea that someone who spent their whole education and career to date solving engineering problems are not fit to make design decisions. So then, you know, here's the recipe, you have to follow it exactly like this, because this is what the designers did. That now we have a front end industry that's way more involved with design. So it's feasible to picture teams or or individual people that can do both, or crossovers, etc. So I think we're closer to the some sort of working process than we were, you know, 15 years ago. But you're right, we shouldn't just go, this is not my job. As in, you know, here's my sketch, Oh, I didn't do the hover states, but you do that. But what I'm saying is, is there's a whole bunch of attributes that are better designed and better experienced and better evaluated in the browser, rather than in some sort of figma file, and figma. Now they have something called obviously they have something called components which is like master elements. So you create the master and then you can duplicate it. So for example, a button you can have a button library, you have one master and all the different variations, okay? They have interactive components, you can actually fake hover states. And I guess you could fake focus states as well. So we're getting to a point where you can do this. And I certainly have for many jobs where you set up some sort of page where all the different interactive elements are laid out. And they have overstates, they have different sizes, you know, it becomes more like, what's it called the design system or something like that. But still, I feel Variable Typography, and fluid viewports. And you can only suggest so much in a design sketch. And the finishing really, for me has to happen in the in the in code. And until, you know, you work with front vendors who are capable designers, or until you work with designers who are capable front vendors, I think is going to have to be some sort of communication, some sort of stage where you go, here's the vision, okay, let's implement the vision. And then we work together to sort of finalise it.

Vasilis: Okay. I always have, I've been thinking about what a visual design tool should look like, a lot. And so what I felt always thought is that it should maybe have an opinion. So you see that in some developers tools where you cannot commit a change that you may, you cannot committed if it doesn't meet certain criteria. So if it's not good enough, you cannot save it. That's basically what they do.

Espen: Yep.

Vasilis: So there's, it has an opinion.

Espen: Yep

Vasilis: And I think, Matt, why not with web design tools that not sorry, you cannot save it because you didn't add a hover and a focus state to the button.

Espen: So I think is a very neat idea.

Vasilis: And there's more like, hover states, but know, your content is too easy. You should add real content. There will be headlines of at least two lines, and not all headlines will fit on one line.

Espen: Yeah,

Vasilis: Right, things like that. visual design tools could definitely help with that.

Espen: Yes, I mean, your first example, I feel like yeah, that's definitely something we could do. And it's seems to me that we can do it fairly easily, like in any design tool these days are certainly vector based design tools, you can choose the shape, usually you draw a circle, or you draw a square, or you draw a rectangle, whatever the to that list of, of elements, you could just say, make a button. And the button is a pre made component. It has text, it has maybe room for an image, it has a background. That's it. And then because the software knows you've now made the button, it could also say, Hey, here's the empty hover state and the empty focus that you have to do those two. But I think going in and saying, hey, you have no headlines on two lines, I think then you're you're wading into some AI territory, that's very difficult. And also, it's a bit of a, you know, it would be difficult to to differ between the examples where actually there are no headlines on two lines and the ones that needed so.

Vasilis: well, but maybe you should give a suggestion. I see you're using easy English short words, are you sure?

Espen: Yeah,

Vasilis: this is the content that people are going to put into this website.

Espen: Yeah. Or even if you put in lorem ipsum, or some, obviously fake text, he could prompt you to say, Hey, how about trying some real phrases here? But then, you know, that highlights another problem is lorem ipsum Is there obviously was there way before web and you use it to set bulk text to see, I guess how the font would work or you know, how many words can fit on one page and this and that publication. Now is just used as filler. And and this highlights exactly the same problem as we have with design and development is we have with design and content. It's like whomever writes the text does not work closely with the designer anymore. They sit in a different department in a different room in a different building at the different time.

Vasilis: Every time that's the problem. Yeah, the time is wrong. I think here because often the content is made after the website is designed, which is I always think is very weird, because what do you design right? You design thecontent if you ask me. Yep. But yeah, if you have no content,

Espen: what what are you what are you working on?

Vasilis: How's that even possible?

Espen: Yeah, I think you're right. And then at the same time, we have this massive upswell in, in design systems thinking and the generation and maintenance and sale of design systems all over the industry. So I think for large websites, you need some way of organising your visual components. And for me, that's where design system comes in. So from that perspective, you need to make buttons and you need to make list items or an article component is whatever it is that you're making. And to a certain extent, you have to make a template that can be filled with whatever content your marketing team needs to put in there. But that's, that's one type of website or one type of component. The other thing is, I'm trying to convince people to sign up to this yoga club, I need to use real words, to do that, I need to use real pictures to do that, I need to somehow convince people that this yoga club is really good and worth the money. So in that sense, styling of buttons isn't enough or choosing a font size or setting a grid. You know, it's meaningless,

Vasilis: of course.

Espen: Yeah. So, of course, designers should write this stuff into this.

Vasilis: Do you remember that that conference that we went to? We met in Oslo.

Espen: Yes

Vasilis: Long time ago, and there was this guy who did this talk about the I think it was the Norwegian, some sort of a Cancer Fund or something like that. Or you could call these people if you had cancer, and they would help you out or talk to you, remember that that was a one beautiful website. And it was designed around the pictures of the people. So the idea was that you, it had to be personal because you were in a very problematic situation, you were going to talk to somebody you didn't know. So it was very important that it was as personal as possible. So they had the people who were actually on the phone, they had taken pictures of these people. And they were on the website. And this was the most important feature that people with a phone number. And then what they did is they said to the photographer, you have to use a three column frame for your pictures. So it has to have equal space on the left and on the right, and the person in the middle. So we can crop it in three different ways. So we can base our responsive design based on these three grids. So from photography, up until up until all the different layouts, it was really thought out. But from this basic concept of it has to be personal. Yeah, I think this is real, real, real content design or an integration between designing content and designing from the content and with the content. I thought that was an excellent example.

Espen: Yeah, you're so right. And we sadly, I mean, we don't do that that much. What happens I find a lot of the time with with photography is particularly is go away to this company, or events or whatnot, and make sure you take a whole bunch of photographs. And maybe we can declare we need a picture of this and have that and have this thing. And other than that keep it vague, because we don't know where we're going to put these pictures or what sites they're going to be. That's the problem, right. And another problem with the web in particular is, you know what you're saying there of being able to crop the background. in print design, you could have a cover picture, and the picture is yellow, because you want yellow on this cover. And then you can put the text on top of it and part of the background is yellow. So you know, text on top of the picture works on the web, because we don't generally do what you're suggesting we have to put a dark overlay or a yellow overlay or some sort of way of obscuring pick the picture partially because we don't know how many words are going to go on there, half the size of it and any of those things. So this is as big a problem as the divide between design and code. Really.

Vasilis: Yeah. So what are the things I I've been thinking about what visual design tools should focus on there's a lot of invisible or less visible things that actually can use a little bit of design attention. So one thing that always, I thought was weird is that designers don't start or don't design the, the icon. Was it called the favicon?

Espen: Favicon. Yeah.

Vasilis: I always had to go back to the designers and ask them, can you design a favicon. And icons for if you save the website to your home screen or something like that there's many icons there. Other things, the title, the title in your browser that you can see in the browser that can use some design attention to you have all these beautiful Unicode characters, you can actually put them in there. And this works, right, there's something then you notice that if if it's there, then you can pay extra attention. Just by putting stuff like that. There's things like print style sheet, nobody ever looked at print style sheets, they're so interesting, you can do so much with them. Other stuff like this is maybe even in the opinionionated sector of design tools, that if you design a lot of motion, you should also consider the reduced motion preference of some people, right? And people can get nauseated by a lot of motion. So if you design lots of motion, maybe the design tool could suggest, what should it look like if people prefer not to see that much motion? It could help out with colour contrast, things like that. Right? Yeah, just being there. Yeah, that hard?

Espen: No, this, these are all fantastic ideas. I think. If even looking at typography, why isn't there a baseline h1 to h6, paragraphs, bold, italics, list items, all of this stuff could just be there. As soon as you open a new file, or at least when you open a new file, you'd have the option to use the boilerplate, whatever, that has a few button styles, all the typography, you need all the icon sizes, just pre made, you'll just have to fill them in. At least then you bring this stuff to the forefront. I think that's a good idea. If some of those things kind of get stuck in my design files, like the icons. Once you move to the next project, you just kind of copy and paste that that artboard so that you have all the icon sizes there.

Vasilis: Yeah, of course, you could save it as a template. Why not? So other things? Well, with typography, it can get pretty complicated, right? So what should, it's not just about the heading, the size and the margin. It's also the heading in relation to other content. So what should a heading to look like? What should the paragraph look like, which is directly the direct sibling of a headline? Things like that, right? There's this, it can get really, really complicated. So there you need. I think design tools can definitely help there as well. Yeah, sure.

Espen: Yeah. Not to mentioned responsive typography as well. h1 is one thing, but it's isn't because there's so many things on different screen sizes. So it's hard to nail it. But I think a start would be to highlight these things to offer them up as a built in templates are built in sort of tips or something like that is probably a really good idea.

Vasilis: And Webby units. I want fi h units in design tools.

Espen: Yeah, yeah, that's—

Vasilis: VH, right viewport relative units where you can, you can actually design poster like interfaces like we we always like that where the the headline is really just related to the size of the viewport. This is something we can actually do, which makes sense of course,

Espen: if you know the exact font and the exact words you're using, right?

Vasilis: Yeah,

Espen: Yeah. Yeah, you and people like you doing stuff like that with the units we have now. Will, in my mind, pave the way to it just being some sort of native attributes in the future. You just go text fit, boom. And then it adapts to whatever size or font are you using?

Vasilis: Yeah, yeah, yeah.

Espen: Yeah, no, that's I think some of these things are you could you could fake it, you know, in your design, and obviously, because your designs are more or less static. It's, it's, it's you don't need the vw unit to make a headline that fits across the artboard. You can just set it to scale and then with the awkward scales, the text scales with it. Because it's not an actual website, there's so many things you don't have to implement. It just kind of works as a sketch.

Vasilis: Yeah. Okay. And then there's another thing, I think design tools could be educational as well. So it could add a little bit of explanation. When, for instance, the contrast is low, you could explain why that is a problem. Why is this important to take a little bit of attention? Why should you pay attention to this thing? And what does it do? Oh, fallback phones, why should you think about fallback phones? what's the what's the deal there? and things like that. Right? If you add a little bit of explanation, it could be that people start thinking about it.

Espen: I think you're right. I think obviously, things like adding educational tips in the software will be at the bottom of the list of the of the development team of Figma, for example, but in an ideal world world, yeah, if you had fresh graduates coming into the industry, and this thing goes, and this is this fails, whatever contrast test, and then it tells you why maybe after a few years of using the software, you kind of just go automatically well, yeah, of course, I need to think about all these things.

Vasilis: Yeah.

Espen:Yeah.

Vasilis:Maybe you don't want the [Makes wrong answer buzzer sound] sound.

Espen: Exactly. Or maybe you're embarrassed if you share a file to a client. And it's got all these like, Amber and red flags on it saying that this thing doesn't pass the test. That's, that's basically how it works today with HTML, right? Some, some clients are more concerned and others with it. But if you run it through any of these validators, or contrast checkers, and it comes back with errors, you're gonna ask your agency to look at it. So —

Vasilis: yeah, so these are, these are all the Well, some of the things I've been thinking so much about these.

Espen: I think it's really interesting how your ideas are not, you know, trying to push Figma in the direction of Web flow, which is, you know, we could put a UI of graphical UI on top of code, and we could make finished websites. I mean, that's what Web flow does now. And you're using real CSS, but you have you have handles and you know, at an interface to click and manipulate your objects. So you feel like you're still using a design tool, not writing code. That's not what you're saying. You're saying, look, whatever tool it is, whether it's something working with code, or something working with vectors, like figma, why don't we put more of design theory or, you know, philosophy or practical issues into the, into the tool to make you think more about the web, which I think is super interesting, and also easier to solve than to make it some sort of magical website generator?

Vasilis: Yeah. And I think that really the, which, of course, it sounds weird, but I think visual design tools should concern, should be concerned with non visual things more. So the things that you don't see the invisible stuff of a website. So it's, it's not just one way that you can look at it. But there's many different appearances to websites, right? The really, really old browsers, you have to think about them. So what should that look like? What if grid is not supported? So right now, the idea is, if grid is not supported, you should use old technology to recreate the grid that we made? Well, you could also say, No, a single column is fine. Just put some whitespace left and right. But the whitespace left and right. I think these are design considerations, visual design considerations. But these are invisible when you just think about the the ideal design solution. So the chaotic structure and the invisible stuff. I really think these and semantics, for instance, I think this is really important. So the the structural hierarchy of a web page, why should that be left over to web developers? Why is that not something something that visual designers should care about? Because they do care about it

Espen: Hmm,

Vasilis: I mean, the visual hierarchy is always there.

Espen: Hmm,

Vasilis: Just doesn't make sense with the structural hierarchy is there Or what if you combine these things? Yes, it's complicated Of course, but I'm always thinking in that direction make make these web tools more Webby.

Espen: Yeah, you know, the, the end point of what you're asking For there is super complicated because you kind of just talking about making a website, right? If you really get into all the details about semantics, and markup, what you're doing is markup. But long before that, I think designers have a way to go in terms of just thinking about their elements. Not even in terms of perfect markup, like using articles or sections or whatever. But just thinking about design elements as HTML elements, meaning boxes, essentially, what box nests within what are the other box? And what's the relationship between these two things? How do they behave? Do they stick to the right do they stick to the left? We are. Most of us it's it's too easy to just look at this particular size design and perfectly move on to mobile size, design it perfectly. But at least with with figma, I'm sure in sketch as well. Now you the functionality is getting better at mimicking this box model of thinking. So you put things in a box, you can make that box stack left, the writers are sending kind of emulate Flexbox in there, you can emulate margin and padding. And you can stretch the box and see if it sticks to the top of the board or the bottom. These things are now here. And I hope that it'll, in a way bring uninitiated designers on board with the thinking. So when maybe they have a conversation with the developers and they say or how do how do we stack this, there's there can be a meaningful conversation to be had, rather than the designer supplying 12 sketches of the same thing at different sizes to explain what the what they think.

Vasilis: Yep. Yep. And okay, I have one more thing that I really want to say about tools. And that is that design tools. So I mentioned it before the design tools, they offer a subset of features.

Espen: Yep.

Vasilis: But what I wonder is, what is this subset based on? And, of course, it is based on what people do. So this makes design tools, extra conservative, in my view. So because it's based on what we have been doing, it is the opposite of innovative, you cannot innovate, you cannot make something that hasn't been done before with these tools. Right? It's always based on what we consider to be good practice. And if you think the web is good enough, then these are really good tools. But if you like me, don't think they'll ever be good enough. And you know, there's so much possible and so much more possible and so much to explore that we haven't explored yet. Then I see these tools actually as a problem, and not as a solution.

Espen: Yeah, I have to agree with you there. I think digital arts or digital creativity or things that push the boundaries, as it is now it kind of has to happen in code, you have to just play with the, the material of the web. But also, you know, let's let's face it, we need in today's digital design industry, we need a tool that can quickly express an idea or some layout or some thoughts, we need a tool to be able to do it on the on a lo-fi scale, just doing wireframes and clickable mock ups, it needs to be high fidelity as well, to explain some intricate, you know, visual balance of elements or something. We need to be able to share that with developers. Preferably, the developers should be able to access all the visual attributes and easily convert them to CSS or whatnot, we need to be able to share with clients to explain our thinking. And all of these things are kind of covered. But I think we come such a long way from Photoshop. But of course, with I don't know generative design or you know, a million attributes that no designer ever hears about because they're not there in our tools, we still have a long way to go

Vasilis: True. So I think funnily enough things change. Photoshop could have been considered a very progressive app, because we could come up with stuff in Photoshop that was impossible to do on the web. So it actually moved the web forward, right border radius, gradients, shadow box shadows, dark shadows, all this stuff was possible in Photoshop, and we wanted it and now we have it and blend modes, things like that. They all came out of Photoshop into the web. Now the tools are based on what we used to do. So they've become very conservative and we're not innovating.

Espen: But maybe maybe we'll see a change. Maybe Photoshop had a whole bunch of functionality actually meant for something else entirely. But we took it applied it to web design. And then it's it's, it's snuck its way into code and, and semantics as both or CSS certainly. And maybe we'll see the same thing happening with the likes of figma. And and Sketch. We'll see, we'll see stuff that's happening now in the let's call it the creative coding scene, or, you know, experimental code will trickle into design software, even now seeing that you can kind of emulate Flexbox, or maybe not grid just yet, but you can emulate certain things that are native to code. As soon as they move over to to the visual side of things will, will will move closer, I think to crossing that bridge.

Vasilis: That will be really nice.

Espen: I think so but I also feel I have this voice inside that says, look, everybody should just code anyway, that's the best interface to do these things. But will we ever get there? I don't know.

Vasilis: Probably not. But well, maybe I don't know. On the other hand, CSS is getting more complicated.

Espen: Yes, and coding, no matter how you look at it, coding is slower than, than throwing up a sketch in in Figma. I know you and probably many others will disagree with this statement. But you can duplicate a sketch so quickly, and you can do things so quickly, just just to get a feel for whether this direction is good or not. And I admittedly I'm a very novice coder. So it takes me you know, 10 times as long as it takes you to do something. But there's no doubt in my mind to just throw something out. To to look at it comparing, you know, 20 different fonts, for example, is like way easier in a visual design tool. And I'm not sure if we'll ever really cross that bridge.

Vasilis: Yeah, true. Yeah. Not sure, either. So do you have any last thoughts about design tools?

Espen: We've covered a lot. What was the question again? Are they good? Are they bad? What can be better? What problems do they solve?

Vasilis: What do they solve? What don't they solve? I think we covered that.

Espen: Yeah, I think in summary, the state of design tools now doing what most web designers do. They're pretty good. Like they cover a lot of stuff. They solve a tonne of problems. They're on their way of becoming a really good way of communicating between both development teams and client teams. However, like you said, they don't solve the problem of creativity using codes because they are based on what we already do and what we make and the websites that we want to produce. Not all these other things that are possible, but we don't currently do

Vasilis: 45 minutes, and you just brought it down to 45 seconds.