Hi, I'm Scott Hanselman at another episode of Hanselminutes today in chatting Kathryn Grayson Nanz. She's a senior developer advocate at Progress. How are you? I'm well-thanks. How are you? I am very well. It is snowing over here at the Hanselminutes podcast studio, which caused a little bit of internet trouble before, but I am living the dream now.
So listen, you're working on your Masters of Science and Human Computer interaction. You're going to get that probably later this year, is that right? Probably next year, but yes. Next year, you think?
So you're in the thick of it, but I'm curious as someone who's got a foot in tech, but also a BFA, a fine arts degree, and now you're bridging it into a human computer interaction degree, like do you find that to be a natural thing? Is that a comfortable thing to be both techie and empathetic and artistic? Because it seems like a different half of the brain.
I have found it to be natural for me. I always try to resist being like, oh, all designers should code or, you know, because I feel like that gets brought up. That's whatever the tab spaces debate is kind of thing. You hear that? Make the rounds. You know, oh, should designers code? I don't ever want to be like, yes, you know, that's natural. Everyone should do that.
For me, it seemed to make a lot of sense because I was really interested in seeing problems all the way through. Right? So you kind of have an idea and you get to build this design, you're doing all this research, and you get really invested. And then I had such a hard time handing that to somebody else to finish. And I was like, no, that's mine. I'm not ready to like go yet.
And I discovered that by learning how to go to and have to let it go. I got to keep working on it and follow through and kind of complete that whole cycle. So yeah, for me, it felt right. So you've been the dev though for 10 plus years, but you went design first and then said, well, I want to own my own code and my own design. And I'm going to like, you know, be a front end developer.
Some people become developers and then they go, wow, my code is fine, but my designs are ugly. So I started out as a dev and I started to think about design. Do you think you showed out of designers or to think about code? Does it matter which direction one comes from? I don't think it matters. I was one of those kids that did a little bit of coding growing up because that was just, I was the right age for that.
And so I went straight when like, my space was a thing and Jesus, it is a thing and to be on the internet at all required a certain level of like HTML CSS, right? And enough JavaScript to be dangerous sometimes. So it didn't feel like a big leap to me. It felt like the same stuff I'd been playing with and messing with forever.
You know, when I had double, I took a job of class in high school. It was never something that I thought of as a career at the time. That was just fun. I was just on the computer playing around. Did everyone do that, right? I for whatever reason that hadn't connected to me as like a thing. I don't know that I had anyone else that I knew of that was coding as a career. I didn't put those pieces together.
Yeah, you're really nailed it though. We grew up at a time that was so perfect that, hey, you want to my space? Let's view source and look at someone else's my space and see how they did it. I feel like the joy of that part of the internet, the view source aspect of the internet is kind of gone. And that makes me sad because if you source now and you see a bunch of people auto generated JavaScript crap.
You know, like the first time I'd view source on Gmail and I'm like, yeah, there's nothing here for me to see. You know, it's garbage. It's terrifying. Yeah. I wonder if we could ever get back there though because I feel like we have another generation now and you're probably not part of this generation. You're seeing that generation come up, which is the Figma designers where they were born in a world where Figma was the thing.
Because I felt like we had we had macro media, dream weaver and we had all the tools. There was 50 different ways to make a vector and then get it into SVG or get it into PNG or get it into JPEG. Is that a bad thing? Is there a design tools, mono culture that we're in right now? That's a good question. I don't think so. I think when we're developers looking in right, you only see the really big stuff.
Right. If you ask the designer to name development stuff, maybe they'd be able to name like VS Code or something, you know, because it says the stuff they get to big enough. But there is a lot of design software that's out there. There's lots of prototyping tools and lots of design tools that aren't Figma that are doing just fine. Figma certainly is doing amazing work, I think, in the realm of web design.
It's one of the first ones that really focused on user interface design specifically and set them apart and they've continued to do that, I think, with like dev mode and stuff. I'm just a big fan. They should be paying me to say those, right? But I'm so interested in what they're doing. But I don't know that it's a mono-cultular anymore than we see over on the dev side rate.
I mean, if you're working and react, then everything's leaning in the direction of like you for selling next day us right now. But there's other stuff people are using them. That's a fair point. That's fair point because there may be a mono culture, but it's more like we're just seeing a new shiny object and running towards it. Yeah. Yeah. But in the context of Figma, people have found something that like really works and people are starting to use it.
I think I'm of the generation where I'm always changing from different file formats. So for me, it's like, okay, I started as a PNG. I'm going to trace this and turn it into an SVG. Like literally yesterday, I found a bit map I wanted and I brought it into Inkscape, which is like an open source tool and then traced it because I don't know how to use Adobe Illustrator and then turn that into an SVG and then manually edited the SVG.
And I showed that to someone and they're like, you should have just recreated it in Figma. I'm like, I don't know how. So I'm trying to figure out like what's the right thing for me to learn the foundations of design when I'm a dev. I always feel like the best tool is the one you know. That's a cop out answer. Right. I get that.
There are benefits for sure to learning the tool that everyone is using. But I feel like especially when I talk to other developers who are interested in kind of stepping into design, dipping their toes in, getting a little bit more comfortable. A lot of them feel very intimidated by the thought of having to like learn a whole new tool. And I don't know that you have to. If that's something you want to do, if you're thinking about like making a full career transition, sure.
But a lot of times I'm talking to people that just want to get enough design kind of under their belt to make something that doesn't look like crap. They just want to make a user interface that's not actively bad to use. And I think that's a pretty reasonable and good goal. In that case, I don't think you need to jump through the hoops of learning something new.
I think leaning on the skill set that you already have and just stretching it a little bit further to kind of think about these design considerations. I mean, you can design with pen and paper. You can design with whatever process you already know. You can open up your code editor and start writing CSS and do your designing live in the browser rather than setting another hurdle.
I like to encourage people to work with what they've got and to play from their strengths. I guess it's hard enough to take on something new. I will say though, I respect that your bar for like, and this I'm taking this as that personal attack, but also a good thing. Your bar for me entering design is to actively not suck because you're like, just lower the bar. Just make sure that it's not awful. And that is actually a reasonable place for me to be as it is trying to make something pretty.
Well, I think that is actually where we're most successful, right? Because we kind of talked a little bit about the like, oh, you know, should designers code thing. Yeah, I think it's nice. I think it's a nice perk. I don't think designers need to be able to code like a full stack developer, but I think when they know their way around CSS properties, when they understand the concept of semantic HTML, that stuff makes them much stronger designers.
Because then they can start to think about how their design is going to be adapted and they can kind of work two steps ahead. They understand better the limitations of the system. And they can think more about like, oh, well, when this is responsive, I can visualize how this is going to stack. Because I know this is going to be like a flexbox saying I know how flexbox works, right? I think the bar is and should be low doing one job is hard enough. We don't need everyone to do three jobs.
My big thing is always right. We hear a lot of should designers code. We don't hear very much should developers design. The street never seems to go fully two ways. So I like to encourage it again at that level that hopefully doesn't feel intimidating or like I need you to read these 20 books and write me a full report and learn three new programs and and and right.
Just learn enough to be able to communicate learn enough to get the gist of what they're talking about and what a designer is prioritizing. And when they're talking about a Figma variable, like, what does that mean? Just that's different than a job is script variable. Like you really are just trying to do enough to bridge the gap. And if both parties do that, then you meet somewhere in the middle where you can start to make some really awesome.
I love this because finding that design language and I'm using that as a double entendre there, which is like both design language itself, but the language for the designer to talk to the developer is super important. And you actually have a book, a free PDF and we'll put a link in the show notes that folks who are listening to the show can just go and sign up and then they'll get this like almost 200 page book called foundation of designs for developers.
And I was impressed when you say foundations like you're not joking like chapter one color. I thought it was going to be chapter one rounded buttons. No, there's no rounded buttons for like a while. You're literally like common color mistakes. And that's really fundamental. But at the same time though, you just said, what is the designer valuing what is the designers like thought process.
This is what you're trying to teach us. And it's specifically a design book for devs. It's really good. You should be very proud of this. Thank you. That's right. And it was something that I was really excited to do because it was something right. You mentioned briefly that I have a fine arts degree. If that was what I went to school for and when you start a fine arts degree, that's what your classes are like, you know, and it's very much like, all right.
Yeah, you probably think you know how to draw. You've probably been drawing for a long time, especially, you know, you come out of high school and you have to have a portfolio to get into these programs. And so you kind of come in thinking you've got some level of knowing what's going on. And they're like, okay, step it back. We're going to talk about perspective. We're going to talk about color. We're going to talk about value.
We're going to like really start you over. And we do that. You realize kind of how fundamental that is. And a lot of that stuff is stuff that most of us pick up naturally, right. And then you just move through the world. You kind of have this understanding of how color works because most of us can see a full spectrum of color. You have an understanding loosely of how typography works because we read constantly.
But you don't necessarily know why being able to really articulate the why is crucial. I think especially when we're talking about UI design and development. Because that's what helps us catch things that don't look right. And I feel like most of the time people come and they're like, I can't get this to look professional or like something's off. And I can't name it. I can't put words to it.
And we can't do that. Unfortunately, when we've like jumped ahead and we're already we're already thinking in like rounded button land. Right. We got to like scale it back and be thinking in color and balance and visual hierarchy land. To catch most of that stuff. And once we get those foundations, then we can go like, that's why that rounded button looks so weird.
I love that. This is really helpful actually. Let me ask you this. I have to engage with our design team a lot. And I feel like oftentimes people lead people who are not designers. So I'm pointing at myself here.
I'm trying to lead with the solution and we'll say something like, oh, well, this should be this color or I should this should be rounded or whatever. I'm trying. And this is something I've done maybe for the last 10 years to use feeling words that express that the design doesn't make me feel the way I want to feel and I want to feel this way on purpose so that I don't try to tell them about color or rounded buttons or.
I'll say something like this isn't energizing or I want to feel this should be more relaxing and I want to be more subdued. And then I leave the solution up to them. Is that an appropriate way to interact with the designer because otherwise I'd be leading with there's too much blue here. And that feels like it's a subjective opinion as opposed to the vibes are wrong.
And no, I don't want to step on their toes. No, I think that does make sense. A lot of design, I think here's the part where I'm going to sound really annoying. I'm going to sound like an annoying art person. Design is about figuring out the problem. So before you can even get into the color and the type and all that stuff, all the foundations are ways that we can create a solution.
But before we can get into that, we need to make sure that the problem we're solving is the one that we want to otherwise we're just going to kind of dance around it and we're going to keep putting colors on it and we're going to keep trying new things and it's never going to work 100% right because we haven't figured out exactly the thing that we want to solve.
So when you're telling me that what I'm hearing braid is this feeling of like this isn't communicating the thing that I wanted to communicate right this isn't solving the problem that I set out to solve with this design. A lot of times I like to try and scale it back and try to articulate the solve what's the need what's the goal what's the problem and from there, then we have this whole like tool belt of things that we can reach for.
That's the design part right is the what are the colors that we're using to communicate this particular emotion, but when we don't know the emotion that we're trying to capture then we can't choose colors intentionally. So again, I get that that feels a little pretentious is like designers are problem solvers, but I don't think it's pretentious because if I'm talking about an algorithm and you know we're using a bubble sort or this sort of that sort.
We have to always remind ourselves and ground ourselves in the business problem like why are we what is the goal here well the goal is for a fast and snappy you know you eyes so okay let's make decisions that lean towards the business goal which is a great experience as they go through the shopping cart.
And then like in the book here you have a whole section on color and emotion is the design language for the company is the way we write our copy our pros the way the company presents itself and these are getting like farther and farther away from the developer writing a for loop. Are we an energizing passionate excited company or are we relaxing interest where the insubdued company those are going to inform colors emotions buttons styles depth skew morphism all those things.
I will throw in there real quick developers write more copy than we think we do I know that that was not the point of what you were saying but I think about that all the time rate is that when we're writing error messages or button names or tool tips that come up when you hover so often that ends up being a developer's problem on those little pieces of micro copy.
And we don't think about ourselves rating copy because we're not rating you know marketing landing page top of the funnel kind of stuff but we write so much and a lot of that makes it into the final product. And even just having one eye on like yeah we're trying to sound friendly or we're trying to sound professional or you know we're trying to sound whatever you know that might be the difference between a button saying let's go and a button saying next.
And we probably write that that is a great point that is a great point and a developer might be like it doesn't matter like next or whatever or an error like but you'll see this in windows right like I work at Microsoft and my day job and then somewhere in windows on a in in 2024 and windows 11 and the latest version of the operating system.
You see some weird janky error message that someone wrote in 1995 you know it may not be fluent English it may be probably phrase it may be ambiguous and it's probably some dude or do that's like error message that they just wrote on a random Tuesday and no one ever looked at it and that's copy and then you're like oh windows you suck. And you're like you're picking on this one human and the billion of us now have to like deal with that those little things matter and that's part of design right.
Well a lot of times I think the error message is the great one rate a lot of times when you see the stuff that a developer has had to rate it means that you as a user have like fallen through their cracks somewhere something's gone wrong. And so not only are you now seeing the copy that the developer wrote you're seeing at a time when you probably need a little extra explaining or a little extra user friendliness to get you back on track.
And those tend to be the kind of gaps where things get rough in the book you go through a lot of examples you have lots of screenshots of like sites that work and sites that don't. I do feel a little bit like right now in this is as someone who's been on the internet you know since its inception. I feel like we're heading towards a somewhat homogenous internet we've all found our colors we've all found our rounded buttons most websites have like big hero image big call to action buttons.
Eight boxes you know and then pictures of people who've got quotes is that a lack of creativity on the part of design or is that just that we've literally got it so finally honed to what works that every website looks the same. I think a lot of that is actually the fact that you don't necessarily need a designer on your staff anymore to make a website that doesn't look terrible.
I think a lot of times when we're seeing those sites that look like every other site but we're actually seeing is like a square space or you know a template of some sort right those to me feel like word press pages and that's not a bad I want to be super clear that I'm not. Don't get on the square space or word press or whatever because I think the coolest thing about the web is the ability for anyone to go on and put their content on there.
I want to make a blog about whatever I can do that I don't have to be a designer I don't have to be a developer that rules like that's awesome genuinely but everyone's choosing from a template or from a list of things that's pre created and looks good and they just tweak the colors on it you know that does tend to make everything look kind of the same.
And then I think when we see lots of those rate if we are a developer who doesn't necessarily feel super comfortable designing we replicate a system that we know works which again not inherently bad you're hitting a kind of middle ground here where things are feeling more usable you're replicating something that works and you don't necessarily know why it works but you end up with something that's not bad right and that that feels easy to kind of fall into this trap yeah it's a mixed bag right it could be worse you could have a site that functions.
Poorly and doesn't work and doesn't make any sense you know with those three pictures at least you know right like well there's three things here that's three places for me to highlight different aspects of this program I'm selling and there's a big header and there's a big picture and like that tells me that's where my eyes are supposed to start when I scan the page these things aren't creative they are functional.
So that means that you're we're at a place now on the internet where we can get a bootstrap template you know and again no disrespect the bootstrap no disrespect to WordPress but the defaults are good enough but that means that we have a bunch of sites that are 80% fine which is kind of like the whole chat GPT thing where it can auto generate a B minus.
Exactly you know like we've seen large companies and sites make like a eyes they're like make me a nice shopping page and it'll auto gen one and it's like it's fine but it's important I think to know that websites can be amazing right they could go way beyond. And it's like a bummer that we don't do that and it seems like you're advocating that we should like try harder and go from 80% to 95% awesome yeah I mean ideally yes absolutely that's part of the process you start at.
You know whatever is 60% and then you go what small improvements can I make and that gets you up to 70% and well what if I do this you know I think that's also a thing that freaks people out is this feeling like well I'm not good enough to get to 90% so I'm going to take this 60% template and I'm going to say done good enough right but we don't think about code that way at least most of the other developers I've met don't right they're right something really best of their ability and then when we know a little more or the best of standards have changed.
Then we usually go back and refactor and that's like oh I learned this new thing I know how to speed this up now or we've been having this issue and now I get to reopen this and I can rework it in a way that's going to be faster better more efficient whatever designs the same way it's iterative right what we design is not carved and stone we get to go back and keep working on it a little bit at a time so yeah I think anything we can do to keep pushing the boundaries because I think you're right when you see a website that feels like it's not the same as ever.
Not the same as everything else it sticks out to you you remember it. Yeah well actually in the world of social media right now people are talking about like can we get back to the weird web because it's like Facebook and LinkedIn it's all the same right like we've just circled the drain to the point where everything looks the same like in my task bar right now I have mastodon threads Twitter and Blue Sky all pinned as PWA's and they're all the same because we've just got the same thing.
And I feel like I'd like to go back to the bizarrely goofy web that's just like geocities and like personal blogs that are let look even medium like medium ruined blogs for me because everything looks like a medium blog now because it's so minimalist but you talk about this concept in the book I want to dig into a little bit called pistols principles of the sculptism and wondering if that's a psychology of how we perceive things and I'm wondering if that's what's driving us towards.
This model culture of design styles sometimes I hesitate to say like yes that's living right because every every design thing is just a tool right that's like like we see the color blue and tech a lot is blue causing the decline of tech creativity now please just a color right.
Okay that's valid that's right right but when we find a shorthand of it's effective it does make sense for people to lead into it that's what those Gestalt principles are it's like oh we figure out that when we're going to do that.
Oh we figured out that when we group items in certain ways we can build connections between them you know or we can intentionally separate them we figured out how our brain tries to parse the information that's available to us visually and so we can kind of lean to things to be like oh when there are two items really close to each other we're going to create a connection between them mentally when they're placed far apart we're going to separate them so yes when we find things like cards or common component that you have a little box that's got.
Whatever probably a picture and a header and some text and maybe a button cards are everywhere right Pinterest every Twitter feed or Facebook feed or anything is going to be just a list of cards now because that works really well it contains all the information in a way that makes sense it creates a boundary they stack well they rearrange well for the responsive web sometimes things that work work right to me it's more about how are we using those right because if we're creating something that's just a clone of something we've already seen I remember
when Pinterest first happened everything was just that mosaic tile layout it was rough it was always off for months I feel like now that's kind of faded out these things moving trends as well I guess is maybe the other the point that I should have been making more particularly right no no I think you're right I think they do move in trends but at the same time this is all theory that you talk about in the book is identifying that these are things humans do like these are universal things this is a
Western culture it's not you know just northern hemisphere it's people humans like proximity and proximity means these things are near each other they are related in some way or at least you want me to think they're related and that's how you can basically manipulate the psychology of someone by putting these buttons together or things are similar or like you said you close something up by putting it in a box even in books you're reading a book and then there's like that little box in the corner that says hey there's a little aside
we accept that little aside as being peripheral but important and that's just human psychology that we can use to get people to interact with our designs and our apps the way we want them to web design is especially interesting I think because we're kind of working with what's known as a user's mental model right which is the way that that's all the experience they've gained from navigating the web in different ways so like when you open a website and there's a logo in the you know top left
you expect to see that there and you expect that when you click on it takes you to the homepage right those are patterns that we've built up from years of experience doing this now and we want to kind of thread this like needle of being interesting enough that we don't look like everyone else
but also not breaking patterns that people are expecting because then our sites become challenging to use and we start working against the mental model that people have created and then they have to stop and think like that didn't work the way that I thought it was going to work you know or now I have to remember that this site when I right click it does something different you know or you know the the command us to save that I thought was going to work here it does another thing on this page and that drives me bonkers you know so
I was hoping my my 18 year old fill out his very first taxes were filling out the form and you know how you type your address you hit tab you type your city you hit tab and then usually like I live in Oregon and I know that you go to the drop down for the state of Oregon and you go oh oh oh because you have to go past Ohio
and like in Oregon like three oh right but for some reason on this site the drop down didn't accept text input it required you to put it on it was an what they call an owner draw component so they had drawn custom with some library that they gotten this ridiculous drop down and I am and so like we're going going going going going it's not responding to input what was we were using the keyboard so then you had a scroll scroll scroll and instead of just going oh oh
tab it didn't work and it's like wow like it's 2024 we've solved these problems like sites like stripe that like want your money you can just put a zip code and it'll put in the the the county and the the city it was such a mental speed bump it was exactly what you're saying like this is supposed to work and why doesn't it work it slowed us down significantly and it was so irritating and there's someone out there who worked on that
tax site who wrote that form was it a failure of design failure of component selection failure of testing you know it was a cascade it's not I'm not blaming that individual but I'm just saying there's a cascading failure that the model for filling out forms and entering the drop down failed that day and will never be the same fail would you remember it right like it stood out to you and you were like how is really annoying and that's that's
rarely the emotion that we want when people are on the websites that we make yeah you talk about delight in the book because that's what you want to do like if it's not delightful whether it be the font or the colors or the
components or the widgets or whatever you picked the point is that they go yeah this was that that was a fun experience or at the very very least not a bad experience yeah I think there's also some room for realism here right that sometimes for building things are not going to be fun and
delightful sometimes what we're going for is ease or speed like you were probably never going to have a delightfully experienced doing your taxes and think about that every year when I do my taxes and they do silly little animations and I'm like I'm glad you're having good time I'm not having a good time right now one of this should be having a good time I guess I feel like that with the duo lingo the freaking
owl undo a lingo is doing its little dance or whatever like it's just no right that wasn't I didn't need an animation there you're right I just with that whole lesson I don't want to watch you dance right now I feel bad oh yeah and everyone talks about the duo lingo guilt like you know the guilt notifications were saying haven't seen you in three days from feeling lonely Korean yeah my goodness well thank you so much for hanging out with me today I want to point
out to our audience that the ebook foundations of design for developers is free it's like 200 pages of graded by it's very practical knowledge for devs to kind of get involved in the design process and you can check that out in the show notes it's just you log in give your email and they'll send you the PDF it's fantastic I've got it on my iPad and I want to thank you for working on it Catherine Grace and Nancy from progress thank you so much for having me this has been another episode of pencil minutes and will see you in the next video. Thank you so much for having me.
this has been another episode of pencil minutes and we'll see you again next week.