Programming Throwdown - Basics of UI Design for Engineers

Episode Date: July 13, 2019

Surprise! Weekend episode :-D Every piece of code you write is either going to be for computer-to-computer interaction, or for human-machine interaction. For the latter, how do you make your ...interface easy to understand and use? Erik Kennedy, independent UX/UI designer, dives into user interface (UI) design. We cover the best tools for making quick prototypes, common design mistakes, and his journey from software engineer to freelance designer. This episode is a great way to get excited about design and has plenty of resources for first-time designers. Check out the show notes for details! Show notes: https://www.programmingthrowdown.com/2019/07/episode-92-basics-of-ui-design-for.html ★ Support this podcast on Patreon ★

Transcript
Discussion (0)
Starting point is 00:00:00 programming throwdown episode 92 basics of ui design for engineers with eric kennedy take it away patrick hey everyone uh we're here with another interview episode. And we've got Eric on the call. And we're got what I think is going to be a pretty exciting topic, something I don't know so much about. And it's a really big field design. And even just UI design, it's always been on my list of, I feel like I've made a few crappy UIs just to get past something. So yeah, definitely. Yeah, I think we've all been there before. So hopefully we'll get some illuminating tips here today. And we have our guest, Eric, Eric Kennedy. Why don't you go ahead and introduce and tell the folks a little bit about yourself? Hey, yeah, thank you. So my name is Eric Kennedy, and I am a freelance UX and UI designer. And I also teach UI and soon to be UX online. But I didn't start there. Like I actually started from a dev background back in the day. I really hadn't
Starting point is 00:01:13 programmed at all until I got to college. And then freshman year, very first semester, there was an intro to programming course. And I tried it. And I loved it so much that I ended up switching my major over to software engineering and doing some internships as a dev. But basically, I mean, I kind of drifted my way from there. Like, I really liked developing, but the thing I liked about programming was just doing these little side projects where you kind of, like, thought of an idea. You, like, cranked it out. You know, you worked until 3 a.m. It was just you.
Starting point is 00:01:43 You didn't need anyone else's permission. You didn't need anyone else's approval. You just, you could turn whatever you were thinking of into a reality. And I love that. But then doing a couple developer internships, I was like, man, this is, it's a little more like industrial scale than I thought. And it just wasn't quite the same. So I eventually shifted over to PM. And then from there, realized that most of the things I liked about being a PM were things like wireframing new features and talking to users, doing user research or doing usability testing. And at some point, it just sort of dawned on me like, hey, there's a word for doing these things. It's not called being a PM. It's called being a UX designer.
Starting point is 00:02:21 So then I jumped into UX design, and I was doing that freelance. And very early on in the course of doing UX design, I'd have clients who would look at these wireframes, right? Because as a UX designer, like one of the final deliverables I'm going to be handing to my clients are these wireframes of their sites or their apps. And it's, you know, they're just these black and white drawings. They're kind of sketchy. You know, maybe they even use Comic Sans as the font. But the point is they just sort of get across, like, here's what's on each page of the app.
Starting point is 00:02:51 And here's how kind of everything flows together. And like the goal is for it to be usable and simple. And it doesn't look very nice, right? So my clients would see this and they'd be like, wow, this is cool. Like, this looks good. But hey, any chance you could, you know, make it look like an app? I'd be like, ah, shoot.
Starting point is 00:03:09 This is so outside of my wheelhouse. My first attempts at trying to make an app look nice, look professional, were just disasters. So I went on this multi-year quest. I mean, it's still continuing. But I went on this multi-year quest where like any good freel's still continuing, but I went on this multi-year quest where like any good freelancer, I said, yeah, yeah, I can do that. I can do that.
Starting point is 00:03:28 And then like frantically scrambled to try and figure out visual design like while doing other UX projects. And it just kind of took off from there. Maybe some of your listeners have stumbled upon an article I wrote. It was back in 2014 at this point called Seven Rules for Creating Gorgeous UI.
Starting point is 00:03:46 And it was sort of like the first stab at the most important things I had learned about visual design. As a total visual design beginner, as a much more like left brain analytical style thinker, it was just kind of a couple things that I had picked up on
Starting point is 00:03:59 that I couldn't find anywhere else, just like really tactical advice. So I was like, okay, I'm going to publish this out here. And then I've continued writing about design since then. Definitely do UX and UI and even a little bit of front end development for all my clients now. So I really like that.
Starting point is 00:04:16 So, yeah, that's kind of how I stumbled my way into design through like every other subfield in tech. Nice. So I have like a thousand questions, but OK. So first of all, so you mentioned UI versus UX thousand questions but okay so first of all so you mentioned uh ui versus ux so how do you kind of uh well first of all what do they mean and what do you mean by the difference oh geez yeah this is like a bad joke in design because it's like there's ux designers ui designers ux and ui designers product designers ux researchers
Starting point is 00:04:39 uh what else we got am i missing one interaction. There's so many. It's like, what do all these terms mean? I try and keep it really simple. I say UI is how it looks, user interface, that's how it looks. And UX, user experience, that's how it works. Is it usable? Is it intuitive? Is it simple and easy to use? So yeah. So you mentioned that, you know, you would try to draw these sketches of what it would look like that you call them wireframes. Can you maybe like describe so I've come across this before, but like, what kind of tooling do you use? And what it looked like? Were you actually sketching on a piece of paper? Or how are you getting started doing that? Oh, yeah. I mean, it always starts on paper, right? Because paper is the cheapest way to throw it like it's the cheapest way to design something, you can make a draft that you can visually evaluate yourself or show to one of
Starting point is 00:05:26 your teammates. And you can do that in seconds, right? You can like get that validation of is this what we want to do even at the highest level or not. And once you've sketched a bunch of stuff out on paper, you know, it could be a couple ideas, it could be like 10, 20, 30, you're like, all right, now I think I have a good enough idea of what I want to go and put in a digital version of this wireframe. And so for those digital versions, back in the day, I was using Balsamiq. I've kind of transitioned over to using Sketch now, just because I also do the UI design in Sketch. But either of those apps are just fantastic apps. So for someone who's never built a UI before, so they do some coding, and all of a sudden they realize, oh, I really need a graphical user interface here rather than just command line. Although command line is great. What is the first
Starting point is 00:06:10 thing for them to try doing? Should they sit down and start trying to do wireframes or should they try finding a framework to start doing all that in? Yeah. Well, I think fundamentally the wireframes is more important than the framework. Frameworks are great, but they almost come a little bit later in the process. Okay. So if you're taking the design process as a whole, where let's say you have some app, it's your side project, and you realize, okay, I'm officially in over my head. I need to make this interface. I've never really done this before. definitely doing those kind of low fidelity sketches and wireframes and just getting a sense of does this does you know if i lay things out in this way can i look at the most important tasks and each of those most important tasks are actually they like almost could not be made simpler they
Starting point is 00:06:56 don't require any extra taps or clicks they don't require any extra thinking you just make them like as dead simple as possible and then the things that are important, those can kind of fade in the background. But that's what wireframes help with. When you get a wireframe, kind of run through some of those things in your own mind or show it to someone. Be like, hey, if you saw this screen and we wanted you to create
Starting point is 00:07:18 a new user, how would you do that? A tap here. Wrong. It's like, shoot, okay, now I know I need to make that easier to see or whatever. So that's kind of where it starts. And that's just the UX side of things. When you get to the visual side of things, then it's a little bit different. And I can talk about that too.
Starting point is 00:07:34 So I just did a look-see real quick. So Sketch is $100 a year. Unless you're a student, then it's $50 a year, which doesn't seem too bad if someone wants to try it and get started. I mean, it's cheaper than Photoshop. Oh, yeah. And I think it has a 30-day free trial, too. I might be wrong about that.
Starting point is 00:07:54 Yeah, you're right. You're right. So how do you draw the line? So you've kind of alluded that there's this difference between the interaction and the look. And you kind of described your arc through this giant collection of topics and fields. So someone just starting out, how important is it for them to mentally kind of make the distinction between the sort of style, the look versus the interaction? And which one do you think is better to go focus on first?
Starting point is 00:08:23 The interaction is better to focus on first. I mean, I think there is a degree to which if someone sees something that looks really just awful, they'll like next close the tab move on, they're not going to go download that app because they just don't think it's because you're signaling so strongly that it's just kind of like unprofessional or like, you know, if you if you give off these indicators in the visual design that it's not very high quality, like there was not a lot of professional experience put into something, it could drive some people away unless they really need and want that app and are otherwise excited about it. So there is some of that. But I think it's almost worse where someone goes
Starting point is 00:09:01 through the, you know, your site looks good enough and they download the app and they open it up. And then you make the tasks that they're going to be doing again and again in your app. You make those difficult and unintuitive and they just can't figure it out. That's almost worse. Because then they got so close and they're still going to end up abandoning you. So I think to be clear, making it usable, if people can't use it, like, it doesn't matter how look it, how nice it looks. Yeah, so in that sense, the usability and the UX are primary. kind of field that I've practiced most in. To hear you talk is so interesting to hear how different it is. So you mentioned, you know, first acquiring a user on a website, and then getting them to take some action, like download the app and do something and how thinking about that whole process. And it's literally so far away from anything that I do. It's actually very interesting to just hear
Starting point is 00:09:58 how even though you know, oh, we can both be in a similar field, and just have such a different approach. So, you know, for me, it would be a developer, you know, we can both be in a similar field and just have such a different approach so you know for me it would be a developer you know getting an application i wrote and if it only had a command line interface that would probably be preferable or perfectly acceptable for them or it may just be computers calling it and to hear the amount of different things you talk about somewhat sounds overwhelming like oh i need to make a website to convince someone to use this yeah human beings are messy so how do you i mean do you feel that process so like you originally you know we're starting out as a coder and did some work there i imagine maybe a little similar to what i described and then moving out and sort of doing more on your
Starting point is 00:10:34 own and being responsible for that whole package do you feel like that was a really difficult change for you to do or did did that come pretty natural you? Jeez, you're making me think back. I think, you know, honestly, I think some of it was natural. I've always, even though the kind of the UI art school stuff seemed a little bit more foreign to me when I first started it, the whole like psychological challenge and kind of putting yourself in the mind of someone who's never seen your site before or seen your app before, I've always really enjoyed that.
Starting point is 00:11:05 That's just been kind of this like deep mental challenge. So I think I kind of slid into that very naturally. And also, I mean, like I said, I also enjoyed the other parts of being a UX designer. Like, and we could talk about usability testing too, but like when you do usability testing, it's almost painful to watch someone, to make something that you think is so
Starting point is 00:11:25 good, so usable, so simple, right? And then you watch a video or you watch in person and someone struggles with it and just consistently misses everything you tried to make obvious and clear. And it's just, it's almost masochistic, but I kind of love that because it's like, you're not so smart. You really have to meet them where they are. And when I say you're not so smart, I'm referring to myself. I'm not referring to the user. In some sense, if you're not so smart. Like, you really have to meet them where they are. And when I say you're not so smart, I'm referring to myself. I'm not referring to the user. In some sense, if you're going to be a good UX designer, you have to realize that it's never the user's fault. Like, basically, coding docs aside,
Starting point is 00:11:56 like, normal software just should not require manuals. And it's really sad to watch people, like, blame themselves when they use bad software to go, ah, dang, I did the wrong thing. I'm so bad at this. I'm so dumb. It's like, no, no, there should have been a designer doing their job because there are better ways to design software.
Starting point is 00:12:15 So that's fascinating. So I mean, those sound very valuable lessons, right? And stuff that I would probably be very embarrassed if someone had to sit down and use stuff I wrote. But so how do you, like, what would you go about in the beginning so you're early you don't have like this isn't your thing do you just like show it to friends and family like how do you get that user feedback yeah i mean so one of the blessings of working on little side projects is a lot of times you are the user and if you are the user you already understand some of the things that your users are going to know and not know when when you make this app for them um and you'll
Starting point is 00:12:50 also be in a community of people who are kind of like similar mindsets so a lot of times yeah just show them to like friends family co-workers whoever it is uh like kind of doing that sort of guerrilla user testing really isn't it's not like you need to go do some official study and like, you know, it's nothing too fancy. You're just trying to get any feedback as to, like, is this basically usable? Or are people going to like absolutely struggle from square one?
Starting point is 00:13:18 One thing, it seems like a bit of a catch 22 or chicken and egg, I don't know, one of these things, they all sound the same to me, but where, you know, if you deploy version one of your app, and the user experience is really bad, then no one will try version two. But that means you can't make it better. Like, how do you kind of keep from getting trapped in that? Yeah, well, I think, again, there's something working in your favor, which is the people who are going to try version one anyways, are going to be the most desperate people to have that
Starting point is 00:13:46 problem solved so they might be willing to put up with a little more pain and yeah it's like as soon as you identify there's issues with version 1 release version 2 because if you're like hey listen I heard y'all there's a lot of problems with version 1 and we're fixing them like download
Starting point is 00:14:02 version 2 you're going to love it then the people who are staying with you, despite how unusable the app is and despite how difficult it is for them, they're going to just fall in love when you have version 2. And that's only going to accelerate. So yeah, it does seem like a chicken and an egg, but I don't think it's unmanageable. Yeah, it makes sense. If someone doesn't consider themselves a sort of artistic person or someone who uh would would not necessarily find themselves in the same circles with with kind
Starting point is 00:14:32 of artsy people does that kind of preclude them from this work do you think they can still make progress is that an acquired skill or something you're born with yeah well i think you absolutely can make progress with it like i'm definitely living proof of it i can't i can't show on a podcast my first design but they look nothing like the stuff that i've been doing very recently um so in that sense yeah you can absolutely um can absolutely develop at it and i think what's what's cool and what no one really ever told me is it's if you read a lot of design writing online it just seems like kind of artsy fartsy for lack of a better term like a little it's a little it's oh it's subjective oh uh you know there's still all these mystical considerations you never really know what's going to work it's
Starting point is 00:15:18 creative it's open-ended and it's like okay i guess technically those things are true but i think you can make a lot of traction on visual design just approaching it analytically. So like one exercise that I would highly recommend to anyone who wants to devote some time into visual design to get better at it, just because they anticipate, hey, maybe I'm going to have a side project a year for the next decade. Or maybe I want to start my own thing. And I really, you know, when that time comes along, I really want to be able to do the, like, just ace the visual design of it until I can hire a designer. One exercise I would highly recommend is do copywork. Okay, and I can send you a link to an article I wrote about this for the show notes. But copywork is just, it's, it is the practice of recreating a design
Starting point is 00:16:06 that is better than you could do and you recreate it pixel for pixel so if they use like size 32 helvetica bold or whatever like you put that helvetica bold on their exact same font exact same location you can use an app like sketch or i mean technically photoshop or figma or whatever to do this but the idea is just by recreating these designs that were created by professional designers at least presumably you're going to be unconsciously picking up all these little tactics about what they do so I have all my students do this exercise and it's amazing the things that they recognize they're like oh I never realized how much alignment matters and it's
Starting point is 00:16:45 like yeah that's absolutely true it's mind-blowing how important alignment is you would just never expect it until you uh until you start to do it or um you know oh i tried to make this shadow for this element and it totally wasn't working until i realized they had a shadow for the ambient light plus a shadow for the directional light or something like that that's a little that's a little advanced that's a tiny detail. But it's just the whole gamut of things. In this article I wrote. I remember mentioning doing some copy work.
Starting point is 00:17:13 On a site for Epicurrence. A design conference. And one thing that this site did. Was it had like this size 300 font. Where it was just a couple letters but it was like almost an artistic element and yet it was type on the page there were letters and i was like wow i would never have even thought ever to make something at size 300 and yet it looks really cool when they're doing this um so there's just yeah you just pick up these little tips and tricks
Starting point is 00:17:40 and things that you never would have expected and that's what's awesome about copywork is then any of those little strategies that you that you find in doing expected. And that's what's awesome about copy work is then any of those little strategies that you find in doing this, you can apply those to your own designs. And you start, it's just like by osmosis. You're like, okay, here's the lessons that this person utilized when doing it. And sure, you're gonna miss some stuff.
Starting point is 00:17:56 You're not gonna understand the rationale for every single decision the designer made, but you're gonna catch so much more than if you just look at the design and try and be like, okay, I wanna design something like this. It's good luck that is tough that's a really awesome insight because i have recently for some reason fallen into a rat hole of listening to music theory videos on youtube or watching sort of music theory videos and they say something very similar
Starting point is 00:18:18 like basically learning to cover your favorite artist or you know play classics and almost you know sort of exactly the same insights you're you're sort of giving but as an engineer i find that now i'm trying to think of like kind of why it's so different which is you know when i see a video game which is how often people you know get started into interest in coding the amount of things you would need to do to sort of make a all the pieces of doom work from scratch is such a mount everest that you wouldn't even really attempt it you might attempt it but you would do terrible at it so i guess like maybe it's just the level of complexity like i'm not sure like the behavior all of that but it's not a common practice to sort of sit down and copy a piece of code you really like uh or at least not
Starting point is 00:18:59 at the level you're talking about this is just a hunch but i wonder if you could scale down that task so like take something like clean coding practices i wonder if you could like find a well just one file it doesn't have to be the whole project but you just find one file where you're like whoa this was really well written it's super clean i'm going to like recreate it line by line and just kind of let that soak in like see how they name stuff see how they whatever yeah that's a good point yeah that makes sense i think a lot of the a lot of the coursework you do in university is like this right it's like implement bubble sort implement quick sort and you know obviously those things have been done to death but
Starting point is 00:19:33 but it's not just trying to train that but i feel like the difference is slightly they're uh whatever you would call it and i guess like martial arts like katas or whatever like they're specifically for the purpose of learning those things you're indicating they're not sort of like copy a masterpiece or copy a piece of inspiration like no one will be inspired to continue encoding by learning how merge sort works yeah maybe one person but not many people yeah so that makes sense yeah i wonder as we get more and more people uh in the field right like trying there's always this push to you know, enable people to do coding just in various aspects. I wonder if we'll start to have to turn to finding ways of getting people inspired where they really can make about that, like, because that's how it feels at first to just be like, wow, this is this thing I made is completely derivative. But so when you're first starting out in design, and I mean, heck, even when you're when you're much more advanced in design, it's like, I highly doubt I'm doing much of anything that I haven't seen somewhere. It's just that the number of sources that I draw from is so large that it's not like copying off of one thing. It's copying off of like 20 or 30 things for just, you know, some random website. And that's like, that's what creativity is mixing and matching to make
Starting point is 00:20:56 the most of whatever the problem like to, to make the best solution to the problem that you have. So if you're just starting out in design, yeah, it might feel kind of like, oh, I'm just like copying off this one thing. Well, okay, find more things that you like and try and figure out the different aspects that you like of each one so you can kind of combine them into one. I don't recommend just like going to stripe.com
Starting point is 00:21:18 and being like, wow, this looks awesome. I'm going to use the same exact buttons, the same exact page brands, you page. Don't do that. But yeah, it's okay to really like other styles and to combine aspects of those. And one other thing I've heard, and I tell my students this too, is if you're worried that you're too much aping one person's style, you're copying off one style too heavily, it's like okay look at that soak up all the stuff that they did good that they did well close that tab or close that app or whatever and then the next day begin your design and don't look at it again don't look at the inspiration so like design but only
Starting point is 00:21:57 through what you kind of soaked up overnight not like you're not allowed to like just look at theirs and then make yours then cross check theirs and edit yours or whatever so that stuff will all help with if you think your designs are like too much based on one person's style yeah that makes sense what is a like a website or an app where you just said wow that was unbelievably like novel amazing design uh recently yeah yeah recent one. So I actually just wrote a blog post, or it was an email to my newsletter, but then I posted it as a blog post too. And it was on a health website called, let me pull it up here real quick. Where is it?
Starting point is 00:22:44 It's crazy that I can't remember the name of it, and yet I wrote like thousand words about it foundation medicine so just foundationmedicine.com but this is one site that when I loaded up I was like wow they did a lot of things very well now we're all going furiously on our computers oh yeah it looks cool they start drawing those triangles on that lady's face yeah there's like nice animation there's high quality photography the fonts are really nice like the thing i talk about in my blog post on this is um they kind of have this motif of hexagons like you see this pattern again and again throughout the site and it kind of ties it together but you look there's like this hexagon and the logo and then you look and they have the they draw these triangles which of course make hexagons and then if you look at the fonts like look at um see it kind of in the e or even the
Starting point is 00:23:25 shape of the s a lot of those lowercase letters are sort of shaped like hexagons more than ovals oh yeah so and you'll see it you scroll down and you're gonna see it like with the little dna thing or um under better care today there's a one and a two which are both embedded in just plain old hexagons so it's just like this little motif comes up again and again and um i mean not only did they make a thousand other good design choices but one thing that's very cool about this is they tie it all together and make it look very intentional and like act as one whole yeah this is awesome so when you go to a website like this and like those things you point out that's awesome because i wouldn't have even noticed that those fonts are subtly angled until you point that out that their logo was a hexagon like i didn't
Starting point is 00:24:08 even notice that when i looked at it uh but i mean i agree you look at this you're like oh this looks really cool so how do you sort of i guess i would call it bootstrap yourself up from like i have no eye for this aesthetic you know i go here i'm like man okay i know when i see it like it looks good but i wouldn't know how to sort of decompose this like is there a good method for sort of starting and what to look at what to do i guess you were kind of mentioned you know trying to copy it and maybe you would sort of figure it out if you tried copying it let's let's i mean let's back it up even from there you want to talk about what you should do from day one because certainly the the bit about the hexagons like that is not 101 level like design knowledge.
Starting point is 00:24:45 I wouldn't expect even my students to like just notice that going to some site. So the stuff that really is kind of more foundational is I would say just analyzing when you see something you like, trying to analyze why you like it. And also see if you can find examples that are kind of like, I don't know if counterfactuals is the right word, but like they don't have that particular quality and you don't like the site as much. Like try and find something that is critical to a particular site looking good. So like one thing with this foundation medicine site is my guess is that big face staring at me, that high-quality photo, if I used a lower-quality photo that wasn't in focus
Starting point is 00:25:28 or that was maybe in color, I think they're all black and white. Is that true? Yeah, that's right. That that wouldn't work, that it would look too much, it would be too much, or the yellow triangles over it would then look weird
Starting point is 00:25:41 and wouldn't stand out as much and would maybe mess with the color of the person's skin too or something like that. You just wouldn't see them as well. Yeah, it looked like acupuncture or something. Yeah, or you might. Yeah, it looked like some terrible torture. Or I might hypothesize that, okay, here's this cool font. I don't even know what it's called here. I'll just go use my what font browser extension. It's GT Sectra. Okay, GT Sectra. That's cool.
Starting point is 00:26:10 What do I think works about this font? Even if I don't recognize the hexagonal stuff, maybe it needs to be a serif. Maybe it needs to be a serif because this has to have a very professional, buttoned-up feel, almost like research-like. And so just something that's one of those high-quality, just a font that feels trustworthy and almost prestigious or something,
Starting point is 00:26:34 and delicate, that's what I want. And I could go and test that by putting in whatever, Helvetica, or even a nice sans-serif like Proxima Nova or Gotham or something, which I think they use one of those elsewhere on the page. And I could check. I mean, especially if you can use the little dev tools in your browser and just kind of start swapping things out or mess around with the site, see what ruins it. See what ruins the feel where you're like, oh, yeah, this isn't as good. And you can start to analyze. OK, so this is what the what this is, what the the goodness of the design's appearance relies on.
Starting point is 00:27:06 It relies on this font being serif and large and looking this nice at a big size. It relies on these photographs being extremely high quality and black and white. One of the big things that you'll discover in doing this sort of exercise, like I mentioned it once before, but alignment is huge. Like you are almost certainly, if you're a beginning designer, you are almost certainly underestimating how important alignment is and how much you just need to align everything on the page. At least if you want kind of a neat, simple, clean appearance. Basically every element will be aligned with at least one other element. And when I say that centering counts as a form of alignment in that regard. So centered or aligned with other elements, that's huge.
Starting point is 00:27:50 You could say similar things about white space. I'm on a Mac, so I can just press whatever it is, Shift-Control-Command-4 is the little hotkey I use. Like I'm going to go take a photo. Oh, my keyboard shut off. Well, I think that's it. And I can get a little measurer that'll say if you press that that uh hotkey you'll get a little it'll tell you how big of a rectangle you're clicking and dragging on your screen and you can i use that to really quickly
Starting point is 00:28:17 make measurements of how big something is how tall is this header it's like well how tall is a normal header took me a while and then i realized okay it seems like most headers are like on the order of 70 pixels um and maybe they'll get a little bit bigger maybe if it's an extra space dot website they'll be bigger if there's a version that is sticky when i scroll down the page it might be a smaller version but like 70 pixels okay just a good place to start or like go look at um at some kind of a division of this page, this foundationmedicine.com. It's like how much white space is between, say, the where it has the one to comprehensive genomic profiling, and then that orange box below it. It's like, on my page, that might be like 70 or 100 pixels. And until you measure that, here, I'm actually going to go see. I want to see what it is.
Starting point is 00:29:06 Yeah, one thing I noticed is the... Ah, it is 180. Okay, to be fair, I'm looking at a different monitor. It's 180 pixels of white space. And so one thing is like, if you were in Sketch, or even if you were in CSS,
Starting point is 00:29:17 but you really shouldn't try and do all your visual design from CSS, disclaimer. It's like, if you were in CSS, would you write margin bottom 180 pixels like that seems like an absurdly large number and as a beginning visual designer i would be like no it can just be like 50 or something or 48 why not make it divisible but like um the point is when you kind of design visual first and you really analyze what you like and and what seems to be
Starting point is 00:29:43 important about it you're gonna find all these things wow they align so much more than i thought wow they stuff in so much white space and it's not even crazy um and so on yeah they made those two the the picture and then the orange box are at different heights and that way it doesn't just make a big rectangle it kind of keeps them distinct yeah they do that's true yeah this is this is awesome, it kind of keeps them distinct. Yeah, they do. That's true. Yeah, this is awesome. And they kind of do that throughout, right? Even their little link to their blog towards the bottom, where there's no picture, they have that same motif repeated with the little...
Starting point is 00:30:15 Yeah, right. Yep. And even the, you could say the same thing happens at the very top where they have the header image. It's like there's a white rectangle coming in from the bottom sort of cutting off. It's a oh yeah yeah yeah so just hearing you sort of like describe this i already feel myself uh brightening at the kind of interesting things you could go in here and do and measure and i want to try myself and we we mentioned this a little bit in this sort of
Starting point is 00:30:40 warm-up before the show we were talking about uh this notion of like a place to go listen and just hear how designers talk. Like, do you have any good resources for people or recommendation? I know you have some stuff. Are there like, who do you go to just hear how this stuff works and how people think and what they talk through when they sort of decompose a website or any related topic? Oh, yeah. Well, I mean, my biggest recommendation is well, let me give the free one first. So I have a blog. It's mainly about visual design, learnui.design.blog. And there's a number of posts that really break down visual design in this kind of an analytical way.
Starting point is 00:31:16 Like we've been talking about it right now. We haven't, I would like to believe we haven't really been talking about anything that's too fuzzy or crazy. So you can go there and you can find a lot of stuff. But also I have a course and it's linked from the same site, learnui.design. The name of the course is learnui.design. And one of kind of my teaching principles in making this course was just letting it be sort of a place where when a student logs on, it's a video course. So they basically look over my shoulder for like 20 hours of video as I'm just kind of
Starting point is 00:31:46 narrating the stuff that I would think about. And then all the videos are done in sort of a manner of like real world projects. Some of them are directly based on client projects I've had. Some of them are a little bit made up. But the idea is each project tries to sort of talk about one particular skill that that lesson is about. So that is one option. But certainly for just diving in right at the start, the free option is like, check out,
Starting point is 00:32:11 check out my blog. And as for like, where I hear this, probably it's like, I'm a freelancer. So I am, I mean, I'm currently in my home office. There's, there's technically a couple designers across the street from me, but we don't actually talk about this stuff super often. So one of the biggest places where I hear it is in my own, in the Learn UI Design student community. It's just a Slack group, but we've got a lot of students now who are going out there and analyzing sites that they like and don't like, and bringing back these little tactics, and hey, I noticed this, or I noticed that, or why does this look does this look so good or why doesn't this look good so for me that's where i get some of this so for this field like you mentioned you know kind of like slack rooms or for other stuff you'd
Starting point is 00:32:53 hear oh maybe there's a subreddit where people do this or or something else do you feel like are there sort of schools of thought here that people sort of fall into lines like oh analytical analysis is really good or no no no you can't there's no rules just break all the rules like are there kind of different factions within design and how this works or it's pretty much everybody approach it in a in a similar manner i don't know i mean maybe my answer is i'm coming from one end of the spectrum here like uh in that when i learned visual design i was so frustrated where it's like, okay, I started out awful with colors. And if you look at some of my first designs, it's like the two colors I would use would be kind of a yellowish green that in retrospect looks kind of pukey and like brown.
Starting point is 00:33:41 It's like you can't have two grosser colors. And if you look at most professional designed apps, it's like I'm not designing like a theme for a sewer, right? Like if you look at most professional designed apps, you're not going to see brown. And you're not very often going to see yellow green. You're more often going to see something that's a bright yellow or a golden yellow or even just an orange. And brown is really going to be an accent color at most. It's hardly ever a theme color. Yeah, I think at one point I noticed almost all the websites were blue. Yes.
Starting point is 00:34:16 It just seems like Microsoft's blue. Yeah, all the company websites seem to be blue well blue blue is we can talk about this too because if your audience has a lot of like side projects where they need to pick a color for a logo or just kind of go with a one color theme um that choice that choice is important and and so what's happening is when people pick blue blue like so let me back up one second here okay if you google for this stuff you're gonna find a lot on the psychology of colors. And as far as I can tell, all that stuff is completely bogus. There's stuff that's like, okay, yellow means trustworthiness. I don't know what it is.
Starting point is 00:34:55 Yellow means passion, right? And then they'll show some yellow logos like Shell, like the gas station. It's like, no, this is not yellow for passion. This is yellow because it's a seashell what other color would you make a seashell um and so it's like that stuff just didn't help it was so frustrating and so i've tried to like analyze what works and and what doesn't work and only write that kind of content and one thing i think I've landed on with this color, picking a one color for your app,
Starting point is 00:35:28 blue is the safe choice. Blue is a practical choice because in terms of the, if you talk about kind of the natural luminosity or the sort of the natural brightness or lightness of a particular color, it's like yellows are all very bright. You can't have a dark yellow. It just becomes brown.
Starting point is 00:35:44 We don't even have a thought for dark yellow. That's not a thing. But blues can really span a big gamut. And blues can naturally be quite dark. And that's really nice because it stands out from white. So you can have, say, like a link be blue. And even if you have dark gray text, a blue link is actually, it's going to hold its own. It's not just going to be, like imagine if all your your links were yellow they would look like little gaps in the page if you
Starting point is 00:36:08 just had a paragraph of text with some links in it those yellow links would just if you squinted they would just disappear so like blue is a very practical color blue is a very safe color it's a very universal color it doesn't it's not like red red is the most eye-catching color that's probably the most important thing to know about red so if you you pick red for your app's color, you're going to be competing with every normal red element in your page every time you actually need to get a user's attention. Every time you actually need to show them an error message
Starting point is 00:36:34 or kind of, you know, maybe they filled out a form wrong or something and you want to show a little message telling them that. It's like, you're also competing with, if you have a red header, that. And a red logo, that. uh other red elements interesting yeah it's just like it's like it's just shouting um it's like a miracle that the youtube mobile app kind of works at all because they just have a ton of red and yet it
Starting point is 00:36:56 seems to work fine so yeah they have that uh you know if something goes wrong in youtube they take to that page or it has a i think it says something like patrick you'd probably, but it says something like a team of monkeys is working to fix it. I mean, they just, they just have to take you to a whole new website because yeah, you wouldn't be able to see it. Yeah. Yeah, exactly. That's one way around it. Um, I remember when I was first working on one of the color videos for learn UI design, I was like, how does Airbnb solve this? Cause they kind of have, it's a little bit of a pinkish red and and it's not so saturated. It's not so rich. So it's not in your face, but it's like, what do they actually use for error messages? And I looked, and their solution, which was kind of surprising, and it might have changed over time, is they basically make it impossible for you to
Starting point is 00:37:42 see an error message. They just so carefully, like, choose what you can type, what you can't type, what you can select, so that it's very, very difficult to get into an error state. I basically, like, could not find one. Maybe there was one where they used orange. And it's like, oh, I wouldn't have thought of that. But that's suitably far away from kind of your pink-red. And it also looks good with it.
Starting point is 00:38:04 So why not? so there's logic to these things right that's the i mean that's the point of what i'm saying is we just talked about the practical reasons for choosing blue um the practical reasons for choosing or not choosing red how to deal with error messages if you did choose red uh so there are rationales uh kind of like underlying so much of this stuff and it was just very frustrating for me as a beginning designer because it was like no one is saying these things. Like I have to discover each of these for myself. Yeah, I mean, that's one really interesting thing. I always thought that, I mean, until we had this discussion, that there was like a really strong element of voluntarism.
Starting point is 00:38:40 That basically you could do whatever you wanted. But what you're saying is like, no, if you just randomly pick colors, especially like all the primary colors, then your website will look like a five-year-old built your website. Yeah, which sometimes, I mean, if you're making a website that just needs to be really friendly and maybe like kid-friendly or aimed at kids too, it's like, great, do pick all the primary colors. That'll work fantastically and it'll signal exactly who the website is for. But I would say that it's actually you said volunteerism i'm not totally sure what that means but it just means like you do whatever you want and it'll just work okay so it's kind of halfway in between i would say you can do whatever you want as long as you have at least one solid reason for it um and sometimes and sometimes your solid reason is like let's say you're making like a website for an environmental non-profit guess what every environmental non-profit has is their theme color green green so what if your rationale was i'm going to pick something that is not green it could
Starting point is 00:39:39 and in that sense yeah there's going to be some things that you shouldn't make it um perhaps but it gives you so much more leeway for what you actually do choose um so that's wonderful and that counts as a rationale it's like we need to distinguish ourselves from the sea of green competitors or whatever you call other non-profits um so yeah it's like as long as you can have some solid reason you still you still have leeway in what you can do eric this conversation has been uh going amazing but we're going to take a break for a second and uh jason's going to tell us a little bit about oscon hey everyone so this is the uh last opportunity uh you know we do the show monthly and and the conference is going to be later on this month so definitely check it out um you can
Starting point is 00:40:20 still use the oscon.com slash PT. That's for programming throwdown. And you can get a pretty sweet discount. If you don't want to use that link, you can also use the discount code. So when you go to checkout, you do PT25 and get 25% off. I tried PT99.9. It doesn't work. PT25, that's the code you want to use. You get 25% off.
Starting point is 00:40:44 It applies to all the different passes. So bronze, silver, and gold passes. On any of those, you can get 25% off. There's a bunch of open source folks that are going to be there. There's also just even more broadly a lot of opportunities to understand what's shaping software development. So they're going to be talking about AI. They're going to be talking about blockchain, pretty much cloud computing. Anything that you would read about if you're trying to read contemporary news on CS or software engineering is going to be talked about at length from industry experts. So people from Google, people from AWS. So yeah, give it a shot. The passes start at $750 when you register with that code.
Starting point is 00:41:30 So try it out and let us know how it goes. If any of you go to the OSCon, shoot us an email. Let us know what you thought about it. Check it out. All right, Eric. So we talked a little bit about design and about colors. And all this is actually extremely fascinating. But once someone gets past sort of thinking through what they want a website to look at,
Starting point is 00:41:48 there's the kind of, I want to spend a few minutes talking about, I don't know what you call it, like brass tacks, the fundamental aspects, like what equipment do you use to do your designs? We were talking about, you know, maybe don't choose a framework at first later, but most of the people listening to this
Starting point is 00:42:00 are probably coming from a programming background and they're itching to know, like what web framework should I use? Or if I'm building an app, like what language am I going to use? Or how am I going to make the design look? Do you have any sort of thoughts or comments about directing people on on first steps down down that avenue? Sure. Yeah. So it's a little bit tough, because it depends on like, how deep you want to get in the design rabbit hole um i think maybe the elephant in the room is what about bootstrap and i would just say the answer to this is going
Starting point is 00:42:32 to vary depending on how deep you want to go with design but uh bootstrap is great in that it really makes it really solves some problems that it would have just been nice if like native html just had done um and it and it gets things that look nice and consistent but if you use the default fonts and the default colors and the default icons you're going to have a site that looks like a bootstrap site and that that is kind of like wandering into the environmental ngo space with a green logo that has like a tree growing out of a hand or something. So you're definitely not setting yourself apart by doing that. And yet I recognize at the same time, it's like depending on what else you have going on, if you're coming from a backend perspective, to just be like, yeah, just learn CSS and roll it all yourself. It's like, that's a tall order,
Starting point is 00:43:22 especially if you're also trying to learn UX and UI design as well. So I'm not necessarily going to say that. That is what I do for most of my client projects at this point, is just do it all custom. Don't really start with a framework. But I think that's more just a personal preference. And I've been able to invest the time over the years to get good at the CSS and the visual design and knowing how they relate. So what you describe, and this is in my field, so it's probably a really poorly formed question, but I'm going to ask it anyways, which is, you know, describing drawings and wireframes and static things. But that healthcare website we were looking at earlier has some animation.
Starting point is 00:43:53 I imagine sometimes people are going to be designing things with interactivity where there's going to be things moving around or changing or shifting or sort of flowing, not just a sort of static layout. How do you sort of reason about adding those elements or how to bring those in? Yeah, that's a great question. So this is something where, like, whatever your prototype is, whether it's a prototype in code, or a prototype in some some app that is made for animation, like Framer is a good example, then you almost need to get to that level before you can make the call of,
Starting point is 00:44:28 is this what we want to ship or not? So for me, a lot of times that does just happen in CSS because it's not going to save me any time to write it in Framer first. I'm still going to have to get in there and tweak the easing curves and whatever. But this is something that i would say as even if you're like no i'm not going to do a site with a bunch of animation and crazy stuff going on
Starting point is 00:44:50 it's like well do you have hover states do you have hover states on your buttons because that's something where you can try and make that call in a program like sketch and say okay i think my hover state is going to be this variation it's going to be blue it's a blue button but then when i have a hover state it's going to be blue. It's a blue button. But then when I have a hover state, it's going to be a slightly darker, maybe a little bit more saturated version of that same blue. And you kind of tweak it and you put those colors in your code. And it's like you need to play around with that in your browser, in my opinion. You need to see that in your browser before you can actually say, yes, this is what I want or this is not what I want. It happens all the time where I'm like, OK, this looks good in Sketch, but then I get it in CSS and it's like,
Starting point is 00:45:24 oh, this feels actually like really drastic, like hovering okay, this looks good in Sketch, but then I get it in CSS, and it's like, oh, this feels actually really drastic. Hover states, it should be subtle, but it should be noticeable. And it's like just getting that balance kind of right. It's like I don't need something to flash too dramatically or whatever. And yet I do want people to be able to tell when they're hovering on something. Almost everything clickable should have some sort of indication that you can click on it. So that's a problem even if you don't go deep into animation. So how transferable is the, you're sort of describing, you know, kind of like CSS,
Starting point is 00:45:54 which to me makes it sound like you're talking mostly about sort of web stuff. But if someone's saying, oh, I'm going to make an iOS or Android app, like how transferable do you feel? Like if someone came to you with a job to go design, and maybe that you have that in your portfolio, but come to you and say, Hey, I want to design for an iOS app. Do you feel confident in being able to transfer your skills? Or is it really a whole different world? Oh, yeah, absolutely. So with visual design, in particular, the foundations are exactly the same. There's some things that are a little more important on on web and bigger screens, tablet and desktop. Like white space is just going to be,
Starting point is 00:46:28 it's going to be a little bit more. And then there's other things that are more important on mobile. Like you may need to get quite specific with exactly what font sizes and styling you use, just because you can't have a huge range of font size and styles. Like things need to be pretty compact
Starting point is 00:46:44 or else they're going to run run over into multiple lines and be very very long on a mobile screen so because you have less of a range to work with you need to get more precise in that range um but yeah overall the two skills are like very transferable the thing that's more different is the ux the ux of a mobile app there's certain paradigms where, like in my opinion, the paradigms we've developed for how to navigate around mobile apps are brilliant. If you look, we use material design
Starting point is 00:47:14 as a fantastic example of this. We use like shadows to kind of hint at different layers of things that are sliding over each other or merging into one thing or dropping off the side of the screen or like they come on from the side of the screen or like they come on from the side of the screen while the content you were looking at kind of shrinks
Starting point is 00:47:30 towards the background or something like there's just we use so much um motion and sense of location and navigation and it's actually really subtle but you can open up any any like well professionally designed app on your phone and and just pay attention to when i go from one screen to the next they're almost never like just on like totally the same level like it's gonna appear as if something is rised is like once one uh notch closer to you and is sliding over the screen that you were just looking at um whether it's from the side or from the bottom or whatever there's just so much motion in 3D. And that's just one thing.
Starting point is 00:48:08 But the UX of mobile apps extends a lot beyond that. We've just really had to deal with these space constraints. And I think we've kind of risen to the challenge. Yeah, that makes sense. That's awesome. I noticed with my Chase app, it's like that. When you go to pay, there's this three-step process, and each step is sliding over. And it makes you feel like all the three steps are there at the same time.
Starting point is 00:48:30 You're just only looking at one at a time. It makes you feel like there's this landscape that you're crossing. Yeah, it's fantastic. I don't know that I'm going to stake any examples on the Chase app, but what you're saying sounds like a perfectly smart decision to make as a designer. Yeah, you almost do want to give users a sense of place even when they're in this abstract digital experience. So we talked a little bit about replicating things that we like or existing stuff. And then occasionally I'll run across something on the web where, I don't want to say like a fad, but something new is catching on. So the one that I remember vividly recently is when you would scroll down a page,
Starting point is 00:49:07 the page wouldn't scroll down, it would scroll over. I don't know what that's called, but it would scroll to the right. So if you scroll down the page, the page wouldn't move sort of up on your screen. It would slide to the right. And it would just keep sliding and sliding. Yeah, okay. But obviously, like some ideas probably seem crazy at first but then they they catch on like how do you for i guess especially beginners like what is the balance
Starting point is 00:49:32 between doing what it seems sort of safe and sort of pushing the boundaries or breaking them oh my gosh this is a good question and and i i um i'm gonna give this answer of it depends which i hate because whenever i say it depends it means i don't really know. It means there's probably some divider line that I just haven't thought about enough to articulate yet. But because a lot of trends in design, I feel like actually make a ton of sense. So when things started going much flatter around 2013, 2014, like all of our shadows and gradients just kind of dropped off. And all of a sudden, there were a lot of trends around like just say like really clean, simple fonts. And then shadows came back a little bit. And there have been certain trends around shadows.
Starting point is 00:50:18 There were these like diagonal shadows that were there for app icons for like a year or two. And they looked really cool. And they still kind of look cool. And there's no harm in using them, but it was definitely like a trend where it very suddenly appeared and was adopted by a lot of people all at once. And then I feel like maybe in the last couple years, we've gotten so used to seeing these clean, simple, flat sites with very plain
Starting point is 00:50:45 sans serif fonts. And now you see many more interesting serif fonts, especially at big sizes where you can see all the details of those fonts. And that's kind of a trend, but it's also an awesome trend. And when people pick these high-quality serifs and show them at really big sizes, like that Foundation Medicine is a decent example of it. We talked about how cool that font looks. It's like, I didn't even know what that one was.
Starting point is 00:51:07 So yeah, in some sense, that's trendy. But it's also a trend that's very, it makes sense given where we are at and what everything else looks like at the time. So I wouldn't necessarily say don't use, don't do trendy stuff. Like it can work. And if you like how it looks,
Starting point is 00:51:23 and you have a rationale for why it should be that way go for it like i'm not going to tell you not to yeah i mean i guess with web one of the things is nice is the ability to update it's not like a book where you ship it and then that stays locked in that state forever where you're going to feel in five years like groaning when you remember what it was it looked like yeah you you can ship a if it's trendy and it goes away in two years you can always update your website and and do the new thing yeah totally so you also one thing i want to talk about for a few minutes uh before we finish up here is you mentioned that you do freelancing and i know this is something that that comes up a lot not necessarily
Starting point is 00:52:00 in design but even just in programming like working for the man or working for yourself or you know this back and forth and freelancing do you want to talk a little bit about how your experience has been freelancing like how do you how do you get work yeah like do you do you feel scared about that like i mean what has that been like for you because i feel a lot of people will at some point in their career sort of have that as an option or a question yeah no that's that's a great question okay the way i frame getting work as a freelancer is like this the very first project that you have to try and find you have say you say you don't have any freelance experience at this point um it's going to be tough it's going to be tough because you're going to need to convince someone to pay you money to do
Starting point is 00:52:41 something that you have not done in the exact capacity that you're suggesting. And that's okay. That's just kind of the way of things. And you can't change that. So you do your first project. But if you do a good job, the moment you've done that first project, you now have, even if you had to go to a bunch of meetups to find this person, or you posted on a bunch of job sites, or whatever you had to do to track down this project. The moment you've completed your first project and done a good job at it, you now have two potential avenues where your next project could come from. It could either be A, the same person who wants to hire you again because you did such a good job, or B, someone that this person tells, like they tell someone else, one of their other like little CEO startup friends or someone else in the industry hey you're looking for a designer hire this person
Starting point is 00:53:29 like eric did such a good job so you should hire him too um and the more and so that makes finding the second project easier than finding the first one and like it just continues and if you were to kind of chart this amount of work it takes to find each project, each incremental project as it comes. It's like on the whole, that chart should decrease as it moves to the right. You should just see the amount of work go down and down and down. And eventually it hits zero, where you don't even have to find, you don't even have to spend extra hours finding a project. Like you'll still need to do an intake process to make sure you're a good match for that client and they're a good match for you. But at some point it's like they emailed you and maybe
Starting point is 00:54:09 you said, yeah, like let's talk a little bit now. And if this looks good, I can start in two weeks and you just smoothly transition right over to the next project. And then at some point that amount of incremental work to find the next client would theoretically it goes negative, which I just interpret to mean uh you actually have more people coming to you with projects than you can actually take on there's more demands for your time more people who want to hand you money to do what you love than you can possibly say yes to and that's fantastic because then you can really start to specialize and um and you're not necessarily worried about the about the future and And you don't necessarily have this feast and famine cycle that afflicts a lot of freelancers.
Starting point is 00:54:48 But the thing is, it is the toughest at first. And if you just kind of keep your eye on trying to get through that beginning hump to get to a point where it is smoother sailing. Like, I'm not going to speak for everyone here, but it just feels like it gets better and better. So you I mean, inevitably, you have the someone doesn't pay or you did something and the communications was poor and the expectations are mismatched. Do you sort of establish up front how you plan to deal with that? Do you just sort of take it as it comes? Like, I feel like that's a sort of unknown or unknown, unknown, the thing that sort of scares people like, well, what's going to happen? Yeah, I've had very few problems with not getting paid. And I believe even for people who really hemmed and hawed and also, OK, another disclaimer,
Starting point is 00:55:37 these haven't been for years. Like the the clients who who who are who either don't pay you or or who really put up a stink about paying you, those are the clients. They're kind of the lower quality clients that you have to settle for early on in your career. Like when you get farther along, you can, and you have, you know, when you have that curve of how much incremental work is it to find your next client and that starts to decrease it's like at some point you can just pass on someone who has those warning signs because one thing i've learned is clients typically if they it's no client has just one red flag and other than that looks like all green lights like it's either no red flags or like five of them so if you have a client that is like asking you at least as a designer they're like they seem like they're going to be really micromanaging. Like their feedback is not particularly good.
Starting point is 00:56:28 Their communications are not great. It's like, that's also going to be the client who struggles to pay you on time. And the moment you can avoid them, you should. But in the beginning days, sometimes you just kind of have to risk it. And that was like a... There's an interesting philosophical point there because I've noticed the same thing
Starting point is 00:56:44 in dealing with intra intra office situations that that invariably there are times where just it's just like a like a meteor strike or just something happens that just causes conflict. But but but ninety nine percent of the time when there's a conflict, one of those two people or probably even both of them or all of them have been in many other conflicts. So it's like that trend of you see something bad, there's probably a lot of other bad things. I mean, what's this saying? It's like if you see a cockroach, there's 50 other behind the wall or something like that. Oh, geez. Yeah, that's the same. It's the same point.
Starting point is 00:57:22 Yeah. Wow. That's a scary. I don't like that saying. I don't like it either. I don't think it's true. I mean, it's kind of, it's the same, it's the same point. Yeah. Wow. That was a, that's a scary, I don't like that. Yeah. I don't like it either. I don't think it's true. I mean, it's an old wives tale, but, but, but yeah, the idea is, you know, you're right
Starting point is 00:57:31 that you can, while you're setting up the contract, it sounds like you, you, you, you, you, um, so I guess when you set up these contracts, you probably do it in person or on VC or something. So you can kind of see how the person is you know get that non-verbal communication no honestly no um so despite living in Seattle which is like a decent place and there's plenty of potential clients a very small proportion of my clients have been uh local it's it's more often than I'm going it's it's a remote job um so which is cool because it means you can freelance from basically anywhere uh but yeah i i why so that's a good question like why have i been able
Starting point is 00:58:12 to do it without seeing the person's non-verbal communication um you know i'm not i don't know there might be an aspect of luck to it where it's like uh or or learning to identify those other red flags apart from oh oh, this person probably just won't pay me on time. Certainly, I mean, one warning sign for not getting paid on time is, is this project totally self-funded? Like if there's someone who is not discernibly rich, who is paying you thousands of dollars, that's going to hurt them a little bit. And they might have a lot of opinions that they want to make and a lot of things that they want exactly right before they pay you. And that's no fault to them.
Starting point is 00:58:47 But it's just something that you have to recognize as a freelancer. Okay, this might be this guy might be like really exacting, like overly exacting, perhaps he might actually make my life like pretty miserable and not worth the money that I'm getting for it. So it's just a potential thing to look out for. But especially if you already have a client who's raised money from VCs or something, and you're doing some work from them, or they're wealthy from another business, and they're trying to start this other thing, and they're getting you on board. It's like, those are good signs. Because one, I mean, one, it means they're not like lacking for the cash that they will pay you
Starting point is 00:59:25 with, which is great. They can keep up their end of the bargain. But it also means that they've passed some sort of real life filter for doing quality work. If you've raised VC money, like ostensibly, you're one of the few and one of the select and someone thought it was worth taking a very large bet on you. Likewise, if you had a prior business that was really successful, that's also a real life filter for people. Like not many people have successful businesses and are then going to start these projects and pay you thousands or tens of thousands of dollars just to see how the project goes. So like those are good signs. I found that the very best clients are extremely busy. And the funny thing about it is the very best clients I've had,
Starting point is 01:00:06 they could have been designers and another life they easily could have done my job. I'm just there so that they can focus on the stuff that only they can do. And I just like make the design problems go away for them. So that's what I've learned. That makes sense. That's awesome. We've talked a little bit about people who who kind of work remote and obviously like what you're mentioning, like I don't know of a way to be more remote employee because I guess you're just by yourself. But it sounded like you didn't have anybody else. How do you I mean, how often do you find that you work from home versus work elsewhere? Not unless you're on a customer site, but just you just travel somewhere and you're you know, this is kind of always the dream you see sort of see pitched online. Like you could work from anywhere. You know, you could take a vacation to rome and be
Starting point is 01:00:47 working from your hotel room in rome um if that's something that appeals to you do you find that that's something that you do a lot or that you find is a little overrated um maybe both i think the thing is i now have two kids so long-term travel like so uh earlier this year we actually actually went to Spain for about a month and a half. And it was really nice. It was really relaxing. I got done a fraction of the work that I intended to. A lot of that was just now I'm traveling with a family. And so especially with young kids, it's like that's just tough.
Starting point is 01:01:19 Having a routine at home is a way better place for productivity. And that was something I kind of craved by the end of that trip is like ah like i really want to like actually get stuff done um yep but at the same time like um i was freelance when my wife and i got married and we i mean this was just incredible we we said wow we don't actually need to like have an end date on our honeymoon set ahead of time we can just going. And whenever the bank account runs low, we'll pause. I'll work and and then we'll keep going. And that was what we did. And so we took like a nine month lap around the world and it was just incredible. Wow. Yeah. So like the dream is real. And it's and if that's something where, you know, if anyone in your audience is thinking about doing that, yeah, it it's so possible um but it's
Starting point is 01:02:05 also it's not for everyone like it's it's something where i think i will do more when i have older kids like in terms of travel but um not for right now it's just a slightly different stage of life so i'm not really in the like doing long-term travel living the the tim ferris life or whatever so i mean that sounds pretty cool and you mentioned so you're sort of married and have kids but do you find that you look to other sources for sort of the water cooler kind of talk do you kind of like how do you fulfill that banter with other people that you might normally have around the office but that's sort of obviously missing in your setup oh yeah well so the water cooler banter is not really something i miss. I mean, I think it helps that I am totally an introvert. So by the time five o'clock rolls
Starting point is 01:02:50 around, I've had like, maybe one meeting, like I'll have like two meetings a week or something. And so by the time five or 530 rolls around, I'm like, cool, I am now like amped up to like, go talk to friends and hang out and just have a good time all night or, you know, to a reasonable time in the night. Cause guy get up. But, um, so I think that helps. I've done like, for me,
Starting point is 01:03:11 it's just a personality thing. I think almost everyone else I've talked to who's been alone in their office, as long as I have, it's kind of like, this is a little miserable, man. And I'm like, I don't know.
Starting point is 01:03:20 I like it. It works for me. Uh, so yeah, introversion helps. I don't know what else I can add there. I always just love hearing different people's take on it because like you pointed out, it works for you, but other people seem to be made miserable by it.
Starting point is 01:03:32 Yeah, yeah, it's tough. Well, and that's kind of the freelance thing in general. And what I say to people, it seems like everyone these days is just kind of, they wonder. They just wonder about freelance. They wonder if they could cut it and have just a life that's like 100% on their, mostly on their terms or whatever. And it's like, yeah, for some personality types, that's totally worth it. And I think I probably could have called this about myself. I had just never really stopped dreaming about starting my own thing or going freelance or whatever.
Starting point is 01:04:00 But for some people, oh my gosh, that's not the answer. You're going to be miserable. You're going to be miserable you're going to be alone you're going to have all this risk it's going to be really uh it's just going to weigh on you very heavily and the the rewards that come with working on an established team on an established project um with the same people day in and day out uh and that and that um and getting a reliable paycheck and not having to worry about that. It's like for some people, that's a much better deal.
Starting point is 01:04:28 So it's like, yeah, Freeland, it's just not for everyone. And I totally get that. This has been awesome. Before we sort of wrap it up here, you mentioned you have a blog that there's a course you have. Is there anything else that you want to pitch to people?
Starting point is 01:04:39 How do people get in contact with you? All that fun stuff. Yeah, so probably the best way, if you liked the stuff that I said about design, the best way to check out more is to go to learnui.design. And that is, there's really, there's three things there. So I do have a course on user interface design. It's an online video course, 20 hours of video. It's like pretty comprehensive. It's everything I wished I had known when I first started doing visual design. So you can check that out, learnui.design. And then there's also the learnui.design blog, learnui.design slash blog.
Starting point is 01:05:10 That's all the like, I mean, it's a novel, at least, worth of free design content. It's all very analytical. It's just I've really tried to write in depth and write this sort of stuff that, again, I wished I had heard when I started doing this. So check that out as well. And there's also a newsletter where I send even more content, most of which, well, basically all of which is not on the blog. And that's at learnui.design slash newsletter.html. Hooray for using static pages. So yeah, that's probably the best place to learn more. And then you can also, if you have any questions, you can email me, eric at learnui.design or find me on Twitter.
Starting point is 01:05:47 It's Eric, E-R-I-K-D as in David Kennedy. Well, thank you so much for coming on the show. This has been awesome. Yeah, this is amazing. I feel like I'm going to go sign up to your newsletter right now
Starting point is 01:05:56 because I'm curious to keep a pulse on this. This stuff's been fascinating. Awesome. Glad to hear it. Thank you for having me. The intro music is Axo by Binar Pilot. Programming Throwdown Thank you for having me.

There aren't comments yet for this episode. Click on any sentence in the transcript to leave a comment.