00:00:10 ◼ ► So for today I wanted to talk about, sort of at a high level, what I'm going to call the difference between intuitive and I guess procedural or structural or computational design.
00:00:23 ◼ ► And this is coming out of a really fascinating experience I had this last weekend that I just kind of has been stuck in my mind ever since.
00:00:33 ◼ ► So in Widget Smith, I'm coming up with what I'm going to call like the 2022 spring collection of colors and themes.
00:00:42 ◼ ► So I want to kind of, one of these things that I've decided I want to do is kind of have this rolling.
00:00:46 ◼ ► Sorry, can you imagine like going back three years and telling your three years ago self that you were going to say that sentence?
00:00:56 ◼ ► It's like, you know, this is my spring collection that I need to debut at a fashion show or something.
00:01:02 ◼ ► Yeah, no, it's, and this is exactly that unbelief that I would have felt in that time is exactly the topic that I want to talk about because I don't think I would have thought about myself as someone who could have come up with a spring collection of 2022 colors.
00:01:23 ◼ ► Like, that would be just kind of overwhelming. And I think in a lot of ways it's overwhelming because I don't think, you know, I think of myself as someone who's particularly fashionable or has a sort of that eye for design or whatever those kind of general phrases that I feel like very often are just applied to people in the design or graphic design or any kind of those design areas are the artists or whatever.
00:01:48 ◼ ► Well, in all fairness, you do have one small step above most nerds like us. You know, most nerds like us, we are so afraid of using color that we just wear like black shirts and jeans. That's it. Like just black. Black is our only color. That's all we know how to use.
00:02:03 ◼ ► You at least follow the iOS design. If you have a tint color, you have one additional color that you trust yourself to wear and that is underscore blue.
00:02:13 ◼ ► Yep. I have found a color that works well for me and that is it. But yeah, it's, and I think, and that reticence, which you're saying in terms of color and clothing and all kinds of things, I think is unfortunate because it limits what we can do or even moreover, and what's more important probably is that it limits what we feel capable of doing or projects that we want to undertake.
00:02:39 ◼ ► And even though I've been doing this a long time, I still feel limited in that way that I don't have an intuitive design sense in quite the same way.
00:02:48 ◼ ► That's what I've been working on with the spring collection is I went through and tried to work out if I could build a system in code that I could give it a color and it would give me a color scheme that matches that.
00:03:03 ◼ ► So I give it a color and then the way that my system works, so if you want the mathy part, so like I take that color, and then I give it, I work out what the strict complimentary color is of that color and so the complement of a color is essentially what would be opposite of it on a color wheel.
00:03:19 ◼ ► And these are called complimentary colors because they tend to look good next to each other. So you'll have like yellows and blues might be next to it will be complimentary they'll tend to look good to each other, for example.
00:03:34 ◼ ► And what I do is I take that color and I'm just doing the straight compliment will lead to things that are often very not legible, because you're just picking a random you're picking a color at random and then what do I do, well, I just applied an algorithm to work out what is the closest legible color to the color that is the compliment by essentially taking the relative luminance between the two colors, and this is all just like turning them into, you know, huge saturation luminance.
00:04:02 ◼ ► I take the color and I add it to the tuples in code, and I either work out what do you know do I need to make the foreground color lighter or darker based on the background so if the background was a dark color than a light in the foreground until there's enough contrast between them for to be legible, or if it's a light background to make it darker.
00:04:19 ◼ ► So I built the system, and it actually worked. It actually is I think is really cool and I was encouraged how I kind of understanding some of these basic things of color theory, in terms of that the complimentary colors tend to look good to each other, that you need a certain amount of relative luminance contrast between two colors in order for it to be legible.
00:04:40 ◼ ► I was able to come up with the system that I could give it a color and it would give me a theme.
00:04:45 ◼ ► And I did that and I found a couple of, it was a very, the very sort of slightly surreal thing was sitting there reading a bunch of like fashion blogs and articles about what are the kind of the cool colors for spring 2020, you know, so this is in the fashion industry or generally you know the people who do color forecasting and things so these are the general colors and so I was able to find my starting points from kind of picking out the colors that I thought looked nice or were interesting or create kind of a varied palette.
00:05:19 ◼ ► And then over this weekend I was having a conversation with a friend of mine and it turns out what she her profession is she is a text, she works in the textile industry as a color chooser as someone who just sort of designs.
00:05:33 ◼ ► You know things like we might be used for like embedding for example so like choosing what color the bedding should be or in sort of in clothing what color the textiles are so she works in the textile industry and specifically she has a lot of expertise in choosing colors.
00:05:47 ◼ ► And it was fascinating because I showed her, you know, sort of my tool. And in general she's like yeah it works like what you're doing is correct, but then as a bit of interesting thing like she would point to a color and then she would give an alternative just intuitively of like, hmm, I think this one, have you thought about using a lilac say, which first I had to look up what color lilac was.
00:06:09 ◼ ► But once I knew what worked out what color lilac was and I put it in it's like, yeah, no, that actually looks really good. And we had a few examples of this where it's like, she had an intuition for how to do this that I don't have that I couldn't tell you if you show me this like, you know, dark plum purple, what color should go there, like, I don't know.
00:06:28 ◼ ► I don't have that intuition. Whereas this was something that she's developed as a skill in her profession as well as potentially even just something that's, you know, a sort of a personality or an interest.
00:06:40 ◼ ► But I was able to get to this a good result by learning some of the fundamentals and then building this kind of, you know, structure upon this and I feel like there was something in that that I was just found really encouraging that rather than feeling overwhelmed or stuck when I'm facing a design problem that feels like, oh, if only I was a designer if only I had that intuitive sense of design, then I could solve this instead it's like, if I take a step back, try to get to this point where I'm like, oh, I'm going to do this.
00:07:09 ◼ ► If I take a step back, try and think of what are some basic rules or building blocks that I do understand and that I can work with.
00:07:18 ◼ ► Is there a way that I can generate the result or generate a good result and understand that my generated result may not be as artistic or as clever or novel as the intuitive result, the result will be good enough and be enough to allow me to do things that are kind of cool.
00:07:36 ◼ ► I think that experience was just really fun and it's cool to think that I now feel, to your point earlier, it's like, I now actually feel like it's really kind of exciting to pick a spring collection and I look forward to picking my summer collection and my fall collection.
00:07:49 ◼ ► Because just by working around some of these computational tools to help me, now I feel like I'm empowered to do it.
00:07:56 ◼ ► I have actually come a long way with my colorism as well as part of my general efforts to improve my own design skills beyond what looks like design by programmer and into what just looks like regular design.
00:08:16 ◼ ► I have come a long way in terms of being able to use color somewhat and I use many of the similar strategies.
00:08:26 ◼ ► I am not good at being able to invent off the top of my head, like, "Hey, I bet this could use a mint green."
00:08:35 ◼ ► But I am finally developing the skill of looking at something and saying, "This looks good and this works."
00:08:41 ◼ ► Or, "This doesn't look good and this doesn't work." Maybe that's as far as I'll ever get.
00:08:47 ◼ ► But that's enough because now I can do things like experiment with different colors and just kind of try either what other people recommend that I try or draw inspiration from other color palettes somewhere or just try what Apple says to use.
00:09:01 ◼ ► This is an area where I think we cannot overstate the usefulness of outsourcing it. I don't necessarily mean that everybody has to hire a designer to do all of their design.
00:09:14 ◼ ► My actions speak differently, obviously. I haven't worked with a designer in years directly because I prefer to do as much of this of myself as possible.
00:09:25 ◼ ► What I mean by outsource it is consult people who know more about color or who are better at color than we are.
00:09:36 ◼ ► What I've been doing recently in my redesign efforts is outsourcing a lot of that to Apple because Apple has these wonderful system colors, system red, system blue, that whole set that they added a few years back.
00:09:49 ◼ ► What's nice about those is, first of all, let me just give you some advice from one nerd to another. Never deal with RGB.
00:09:58 ◼ ► RGB is garbage for making good colors. It's also complicated with things like high gamut and everything. But don't deal with RGB at all.
00:10:06 ◼ ► What Dave just said and what I'm going to say is deal with HSB, Hue, Saturation, Brightness.
00:10:16 ◼ ► One thing that I'm very glad I did at my app is that my app uses the main tint color for a lot of things.
00:10:25 ◼ ► I also have things like a lighter version of the tint color. A lot of colors in the app are derived from the tint color.
00:10:34 ◼ ► For instance, if you notice, when Apple puts up a gray somewhere, all the Apple background colors and stuff that involve light grays, those are not pure gray.
00:10:45 ◼ ► Those involve a good deal of blue mixed in. This is only obvious when your tint color for your app is orange.
00:11:07 ◼ ► I have a basic utility function that's open source, similar to how Apple has a utility on UI color that's color with alpha component.
00:11:26 ◼ ► I have a version of that that lets you modify the hue, saturation, and brightness of any color and get a derived color from it really quickly and easily.
00:11:43 ◼ ► Instead, I'll say take the tint color, make the brightness 97% or 98%, and make the saturation 2%.
00:11:52 ◼ ► All of the colors in Overcast are all derived that way. None of them are based on "just take the system background color because the background color is too blue for my tint color."
00:12:02 ◼ ► What this enabled me to do is, in the upcoming redesign of Overcast, you can pick your own tint color.
00:12:16 ◼ ► If you want it to be yellow, you can make it yellow. If you want it to be brown, you can make it brown. If you want it to be pink, you can make it pink.
00:12:22 ◼ ► I thought that this would be a real high risk of "I'm going to break everything in the app, a bunch of stuff is going to look bad."
00:12:31 ◼ ► It turns out it works. I put this feature in beta, and I've gotten almost no reports of anything looking bad with any color combination people have picked.
00:12:40 ◼ ► Because all of my colors are derived from the tint color. So when the tint color changes, everything just looks right.
00:12:46 ◼ ► Additionally, by outsourcing that color choice to Apple, Apple has designed all of the 10 or 12 system colors.
00:12:56 ◼ ► They've designed all of those to not only be nice looking colors, like if a nerd said "System Red," what that would mean to us is "RGB 25500."
00:13:08 ◼ ► That's what that means to us. But RGB is not good for picking good colors, so get that right out of your head.
00:13:13 ◼ ► Apple has done the work to make a set of colors that not only look nice in isolation, but also look kind of nice together.
00:13:20 ◼ ► And this is something that nerds like me usually cannot create a whole palette ourselves, but Apple can and does.
00:13:28 ◼ ► And Apple's palette will change over time as fashion changes. Because color is extremely tied to fashion, and fashions change over time.
00:13:38 ◼ ► Quickly, even. It wouldn't surprise me if System Green actually changes every couple of years.
00:13:45 ◼ ► It could be that frequent, or even more frequent. It could change every year. Who knows? In subtle ways.
00:13:50 ◼ ► Because this is so much about fashion, and so much of software design is fashion, whether we want it to be or not.
00:13:57 ◼ ► And especially regarding color choice. And one of the changes I've made also in this beta is Overcast Orange, which I've kept the same since 2014.
00:14:21 ◼ ► And even just that change, first of all, no one said a word. I thought it would set people on fire.
00:14:27 ◼ ► So far, nobody has said anything about the orange changing. I don't know if they haven't noticed or if they haven't cared.
00:14:35 ◼ ► And also, even just changing the orange to be a little bit lighter, well right now, that kind of lightness is in fashion.
00:14:43 ◼ ► And so, even just that change from an old color I picked seven years ago to the new colors that Apple is saying are good for apps right now.
00:14:59 ◼ ► Just because I outsource that color choice to people who know way more about it than I do.
00:15:05 ◼ ► Anyway, we are brought to you this time by Hover. This is one of Relay FM's longest running sponsors.
00:15:16 ◼ ► Well, your business starts with a domain name. For many entrepreneurs like us, Hover is that first big leap.
00:15:22 ◼ ► They have over 300 domain name extensions to choose from, so no matter what you want to build, there's a domain name waiting for it.
00:15:27 ◼ ► And I got to say, I love their search, because the first thing I do when I go buy a domain, or when I'm starting a project, is I have to get a good name for it.
00:15:41 ◼ ► And I go to Hover for that, because they have the best search I've ever found for domain names.
00:15:46 ◼ ► They will search all those TLDs, they will give you slight variations if the exact one you want isn't available.
00:15:53 ◼ ► They also have excellent tech support if you have any questions. They are dedicated to getting you online.
00:16:06 ◼ ► Super clean UI, the management panel and everything. It's super clean and respectful of your time.
00:16:13 ◼ ► They have monthly sales on popular TLDs, so it's easy to see why Hover is the popular choice for people starting businesses.
00:16:41 ◼ ► I feel like I like too what you're saying about you take your color and then you adjust it in a fixed way that gives you a lot of flexibility.
00:16:57 ◼ ► You're not sitting down taking the system orange and then if you want the really light background or the really dark background,
00:17:05 ◼ ► you're sitting there in Photoshop dragging around sliders to find just that right perfect color.
00:17:17 ◼ ► But I think there is something powerful in instead coming up with a rule that you find generally works and applying it.
00:17:25 ◼ ► And it reminds me of perhaps one of the most impactful, the single most impactful tweet on my design philosophy ever,
00:17:34 ◼ ► which is a tweet by Louis Mantilla, who if you haven't heard of, an absolute legendary designer.
00:17:45 ◼ ► Just an absolute legend. And back in 2015 when I was trying to improve and learn my design, he tweeted this thing.
00:17:55 ◼ ► A Louis Mantilla color is a five degree increment for hue and then a cool one eighth increments for saturation and brightness.
00:18:03 ◼ ► So essentially what he's saying is, he's found that that rule, that set of rules, so taking five degree increments for hue,
00:18:14 ◼ ► So you have five degree increments and then for the saturation and brightness only go up in terms of eighths.
00:18:25 ◼ ► And I remember seeing this and it was just like an unlocked color for me in a way that I'd been so frustrated with before.
00:18:33 ◼ ► Because every other time I'd been trying to choose a color, I was starting from the place of 256 times 256 times 256 colors,
00:18:51 ◼ ► I just didn't know what to do. When I'd sit down I'd be like, "What color should I choose?"
00:18:56 ◼ ► But with these rules, if you sort of work that out, so there's 72 different hue increments and then eight sort of pop commutations for saturation and brightness,
00:19:07 ◼ ► you end up with 4,608 possible colors, which is still a lot of colors, but is not so many that you couldn't lay them out or kind of think through them in that way.
00:19:23 ◼ ► And in the same way that having these rails really was helpful when I was trying to do my complementary colors and dealing with legibility,
00:19:31 ◼ ► even just coming up with a color to start with, like if I have these rails, I have this constrained design space, it was so helpful.
00:19:39 ◼ ► And I've been using this ever since. Like almost all the colors I use in my apps are going to be Louis Mantilla colors because it's worked well for me.
00:19:47 ◼ ► It seems to have enough variety, and it's not like there's something magic Louis is saying in there.
00:19:52 ◼ ► And I'm sure sometimes Louis, probably as the expert designer who is a genius in this kind of stuff,
00:19:59 ◼ ► he probably picks a Louis Mantilla color and then potentially nudges it and adjusts it and tweaks it.
00:20:04 ◼ ► And I don't have the intuition or the knowledge of how to make those adjustments, but I can use that baseline and it's super powerful.
00:20:12 ◼ ► And it's like having that formula just works. Like what you're doing with yours, you can just apply this formula and it'll give you a result that's reasonable.
00:20:19 ◼ ► And I think the thing else you said that I think I really want to hammer on too is it is so much easier to identify something that works or doesn't work than to create it in the first place.
00:20:31 ◼ ► Or at least I've found, developing a sense of taste in terms of "I see a design, I see a set of colors, I see a color palette," whatever it is, and being like "that's good or that's not so good,"
00:20:44 ◼ ► that kind of decision-making is something that I think if you expose yourself to a lot of good design, you will start to just pick up on.
00:20:53 ◼ ► And that is so much more helpful. My thing that generates the spring collection, it generated way more colors than I'll ever use.
00:21:08 ◼ ► But I was able to go through and be like "ooh, I like this one, ooh, I like this one, ooh, I like this one."
00:21:13 ◼ ► And I can identify them reductively in that way way more easily than just saying "oh, I know, I want to have a yellow one with a blue background."
00:21:22 ◼ ► I wouldn't be able to do that, but I could do it in the sense of identifying good design and saying "yep, that's good, that's good, that's good."
00:21:30 ◼ ► And that's something that I think in many ways just comes from consistently exposing yourself to good design.
00:21:36 ◼ ► You'll develop that sense of "ooh, this is good, this is harmonious, you might not have the right words."
00:21:42 ◼ ► And it's always frustrating to me sometimes when I show a design to a designer and I know something's wrong with it, and they always have the right word for why it's wrong.
00:21:51 ◼ ► I don't know those words necessarily, those vocabulary. I remember I was doing a design for my activity app that included all of the colors for the Apple Watch activity ring.
00:22:03 ◼ ► So it had a red, a green, and a blue, and the colors I had chosen just didn't work right.
00:22:08 ◼ ► And I couldn't work out why, and I showed it to a friend of mine who was a designer, and he's like "the problem is the green and the red you chose vibrate against each other."
00:22:17 ◼ ► That was the word he used, they used the colors of vibrate. And as soon as he said that, I looked at the colors and I'm like "yes, they do."
00:22:25 ◼ ► And that's why they don't work. There's some weird interplay between these two colors that it looks like they're almost vibrating against each other.
00:22:32 ◼ ► I was like "okay, I knew something was wrong, thank you for giving me the word for it." But developing that sense of "this is good, this is bad," that is what I've been able to do.
00:22:41 ◼ ► And then I can use tools to get me the rest of the way, to give me the options to select down from.
00:22:46 ◼ ► That's so important, because color is something that we can apply a lot of programmer design to things like saturation and brightness changes.
00:22:57 ◼ ► But hue choice and hue adjustments are much harder, because that's like changing the "what color are we talking about?" versus how bright or how bold of a color this is.
00:23:10 ◼ ► Those things are easy to manipulate programmatically. Hue is very hard, because not only is that very much fashion based, but also people's color perception is not linear across all the different hues.
00:23:22 ◼ ► The way our eyes work with perceiving colors, we have different overlapping cone sensitivities and stuff like that. There's all sorts of complexity and real world gotchas to picking colors and certain combinations looking good or looking too bright or too contrasty or something.
00:23:41 ◼ ► Even the numbers, if you look at just the HSB sliders, "well these two should be good, because I'm just changing the H and not the S and the B, why does this look so crazy?"
00:23:57 ◼ ► That's why you really do have to go with a lot of more intuitive skills or more design heavy skills to really have a good grasp on that. Since most of us aren't going to have those skills, that is best outsourced to other people.
00:24:17 ◼ ► One of the takeaways I'm having from this design thing I'm doing right now is that really Apple gives us a lot to work with.
00:24:26 ◼ ► If you just follow Apple's conventions, use the system colors, use the system fonts, use the system default spacing and margins around things.
00:24:36 ◼ ► There's so much that they give us quote for free, and if you don't have a really great design sense yourself, just outsource a lot of those decisions to Apple if you can.
00:24:48 ◼ ► If you just make an app to Apple's defaults or to the standard tools they give us, it's going to look pretty good. It's really hard to mess that up.
00:24:58 ◼ ► If you don't deviate much from that, it's very, I wouldn't say it's trivial to make a great looking app, but you're really starting at a high level there.
00:25:09 ◼ ► It's harder to screw it up if you're starting with a good foundation. If in doubt, use the platform's defaults and use the platform's built-in design tools and design choices.
00:25:21 ◼ ► Because that will always give you a leg up if you were doing everything from scratch and having a bunch of random fonts and random colors and everything like that.
00:25:29 ◼ ► Yeah, I think too there's a useful humility in what you're saying that I've struggled with initially but have gotten more comfortable with.
00:25:39 ◼ ► It is way better to have a design that uses the defaults and executes them very well and consistently than to try and overreach and grasp after some sort of theoretical apex of design that maybe, at least I found for myself, is beyond my reach.
00:26:01 ◼ ► It's way better for me to do the things that are more safe and tried and true and non-progressive in that way than for me to try and push too far beyond.
00:26:13 ◼ ► Because every time I push out too far beyond, it is less like, if it turns out well, it is turning out well more by accident than by intention.
00:26:23 ◼ ► And so it's like, identify where you are on the spectrum of intuitive and structural design and be okay with wherever you are on that.
00:26:36 ◼ ► And use it to your advantage. That you can make amazing designs that look good that will resonate with your customers, that won't get in the way, that will be good design that doesn't have to be necessarily great design or groundbreaking design.
00:26:51 ◼ ► We can leave that up to the Sebastian Dewitz and Louis Mantillas of the world. They can come up with those kinds of things and do the work of pushing out the extremes.
00:27:11 ◼ ► But we can wait until it's a well-trodden ground that we're comfortable in, that we can apply these rules, we can learn the rules, and kind of go from there. And that's okay.
00:27:21 ◼ ► All of my things in my apps for layout have fixed grids. Like, very fixed grids. I'm using a lot of it. The spacing between things, almost everything in my app, they're always 16 pixels apart.
00:27:35 ◼ ► If I need padding, it's 16 pixels. And I found that that works well. And I'm sure there are times when maybe I could make it wider or narrower. But I don't know enough to necessarily pick when it should be wider or narrower.
00:27:47 ◼ ► So I just do it that way. And it works. And it's great. And I can just move on and think about other problems that are a bit more, that I can be more specific and impressive in.
00:27:56 ◼ ► The programming side of the things that I'm actually good at, and just be comfortable in the tried and true design by building these rails for my designs to run on.
00:28:06 ◼ ► Yeah. And if in doubt, fewer colors are better than more. Fewer sizes of text in the app are better than more. Fewer fonts, fewer different grid spacings or margin numbers. If in doubt, go with a smaller number.
00:28:26 ◼ ► Because as you mentioned in the beginning, trying to pick complementary colors programmatically, that's really hard. And the more colors you need at once, the harder it gets.
00:28:36 ◼ ► If you visit a color palette generator, there's always like, oh, you can have the complementary, you can have the triad, you can have the, they always have these weird names like the four corners or whatever.
00:28:46 ◼ ► There's all sorts of different things you can do even there. Even there, there isn't just one way to do it. And you can look at a color palette generator and you can identify, well, for some reason, the same algorithm generated some good colors up here and some terrible ones with this other input.
00:29:00 ◼ ► So it's super hard to generalize. So the simpler you can keep it with, only use one color at a time maybe. Or two. Two is probably the cap for most people that you should probably use if you don't really know what you're doing.