Go back

71: The materials interfaces are made of

49m 28s

71: The materials interfaces are made of

The conversation revolves around the materials used to create interfaces, emphasizing how choices like aluminum, wood, or plastic influence the design and user perception. Various examples, like macOS interfaces resembling metal or paper, highlight the significance of material selection in conveying specific qualities or functionalities. The dialogue delves into the distinction between plastic and glass-like interfaces, discussing how these choices impact aesthetics and user interaction. Furthermore, the discussion touches on the practicality and constraints imposed by different materials, with insights into the design philosophies behind flat design versus plastic design. Overall, the conversation underscores the complex interplay between material choices, design principles, and user expectations in shaping digital interfaces.

Transcription

8622 Words, 45670 Characters

Anthony, I don't think I can ever top the intro that you did from last week. It was absolute perfection. But I will try. We are here to talk about the materials interfaces are made of. This is so much better already. You've topped it. Okay, great. Yeah, I just jumped in. This is an interesting topic. I think that like many of our other topics, we need to try to define this a little bit before we actually get into it and defining things is kind of your specialty. Every time we start with a definition, I start trying to find something and then you poke holes in it, completely valid holes. And I guess I really knew that defining things was hard, but some things are even harder to define. And especially for a podcast, I guess you want to sort of outline the topic quite neatly so that it directs what you'll talk about. And it's never neat. But so I always lean, I always try to fall back on hoping the listeners know roughly what we're talking about based on that sort of initial discussion where we define the thing. But yes, the materials that interfaces are made of. I find this interesting because you sort of have to imagine that interfaces are made of materials. Kind of create this kind of conceptual idea in your head. And then use that to understand it or inform how you design it. But to give a simple example, when macOS did, I don't actually remember which version number it was, but before it was called, no, it's always been called macOS, but they changed the capitalization. Yeah. Well, I shouldn't say always someone from many years ago or criticised us, but it was called system, something system seven. But macOS, they did a version which might have been one of the first macOS X's, which was essentially looked like it was made of metal. So it was kind of this brushed aluminium. And so that's a simple example of that interface was made of aluminium, or a brush metal, or metal, you get to be more broad. And this is quite common, especially in the era of like iOS 6 where you had apps that look like they were made of paper. And other apps that look like they were made of wood, like the new stand app that look like a wooden shelf. Or the Apple notes app that look like it was made of paper. And so some interfaces are clearly sort of mimicking real world interfaces. But the reason I find interesting is because there's a deeper sort of level where it feels to me like most modern interfaces look like they're made of plastic. Even if people aren't taking a step back and saying, or even at the start of the project saying, this is going to be a plastic interface. I feel like most of the interfaces you see in 2025. Hey, someone's listening to this. Some design historian is listening in 2085. In 2025, it feels like most interfaces are made of plastic. And like I said, I find that interesting because I don't think anyone sets out to make an interface that looks like plastic. I feel like that's the default. And that you have to choose to make something that looks like wood or metal. Or in famously right now in Apple's case glass, because they're kind of liquid glass for iOS and macOS 26. Right. And so that's them going for glass, just like, I think it was Windows Vista. Glass first, they had this sort of see through title bars on their application windows, which is interesting because I think the rest of the interface inside that actual application window in Windows Vista. Still look like plastic. So they have this kind of glass and plastic combination. Whereas Apple have really gone for a sort of glass all over thing. And they mean it liquid, which is another topic we can get into in a minute. But yeah, so hopefully that makes sense to people. One wrinkle there is the Notes app I already mentioned is a good example. You have paper, but then you'd have leather. And so someone's made it like a notepad, some apps, you know, they're not they're not just trying to look like they made of one material. They're trying to look like they made of more than one. They're making multiple, like an entire object essentially. But in other cases, it feels like the whole interface is made of this one material. And maybe that material looks slightly different in different places. But they're not going for that sort of, let's make it look like a whole object. They're going for a, let's make the surfaces look like this one material. Maybe with different lighting or, you know, depth effects, whatever. So I don't know if that does that make sense? Yeah, I think so. I'm just kind of still trying to understand how you're differentiating between plastic and glass. I guess in would you say that glass just feels like more translucent, shiny than plastic. I think they go for. So in, in Vista, for example, I think the title bars have this kind of slanting light effect on them. Okay. Which I think is more of a glass property than a plastic. So it's about light. I think in those cases it is. And iOS 26 with liquid glass is another good example. They have this effect where if you look at an app icon on the home screen, both the top left corner at the sort of default rest state, the top left corner of that app icon sort of glass puck, let's call it, and the bottom right corner both have these highlights. You're right. And I looked that up because that felt a bit odd and it turns out that's a property of glass where light gets refracted through the solid glass. And then sort of it creates highlights on on both ends, which you wouldn't expect normally to expect the highlight just to be closest to the light source if it were a real physical object. And so I feel like maybe plastic wouldn't act that way because I assume it has different sort of light bending properties. And so I think you can sort of tell or if people who are trying to be careful about that and making it more realistic, I think you can probably sort of tell that one is plastic, one is glass. But that also often comes down to it yet, like you say, clarity. So a lot of the plastic interfaces I'm talking about are actually opaque. So it would be like a soft gray plastic rather than shiny and see through. And so it might just be that even if someone did sit down and say, I'm going to make this look like see through plastic. Actually, it ended up looking like glass. And so maybe there wasn't a point to yeah, there's also things like smoked glass that sort of AZ see through look, which I think it feels like they don't do much with plastic because maybe that would feel cheap because the smokey plastic kind of feels worse to me than a smoky glass, which feels quite sort of old-fashioned and maybe traditional. A smoky plastic feels like you've made the plastic wrong. So either it should be sort of opaque or completely clear. But a good example to your point is, I think it was Aqua, the Mac OS visual style. They have this kind of candy striped appearance. And it felt quite clear that they were trying to make that look like plastic, even if it was see through the material in some cases. When he was talking about liqueable buttons, it makes more sense to me that you would lick a plastic button to get really weird with it than to lick it. This is hilarious. Yeah, this is this is really fun to just like keep talking about interfaces of their plastic or glass. Like we're talking about top or where? Yes. And I think that's also speaking of fun. I think Aqua is more fun than something like Windows Vista and that plays into it as well. You expect something that's a bit more classy to be made out of glass and something that's a bit less classy or fun. Be made of plastic because one is like a child's toy and needs to be safe for younger people. And one is something you keep on your shelf to sort of admire, you know, like a trophy or something. So it also ties into what's the personality of this interface or what feeling are they trying to make me have and then what material that this looks like that most closely fits that personality. And so that's why I assume Windows Vista was plus with glass and Windows Mac OS Aqua was plastic because one was less fun and one was more fun, even though even if they didn't say that explicitly, although I expect they did at some point. Yeah, I'm thinking I guess it's really interesting then how the physical world sort of impacts these trends in a way. Like if we go back to the metal look or like the chrome or whatever type of metal it is, why was that seen as like highly polished and professional and expensive? Because I think I assume that's kind of what they were going for is like this is a classy, a professional piece of software. Yeah, which I feel like it was not a big miss, but it feels like it was a miss in terms of brushed metal is really hard to make classy. I think you could probably get away with it in real life because if you have a brushed metal object, you could probably make it subtle enough that you don't really care about whether it's brushed metal, you just care that it's made of metal and that's high quality, it's heavier, you know, and it takes the shine off, but because they were trying to make it obvious that it was brushed metal, I think it goes sort of leans into trashy. And so it feels like a lot of those Mac OS explorations as beloved as they were by, you know, people who put a lot of weight in nostalgia, maybe without realizing it. It feels like maybe they took it too far and it wasn't understated enough to be classy. Okay, I can't help but just like relate all of this to kitchens because I think as we're talking about top, I mentioned Tupperware, plastic glass and then metal. I'm thinking about like utility like stainless steel kitchens becoming kind of a thing in the last, even though 15 years, maybe maybe longer. Yeah, my two US centric. No, my dad really goes in for that sort of thing. He, they recently had to redo a kitchen in Spain because they have a house in Spain. So they wanted to redo the kitchen and I guess they wanted it to be cheap because they're kind of frugal people and they wanted to sort of not have to worry about it getting a bit sort of moldy or dusty or whatever when they're away. So easy to keep it clean because they only go out once a year. And so they got the whole kitchen done in stainless steel sort of professional kitchen style worktops and my dad was really excited about that. And I think that's down to the sort of the practicality, you know, they, they really enjoyed the fact that that was like, it's not warm or inviting. That sort of. No, practically. Yeah. Easily and very practical. I would like your dad. Yeah, I mean those the sorts of kind of extreme positions that I also take and I guess I get some of that from him. But often you'll have someone nearby who cares about warm, inviting things that won't let you do that. I think he probably found the right wife in someone who, you know, let him do a complete stainless steel kitchen. It's also easy to build, which is, you know, a big benefit if you're trying to get done quickly. Welcome back to the kitchen podcast. Oh man, I would, you don't even want to know. I would love to have a kitchen podcast, but this is an interface podcast. Yeah, which do a different topic each week, each, every two weeks. One time it's kitchen's the next time it's and hot air balloons, you know, just, but yeah, so I think there are some materials almost that feel more suitable. That makes sense. Okay. And some materials that don't, and I think part of that is to do with how easy it is to pull off the effect essentially. I think brushed metal, you're going to have a hard time. Yeah. People are in the process of finding out that liquid glass, you know, doesn't work in some cases and they've had to make it less see-through. That's really less about classiness and more about practicality, you know, there's a lot of accessibility issues with liquid glass and they've had to make a lot of tweaks to make it sort of less clear, more smokey or hazy. More more like plastic. Yeah, but it's kind of interesting there because the the type of material for liquid glass, the fact that this main of glass suggests what to do when you realize that you can't read the text, it sort of suggests to you, oh, we've got these options because that's what you do with real glass. And so it kind of puts these constraints on your visual design thinking, which is quite nice because you're trying to go for this effect on people and make them feel like they are looking at glass. So having those constraints is important. If suddenly they just put some colour behind the glass, you know, it would be like you were I guess painting the back of the glass with paint and that just doesn't really fit with most people's understanding of glass or why you'd ever do that, you know, it's yeah, you've got glass for a reason, you shouldn't paint the back of it just so you can see things on top of it. This is reminding me a little bit of our discussion with Virginia about Windows 95 and three. Yeah, I think she got, came in at the tail end of Windows 3.1. Okay. And then did 90, right? And maybe she started on 98, but I can't remember. Well, I remember her mentioning how they only had a very small range of colours to utilize, which makes sense at the time. But she also talked about how being like the first designer there, the technique of the engineers didn't really grasp the concept of like a screen and light projecting through it. So that changes how you would like utilize those colours. It's not like flat paper. Yeah. So she had to use that to her advantage to like actually properly design these interfaces versus kind of like thinking about more in physical space or like more about printed paper. So I don't know, it's just interesting to think about how even today with all of the, we have like almost unlimited capabilities with interfaces, but sometimes we still put these constraints of like physical materials onto our interfaces. And I kind of wonder why? Like maybe, well, obviously designers like constraints, that's fun. But why do we do that? And like what is the purpose of utilizing materials that feel physical to us? Yeah, you mentioned the engineers didn't understand the thing about the light shining through the screen and how it made it different from paper, but I'll remind you that it was Bill Gates who didn't understand that. You said it not me. I'm not about to just grill Bill Gates on a podcast. Not openly. I'm in a different country from you say it, and from him. So maybe he won't be able to assume me for liable or slander, whichever one this is. But it was Bill Gates who was stupid enough not to know. No, I mean, it's very easy not to realize, especially with things like, that's interesting about things like paper as well as that to make an interface look like paper, it's not as if you can just take a photo of some paper. You probably have to design it in a way that actually looks quite different from if you're looking at a real piece of paper, because you're trying to give the impression of paper, not actually make it look like the same with the brush metal. You know, probably it looks a bit more extreme than real brush metal. But it is interesting. And your point about why designers do it. I have a theory, which is that designers would say that they're doing it for familiarity for the users. And that was a big part of the whole iOS 6, you know, it looks like a notepad so that people know they have to write words in it, which feels a bit of stretch. I think they were essentially having fun. But I think one of the main benefits, if you decide that, oh, this is going to look like glass, then like I was saying with liquid glass, it kind of suddenly gives you ideas about how to approach it. Whereas if you don't think about what material is made of, maybe it's harder to make decisions about how light should affect it and how depth should work and those sorts of things. Yeah, so it's like basing, it's giving you a sense of reality to the designs. And it might be important here to talk about flat design, because I find flat design very interesting. And by extension, this whole topic, because flat design is the one that gets the furthest away from looking like a real material. And like I said, I think plastic is sort of the default appearance. I think it's because plastic allows you to have this kind of very flat appearance unless you have kind of depth involved. Because plastic, as long as it's not too shiny, essentially, you get these plastics on lots of products that kind of, it's hard to describe it. If you can imagine the plastic kind of printer, it's kind of a very flat color. It's not a shiny plastic. I think plastic allows you to make it shiny or not shiny. So you get this sort of matte effect. And I think that's the closest thing to what flat design looks like. And I think lots of the interfaces you get with depth on them still look like that kind of matte plastic, but just with now the things are sticking out of the surface a bit. And so you get a shadow cast and maybe the top looks a bit more highlighted, but it's not like a shiny highlight. You know, it's just a slightly lighter color. And so that's why I say that maybe designers don't know they're designing in plastic. And maybe why plastic is the default because it feels like it has sort of the least reaction to the light source. But flat design kind of breaks that because suddenly there's sort of no reaction. You know, you just have a different color. It's not as if the top is being highlighted in the bottom is casting a shadow or it's slightly darker. It's just completely flat as the name suggests. And so I think that's why part of the reason that flat design is so popular even if people don't realize it is that you don't have to think too much about how would the real physical material exist because suddenly you're not really designing in a physical material. It's got sort of there's no seems between things that might catch light or cast shadow. There's no depth any of those things. It sort of gives you permission to do whatever you want. And so you can put two colors next to each other that maybe you wouldn't see in real life because normally they'd be a scene between them and you get like a little sort of slightly darker line between that sort of thing. So yeah, that's another reason I find the topic interesting is that flat design kind of pulls away from all this. And I think makes design easier in the process. And so designers don't have to think about it to the point earlier. This funny I was just going to say I think plastic design is the most neutral and easiest to work with because it does utilize like a little bit of depth and I guess physical space to give you that constraint whereas flat design it would be very easy to do it really poorly if you are not the best visual designer. But it also has maybe more opportunity to do something really out there and unique. I don't think of some examples but it's like riskier whereas plastic is like neutral, easy will probably work. That's why most of the kind of like libraries that we see I imagine feel it that way like tailwind like yeah that'll work with whatever to be. It won't stand out necessarily, but it's like been enough fine. But totally flat design could be really bad if it's not done well. Yeah, I think that it's a good point because I think that sort of plasticky design where you put in a bit of depth some light sources and shadows or the appearance of those things. There's a bit of upfront trickiness with getting it to look right. And that process of getting to look right is essentially making it match what you see in the real world. You know, match your expectations of a physical interface. But one and we kind of got these quite a good sense of what those sort of visual interface techniques should look like because we see physical things all the time. And we have a good sense of yeah this is starting to look more realistic and so I'm happy with it. Yeah, we don't really have a reference for completely flat design and so you can do lots of weird things. But to your point if you're very safe with it flat design will be more boring. So if you have a bit more depth a bit more of a light source in sort of plastic design, I think it's easier for someone to see that and be impressed even if actually the overall impression is quite plain because we quite like all depth effects and sort of light source effects. And with flat design, I think to your point, you have to work quite a bit harder to make it more visually interesting. Like maybe you put these like big sort of cartoonish dark outlines around things. Yeah, suddenly you're leaning into quite a it's not a neutral visual style. You know, the more you add to flat design, the more kind of bold it ends up looking. I am picturing Figma's config design from this year, which I'm just double checking myself right now. I was like utilized like very flat and utilizing all those shapes bumping into each other. So that's one way that they were kind of like breaking out of it being boring by doing something I guess unexpected and making shapes that don't feel like they should naturally be bumped up against each other. Do that and then use like really bold. I think there was like a bold green like a deep forest screen stuff like that. So yeah, lots of opportunity to make it unique. There's also makes me think about something I hadn't actually thought about before which might be true. I'll try it out. It feels like if you try to be subtle with completely flat design, so you're not intentionally going for sort of depth or light effects. And so let's say you put a very subtly different border around a shape or you let's say you have a white kind of container and the background behind the container is a slightly darker gray. And you keep it very subtle because maybe you prefer subtlety. You don't want to do a big bold black outlines around things and very vibrant colors sitting next to each other. Like you can, like you described in Figma's config design. I think if you do those subtle things, you're going to accidentally run into cases where it does look like it's following realistic physical appearance. So if you put a white container on a slightly darker gray background, it often ends up looking like the white container is elevated. I think that's because in real life, the difference between the white and the background would be that subtle. And so suddenly it triggers that association you're head off. Okay, this is a piece of card or whatever that's a bit closer to me. Even if it's not casting a shadow, I still get this feeling. Whereas if you put a white container on a completely black background, that's a lot bolder. I think it feels bolder because it's much less realistic. It's very hard to get a situation where you've got like a jet black background and then a white container. Unless you're doing some funky things with like light shining out of the area where the container is. So it's bright. Then that's going to have some light spill effects on the dark area. And so because those feel unrealistic, I think they work a bit better with flat design, which is not trying to mimic any physical properties. And so almost if you want to stick with, it feels like if you want to stick with flat design, you have to make it bolder just so it still feels like flat design. Because if you make it subtle, I think it's going to start to feel a lot more like visually realistic material design. I shouldn't have said material design because that's pretty cool. And yeah, I think if you do that and keep it subtle, there may be people thinking, oh, this feels like a slightly elevated paper card on a white paper background because it's very subtle differences. But then they'll start to miss the things that make it more realistic, like the shadows or the highlighting from the light source. And so maybe that's why flat design trends so much towards big bold visual styles. Because that's the only way you can make it more varied without making it feel more realistic. So that's a new theory. I think it makes sense. You tried it out and it makes sense. Oh great. I mentioned liquid glass before when I wanted to get into liquid. Yeah. Part of the reason I have lots of thoughts about this or maybe the thing that sort of kick started it was apple came out with a dynamic island, which had a very liquid feel. And so it almost felt like the dynamic island was made of oil. It was sort of jet black and it pulsed and like moved around like liquid. And the only the only thing I can think of is jet black and moves around like a liquid is oil, right? So it feels like the dynamic island is made of oil. And they started doing quite a few things in that release of iOS with kind of liquid borders and things where they were playing with the black parts of the phone essentially and saying like these are outside the actual interface, but those parts are liquid. And so they had some pretty cool visual effects. And so it's not just about the visual appearance, but also about I guess the way it moves, like the animation. And then they they expanded that idea of things being liquid with liquid glass, which is now not black, it's glass. And obviously liquid glass isn't really a thing. I guess water is the closest we have, which is like glass like, but it looks like a drop moving around. They call it glass because they wanted all those highlights that you probably don't get with water. Or maybe they look different at least if water's like a water drop is sort of dome shaped. Well, they couldn't say liquid water. That would be weird. No, yeah, liquid glass is impossible. So only apple could pull off sort of thing. Wait, glass is liquid before it? Artens, right? Yeah, I suspect it has quite different properties from what you see on iOS. And I suspect it's also quite red. Like I think it's on fire actually. Yeah, it's like orangey red. I think they should have called it molten glass. That sounds like firey orangey red. Well, they did they did ship an orange phone. Maybe molten glass is next. We've just pretty everything's just red. Everything is like we're in hell basically. It's like everything's gone to shit and now everything is on fire. Welcome to iOS molten glass. You just heard this where we're now we slipped into a completely different bucket at Spotify HQ where we get half the listeners. We have to mark this is unsafe for for children and we lose. Hopefully we don't lose any listeners. I assume children are not interested in this. Yeah, we just watched out Spotify wrapped and it didn't mention children. So I assume I assume we're safe. Yeah. Well, as you just said, we're unsafe, but I assume we're safe from the wrath of those children's parents. Yes, what I found interesting about the whole the whole liquid thing is that I kind of predicted when I saw liquid glass, it felt like this is quite situation specific and I don't think I want any of my other interfaces to feel liquid. I don't want the interfaces I use to feel like they're sort of squidgy. Squidgy? Yeah, which is an important part of like what even though it's not entirely visual, it's sort of how it reacts sort of the animation things with interaction. It feels like an important part of how an interface what material interface feels like it's made of is how it reacts to your interactions. And so you could make an interface that feels like it's made of soft plastic like like a toy that sort of like a sponge wrapped in plastic or something where you press it and it sort of impresses and visually compresses at least. But I've always thought after seeing denying Ireland, people don't want an interface that is liquid like that because it feels a bit odd to sort of interact with something that's quite squidgy or liquid. Like it doesn't feel reassuring in the sense it's not solid. Yes, these are very emotional sort of touch points with how something feels. And then apart from liquid glass, it feels like that's been proven true because I haven't really seen any kind of liquid interfaces that copied the dynamic Ireland and that went on to be popular or successful. It feels like that was kind of a one-off even though everyone loved it so much. And then with liquid glass I expect I think they've sort of balanced it quite well between it feeling liquid but also it not feeling too soft like it still feels solid in some ways. Like it only really becomes liquid. I didn't have to describe this. It doesn't feel like it comes liquid in the same way as things like dynamic Ireland in response to your sort of actions. Well, maybe the difference there is that the part that you mentioned how the dynamic Ireland was building off of a physical part of the phone like the black art of the actual screen. So it had something to anchor to to then be liquid with whereas interfaces that don't have that are just there's nothing to anchor itself to in the same way. Yeah, I think part of that is also that Apple has the time and resources to make sure it looks and feels good and most companies don't have that much dedication to making something that is supposed to be made of liquid feel good when you look at an interact with it. I think that's a very hard thing to get right and Apple's still tweaking liquid glass and I know that a lot of work went into the dynamic Ireland and so I respect most companies would try and fail and it would feel off and it would be a unsuccessful attempt essentially. So I find that interesting because there are some materials we essentially it feels like that we don't want to interact with. That if interface were made out of that material then I think we would sort of recoil eventually. I think that's probably the same for things like wood. I think they're sort of associated with a specific time like wooden interfaces kind of existed like you had I don't mean in a software I mean in real life you had like stereos and things that had this wood veneer. I think even on those the buttons were still sort of chrome metal or brushed metal and I think if you really made an interface that had all like the buttons for example made of wood I think people would not really like it because of the associations they have with the idea of a wooden interface in real life like you're looking at a control panel and all the buttons are made of wood. It doesn't feel realistic it feels fake and like gimmicky. Yeah cheap and just feels like an accident. It feels like somebody just went they took it too far. Yeah and cheap is also an interesting point because I think you might feel if you saw a real thing with wooden buttons in real life you might think those are going to break at some point like the veneer will come off or they'll wear down and so I wanted to be made of like a hard plastic or a metal because those things are hard-wearing. As they're close you get to those materials or the appearance of those materials. I think the more those associations get brought along with you and some of those associations are bad. Right yeah I guess I feel like with wood it just is not it doesn't feel like an appropriate material for an interface that has light because it's you can't I mean I guess you could say the same thing about metal. I don't know why metal works slightly better maybe because wood is meant to have a lot of texture and variation and metal could just be totally flat and matte maybe with like a little bit of texture but I don't feel open to having wood in my interfaces in 2025. No and the texture's a good point is that you just sort of make it look like wood you have to add quite a lot of noticeable wood grain effect. Yeah and that's just not it sort of gets away like screen yeah there's no room for it and it's like I can't even imagine it as an accent at that point because it's just too small to like look correct. If you imagine a button label against a wood grain background that causes usability issues until you make it so subtle that it doesn't like wood anymore. Yeah I guess like we're almost getting into like I'm imagining a game interface where maybe you see like a wood picket sign or something with like chalk writing on it that's like enter. That's kind of an interface but not one that I want to see on my screen. No and that I find this interesting is that we have basically as you said before unlimited control over the pixels that we show on our screen and we could mimic any of these materials but and it's not real like software is kind of a fake surface that we're just making up but even still some of those materials are not suitable to make software out of just like a material is not suitable to make something from in the real world. You might have real trouble if you try to make a car engine out of wood for example. You'd also really have trouble if you try to make an interface out of wood even though it's you know you can make the wood look like whatever you want but to make it look like wood you're sort of flying in the face of what makes a good interface in some ways. I think you could kind of say the same thing about glass in some depending on the type of glass I guess and I think that's kind of what is happening right now as it seems like a great idea and would be very fun to explore and push the boundaries of like it there are more cases where it doesn't work compared to plastic or whatever we want to call it where you just have a lot more flexibility. Can you imagine the like old school glass doors into offices where they have gold lettering printed on the glass? Yeah. And can you imagine if that glass were clear? Trying to read that? Yeah I can imagine that'd be quite hard to read in some lighting conditions. So I guess if you have like a bright consistent or uniform light behind that door suddenly it's creating a silhouette on the gold lettering so you can read that. And I guess if the light behind is completely off so it's very dark behind the window probably you'd be able to read it as of reflective gold. But I think in most of the situations it's like if the light is on but there's a bit of a varied background behind the door I think probably you'd have a hard time reading that lettering. I think that's what they're discovering with liquid glass and why they're making it smokey one of a sudden. I used to do back in my visual merchandising days before I did interface design. I did like window decal designs kind of like you're describing. And it is a real challenge that if there's a like a store front has a giant paint of glass as a window and then to get the proportions right of that like design to actually be visible at a distance with all the lights on in the store maybe if the window is slightly tinted that makes it a little bit easier because it's on the inside of the glass so now I'm just talking about decals on windows but it is a challenge and it carries over. It's very relevant. What's happening. And so yeah I really like that point about some of those materials are not suitable because suddenly your choices are quite limited and I guess that's why we're mostly defaulting to plastic and people are experimenting with things like glass but it still feels like quite an experiment. Yeah it doesn't feel like it feels like plastic is the most suitable material if you want to make something look like it's made or something. I just realized staring at this riverside interface that for me is all black and dark mode. I assume that yours is versus versus yeah we haven't really talked about that like we have kind of when you talk about like materials and light that's it's like easier to talk about it in terms of like a light theme and design but dark themes kind of flip all of that upside down in a way because it's sort of like trying to get away from the light coming through and maybe it's easier to work with some of these materials. I'm kind of just thinking out loud right now but. No it's an interesting point because I think a lot of the dark mode interfaces we see I guess mimic releasing materials less. Well you can't have shadows right? Well shadows are much harder to make work in a dark mode interface just because you have to have enough contrast between the shadow and the background and so the background suddenly has to be lighter which is not what a lot of dark mode designers want to do they want to make the background really dark yeah but yeah if you want an object to car shadows because it's got you know some depth to it whatever suddenly you have to have that darker than the background so the shadow actually shows up and so you end up having to lighten the background while a lot and so that's usually why I give you the advice that if you're doing dark mode you should be playing with lighting effects and so you have the elements act as if they are casting light not shadows and so you have this kind of glow effect. That's just weird you start to run into issues where it feels a bit weird because suddenly you've got this interface made up of elements that are lit from within and we don't often see that sort of thing you might see on like a control panel you have like a switch that has a light built in so when it's toggled on yeah like turns on like a little remote control that were the controls on it light up and I think that's just a lot less common than having something that's made a plastic and you're using the ambient light to kind of yeah yeah and so yeah I think dark mode does break down a bit in terms of making it feel realistic and I wonder if that's part of the reason I think probably a lot of the depth sort of exploration visual styles were seeing a mostly focused on light mode because to make a dark mode interface look like it's not flat gets harder and so yeah I was about to say I wonder if most dark mode interfaces are flat but actually you do see them sort of playing with depth effects as it was made of plastic I guess they just imagined like a flat black interface or a flat black sort of control panel and you shine some light on it it ends up being relatively not bright but it's not a flat black anymore you know it's sort of a dark gray and that lets you get away with some of these depth effects do you know in dark mode became a practice in interface design I don't know about websites but it's always been a practice would not always I think it's been a practice for a long time in professional software like Photoshop okay what about iOS it feels like I was a relatively recent thing where suddenly all software had to start supporting dark mode because I remember when Apple announced it in iOS they're like we're adding dark mode and that was you do remember this okay I think so I think it was less than 10 years ago okay I was just realizing oh go ahead no I remember lots of companies now that you mentioned it started sort of following suit and announcing dark mode and that was a big a big shift they're still announcing dark mode like there are still some products that don't support it yeah there's a long tail Amazon I think is one of them but um I was just thinking about the physical materials that we talked about at the beginning of like when iOS was doing leather and wood and paper for no pan it's like all of that a lot of that kind of breaks down if you think about it in dark mode just paper black no but it is in dark mode and so it's like really starting to stretch the perception of a physical material at that point and maybe that's why it's not as popular or part of it yeah yeah you want to switch to light mode dark mode yeah you need something more neutral in terms of the material so that it supports both it's a good point because you wouldn't have a a black moat pad unless you had a white pen which is a lot harder to find that's what I use it night I don't know about you but in the dark it's actually yeah black paper with glow in the dark ink right yeah I guess you're gonna shine a light at your glow in the dark ink so that it has the energy to sort of glow before you start writing you're a charge up yeah maybe the the interface is still in light mode but they turn the lights off and they put a little flashlight glow right on where your cursor is because you're holding a flashlight on your screen hmm we're taking it too far right I think it's a good point because you have to take it too far to make that work in some cases and so I think a lot of dark mode interfaces are actually they're sort of even more mimicking real life interfaces where you just got a completely flat black sort of material and then you're shining a light on it and it's not picking up a lot of light it's just picking up enough so you can see the depth and things right it's catching the light okay yeah because some ways we handle dark mode it's kind of unique it feels like it's unique to software interfaces like those things wouldn't work if you try to do them in real life yeah exactly hmm but it feels like it's not going away because it's very popular and I think again to the point earlier flat design makes it a lot that easier because you don't have to worry about how would this work in dark mode if it's made of a material but you get companies like F-E-Y and they're like a stock tracking app very stylish and they go to great pains to make sure they're stylish and they've also got great pains to make it feel like a realistic interface they do light effects and shadows oh my gosh I'm looking at it yeah the like the headline make better investments there's definitely like some kind of treatment on this text that makes it look like there's light hitting it it's like very dynamic yeah so because they're basically doing it mostly in dark mode or designing four dark mode they have to go to a lot more effort I think they sort of give themselves a harder challenge this is wild I would recommend people go look at this it like it's just very and I kind of want to dig in to see how they're doing these things but yeah but yeah I think dark mode the image I get is of people all the impression I get is of people in sort of dark editing rooms and they're using tools like Final Cut Pro whatever people use it in the industry and I think they like dark mode because they're often working in dark rooms of their correcting whatever and so they need a darker interface and it kind of spread from there and also developers working on code late at night because developers don't sleep or keep regular hours they have all these dark mode interfaces they weren't blinding themselves and yeah that association spread but yeah a lot of this is easier in light mode because most of the time when we look at things in real life we're looking at them with plenty of light right yeah I feel like I've been not ranting but sometimes I. well I don't dislike it but sometimes I am surprised by how long I'm willing to talk about things that most people probably don't care about but yes one more point I wanted to make is that early you mentioned metal I think you said the word chrome but if not you maybe think of chrome and that's one of those interesting cases where you can't really do very shiny metal unless you have realistic shiny metal unless you have camera access but you can't do the reflections so you don't have fake reflections yeah and there's that one person who did a prototype where I do get camera access and it did show you you know otherwise you have to kind of fake those reflections and so those sorts of things are much harder to do sort of effectively and so again they're not very suitable material to make an interface out of even though they're completely suitable to make you know a real object out of you can make tap out a chrome very easily but not an interface yeah it just ends up feeling cartoony and unrealistic as well yeah which again is the reason that plastic is suitable because it doesn't reflect things it's an easier material to work in yeah you heard it here first complementary brow plastic yeah if you're listening at home send us your favorite interface made of marble or sand let me raise it spiky oh concrete yeah there's so many possibilities and no one ever does it and I feel like there's a reason for that like you could easily really really easily make a interface that I've concrete and I don't think the reason people haven't is because they haven't thought of it I think they're sort of shying away without really thinking about it from certain materials because why would you make something out of that yeah what are you trying to say like I think if you have a concrete website you're probably like a remodeling company or something and you're like we like materials here's one we like materials yeah that is how we remodeling companies think we just got into it because we love materials we love materials so you don't have to yeah anything that says work with materials we're doing it all right well anything else on materials for interface design we covered a lot here yeah I find it I run like the material design is called that when actually it was quite neutral yeah it's appearance they had sort of depth effects but I don't think it was particularly realistic in its appearance right certainly makes it harder for us to name this episode so yeah a lot of material design aficionados are going to turn up and be like yes this is finally yes for me we did talk about it once before we did yet we put it down quite a lot we weren't so nice about it yeah we thought this was the triumphant comeback we're just here to talk about concrete and plastic and glass all right Anthony the end

Podcast Summary

Key Points:

  1. Discussion on the materials interfaces are made of, such as aluminum, wood, paper, plastic, glass, and liquid glass.
  2. Exploring how the choice of material influences the design and user experience of interfaces.
  3. Comparison between flat design and plastic design in interface design.

Summary:

The conversation revolves around the materials used to create interfaces, emphasizing how choices like aluminum, wood, or plastic influence the design and user perception. Various examples, like macOS interfaces resembling metal or paper, highlight the significance of material selection in conveying specific qualities or functionalities. The dialogue delves into the distinction between plastic and glass-like interfaces, discussing how these choices impact aesthetics and user interaction.

Furthermore, the discussion touches on the practicality and constraints imposed by different materials, with insights into the design philosophies behind flat design versus plastic design. Overall, the conversation underscores the complex interplay between material choices, design principles, and user expectations in shaping digital interfaces.

FAQs

Interfaces can be made of various materials like metal, wood, paper, plastic, and glass.

Some interfaces mimic real-world materials like paper, wood, and metal to create a familiar experience.

Choosing materials for interfaces can impact the user experience, convey a specific feel, and guide design decisions.

Plastic interfaces tend to have a matte appearance, while glass interfaces are more translucent and shiny with unique light refraction properties.

Flat design is popular as it allows designers to break away from mimicking physical materials, providing more creative freedom and simplicity in design.

Designers may face challenges in creating effective flat designs as it requires careful consideration of color, layout, and visual hierarchy without relying on physical material cues.

Chat with AI

Loading...

Pro features

Go deeper with this episode

Unlock creator-grade tools that turn any transcript into show notes and subtitle files.