The Changelog: Software Development, Open Source - Tactical design advice for developers (Interview)

Episode Date: February 6, 2019

Adam talks with Erik Kennedy about tactical design advice for developers. Erik is a self-taught UI designer and brings a wealth of practical advice for those seeking to advance their design skills and... learn more about user interface design. We cover his seven rules for creating gorgeous UI, the fundamentals of user interface design — color, typography, layout, and process. We also talk about his course Learn UI Design and how it’s the ultimate on-ramp for upcoming UI designers.

Transcript
Discussion (0)
Starting point is 00:00:00 Bandwidth for Changelog is provided by Fastly. Learn more at fastly.com. We move fast and fix things here at Changelog because of Rollbar. Check them out at rollbar.com. And we're hosted on Linode servers. Head to linode.com slash changelog. This episode is brought to you by DigitalOcean. DigitalOcean is the simplest cloud platform for developers and teams with products like Droplets, Spaces spaces kubernetes load balancers block storage and pre-built one-click apps you can deploy manage and scale cloud applications faster and more efficiently on digital ocean whether you're running one virtual machine or 10 000 digital ocean makes managing your infrastructure way too easy. Get started for free with a $100 credit. Head to do.co.changelog. Again,
Starting point is 00:00:47 do.co.changelog. Welcome back, everyone. This is the Changelog, a podcast featuring the hackers, the leaders, and the innovators of software development. I'm Adam Stachowiak, Editor-in-Chief here at ChangeLog. On today's show, we're talking to Eric Kennedy about tactical design advice for developers. Eric is a self-taught UI designer and brings a wealth of practical advice for those seeking to advance their design skills and learn more about user interface design. We cover his seven rules for creating gorgeous UI, the fundamentals of user interface design, color, typography, layout, and process. And we also talk about his course, Learn UI Design, and how it's the ultimate on-ramp for upcoming UI designers. So let's talk about tactical design advice for developers.
Starting point is 00:01:46 I think that that comes with some pre-notion that you're smart and you can actually give advice. So Eric, help us understand what tactical advice might look like for developers. Yeah. So I guess I'll talk about this by means of a little bit of backstory here. So when I was in college, I programmed for the very first time. I loved it. I was just amazed, I programmed for the very first time. I loved it. I was just amazed that I had never stumbled upon programming before. And I decided I was going to
Starting point is 00:02:10 switch my major to software engineering. And I did. And it was going great. And then I got a couple developer internships. And writing production level code for a medium-sized business, I realized, was nothing at all like kind of all the side projects I had been doing. And it was just like, you know, someone who enjoys, say, fixing your own motorcycle or whatever, if you really enjoy that, it doesn't mean you're going to like other things that involve, like, mechanical systems, like, you know, installing the HVAC for a skyscraper. It's a totally different scale of thing.
Starting point is 00:02:45 And that's kind of how I felt with programming as I loved it so much just doing these personal side projects or like little things where I could just sit down and bang something out, you know, come up with the idea at noon and finish at 3 a.m.
Starting point is 00:02:57 And then I started thinking, okay, like I really do like tech, but what else is around here? And I kind of stumbled my way towards design. I had done a little bit of UX design work in school and some at Microsoft. And so I said, you know what? I'm going to try my hand at being a designer. Okay. And I'm going to be a freelance UX designer. I'm going to go freelance so I can get this wide variety of experience as quickly as possible. And we'll just kind of see where things go. Maybe I'll end up landing in a cool company. And so, you know, no sooner had I started doing this,
Starting point is 00:03:29 then it became clear that for most people who want to hire a UX designer, especially just a lot of the smaller companies, startups, just the people who are hiring a freelancer who's just starting out, who doesn't have a ton of experience, you know, you go and you do the typical UX deliverables, things like wireframes of the whole site, or you talk to some users and do a little user research report or usability studies. And that's not necessarily the most satisfying thing for them because it doesn't, it's not clearly leading your client onto the next step. Oftentimes they'd see that and they go, okay, cool.
Starting point is 00:04:02 So we know we need to add this feature. We know we're going to make these screens, but like, what should the developers actually, what's the visual spec they're going to code this to? And I'm like, well, you know, I don't know. I guess you need to hire someone else for that. But you can't quite say that, especially if you're like an ambitious freelancer, you just have to say, okay, you know what? I'll do the visual design. I can do it. So, I just ran with it. I said, okay, I'll do this and I'll kind of just teach myself. And at the times where I feel like I'm just turning my wheels, maybe I'll just flip off the clock and not build them for those hours, but just try and
Starting point is 00:04:35 kind of work up those visual design skills. And so I think this is an experience that a lot of developers or UX designers have had. But when you're Googling around for design advice, okay, what typeface am I going to use? What colors am I going to use? Like, what are the principles that I need to be working with here? It's so difficult to find stuff where kind of my golden standard for quality was if I read this article and I apply its principles to a design that looks bad, will my design look better? Right. And the answer was like almost universally, no, it won't look better. We'll tell you about the golden ratio. But like the problem with most poorly designed apps is not that they lack the golden ratio,
Starting point is 00:05:16 right? It's not that they used some weird typeface pairing where the skeletons of the typefaces don't match up or it's not, you know, there's just all kinds of things. It's not that they didn't strictly follow this 12 column grid system or whatever. And so I really began to try and differentiate in my mind what was useful advice about visual design, the UI design side of things, and what was just kind of this like weird art school dogma that designers all talked about, but just wasn't tactical.
Starting point is 00:05:46 So, with that in mind, I started like putting together all the stuff I could find and really just trying to build my knowledge base of like, how do I like, how do I like take my developer brain and kind of analyze my way into something that looks beautiful? And the first results of that were a medium article that i now wrote in almost five years ago it was in 2014 yeah that's right yeah i was surprised when i actually saw that by the way i was like wow that's because it says updated for 2019 and it began in 2014 i was like that's this is an old one but now you've refreshed it for to be modern yeah yeah i just went through and updated a
Starting point is 00:06:25 bunch of the font recommendations and stuff like that. But it's this long two-part medium article, and it's really a lot of what I would consider the tactical design advice that I wish all developers and UX designers knew. It's things like realizing that light comes from the sky and therefore shadows are very largely going to be below any object that is supposed to be perceived as coming out of the screen, like a button or a card or, and then shadows are going to be, say, on the top sides of things that are inset into the screen, like check boxes or radio boxes. That was something where I was like, that's just one little lesson that I had no idea of when I first started designing and realizing that was kind of
Starting point is 00:07:10 a big mind opener to me. And so, these articles, I just put in seven topics that I thought were pretty applicable to just being like tactical design advice. And it ended up going viral, which was crazy for about two weeks in 2014. It was just complete madness. But it sort of slowed down since then. And I've just kind of like continued building out from that idea. I just realized that a lot of people besides myself were looking for those tactical pieces of design advice. So, we could, I mean, we could dive into some of them. I'd love for any of your listeners to like walk away from this episode and go, Hey, you know what?
Starting point is 00:07:47 Like now I have five things, 10 things I'm going to go try with my little app or my side project that I'm, that I'm working on. What I like about the way that you've laid out these rules for, and the title of the post is seven rules for creating gorgeous UI, uh, written in November 2014, and you mentioned it went viral. I wasn't aware of that. I didn't know that, but it makes sense to have done that. But what I like about what you've listed here, so you've got things like light comes from the sky, as we just talked about, you know, where to begin in terms of like color.
Starting point is 00:08:19 So go black and white first. Yeah, I'm assuming on W white space, like if you think you have enough white space, probably want to go ahead and double it kind of thing, because I think developers tend to be more concise when with visual. And I'm not really sure. Maybe you've done some investigation on like maybe why developer trends of design tend to be a certain way. But I think that one thing that seems clear here is that it's not like it's oh here's design school
Starting point is 00:08:47 level design advice for developers it's more like here's just practical ways of looking at the way we create and enjoy interfaces and you describe ways to move in and move out of that without having to have a an extreme amount of skill set to do so like so just being logical light light comes from the sky makes sense that's where the sun's at so it makes sense in interface to follow that and or also say hey understand where your light source is coming from could be another way to say that yeah exactly and and that's true i feel that like design is not something you should really need to go to school for years, at least the visual design side of things. You shouldn't need to go to school for years to like pick up enough to get by.
Starting point is 00:09:31 I think it should be very possible for someone to know a couple tips, tricks, heuristics for what they're going to, what they're even going to consider doing and what they're not going to consider doing and go from there. You know, what I find find though is that there are people and let's just use the developer here in this case as the primary sort of person that
Starting point is 00:09:53 will pick on so to speak. They tend to be they tend to know good design but not often can they create it. Which I find is a really interesting thing. And maybe that's not true for every developer out there, but there you can tend to,
Starting point is 00:10:09 to see a developer did the design on this. Like when we can use GitHub, for example, GitHub today is way prettier than it was when Tom Preston Warner shipped it. It was not bad. It was good. It was, but it was a developer driven design.
Starting point is 00:10:22 And Tom Preston Warner was a developer first before he was a designer, but he had some good design skills or he had some understanding of design. So you can understand and even see and know good design by using it, but not be able to create it. What do you think about that? I think that's spot on. I mean, I hear, it seems like almost every day, someone emails me and they say,
Starting point is 00:10:44 hey, I can identify good design i just don't have a good i don't have a gut instinct for it that's what they'll say like i tell i can tell what i like i just can't recreate it for myself and i don't know what the issue is here and so here's here's the secret to everyone who emails me saying that my response is almost universally take something you like there's a two-step process. Find something you do like, find something where you think it is really good design and something you kind of aspire to. Find that piece, whether it's a website or an app. And then the second step is analyze why you like it. And when I say analyze, what I'm getting at
Starting point is 00:11:21 here is like, force your brain to come up with words that surround like what you think is good about that particular design and it's I think it really needs to have a low bar like you don't need to think of the perfect design school terminology you don't even need to use terminology that would make sense to anyone else if you're just like wow this font is like really like fatty and in your face and i like it just cool like mentally make a note of that you could even write it down yeah or you say i like the white space on this site fine write it down or like write down why you like the white space well there's a ton of it and it makes the thing feel really presented um let's see it's
Starting point is 00:12:01 like looking at changelog.com i like this. If I was doing this as an exercise right now, I'd be like, oh, okay. The dark background. Dark background is really cool. I like the green theme color. It's like sort of has a glow to it. You know, it feels kind of fresh. It's not like, it's not your default green.
Starting point is 00:12:20 It doesn't, it just, it seems to work. I guess it also kind of has a little bit of that command line old school terminal feel to it which maybe is a nod to the the to that but um i like the font i'm looking at this and it's one that i've i guess i've really not seen this much yeah so like those are the sorts oh and i love you know you have all the different shows and each one has kind of their own little visual icon where they're all these geometric designs. It's like they're clearly unified, but there's a different thing going on with all of them. Some of them have warm colors, some of them have cool colors, some of them are organic shapes, some of them are real geometric shapes, but like they clearly all go together as kind of one system. So, those are like all,
Starting point is 00:13:01 you know, when I just load up the changelog.com slash podcast, those are some of the things that I see and I go, wow, I really like that. But the trick here is when you as a developer, as a beginning fledgling designer are doing this, if you can kind of force your brain to come up with like a word for the pattern that you see, where you're like, well, I like that. Let's see, you know, I like the casualness of the font or whatever, or I like the, you know, that dark background. Then you can start to see next time you land on the site that has that dark background UI and go, oh, I like this one too. And like, what do they do similar? What do they do different? Or maybe I see, maybe I see another site that has a really similar font.
Starting point is 00:13:45 And when I land on that site, I'm like, oh, okay. Like your font kind of looks like Freight Sands, I think, which is another one that I like a lot. Yeah. And it's like, if I saw a site with that one, hmm, like, okay, maybe there's something about these fonts that look so similar that just kind of appeals to me. And the whole point of like putting words around what you like or don't like and designs that you see is that then you can start to connect those. Your brain can
Starting point is 00:14:09 like build off of those nodes and kind of connect them into other sites that you see, other apps. You can figure out what you like, what you don't like, when you like it. And it'll start to give you this kind of list of ideas that you can try when you're working on your next design. And maybe it's appropriate that you have a dark background. And all of a sudden, you're like, well, there's three sites that I like that have dark backgrounds. I can go to those. And I've noticed they all do X, you know, maybe they use like only white and gray text with one bright neonish accent color. Okay, cool. There's a thing that you can do that like automatically is going
Starting point is 00:14:45 to put you way ahead of the pack when it comes to designing that site um so you just start to notice those things and you kind of build up your list of like what what's going to work here what do i think i like and and and what are the circumstances under which it's going to look really good that's good too because anybody could do that right anybody can say here's what i like about it here's why i like what i like about it here's why i like what i like about it and then archive that and then rinse repeat as that happens so when they come up with their next design challenge and or side project or scenario where they're either by desire or force um charged with you know coming up with something taking the first step or
Starting point is 00:15:23 the first stab at a new feature now then there's a lot of times too around here, you know, Jared has really good design insight, but I wouldn't call him a designer. He wouldn't call himself a designer either, but he understands what the user needs and wants. He understands how to analyze a feature and he understands how to do all these different things to deliver a good first pass for us to at least ship with to create that first momentum. And sometimes that first momentum is good enough, and it leads into the next phases of a design process
Starting point is 00:15:58 or user experience process or whatever it might be. But I really appreciate that because he's empowered to not be stuck behind here's a design spec or here's a fleshed out design, you know, because that keeps the ball moving in those cases. And I think when you empower developers to inch into design, to design a little bit more and not feel like maybe they have to do the ending all product, but that they can help move the ball forward is pretty empowering. Yeah, right. And I think part of it is kind of just a mindset shift, just going from the shift of thinking that design, especially visual design, is just kind of this art school magic that you
Starting point is 00:16:38 sprinkle on at the very end and just make the thing that doesn't look so good look way better. And instead kind of saying, no, you know what? Like design is, it is open-ended, right? It's an open-ended pursuit. In some sense, it's subjective, but I think it's way more objective, at least visual design, than most people give it credit for. Not objective in the sense that there's one right answer, but objective in that what a
Starting point is 00:17:02 large number of people would agree is a really, really good answer can actually be explained fairly logically. Like, a lot of design decisions, well, I think you may have heard this, but it's like, kind of a hallmark of good design is it seems obvious in retrospect, right? Like, when you, I feel like when you implement something that is truly a good design, you go, man, why didn't we do this a year ago? Or like, why did it take us so much like hassle and talking to users and trying to figure out if we should do this or any of these eight other things when this was so clearly the thing that we should be doing?
Starting point is 00:17:34 And I think visual design is kind of the same way where when you do make a good visual design choice, not to say that's the only one you could make, but like when you pick what you think is the right font, a lot of times there's going to be rationales behind that for why this font, why this particular font worked. Oh, we had to pick a sans serif because it was going to be on the more casual side of things, but not so casual. We wanted a rounded sans serif. So, we just went with one that was, you know, in the category that designers call humanist
Starting point is 00:18:03 is kind of based on human handwriting, if only loosely. And we knew we wanted one that, I don't know, would work well at really small sizes, because there's some captions on our mobile app that get displayed in this or something, you know, I don't know, there's little things like that. But there's all kinds of rationales that build into like, why, you know, why was this color chosen? It may seem the fact that you're not really sure something needs to go until you get to mile marker one, mile marker two, and then finally when you get to mile marker four, now you finally understand what it is you're building or why you're building it, or even if it's like user feedback
Starting point is 00:18:57 or even internal feedback or experimenting, does it work, does it not work? Like you'd mentioned, choosing a typography that works well at smaller sizes. Well, you may not have like three candidates for that particular typography, for that particular font in this scenario, but only until you get to the part where like, oh, it has to be 10 point for some reason or 10 pixels for some reason or whatever the smallest size might be in your layout. Like, well, this font doesn't work anymore.
Starting point is 00:19:25 Now I have to choose a different one. Why don't we get here sooner? Why don't we choose this monospace font? Because heck, hackers love monospace fonts. We should be more on the nose. So that's why we in particular chose a Sansara font as well as maybe a hacker level font. I think what we're using is, what is it? It's a Google font.
Starting point is 00:19:46 It's Mono Pro or something like that. I know it's Roboto Mono is what it is. So we chose that one purposefully because of some of the unique attributes in that font, but we didn't get there at first, right? We delivered a site in 2016 that didn't have any Monospace font. And then we decided to start to incorporate that
Starting point is 00:20:06 in our design that we shipped uh the beginning of last year so we had to even iterate to get there even though we're hackers we're developers primarily so you know our audience is us you know so it even took us iteration to get there yeah like there's a lot of stuff in design where you do kind of have to get it out there. Even visual design, which to be fair, I don't think visual design is like the number one priority, even though this is like the thing I teach with my course and in my blog and on the mailing list and whatever. Like visual design is not to me just kind of the be all end all. Like it is important that users have the right features and obviously getting it built in an efficient and manageable way is like super important as well.
Starting point is 00:20:48 But even with visual design, there's like, you think, okay, we're towards the end of the process here. And, you know, what could we possibly iterate on? And then there's things like the fonts too. I remember one project used this like kind of cool rounded font. It's called Omnis and it's like a perfectly nice font. But then what we realized as we were designing a bunch of the screens is we had to display a lot of numbers and Omnis had these really weird numbers that just didn't seem like crisp
Starting point is 00:21:17 or clean. They seemed just kind of like goofy and they had these weird ornamentations. And for me, I was like, oh man, like if I had known this at the beginning, I wouldn't have like wanted to use this font to begin with. And it also comes up with like color schemes or, you know, designers love to talk about color palettes. But a lot of times I think it's like very tough to just say, oh, I'm going to use this color palette and decide that's the palette you're going to use before you even start the project. Like you need to design out some screens or at least start designing out some screens. And then you kind of look and see, oh, we actually need, we need a little bit of a, you know, let's take in kind of a change log
Starting point is 00:21:54 example. It's like maybe you wanted a part that had a green background, but with a green background, you're going to have this huge mass, like what would it be? Thousands of pixels all colored in that same shade of green. And then all of a sudden, if you decide that that's really necessary to have that big green background, you might want a lighter variation on that green. You don't want to use just the standard green that you have because it would just be too much in your face or whatever. And so, there's all these little things that as you're designing, you go, I'm going to tweak that. It's like very tough to come up with the visual specs right at the beginning and just stick with them. It's like definitely a chicken and egg iterative process.
Starting point is 00:22:43 This episode is brought to you by Git Prime. Git Prime helps software teams accelerate their Thank you. Beach Law. So when we start projects, sometimes we're a little lost. It's like, I know for me, I'm an old school kind of person. I used to just open up Photoshop, the default for new Photoshop documents. You can tell I'm showing my age here because Photoshop for design is sort of like done with, right? Like you moved on to new tools that are like Figma or Sketch or whatever. Like saying Photoshop for design and that being your beginning is showing your age. But that's what it was for me. I would open it up and get a white document and I would stare at it and be like, OK, what do I do? Do I lay out some content? Do I lay out some headlines?
Starting point is 00:24:13 Where do I begin? And I think that might even be the showstopper for some people. It's like, where do you begin? Is it you pick off certain pages? Do you decide your typography first? You know, like it just seems so daunting of a task. You're almost like, you know what? I'm just going to go ahead and code this feature and ship it and be done with it and skip the
Starting point is 00:24:32 design stuff. You know, let that, let somebody else handle that. What do you think? Where do you begin? That is the temptation. Yeah. Let's just, I can't decide. We'll just do a bootstrap thing and table the decision for later.
Starting point is 00:24:43 Yeah. Yeah. No, it's all too real um i mean i think exactly what your beginning process is depends on how big of a team you're working with if it's just you it's like all the all the communication is intra brain like it's just like you might have things that you've decided on that you don't need to sync and validate with everyone else on your team and you can just charge ahead and like start designing something right away.
Starting point is 00:25:08 But I think if you have even a couple people that you're working with, it's probably best like, and this is going to sound so obnoxious to a developer, I can like, and the part of me that still loves all that development and analytical stuff is like, really? Start here. But I would honestly start with the brand. I would start with, and by brand, I'm just like, if you want a tangible definition of it, I would say, how do you want users to feel when they're landing on your site? And this, again, is just something where it's like, you almost want to pick some words,
Starting point is 00:25:41 some adjectives, and it can be very loosey-goosey. It doesn't need to be like perfectly nailed down. But on the whole, are you like more friendly or are you more professional? Are you for kids or are you like really edgy? Is there like traditionally like masculine connotations or feminine connotations to your design? Just like questions like that where you kind of have these sliding scales. You say, where roughly are we? Like, what is it exactly that we want to convey?
Starting point is 00:26:11 And while this does sound like just sort of a ridiculous exercise, it'll help because the moment you go to like pick a particular color or pick a particular font, which is kind of the next step, you'll have, you can like validate like, does this make sense given the brand that we want? So, like this is actually just kind of an example that I was thinking of today right before the podcast. But so, it's like no secret that a lot of social media sites use blue as their theme color, right? And a lot of people talk about how blue is kind of this color where the emotion is like trustworthiness or like sort of state. It's just, it's solid, it's dependable. It's not going to have too much of a one unique voice that's like a strong brand in any one direction,
Starting point is 00:26:57 but it's just kind of this general for everyone sort of feel, right? Like, blue is a very safe color. And if you've identified that like, you know, your Facebook or your LinkedIn or your Twitter and you're kind of like an app that should be for everyone in the world, then like blue is a very, a very decent choice. But then from there, like maybe the next step after saying, okay, we want to be a safe brand. We want to be open. We want to be universal, right? So, maybe those things push you to say, I'm going to like open up Sketch or Photoshop,
Starting point is 00:27:28 right? That was where I started too. I'm going to open up Sketch and I'm going to take this blue and heck, like you could even start with the default, you know, HTML or CSS blue color, like totally saturated all the way cranked up to the full brightness, like default, default blue. What would like, let's see, that'd be 00F, I think, in terms of the hex color. And then you just kind of adjust it from there and say like, okay, we clearly don't want the default, default blue, but what blue do we want? And one thing is, I'm pretty sure that all of Facebook, LinkedIn, and Twitter have done this, is they lower the saturation of the blue and they also shift the hue down, the hue down
Starting point is 00:28:11 towards green, if you think about the color wheel. And it's like those two levers, and maybe they keep the brightness pretty high, but those two levers, just moving the hue, injecting a little bit of green in and just kind of lowering the saturation. Those are things that Facebook does at a different amount than Twitter. Twitter does it a different amount than LinkedIn. But the net effect is they all land in a slightly different blue color where they all could have started from the same place saying, yeah, we want this universal dependable brand for everybody, but we're just going to have it be a little brighter and funner than like what you might think of as this default blue. And so, from there, when you've kind of said, here's the brand adjectives,
Starting point is 00:28:50 then that's when I would start playing with colors and fonts. Those are two of the first things that I'm really going to need to decide. And for beginning designers, you always have the option to just say, I'm really going to like not use hardly any color, right? Like there's always the strategy of just going as grayscale as possible. And if you look at most of the apps and sites that you use that look really well designed, it's really not like they're going to have like four or five different colors that are all featured prominently throughout. It's usually just going to be like mostly gray scale with one color and that color has some variations on it. And maybe, yeah, you need a red for your error message or whatever
Starting point is 00:29:31 and a green for your success message. But for the most part, it's pretty simple, right? It's just those little variations. But like I said, this is the point at which I would open up Sketch once I kind of know those brand adjectives and I would do what the design community calls style tiles. And style tiles basically just means like make little bits of your UI that you're not trying to like make them look exactly like the finished product, but you're just kind of trying to suss out like, all right, if I pick this font, like if I pick this serif font, like what is going to, you know, I'm going to make a like if I pick this serif font, like what is gonna, you know, I'm gonna make a button. I'm just gonna make a button and see how that button looks.
Starting point is 00:30:10 And then I'm gonna try and address some questions like it might make me think I need this serif font to be in all uppercase because it just looks really like incongruous to have a flat, perfectly rectangular button with this fancy font. Or maybe it'll make me think I got to change my font to something else. But for a little more on style tiles, I think I have a blog post that covers it in some detail called five practical exercises for learning UI design for free. Something like that. You can just Google that. And it kind of goes, I think I give some examples of style tiles that I've done
Starting point is 00:30:43 where it's just like, you know, I'll have, I'll play with some of the type, I'll see what a header would look like on the site. And then I'll see what a, some, the body font would look like on a text page. Like say it's the about us page or the contact page. Oh, or speaking of contact page, it's like, you know, most sites need to design a form, right? So I'm going to, I'll just try putting a few form components together. And I don't mean to say that the whole purpose of this is to like create kind of your design
Starting point is 00:31:08 system or your design library. It's not about like making every component in advance. It's more about just trying to get like little bits of interface that you think you might actually use in the real thing. So here's an example. I'm on that blog post that I was just mentioning, the five practical exercises for learning UI design for free. And one of them is style tiles. And if you skip to that, I show this one that I made for a company, I don't think
Starting point is 00:31:35 they're around anymore, but they're a Y Combinator company a few years back called InstaVest. And they were in this investment company. And they had a unique way for allowing users to invest in stocks. And so, like a couple of the things I was playing around with for style tiles were like, I have this little chart widget where I have like a line chart on this dark blue. And then I had like just a couple of colored rectangles to play with, like what colors might look good together. Since it was a site related to finance, I was like, oh, maybe we'll go with a green, right? Like a green has strong financial connotations, especially in America. And then I had a couple things where I just put like little bits of text that may very well appear on the site, but it was like real copy from the site. Like I put,
Starting point is 00:32:18 find world-class investing ideas or make money twice on your best stock tips. Those were things that were kind of relevant to the business. But the point is, like all that stuff that might really appear on the app or the site, I want to just start playing with those and kind of feeling out like, is this giving me the brand that I want? Is this giving me, is this making me feel kind of the adjectives that we've agreed that one should feel when they land here? It's interesting how you use the, obviously we're talking about adjectives here and then they, they key off of emotions. And I think that people often forget
Starting point is 00:32:49 that there's an emotional reaction to every, you know, user interface and, you know, that you encounter, whether it's in the real world or in the digital world, there's some sort of emotion that you kind of get. And I like how you've said and prescribed to begin with the emotional things, which are the attributes. Yeah. Yeah. I mean, again, I'm like so worried putting that advice out there because it's like, who's going to really want to follow that. But if you're working with a team, I think it's kind of a good thing to settle on some of those brand details ahead of time. If it's just you, you might actually have a sense of without even needing to like label it with specific adjectives. You may have a sense of the brand that you're trying to go for but yeah let's try an exercise real quick so since you've used chintal.com a couple times as your examples um i have here in front of us
Starting point is 00:33:34 our brand guidelines and i'm on uh page two where we have our core attributes and our core attributes when we kind of did this same thing prior to design, we sat in a room, figured things out and we said, okay, we are hacker, we're real, we're open, we're caring, we're steady, we're curious and we're fun. Do you think what you see today represents those words? And I can see them again if you want. Yeah. So when I just popped up in your site, I was like developer oriented, modern, not casual per se because i don't think i've seen anything that's like how you doing buddy but like just a and not laid back i don't
Starting point is 00:34:13 know not um not too uptight i would say like yeah kind of developer oriented modern and not uptight that's that's what i see boiling out of that but But so I want to compare that again to the list that you read. So I'll say it again. Hacker. Definitely. Yeah. Open. Okay.
Starting point is 00:34:29 Caring. Steady. Curious. And fun. Yeah. So do you think we delivered? I think so. I mean, there's a couple where I'd be like, what?
Starting point is 00:34:40 Like, what exactly does that mean? Like the open and the curious. Right. Yeah. Curious is definitely more of the one where you're like, eh, it's a bit ambiguous. Like what does curious really mean? Yeah. Right.
Starting point is 00:34:50 But I don't think it's a problem to have that kind of stuff in those brand guidelines because it might apply to plenty of other stuff besides just the visual design. Right. What I like too about your idea of this, the style tiles example, is that it gives someone a chance to take a micro version of the ending thing and begin to experiment in small achievable ways and then they're also able to present those to other team members and or themselves later on if it's a single single person project but let's just assume you're in a team of a common development team whether you're
Starting point is 00:35:22 in a large business or not, they usually break them up into units. So they tend to be between four and six people, maybe a little bit bigger than that, but generally four to six people, you got a product owner, you got a couple of developers, you got a designer, you got potentially a copywriter and UX designer. Maybe somebody's doing both of those things or straddling a couple of those titles, but those are roughly the breakdown. So even in a team like that, you can roll out style ties or some micro version of portions of your interface and begin to feel good about the direction you're taking. Oh, for sure. Yeah. And that's like, I mean, that's like the biggest thing
Starting point is 00:35:57 or one of the biggest things with working on a team, at least for a designer is kind of like sinking those expectations. It's always the worst if you're designing with a group to put a bunch of work in and be like, this is perfect and I love it. And also I will present it to them after it's totally done. And then you present it to people and the rest of the team's like, that's not what we had in mind at all. It's like, that's the worst feeling. So, something like style tiles definitely helps avoid that it's like you know you can sit down and in half an hour come up with some of the like first stab attempts at brand adjectives and then an hour after that the designer can waltz back and say hey guys look what we got
Starting point is 00:36:37 here what do we think of this is this kind of what we're thinking and people go oh yeah you know you get then you get the awesome reaction this is exactly what this is cool it's like coming to life already and all it took was one hour and one one 20 minute session of talking about your feelings i like to when you lay out the fundamentals the colors number one because i do believe even though you say later on in in different uh in different examples you share you know black first. Well, I think that was in your seven rules, uh, viral posts from 2014, but in your fundamentals of user interface design, the first thing is color. And I think that that may be, you know, coming after you've made some choices potentially, but color being a key thing, because that is the very first thing that conveys emotionally, for example, your, um, your example of, let me go back
Starting point is 00:37:27 to it here real quick, uh, InstaVest, right? So this one here, if I can see correctly, it seems like green was chosen probably because it dealt with money or finances and green obviously is the color of most money or at least the underlying core color. And then you mentioned social networks earlier about trust and things like that blue being used there. So there's, there's certain places where color is sort of even pre-decided for you, you know, because of just life,
Starting point is 00:38:00 you know, like there's just certain things that says, Hey, blue is best used here. Green's best use here. If you want to, you know, you mentioned like there's just certain things that says hey blue is best used here green's best used here if you want to you know you mentioned uh like error messages red well you're not using green for error messages because that means go my son just told me yesterday when we were driving hey dad red means stop green means go so i mean that's even a near three-year-old gets that yeah no it's true i think the color is definitely one of the first things that
Starting point is 00:38:25 kind of conveys like hey you as a user as a viewer what should you be feeling i'll tell you um and it's funny that you mentioned it's just decided for you i can't like this is kind of what i mean by um it being not objective but also not quite as subjective as you might think. Like the real fun comes when you say, all right, here's the color that like is preordained for us to use. Like if, oh, we're launching this big social network, the preordained color is blue. Oh, we're launching this product that's exclusively for women. The preordained color is pink. Oh, we're launching a bank. The preordained color is green or whatever. And then you say, how can we twist that? How can we come up with a little variation on that? How can we do something that's not going to be exactly what people expect? So, it's like, take the pink example,
Starting point is 00:39:13 just because you're working on some product that's just for women. Like, if you do something that's just pink, you're like lost in the crowd of other pink products, right? And it's like, well, maybe you could do something that kind of captures that you're trying to attract a market of women, but not just with the color. Maybe you could use like some like watercolor or floral imagery or something like there's just other things that have feminine connotations besides that pink. And maybe your brand color could actually be like, I don't know in in this case but maybe you're just using a lot of like whites and light grays and then some pastel stuff um or with you know with the with the bank yeah maybe you think oh we need green or something but there's plenty of banks that have you know explore like light blues i was just on um simple simple.com they're like a new banking app and
Starting point is 00:40:03 they've got kind of this almost teal, light blue sort of color. And it's just a cool take. It's like, okay, I see what they're going for, but they just twisted it just a little bit. They're just playing with it. And that's, yeah, like I said, that's kind of where the fun comes in, I feel like.
Starting point is 00:40:17 And obviously most designs is made of content, not just simply images, but actually words. So the next choice would obviously be topography and the importance of it. And that kind of plays into white space, even because of like things like letter spacing or kerning, or even, you know, how thick or thin the font might be, things like that. So why do you think, I'm assuming you think this, but why do you think typography makes or break a design?
Starting point is 00:40:48 Oh man, now I have to decide whether or not I agree with that and then answer it. Let's start there. Do you agree or disagree? And if you disagree, why? You know, there's like, it's kind of this design truism that people say, web design is 90% typography. And I think my answer to that is it can be. Like, you can make a site that's just incredibly text-based. You can also make a site, and this takes maybe in some sense more skill. I don't know. You can make a site that relies on just like astounding imagery and a bunch of cool colors
Starting point is 00:41:22 and just uses the default system font, right? And looks perfectly fine and no one would ever complain about the typography. So, yeah, maybe I would lean away from the statement that type does make or break it. I think type can make or break it. Oh, I like that. Okay. Yeah. Well, you like that. I'm just getting wishy-washy here. I can be swayed. I'm digging it. I will say that one thing that blew my mind when I first started designing was the degree to which using a really good font was just like a cheat code for making your stuff look
Starting point is 00:41:55 nice. That's true. Yeah. Yeah. And I had no idea. I thought, oh, it's kind of like fonts are like five of one, half a dozen of the other or something, you know, like there'd be differences, but they'd be so slight it would hardly even matter and then it turns out like i've i've definitely worked with a couple students on some of their designs and i'll be like let's just sub this font
Starting point is 00:42:13 for this right and then all of a sudden they go whoa this looks so different um and uh i list a couple of those in the the seven rules piece just like some of the free go-to recommendations that I have for what typefaces you should be using. But almost anything that you hear of as being too trendy of a font, I think Proxima Nova might be kind of the biggest offender from the last three years or so. Ooh, burn. I used that one for a little bit. Yeah, well, it's a fantastic font. It's just like try and make just normal text look
Starting point is 00:42:45 as good in some other font. And of course, it depends on exactly the style you're going for, right? If you have something that's more scholarly, then maybe you want a serif font or whatever. But I think most clients these days, most projects that I've worked on just kind of want something that's generally clean, simple, modern, fresh. And it's like, well, Proxima Nova is not a bad option. Like there's definitely a reason why people say it's trendy. So yeah, type can be important with that. In part two, you say only use good fonts though. So what does that mean?
Starting point is 00:43:18 Well. Are we layering the onion one more layer? Is that just, it's in your rules. It's rule number six. So yeah, but well well that's kind of what i'm saying is like when you use really good fonts when you use the highest quality you know the top one percent of what's out there it is just going to be this cheat code where you're going to look like you're doing a better job designing than then you might actually have the
Starting point is 00:43:39 skill set to back up um it's like take some default web font like a Tahoma or whatever. Something is set in Tahoma, it's just, it's going to be very tough to make it look fresh and interesting. It's just going to scream default to everyone who sees it. And it's very tough to get away from that connotation. We talked, I mean, like we talked about Freight Sands and the, was it Santa Sands that you've got going on? And like both of those seem like really good ones where you start working with those and something that looks kind of boring, it's going to all of a sudden, it's like,
Starting point is 00:44:09 Oh, okay, this is cool. This is modern. But can I put an addendum on this use good fonts thing? Yeah, please. The other thing that blew my mind in addition to just like the importance of
Starting point is 00:44:22 using these top, top quality fonts was also how little of design was actually picking fonts. Like you pick fonts once for a project, presuming you just have one font, maybe you have a couple. So you pick like your two or three fonts. And then all of the rest of the visual design work that you're doing is like styling text. And so as far as typography goes, I didn goes, I totally underestimated how important styling text was. And this is, again, the sort of thing
Starting point is 00:44:50 where if you're just like Googling around, looking for design advice, you'll find so many articles on pairing fonts or evaluating what font is good for body copy. You'll find virtually none on like practical text styling tips. And these would be things like beginning designers, in my experience, almost universally underuse uppercase. They almost always use thin
Starting point is 00:45:13 weights of fonts too much and bold weights of fonts, not enough. So just little things like that. And then you can even break it down until like buttons are going to be far more uppercase than you might otherwise expect. Or when you have lists where there's kind of a key value pair of something like this product weighs this much and costs this much and the height is this and the length is this it's like styling lists and key value pairs like that there's different tips and tricks that go into that and there's just all kinds of little text styling stuff that comes up and to me like that's kind of the the real skill that you need to hone if you're trying to get into design it's like you pick fonts once and then for the rest of that project all you do is kind of style text at least typography once he was.
Starting point is 00:46:13 This episode is brought to you by our friends at Rollbar. Check them out at rollbar.com slash changelog. Move fast and fix things like we do here at changelog. Catch your errors before your users do with Rollbar. If you're not using rollbar yet or you haven't tried it yet they have a special offer for you go to robor.com changelog sign up and integrate rollbar to get 100 to donate to open source projects via open collective
Starting point is 00:46:38 once again rollbar.com changelog So after you've got good color in place, good topography, you know, the next logical place is like, how should we lay this page out? You got things like what's important, what's the hierarchy, you know, where do buttons go? Where does the footer go? We obviously know where that goes right at the bottom. So there's some easy choices made for you already, but it's kind of like a sandwich, right? You know, there's a bun on top and there's a bun on bottom and you got to choose your ingredients. What do you put in the middle there? So is that layout? What is layout?
Starting point is 00:47:26 Yeah. Oh man. Now you're getting to the tough questions here because like people will email me and they'll say, Eric, I really want to improve it. Layout in my designs. And I can't quite crack the code of what they mean because everyone means something different by it. And I actually have asked, what exactly do you mean?
Starting point is 00:47:41 I've never gotten the same exact answer twice. Layout means a lot of things to a lot of people. And if you kind of Google around for design advice, you would think that for most designers, layout just meant like what 12 column grid system you're following. And if you have the golden ratio worked in somehow. That's not design? Or I mean, that's not layout then? This whole time I was wrong. Yeah. I mean, in some sense, I think that's layout uh but it's not the it's not the tactical right like it's not the tactical side of layout if you go and put your stuff in a grid um i mean grids can be a nice way to kind of format content by default but they
Starting point is 00:48:16 they tend to get over i think overused and overhyped in terms of how powerful of a design tool they are and it's more important just to be good at aligning your content really well. So I have another blog post talking about this. It's just called Why Beginning Designers Don't Need to Learn Grids and Other Design Dogma. And there's a couple other things that I, a couple other names that I name in this post, but Grids is one of them. It's just like kind of the go-to talking point when designers talk about layout. I think what it should be instead, if you really want to get good at layout, it's not that layout is some one skill that you just
Starting point is 00:48:58 like develop directly. I think it comes more from developing all these other little sub skills. And then as you develop them, your layouts are going to get better. So like, here's a couple of those things. One would be, well, designers call it hierarchy. But I think that's just sort of a fancy word for kind of what pops and how much. And in general, any design you're working on, it's like you want the most important thing on the page to pop the most. You want it to be the first thing the user sees.
Starting point is 00:49:27 And then the second most important thing on the page should pop the second most and the third most, so on. And just kind of go on down the line. And if you do that, then like you have your users, like you're neatly corralling their attention through your site or through your app. So they're looking at exactly what they should be looking at. And the moment they decide, hey, like, I actually want to try and see I want to find this feature, I want to find the search bar. It's like the moment they look for the search bar, they can find it. But it wasn't like screaming out to them and distracting them before they were
Starting point is 00:49:57 looking for it. Like that's good hierarchy. And I feel like that's also kind of the stuff that makes for good layout. And then maybe part of the other side of the coin is just keeping things really neat, aligned and well spaced out. I like what you said there about the search bar, because it is important to find if you want to find it, but you don't want it to be like, oh, you must search to navigate this site because that equals potentially a poorly designed site because you've got your you know your importance off off key because hey visually i'm not finding what i think i should find so trigger words aren't jumping out at me i'm a frustrated user i think i should search
Starting point is 00:50:36 right like if yeah you know but when you if you do get frustrated it should be hey don't make me think you know steve Krug, where does search tend to live at? Up and to the right or somewhere north, right? And it tends to be a little subtle until you interact with it. And then it's like, okay, I'm definitely in some sort of search mode. For sure. Yeah. No, that search does kind of work as a good example because it is something that a user thinks, I need to find this. And they might be thinking that while they're at any other point in the page. And then they look for look for that suppose like a main menu overall navigation could kind of be the same sort of thing it seems though that it can take a level of experience
Starting point is 00:51:16 and i don't mean smarts but the experience meaning you've done it enough you've gotten some wisdom having had some bloody knuckles along the way that layout is actually kind of hard you've done it enough, you've gotten some wisdom, having had some bloody knuckles along the way, that layout is actually kind of hard. You've got to try several times and probably get it wrong lots before you truly begin to hone your layout skills. Yeah, that kind of rings true. I guess I would say when I look at a design, there might be things that, let's say it's one of my students' designs or something, and I look at that and they say, oh, I've got these layout issues with it. But to me, I'm kind of seeing those as being issues of hierarchy or issues of alignment. Um, and so like, yeah, if there are a bunch of sub skills to lay out, then it would make sense that it, that that is something that you just kind of got to turn through, try and like improve slowly, bit by at so that would make sense how do you get to a
Starting point is 00:52:06 good design then so if you've got color typography layout you're kind of fleshing all those things out you kind of feel good about it at least you know you've gotten some colors chosen everyone feels good about that you've gotten some typography you've experimented with and it works in all the areas you need it to work so you've got that locked down and you've got a good layout groove what's what's next to kind of wrapping it up into in you know in quotes a gorgeous ui yeah that's a good question um i think in some sense like you're just you're never done with the fundamentals like there's always going to be little things that you realize you could have improved upon throughout the site. And so there's little tweaks and stuff that are going to just continue to keep happening.
Starting point is 00:52:50 But I think you're like asking maybe more about something like what are kind of the finishing touches to a design? You know, once you've decided on the font, once you've decided on the colors and you've, you know, say you've got a bunch of the pages even fully designed in Sketch or whatever app you're using. I think I would circle back around to brand. And then also at that point, I would just be kind of like really trying to make sure with the team and maybe even with users too, depending on what exactly the product is. Like, is this coming off the way we want? It's always the best. Like when the project is done and people go, yep, this is like, this looks exactly like what we were hoping for. We didn't know what we were hoping for,
Starting point is 00:53:28 but now that we've seen it, this is it. And if you're not there, then it's just, like you said, kind of this iterative process of saying, well, where do we go astray? And you can be analytical about it. What is the goal that we had that we're failing to meet? What is the brand adjective that we came up with that is not being evoked in our, in our users or in our own minds when we look at this? So that's, that's kind of where I'd go to from there. Is there anything in this process that you have to get right?
Starting point is 00:53:58 Like if you had to pick one, suck it four, but the fifth one, you got to get right. Is there, is there one thing you have to get right? Or is it just just like sort of if you don't get it all somewhat right field design oh stop the worst this is like someone's gonna quote me on this and i don't even know i'm like totally thinking on the fly here um i would say that if you only could master, say, one skill out of all the things we've talked about,
Starting point is 00:54:26 kind of the layout related stuff, the typography related stuff, the color related stuff, you can basically do with a super simple layout and drop all the colors and just have a site that's typography, right? You can just have words on a page. And if you can do that really well, then yeah, you can make it shine. I don't think the same can be said of color. Um, or the, you know, I don't even think the same can necessarily be said of layout. Like you might get, if you're good at that layout and that hierarchy and attracting users attention in exactly the right way, it's like, you may have a very usable site. You might have an app that no one files, um, support requests and, uh, everyone knows where the features are. And it just works really great for your app and for your users. But it seems tough to believe that if you haven't at least
Starting point is 00:55:12 mastered some of color typography, that you're really going to be able to knock it out of the park. So I think in that sense, typography kind of stands alone. So the reason I want to ask you that question wasn't so much to get you a quotable moment, although I like that. It was more so to give someone that first step because I don't disagree with you one little bit. I think that you're spot on. I think, and I'll allow the world to quote me as well. And if you're wrong, then I'm wrong. And so we'll be wrong together. But I do agree.
Starting point is 00:55:38 If you can get, you know, just the most basically out left aligned, you know, there's nothing special about this design other than with the browser defaults to you or common design tools default to you. But if you get, you know, things like headings, sizes, weights, italicies, different elements in topography, down pat, you can have a pretty good looking site. And if you choose the right font and all the other things you begin to hone and master over time, you don't have to worry about shapes, colors, or even icons, you know, anything besides the words on the page. And that can deliver enough for you. That could be step one.
Starting point is 00:56:21 And once you've gotten that, have enough, you know, enough feel good to yourself to take that next step of saying, hey, let me master the next thing. Yeah. Now, well, all right, Adam, I'm going to hedge a little bit here because maybe that's what's necessary to kind of go from the good to the great if you just, if you want a great site with just one skill. But I will be honest that most sites that beginners send me, most of their designs, whether they're apps or sites or whatever, a lot of times the bigger issue in kind of going from bad or moderate to just okay slash good is alignment.
Starting point is 00:56:58 And just I think we like seriously underestimate the degree to which the things we view as well-designed are incredibly aligned. All the elements on the page are basically going to be aligned with, with at least one other element, like every single thing on the page. Um, and this counts centering as a form of alignment, but I think that's one thing where maybe that's like the thing that's really knocking things down into the bad category easier than some of these other things. But typography's like yeah i still stand by that as being maybe the one where if you can master that you can get something that's truly great even without mastering the other skills yeah so there we go
Starting point is 00:57:34 we've been talking around a couple of the different things you've been doing to to lead and teach design uh you got a pretty interesting course you've got going on. What is this course called? Is it called Learn UI Design? Is it that simple? Learn UI Design? That is the name of the course. Learn UI Design at learnui.design. So I tried to keep it easy there. It's on the nose. And actually, you know, this all came from Jared originally logging a color palette generator that you had put on the same website. It was pretty interesting.
Starting point is 00:58:06 We were able to get, you know, for the design impaired, so to speak, to get to choose one color and then be able to get a whole host of colors from that. So that's kind of where things began. But this course we learned about as sort of a follow-up email to, you know, as a thanks from you to Jared and us saying, hey, thanks for sharing this palette generator. By the way, I've got this course and I'd love to share with you all some interesting tips for developers to get better design, tactical design advice, so to speak. But you kind of go much deeper in this course. Can you
Starting point is 00:58:44 kind of tee up that or what's that about? Oh yeah, for sure. So Learn UI Design is a video course. It's got about 40 different lessons, 20 hours of content. And it's really just the full run of tactical design advice. It's exactly, it's like the same sort of stuff that we've been talking about here, but in a format where you kind of watch over my shoulder as I design sample projects or go through sample designs to talk about different concepts, all the fundamentals, things like alignment and spacing. There's a whole unit on color, a whole unit on typography, a unit on process. And so there's just, there's tons of stuff there, but it's basically for people who are maybe developers, UX designers, maybe graphic designers, too. But someone who says like, yeah, it's going to be worth my while to have UI design be this like career skill of mine. You know, maybe you're not necessarily looking to call yourself a designer, but you know that this is going to be something that you just want to be able to do competently. And yeah, so all students get lifetime access and that includes all the updates and stuff that I've been making.
Starting point is 00:59:49 And there's also a student community on a Slack channel. And there's, I don't remember if I mentioned, but there's a bunch of homework assignments, which is a pretty significant part of it. It's kind of just do at your own pace, but they're really just a bunch of exercises to kind of focus you in on mastering the skills that the different videos talk about. So it's the whole deal. Yeah. Learn UI dot design. Are you, uh, this homework, are you grading that homework? Are you looking over this homework?
Starting point is 01:00:13 Is it interactive? Yeah. So I'm not grading it per se, but I am trying to give feedback to everyone who posts their homework assignments to the Slack channel. Or if you're, I guess, if you're afraid to do that, you can email me or whatever. But that's huge too, because in the real world, like a lot more design happens post feedback rather than pre feedback. And I feel like almost everything we've been talking about is kind of pre feedback stuff. It's like getting started on your project,
Starting point is 01:00:41 just starting to pick the fonts, just starting to pick the colors. And once you get a little feedback on whatever it is that you're working on, oftentimes it's like your ability to run with that is almost more critical than your ability to come up with something good in the first place. So, I really value, it's like, I'm not going to grade students. Like they're submitting stuff. They're trying to learn this skill, like huge props to them. I'm not going to give you a D or an F or an A or whatever, but I will give you some feedback and a lot of students will come back and rework the assignment and the changes can be huge. And I think that's where so much confidence is built. It's really
Starting point is 01:01:15 cool. You need that interactiveness. I think that's why I asked you if that's how it was, because especially when it comes to design, if you give someone homework that is visual, then you should have some check to see that they're on the right track. And that way they don't take away what they assumed you meant. They take away what you really did mean and they can kind of be corrected. You know, something else that kind of occurred to me, too, as I was looking over, you know, your blog, your newsletter, which are well-produced, great content. I love your style of things. It occurred to me that there doesn't seem to be a particularly good on-ramp for up-and-coming UI designers.
Starting point is 01:01:57 And as you mentioned, you may not make, or this person or these people who take this course may not particularly want to become user interface designer, but simply add one more skill set to their, you know, their expanding belt of skill, so to speak. It didn't seem like there was a good on-ramp, and maybe I'm wrong, and maybe, you know, there's more since you're in it. Would you agree with that? Is there any other, you know, like pretty cut and dry, if you take this course
Starting point is 01:02:23 or if you, you know, read this book, you can kind of come out with the fundamentals of being a good UI designer. Yeah, no, it's a really tough question. And I mean, honestly, a big part of the reason why I created this course in the first place and the blog and then same thing with the newsletter. It's like I just couldn't find something like that. I just couldn't find that tactical advice anywhere. So I really have tried to kind of scratch my own itch with this one. Well, even during the show, you mentioned a couple of times, maybe even from your own past, like Googling for things or finding certain articles. And it almost seems like all the information out there is sort of disparate and not, you
Starting point is 01:03:00 know, consolidated to one area or like, here's a path from zero to UI hero kind of thing, you know, like that, that path. And it may not be the silver bullet of it, but you, you know, almost through this conversation here, the fundamentals, color, topography, layout process, like if you get those things down and then you take your seven rules for creating gorgeous UI, like where light's coming from, you know, beginning with black and white, doubling your white space, learning how to overlay text over images and making text pop and choosing only in your words,
Starting point is 01:03:30 only good fonts. And the last one, which we didn't even talk about, which might be a good show closer is like steal like an artist, you know, like getting those things down will help you take that very next step to just adding either UI design
Starting point is 01:03:43 as your title and or just your next skill to to add to your belt yeah yeah exactly what do you think about the this last one we really didn't cover much still like an artist still like an artist which that is a title that I stole from the name of a book called steal like an artist so I guess that's a cliche right yeah yeah all apologies I think Austin Kleon is the name of the author. But yeah, just the whole point with that was like, especially when I was just beginning with design, it just really struck me how much going and looking at what the best designers
Starting point is 01:04:17 were doing and then trying to imitate that, how much that helped. Like, that was huge. And I'm certainly not in favor of like lifting a design wholesale. But at some point when you steal from enough places, like when you steal from 10 sites that you love, that's no longer called theft. It's just like creativity. Like that's how creativity works. And at this point, I'm sure I'm stealing, so to speak, from other sites and things that I've seen. And I may not even remember seeing. I just remember tucking it away in my memory as that being some good idea. Oh, I could use this font to do this. Or, hmm, like maybe if I do this with
Starting point is 01:04:52 the colors, it would work out nicely. And so, I just really encourage beginners to the point of like, it's called copywork. And there's a, I wrote a piece for Smashing Magazine on it. If you just search for Smashing Magazine copywork, it'll probably be the first thing that comes up. But it's just going and recreating a design that you really like and admire pixel for pixel. So, you just open up Sketch or Figma or Photoshop or whatever you're using and you just recreate that design in total.
Starting point is 01:05:19 And that will teach you so many things if you try and imitate it perfectly. If you try and use exactly the same fonts in exactly the same positions with exactly the same letter spacing and sizing and whatever, you're going to learn all these things that the designer is doing that you never would have thought of. And I give some examples in the article too. But like, maybe that's a bit odd to recommend because it seems so much like plagiarism. And obviously what I'm saying is not like put this in your portfolio. Use it as an exercise, not as a funner product.
Starting point is 01:05:48 Yeah, exactly. It's like, look at what's out there that's so, so good, because you can make leaps and bounds towards that faster than you think. So back to the Learn UI Design course. It's been around for, I think, a couple of years now. This is the first I've heard of it. So that's a bummer. So now listeners you've heard about it too. Um, I think it's not even open right now. It reopens sometime soon. What's the scenario here? Like, why did you choose this kind of like launch pattern? Sure. Yeah. So I've typically launched it every few
Starting point is 01:06:20 months and what I'm doing in between the launches is just making changes, making updates. But this is nice. It like definitely builds some amount of excitement. It gets all the new students kind of synced up at where they are in the homework. Like if you start the course soon after enrolling, then you'll be going through, say, the color unit at the same time as many other students. And you'll be able to very quickly and easily get feedback and give feedback on, say, the assignment that you did last week or whatever. And it's also nice for me to batch a lot of that customer support stuff because I do try and maintain client work and do a bunch of other things as well. Gotcha. That's an interesting pattern to do. I mean, it gives you time to really be present and aware with your students.
Starting point is 01:07:04 Yes. Yeah. It definitely like adds a whole seasonality to my career now, which I kind of appreciate too. It's like, oh, launch time is coming up. There's this excitement, getting more emails about it. And then there's this big batch of new students and there's tons more excitement. And then, you know, things start to peter out and I get a little more other work done and then it starts over but yeah the next uh the next enrollment period starts on february 13th so um look for that good deal i love it i mean i think as people question you know it's 2019 how do i begin learning ui design learn ui.design is a great place to begin uh Your blog is full of knowledge.
Starting point is 01:07:46 We've covered some of it here in this show today. You got a newsletter. Is this a weekly newsletter? How frequent is this? Oh, it's not a weekly newsletter. I don't even know if I could do that. So the way the newsletter works is, yeah, like by no means do I assume
Starting point is 01:07:59 that someone's going to like, just want to sign up out of the blue for this UI course. I really want to put out a lot of good free advice on UI that people can use. They find useful and say, okay, cool. Like what else has this guy got? What else does he have to say? And the newsletter and the blog are really those two things. So the blog's got a whole series of different topics, articles on color typography process and so on. a lot of the stuff we've covered here and then the newsletter uh a lot of times i'll send out maybe when you first sign up you're actually going to get a couple like best of posts including one on alignment i think you get that
Starting point is 01:08:34 one like the day after you sign up so um that one is is really worth reading in my opinion um but uh you'll get like kind of this best of sequence. And, and then when that runs out, it's basically however often I'm updating the list. I try and send out something about once a month, but I'd really rather send out something that is long and in depth and super tactical and, and people write me back saying, Hey, that was awesome. And I use this today and it made my designs better. Um, I'd rather do that, you know, once every two months, then send out something once every week, that's just short and pithy and, you know, not as, as, as practical or whatever. So I really do try and
Starting point is 01:09:13 take care to make it be the sort of newsletter where people like, they say, wow, like, I don't like newsletters, but I like getting this. Cause when I see your name in my inbox, like I know something new design tip, let me try this out. Let me, I know something good is going to be in this email. New design tip. Let me try this out. Let me examine this and swing this into my next visual project. I like that. I was reading over a couple of the quotes here. The one
Starting point is 01:09:35 at the... Which one was it? Bummer. Oh, yeah. Is possibly the best newsletter I've received since 1999. I don't know how often that person is getting emailing or whatever, but you might even made this up because it's just it's just the first name. You didn't put the last name here. So, I mean, you could be making these up. Oh, no, it's all real. And there's more, too.
Starting point is 01:10:00 I'm just kidding with you. We know you're not doing that. But I think that's that's why I was a frequency, because, you know, hey, when you ask somebody, hey, give me your email. I promise to send you a newsletter. My preference personally is I want to tell them, I want to promise them the frequency. That way they know the expectation. And then that way it gives us something to deliver on. And that way it's clear. It's like, hey, I agree.
Starting point is 01:10:25 Let me give you my email. Sign me up. Send me a weekly tip or something like that or whatever the frequency is. That's why I wanted to ask you that. Oh, yeah. No, that makes sense. I make far fewer promises about the frequency.
Starting point is 01:10:37 I really try and have the only promise be, it's going to be good. Amazing. If you really want to get better at design, you'll want to open every email. So that's what I go for. Eric, uh, in closing, what, uh, is there any advice you want to share in any closing thoughts to, to share with the listening audience before we tail off? Oh man. Yeah. I mean, just kind of the same stuff that I've repeated. Like if design has seemed so
Starting point is 01:10:59 inaccessible to you, try and view it as something that you can analyze your way to a better design and try and try and think about what else is going on there that in the sites and the apps that you like because it's so possible it's like it worked for me like i can do it you can do it too okay so yeah that's all good deal eric thank you so much for your time man appreciate uh appreciate you sharing so much wisdom with us it was good thanks for having me adam all right that's it thank you for tuning into this episode of the changelog if you enjoyed this show do us a favor go into itunes or apple podcast and leave us a rating or review go into overcast and favorite it tweet link to it share with a friend and of course
Starting point is 01:11:38 want to thank our sponsors digital ocean get primebar. Also, thanks to Fastly, our bandwidth partner, and to Fastly.com to learn more. We're able to move fast and fix things around here at Changelog because of Rollbar. Check them out at Rollbar.com, and we're hosted on Linode cloud servers, linode.com slash Changelog. Check them out. Support this show. This show is hosted by myself, Adam Stachowiak, and Jared Santo. The edit, mix, and master was done by Tim Smith, and the music is done by the one and only Breakmaster Cylinder. If you want to hear more shows like this, subscribe to our master feed at changelog.com slash master.
Starting point is 01:12:13 Or go into your podcast app and search for ChangeLog Master. You'll find it. Subscribe, get all of our shows in one single feed, as well as some extras that only hit the master feed. Thanks again for tuning in. We'll see you soon. I'm Nick Nisi. This is K-Ball. And I'm Rachel White.
Starting point is 01:12:44 We're panelists on JS Party, a community celebration of JavaScript and the web. Every Thursday at noon central, a few of us get together and chat about JavaScript, Node, and topics ranging from practical accessibility to weird web APIs. Jared, I just have to ask a very serious question. When you're using that operator, do you actually blurt out, bang, bang? If you're working in an office, would everybody just look at you? I don't blurt it out, but I definitely say it in my head every single time. Join us live on Thursdays at noon central. Listen and slack with us in real time or wait for the recording to hit.
Starting point is 01:13:13 New episodes come out each Friday. Find the show at changelog.com slash JS party or wherever you listen to podcasts.

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