Under the Radar

00:00:00 ◼   ► Welcome to Under the Radar, a show about independent iOS app development.

00:00:04 ◼   ► I'm Mark Orment.

00:00:05 ◼   ► And I'm David Smith.

00:00:06 ◼   ► Under the Radar is never longer than 30 minutes, so let's get started.

00:00:10 ◼   ► So today we wanted to talk a little bit about design, to pull it back into something a little

00:00:18 ◼   ► more pretty I suppose.

00:00:20 ◼   ► To talk a little bit about a very low-level approach to design that I think we both take

00:00:25 ◼   ► in our apps and is something that I think can be really powerful once you start taking

00:00:30 ◼   ► this approach and start using it in all of your apps.

00:00:32 ◼   ► And it's something that I tend to call for myself parametric design, which is a very

00:00:37 ◼   ► fancy and nonsensical name to have for something like this.

00:00:40 ◼   ► But basically it's designing your app in such a way that large amount parts of the appearance,

00:00:47 ◼   ► of the layout, of the sort of the way that it will appear visually on the screen is controlled

00:00:53 ◼   ► by parameters and variables within your code.

00:00:57 ◼   ► To the degree that you can change a few numbers, change a few values, and you can radically

00:01:03 ◼   ► change the appearance of your application.

00:01:06 ◼   ► And this is something that I think works best if you do a lot of programmatic UI rather

00:01:11 ◼   ► than something like a storyboard where a lot of those values are baked into the storyboard

00:01:16 ◼   ► or baked into the nib.

00:01:17 ◼   ► But if you're doing any amount of your UI and code, it's possible to do a lot of this.

00:01:23 ◼   ► If you're doing it in storyboards and stuff, you can still do it there.

00:01:26 ◼   ► You're just going to have duplicated effort in a lot of places where you set a value in

00:01:30 ◼   ► your storyboard and then you also have somewhere in code that you can overwrite that value.

00:01:35 ◼   ► But either way, however you end up with it, if you design your app such that you can change

00:01:40 ◼   ► everything dynamically, it makes the development process, I think, much more fluid and is something

00:01:47 ◼   ► that I've found for myself helps me very quickly iterate on a design because usually what happens,

00:01:53 ◼   ► and this is something, the reason this topic is a friend of mine for me, is I'm going through

00:01:57 ◼   ► the layout and design phase of my next app.

00:02:00 ◼   ► And the way I tend to do this is I'll put a very basic, super simple, kind of horrendously

00:02:07 ◼   ► ugly design in place.

00:02:09 ◼   ► It has bad colors, it has bad fonts or sizes and weights, and I'm just trying to get it

00:02:16 ◼   ► sort of basically working.

00:02:18 ◼   ► And once I have that, I then want to go through and actually sort of adjust it and dial it

00:02:22 ◼   ► down.

00:02:23 ◼   ► And this is sort of the bottom-up design approach rather than if you're working with a professional

00:02:29 ◼   ► designer or somebody who's giving you a "here's what it should look like in the end" and you're

00:02:33 ◼   ► working from there down, obviously this isn't something that would work.

00:02:36 ◼   ► But if you're working it from the approach like me where you're starting with just basic

00:02:39 ◼   ► like, it's just the UI button that looks like a UI button, it's a UI label that just looks

00:02:43 ◼   ► like a UI label.

00:02:44 ◼   ► If you start there, and are working on it, if you build your app such that you can have

00:02:50 ◼   ► all these dials and hooks into it, then you can quickly change things.

00:02:54 ◼   ► And this is the approach that I tend to take, that when I'm actually iterating on my UI,

00:02:58 ◼   ► I'm just sitting there changing variables and then build and run, look at it, see how

00:03:02 ◼   ► it feels, run it on my device.

00:03:05 ◼   ► I've even seen people who do this where you actually build a method into the application

00:03:09 ◼   ► where if you quadruple tap on the screen with three fingers, a little UI pops up that you

00:03:15 ◼   ► can change the values while the app is live and running.

00:03:19 ◼   ► But it's an approach I think that is a way of thinking about your app at a level that

00:03:24 ◼   ► gives you that flexibility.

00:03:25 ◼   ► And ultimately it probably even makes your app better from a testability or, not that

00:03:31 ◼   ► I really write tests, but from an ability to understand what's going on perspective,

00:03:36 ◼   ► because everything that's in the app, everything about the way it looks is explicitly written

00:03:42 ◼   ► out somewhere, because it's a variable whose value you can change.

00:03:46 ◼   ► Yeah, I mean this is the kind of thing, I've designed Overcast from day one to be this

00:03:51 ◼   ► way in many ways, and this can start with very simple things.

00:03:55 ◼   ► It can start with something like text sizes and whether your app has a light or dark theme.

00:04:01 ◼   ► And if you make all this managed by some kind of central class, like in Overcast it's called

00:04:06 ◼   ► OC Appearance, because it goes beyond what UI Appearance offers, although OC Appearance

00:04:12 ◼   ► manages the UI appearance.

00:04:14 ◼   ► But OC Appearance is just my centralized class that listens for notifications for things

00:04:19 ◼   ► like the dynamic text size preference changing, and then it posts, it basically reposts a

00:04:26 ◼   ► notification to all my custom controls and classes and controllers and everything.

00:04:32 ◼   ► They all listen for the OC Appearance did change notification, and then they set their

00:04:38 ◼   ► own layouts accordingly.

00:04:40 ◼   ► And when you take this kind of approach, this makes it way easier to do things like support

00:04:45 ◼   ► dynamic type, or support a dark mode, or alternate color schemes, or to support certain accessibility

00:04:51 ◼   ► options like bold text or button shapes.

00:04:55 ◼   ► So there's lots of different things you can do once you have this kind of centralized

00:05:00 ◼   ► design and appearance and theme manager infrastructure.

00:05:05 ◼   ► And so, and one of the things I've done is very simply, I've created, if you have some

00:05:11 ◼   ► kind of control or screen or area where you have a background, you can assume that background

00:05:17 ◼   ► will probably be white by default on most things.

00:05:19 ◼   ► In Overcast, I make that an OC background view, which is a custom UI view subclass that

00:05:24 ◼   ► literally just listens to the OC Appearance did change notification and sets itself to

00:05:28 ◼   ► be the current theme's background color.

00:05:31 ◼   ► And that way, it's very, very easy for me to not only change the design, but to implement

00:05:36 ◼   ► dark mode.

00:05:37 ◼   ► And so I can test out all sorts of colors and things very easily, and then every background

00:05:42 ◼   ► in my app automatically changes with this custom OC background view.

00:05:46 ◼   ► Similar, I have OC button, I have OC border button for all the little round erect buttons

00:05:50 ◼   ► I have in Overcast.

00:05:51 ◼   ► It's all a standard class that automatically customizes its own appearance whenever the

00:05:55 ◼   ► appearance changes and can respond to all these different values and everything, both

00:05:59 ◼   ► dynamically or originally in the code, like you were saying.

00:06:02 ◼   ► I also have an OC styled label, and this is one of my most used and biggest time saver

00:06:08 ◼   ► UI things I've ever done, is the OC styled label.

00:06:12 ◼   ► And basically, it's a UI label subclass, like the other ones, it manages its own appearance

00:06:17 ◼   ► and its own parameters and everything, based on the current Overcast theme, whether it's

00:06:23 ◼   ► dark mode or whatever.

00:06:24 ◼   ► But the OC styled label takes as its main parameter the UI font text style, which is

00:06:30 ◼   ► just like if you're picking a UI font, you can call the preferred font with whatever

00:06:35 ◼   ► the full method name is, preferred font with style UI font text style.

00:06:39 ◼   ► These are all the iOS 7 and above built-in text styles.

00:06:41 ◼   ► You have headline, body, caption one, caption two, stuff like that.

00:06:45 ◼   ► And in my OC styled label, I can just create one of these instances and stick it right

00:06:49 ◼   ► into a UI in code or an interface builder, and it automatically will style itself not

00:06:54 ◼   ► only for that style, but it also will pick up things like in my OC appearance class,

00:06:58 ◼   ► I've defined default colors, default font attributes.

00:07:02 ◼   ► So for instance, in the San Francisco font, numbers by default are not proportional exactly.

00:07:09 ◼   ► Like a one is narrower than a zero, for instance.

00:07:13 ◼   ► They're not fixed proportions, rather.

00:07:17 ◼   ► In many of my contexts, I need that.

00:07:19 ◼   ► So I have one place to set that in the OC appearance manager, where I have a function

00:07:23 ◼   ► that's called something on the lines of default font attributes for text style.

00:07:27 ◼   ► And I know that in certain text styles, in almost all of them, I want my fixed width

00:07:31 ◼   ► numerals.

00:07:32 ◼   ► So I have that one place to set it.

00:07:34 ◼   ► And my OC styled label class can manage all that for me.

00:07:37 ◼   ► So all over the UI, I'm only having to change the stuff in one place.

00:07:41 ◼   ► I change one value in one OC appearance line, and then all the labels across my entire app

00:07:49 ◼   ► will automatically update.

00:07:51 ◼   ► Dynamic text is super easy, because all those styled labels, they include either a forced

00:07:57 ◼   ► fixed size for things that are really tight, like the labels that are in the title bar

00:08:00 ◼   ► on the now playing screen, or a dynamic size adjustment based on dynamic type.

00:08:06 ◼   ► So I can say, just create this label and have it be the regular preferred dynamic type size,

00:08:12 ◼   ► whatever the current size is.

00:08:13 ◼   ► Or I can have it say, that size plus two points, if something needs to be a little bit bigger,

00:08:18 ◼   ► minus two points, a little bit smaller.

00:08:20 ◼   ► And that makes it so easy to support these accessibility features, and to use dynamic

00:08:25 ◼   ► type, and make all that happen for people who want or need that, and still have this

00:08:29 ◼   ► incredible ease on the code side, where I don't have to code that into every view controller.

00:08:34 ◼   ► I don't have to have that part of every custom control.

00:08:38 ◼   ► It just automatically inherits from these few base classes I've made that manage their

00:08:41 ◼   ► own appearance, and then the OC appearance class that handles it all parametrically,

00:08:45 ◼   ► as you would say.

00:08:46 ◼   ► I have one place where I can change this.

00:08:49 ◼   ► If I want to change the font weight across the entire app, I change that in one place,

00:08:54 ◼   ► and one line of code in that class.

00:08:57 ◼   ► Doing it this way makes things so much easier.

00:09:00 ◼   ► And as conditions change, as styles change, as fashion changes in app design, or as Apple

00:09:06 ◼   ► adds things, like there's a rumor that they might soon add a system-wide dark mode, then

00:09:12 ◼   ► again, if you have designed this way, this gives you one place where you have to implement

00:09:16 ◼   ► that.

00:09:17 ◼   ► And then all the rest of your app automatically picks it up from your appearance manager.

00:09:22 ◼   ► You really should design this way if you can.

00:09:24 ◼   ► Yeah, and I think there's two levels of where this comes into play.

00:09:28 ◼   ► There's the side of it that you're talking about, where I think it's very much the following

00:09:34 ◼   ► the principle of not repeating yourself, of avoiding duplication, that you don't have

00:09:39 ◼   ► every single view controller has a viewDidLoad method that's just 50 lines of setting style

00:09:45 ◼   ► stuff.

00:09:46 ◼   ► And obviously a lot of this got better when they introduced the appearance manager stuff

00:09:49 ◼   ► to UIKit, which is certainly something that I think we both use.

00:09:53 ◼   ► But even beyond that, there's so much of this that you're still needing to have more things

00:09:59 ◼   ► than beyond that, and then even just other stuff beyond appearance, like the actual UIKit

00:10:05 ◼   ► appearance stuff that you actually need to do.

00:10:07 ◼   ► And so there's not repeating yourself and trying to consolidate all of this code into

00:10:12 ◼   ► a place that you can easily update.

00:10:16 ◼   ► What I like about that approach is you inevitably you'll have one-offs, and you'll have things

00:10:20 ◼   ► that are slightly different, but you can even inside of that you have two different methods

00:10:27 ◼   ► that are physically close to each other in your application that are doing the default

00:10:36 ◼   ► version and then there's the bold version or whatever it is.

00:10:39 ◼   ► By putting those logically close to each other, I find it so much easier when I'm debugging

00:10:44 ◼   ► when I'm like, I change one and I expect the other one to change, and it doesn't.

00:10:49 ◼   ► There's something even helpful about, well, all I have to do is look down a few lines

00:10:52 ◼   ► and I'll probably see where I'm doing it wrong.

00:10:55 ◼   ► But also I think it can be really helpful, even just at the really, really few all the

00:10:59 ◼   ► way down to the lowest level.

00:11:02 ◼   ► I run into this a lot, and I'm weird for doing my layouts this way, but I do a lot of my

00:11:07 ◼   ► view layouts programmatically.

00:11:10 ◼   ► So I do a lot of work in view will layout subviews and those types of methods.

00:11:15 ◼   ► That's just how I think, that's fine.

00:11:17 ◼   ► It's definitely not for everybody.

00:11:18 ◼   ► No, you don't have to apologize for that.

00:11:20 ◼   ► So basically a week after we did the episode about how I've been embracing Interface Builder

00:11:25 ◼   ► and Auto Layout, I converted to what you're doing.

00:11:29 ◼   ► Because I hit, just like everything with Interface Builder and Auto Layout, it's great until

00:11:34 ◼   ► you hit a wall.

00:11:35 ◼   ► And then you realize that you're spending an incredible amount of time and effort to

00:11:39 ◼   ► do things that you could really do very easily with a 10 line layout subviews function.

00:11:48 ◼   ► But in those layout subviews function, I think it's another place that I've found this kind

00:11:51 ◼   ► of parametric approach to be really, really powerful.

00:11:54 ◼   ► In some ways even more when you're early on especially.

00:11:59 ◼   ► If you define, I end up with a lot of these very, my view layout subviews methods are

00:12:05 ◼   ► often, it's half defining variables.

00:12:09 ◼   ► There's a lot of, I guess now that I'm in Swift, is all these let something equal something,

00:12:13 ◼   ► let something equal something.

00:12:14 ◼   ► That's like the first half.

00:12:16 ◼   ► And the second half is all the actual framework where I'm actually saying build the frame

00:12:20 ◼   ► and do the math and lay it out.

00:12:22 ◼   ► But you can do all these fun things where you're just like, okay, this is the padding,

00:12:25 ◼   ► this is the inside padding, this is the outside padding.

00:12:27 ◼   ► And you can put all those values as just values that you can change dynamically.

00:12:34 ◼   ► And it's so powerful when you're looking at a UI.

00:12:36 ◼   ► Because I feel like I can get the initial UI vaguely right, fairly quickly by eye.

00:12:46 ◼   ► But then there's a certain point that you're just kind of looking at and you're like,

00:12:51 ◼   ► that label just looks, I think there's a term for this where it's like visual centering,

00:12:58 ◼   ► is a lot of times you have something to do an icon design where something is technically

00:13:02 ◼   ► centered but it doesn't look centered because a perfect circle is easy to center.

00:13:09 ◼   ► But if say you have something that's really thin at the top and heavy on the bottom, it

00:13:12 ◼   ► can actually look like it's off center if it's actually centered.

00:13:16 ◼   ► And I think you have a lot of these things in user interface design where things can

00:13:21 ◼   ► be technically correct.

00:13:22 ◼   ► Like say you say, oh, I always have eight points of padding on the left side of all

00:13:27 ◼   ► my views.

00:13:28 ◼   ► But there's possible that somewhere in your layout, nine points would actually look better.

00:13:35 ◼   ► And so pulling all these things into these functions, so that there's no magic numbers

00:13:41 ◼   ► in your frame stuff, all your frame logic in this case is just equations.

00:13:47 ◼   ► And they're all nice labeled equations that are saying it's padding plus label width

00:13:52 ◼   ► plus padding or however you want to lay it out.

00:13:55 ◼   ► You're being very clear and explicit can make this really a powerful approach.

00:13:59 ◼   ► And I think it works both ways.

00:14:01 ◼   ► Either way, the last thing you want in your app is to have a design that is expressed

00:14:07 ◼   ► somewhere that you can't change easily.

00:14:11 ◼   ► I think even I remember to the extent of, I remember I think it was Vesper that I first

00:14:15 ◼   ► saw someone do this where they even were just in Vesper, I think they defined a bunch of

00:14:20 ◼   ► these things even in a plist file, which is an interesting approach they took.

00:14:25 ◼   ► Because it allowed non-developer people to make changes to the application's appearance

00:14:34 ◼   ► because they would just go into a plist and change stuff.

00:14:37 ◼   ► And so it's even more powerful in that sense of you can actually even extract all this

00:14:41 ◼   ► developer logic and put it into something that is a bit less scary.

00:14:45 ◼   ► You may not necessarily want your designer going into your code and changing things.

00:14:50 ◼   ► I mean, not against designers, they're lovely, but that's a problematic thing in a couple

00:14:55 ◼   ► of ways versus here's this plist file that you can change and it's much less likely to

00:15:01 ◼   ► cause problems or conflicts or issues down the road.

00:15:04 ◼   ► It's also, it lets them work faster.

00:15:08 ◼   ► It's part of when you're working on a team with multiple people like that, if you have

00:15:11 ◼   ► a separate designer, they can do their job faster if you can give them that kind of infrastructure

00:15:16 ◼   ► and that kind of setup.

00:15:18 ◼   ► And I think too, between our two main points, having these variables defined at the top of

00:15:25 ◼   ► your layout function versus me having them try to be defined in a central place, like

00:15:30 ◼   ► an appearance manager class, you can actually combine these things.

00:15:33 ◼   ► One of the principles of design generally is to not to have too many different things

00:15:38 ◼   ► in one layout.

00:15:40 ◼   ► So if you're gonna have certain fonts, don't have 10 different fonts in your app, have

00:15:45 ◼   ► maybe two or one.

00:15:49 ◼   ► Don't have regular, semi-bold, bold, heavy, and book, have two font weights and have one

00:15:57 ◼   ► boldish font weight and one regular font weight, things like that.

00:15:59 ◼   ► You try to minimize the amount of different combos you have because it just looks, it

00:16:04 ◼   ► tends to look better if you standardize on one or two values in each one of these areas.

00:16:10 ◼   ► Also one of the things you can do is you can define your default spacing between elements

00:16:16 ◼   ► on the screen, like default left margin, eight.

00:16:18 ◼   ► And you can have that in your appearance manager class.

00:16:21 ◼   ► And so you can have your custom layout functions, use that as a starting point.

00:16:26 ◼   ► And then for the ones that need additional padding, don't just put a match number in

00:16:30 ◼   ► that says nine, have it be default padding plus one.

00:16:35 ◼   ► Or even better, the floor of default padding plus 10%.

00:16:40 ◼   ► If it's proportional, it's even better 'cause then you can scale it to different sizes and

00:16:44 ◼   ► everything.

00:16:45 ◼   ► And so that kind of approach, it still allows you to standardize things and it's even better

00:16:51 ◼   ► for what you're describing as parametric design because then you can go to your appearance

00:16:55 ◼   ► manager class and even have spacing be one of those things that you can change in one

00:16:59 ◼   ► place and have the whole app change as a result.

00:17:02 ◼   ► Yeah, and it's so powerful when you get into this.

00:17:06 ◼   ► And I guess it's sort of why I wanted to do an episode on it.

00:17:09 ◼   ► It's something that I have, every now and then I'll go back, I mean, I have a lot of

00:17:12 ◼   ► old projects and some of them are still in the store.

00:17:14 ◼   ► And I'll go back and look at the code.

00:17:16 ◼   ► And of course, any programmer's worst nightmare is when you open something and there's just

00:17:23 ◼   ► all these magic numbers.

00:17:25 ◼   ► All these just, you know, and I call it, say, a magic number.

00:17:27 ◼   ► Just any number that doesn't have a label as to what it means is a magic number.

00:17:33 ◼   ► So sometimes you can get away with it if it's an obvious thing, like the number of times

00:17:38 ◼   ► I divide by 60, you know, and when I'm doing date or time things.

00:17:42 ◼   ► Like maybe that's okay.

00:17:43 ◼   ► It's not perfect.

00:17:44 ◼   ► No, you have a constant, seconds per minute.

00:17:46 ◼   ► There you go.

00:17:48 ◼   ► Sure, that's even better.

00:17:50 ◼   ► But what you're really doing is when you go into something and you have this font, it's

00:17:55 ◼   ► like, it's 18 here, it's 17 there, you don't know why.

00:17:59 ◼   ► Someplace you have padding here or you just have these numbers that are, it's like, you

00:18:03 ◼   ► know, I remember back in the day when I used to always assume that an iPhone's width was

00:18:08 ◼   ► 320.

00:18:11 ◼   ► And you know, when the iPhone 6 came out, all of a sudden I had to go through my app

00:18:15 ◼   ► and I, you know, this is what I actually did.

00:18:18 ◼   ► I opened up Xcode and did, you know, search all for 320, for 640, for 480, like all of

00:18:26 ◼   ► these values.

00:18:27 ◼   ► And I found dozens of them everywhere.

00:18:30 ◼   ► And that's really problematic.

00:18:31 ◼   ► It's like, that really shouldn't be there.

00:18:33 ◼   ► That should be, in that case, it's proportional to the screen.

00:18:36 ◼   ► So somewhere I should have a, you know, device, get the device bounds, get the width, and

00:18:41 ◼   ► then it should just dynamically update.

00:18:44 ◼   ► And by making it not tied to something that's hard-coded in that way, it's like your example

00:18:49 ◼   ► with padding and using the floor rather than just adding one.

00:18:54 ◼   ► If you get out of those habits, like any time, in a weird way, you're doing something that's

00:18:58 ◼   ► so numerical, but it should have almost no numbers in it, that it's like, the numbers

00:19:02 ◼   ► only exist at the top, and then everything else is proportional and kind of expanding

00:19:06 ◼   ► from that.

00:19:07 ◼   ► It works really well.

00:19:08 ◼   ► Like I've been doing this a lot with, on my Apple Watch work, where, you know, there are

00:19:14 ◼   ► these two different sizes, and so you have to have a, but the weird thing with the watches,

00:19:19 ◼   ► you don't typically change the UI between the 48 and the 38, the 42 and the 38 millimeter

00:19:26 ◼   ► Apple Watches.

00:19:27 ◼   ► Like, it's not like you have a totally new, it's not like an iPad to an iPhone.

00:19:30 ◼   ► It's like, they're so close but slightly different.

00:19:33 ◼   ► And so everything you have to do has to be proportional.

00:19:35 ◼   ► Everything needs to be adaptable and flexible.

00:19:38 ◼   ► And then once you wrap your mind around it and kind of commit to that approach, it's

00:19:41 ◼   ► like all these things, just kind of like all these other problems that you would have otherwise

00:19:44 ◼   ► just kind of fall out.

00:19:46 ◼   ► We're sponsored this week by Linode.

00:19:48 ◼   ► Go to linode.com/radar and use code radar20 at checkout for $20 in credit.

00:19:55 ◼   ► Linode is a combination of high performance SSD Linux servers spread across eight data

00:19:59 ◼   ► centers around the world.

00:20:01 ◼   ► They're a fantastic solution for your server infrastructure needs.

00:20:04 ◼   ► You can get a server up and running at Linode in just under a minute, with plans starting

00:20:08 ◼   ► at just $10 a month.

00:20:09 ◼   ► That now gets you two gigs of RAM for just $10 a month.

00:20:12 ◼   ► This is like amazing pricing for what you get at Linode.

00:20:16 ◼   ► David and I are both customers of Linode.

00:20:18 ◼   ► We've both been there since long before they were sponsors of our show.

00:20:21 ◼   ► Linode's great.

00:20:22 ◼   ► I definitely recommend them.

00:20:24 ◼   ► Linode is, they have an amazing control panel.

00:20:26 ◼   ► They have amazing options.

00:20:27 ◼   ► They have amazing pricing.

00:20:29 ◼   ► This is great for things like if you have to run a server for your app or even if you

00:20:33 ◼   ► want to run a private Git server.

00:20:34 ◼   ► If you want to host databases, run a mail server, although you shouldn't run your own

00:20:38 ◼   ► mail server, but you can at Linode.

00:20:39 ◼   ► You can operate powerful applications.

00:20:41 ◼   ► I have, I think, I think Overcast runs on something like 16 Linode VPSs.

00:20:46 ◼   ► It's incredible.

00:20:47 ◼   ► You can do so much there from one little thing for 20 bucks a month all the way up, or for

00:20:53 ◼   ► 10 bucks a month even, all the way up to me running Overcast there for something like

00:20:57 ◼   ► $1,000 a month with all these different servers, all these high specs.

00:21:00 ◼   ► You can do crazy stuff at Linode.

00:21:01 ◼   ► It's amazing.

00:21:02 ◼   ► I love it.

00:21:03 ◼   ► You should love it too.

00:21:04 ◼   ► Check it out.

00:21:05 ◼   ► Go to linode.com/radar.

00:21:06 ◼   ► He'll be supporting us by doing that, and you get $20 towards any Linode plan using

00:21:11 ◼   ► code RADAR20 at checkout, and they have a seven-day money-back guarantee, so there's

00:21:16 ◼   ► nothing to lose.

00:21:17 ◼   ► Thanks a lot to Linode for supporting the show.

00:21:20 ◼   ► So to finish out the show, it seemed also kind of a fun little thing for us to, now

00:21:23 ◼   ► that you've, hopefully at this point, we've convinced you that parametric design is a

00:21:27 ◼   ► good thing that you should at least build into your apps.

00:21:30 ◼   ► Once you've done that, there's some really fun things that you can use as a result to

00:21:34 ◼   ► make your apps better, and as an example, something that I do a lot when I'm trying

00:21:40 ◼   ► to kind of narrow in on a good design is I will have my app randomly change some of these

00:21:47 ◼   ► parameters inside of it, and it lets me experiment, or maybe not randomly even, but where it's

00:21:54 ◼   ► like I'm trying to work out what the right padding is, and so I set it to, you know,

00:21:59 ◼   ► it starts at one, and then five seconds later it goes to two, five seconds later it goes

00:22:02 ◼   ► to three.

00:22:03 ◼   ► So you can have your app grow and shrink and adjust as you go, because it's all just

00:22:10 ◼   ► numbers, and so if you build this approach, you can do stuff like that, where you can

00:22:16 ◼   ► kind of, I sometimes struggle to visualize in my head what different values are going

00:22:22 ◼   ► to be, and maybe that's part of why I'm not a designer, I'm a developer.

00:22:25 ◼   ► Like, I can't imagine it, I can just write it, but if you build your app this way, you

00:22:29 ◼   ► can sit there and be like, "I don't really know which one I should do."

00:22:33 ◼   ► Another example is you can take the same approach but with fonts, and you say--

00:22:37 ◼   ► >> It's like a random font.

00:22:39 ◼   ► >> Well, you only have so many system fonts, right?

00:22:41 ◼   ► And it isn't so much that you're trying to randomly pick a font, but it helps start

00:22:49 ◼   ► my mind thinking about how my app could be different if I try different things that I

00:22:54 ◼   ► wouldn't necessarily think to otherwise, that if I had to manually go through and type

00:23:00 ◼   ► in all the different font names, I would never do it.

00:23:02 ◼   ► But it's like you try through and you're like, "Huh, actually this one kind of looks

00:23:06 ◼   ► good.

00:23:07 ◼   ► Why does this one look good?"

00:23:09 ◼   ► And it may not be that I'm going to end up using that random font, but it's like,

00:23:12 ◼   ► "Huh, maybe the reason I liked that one," for example, is that it was more condensed

00:23:16 ◼   ► rather than more wide, or it had obviously big, obvious things like serifs or non-san

00:23:21 ◼   ► serifs or different font weights.

00:23:23 ◼   ► I feel like there's something to be said for just taking the approach of just having

00:23:28 ◼   ► your app be very flexible this way, and then taking advantage of the flexibility to be

00:23:32 ◼   ► like, "Let's change all the things."

00:23:34 ◼   ► And most of the time it's not going to look good, but every now and then you can kind

00:23:38 ◼   ► of look and be like, "That one.

00:23:41 ◼   ► That's the one that I like," and sort of dial into it.

00:23:44 ◼   ► And I think you did a similar thing when you were doing your dark mode, though for a different

00:23:49 ◼   ► reason, right?

00:23:50 ◼   ► Because you kept switching between the light and dark mode to accomplish, to make sure

00:23:54 ◼   ► that you were doing it right.

00:23:55 ◼   ► Yeah, it's actually kind of a way to make sure that you've accommodated for dynamic

00:23:59 ◼   ► changes on all of your screens.

00:24:01 ◼   ► I just set a timer in the app delegate to change color scheme every five seconds.

00:24:07 ◼   ► And I went through the entire—even if for some reason you find a way to change the color

00:24:12 ◼   ► scheme without being logged in, even the login screens change, the password reset screens

00:24:17 ◼   ► change, every screen in Overcast changes dynamically for dark mode, and any of the kind of theme

00:24:22 ◼   ► changes, dynamic text, everything, every screen changes.

00:24:26 ◼   ► Because I literally went through and had this running every five seconds where it would

00:24:29 ◼   ► toggle it, and I went through every single screen in the app and converted it.

00:24:33 ◼   ► And I actually—similar—I just made fun of you a second ago for random fonts, but

00:24:37 ◼   ► when I was picking Overcast's font back when I was developing 1.0, I did basically

00:24:42 ◼   ► that same thing.

00:24:44 ◼   ► I had a folder full of ten different custom fonts, plus a list of some of the built-in

00:24:49 ◼   ► ones, and I had all this dynamic appearance stuff already in place, mainly for this purpose.

00:24:55 ◼   ► And so I just tried it out, because you can't really do this in the simulator.

00:24:59 ◼   ► You really have to see on device.

00:25:01 ◼   ► You have to see how this stuff looks, whether it seems right, whether it fits in.

00:25:06 ◼   ► And so that's what I did.

00:25:09 ◼   ► I had the font be managed by this appearance manager class since 1.0, and I just tried

00:25:13 ◼   ► all these different fonts and different adjustments to the sizing and the line spacing and everything

00:25:18 ◼   ► else, and eventually found the one that I thought worked best and that I liked the look

00:25:23 ◼   ► of best.

00:25:24 ◼   ► But I think if there's an overriding theme of what we're getting at here, we as programmers,

00:25:31 ◼   ► we often are not the best designers.

00:25:34 ◼   ► I think it's safe to say.

00:25:37 ◼   ► Very safe.

00:25:39 ◼   ► And all the way back in episode number ten of this show, we called "Design by a Programmer,"

00:25:44 ◼   ► we talked about some of the ways we make images this way, and I would be horribly delightful

00:25:49 ◼   ► if I didn't mention Paint Code as being an incredible resource.

00:25:54 ◼   ► Paint Code not only allows you to draw stuff, and it's a vector drawing program that outputs

00:25:59 ◼   ► either images or source code, and you can render things dynamically, which is awesome

00:26:04 ◼   ► for parametric design.

00:26:05 ◼   ► But even within Paint Code, you can have variables in your Paint Code documents for things like

00:26:11 ◼   ► colors, stroke, widths, things like that, and you can dynamically just hit a button

00:26:17 ◼   ► like an up or down stepper control on some of these things to increase the stroke width

00:26:22 ◼   ► on everything in your document that uses it, or you can have colors that are derived from

00:26:26 ◼   ► other colors.

00:26:27 ◼   ► You can say this color should be base color minus 20% saturation, or whatever you want

00:26:31 ◼   ► to do.

00:26:32 ◼   ► You can have cool stuff like that in Paint Code.

00:26:34 ◼   ► I highly recommend this app.

00:26:36 ◼   ► It's amazing.

00:26:38 ◼   ► But this is all a way for programmers like us who are not really designers by training

00:26:44 ◼   ► or by skill, really, to fumble our way through.

00:26:49 ◼   ► And we discussed a lot back in episode 10 why you might want to do this yourself and

00:26:53 ◼   ► not hire a full-time designer, and for many people, that choice is made for them by economics.

00:26:59 ◼   ► So a lot of times, you are your own designer just because that's what you can afford

00:27:02 ◼   ► to do.

00:27:04 ◼   ► And it's nice when you have this kind of parametric approach because we don't inherently

00:27:10 ◼   ► -- we can't just, as you said earlier, we can't just kind of come up with the right

00:27:13 ◼   ► thing on our first try in our head.

00:27:15 ◼   ► We have to just kind of build it that way, try it, see it in the app, and then kind of

00:27:20 ◼   ► figure out, play with the values a little bit to see what really looks best, what really

00:27:24 ◼   ► works best here.

00:27:26 ◼   ► And when you have this kind of parametric approach, this kind of procedural value-based,

00:27:31 ◼   ► parametric centralized approach, it makes that so much more possible and so much easier

00:27:37 ◼   ► to be able to experiment with your design so that you can eventually come up with what's

00:27:40 ◼   ► right.

00:27:41 ◼   ► And I think in many ways, that is at the core of this idea is anything we can do as developers

00:27:47 ◼   ► to make experimentation and exploration of our app easier and safer.

00:27:54 ◼   ► I have complete confidence that if I may change one of these values, I'm not going to horribly

00:27:59 ◼   ► break everything.

00:28:00 ◼   ► And if I do, I just undo it.

00:28:02 ◼   ► It's not that kind of change where it feels heavy.

00:28:05 ◼   ► And anything we can do, I think, to make experimentation, to make exploration light and fun in some

00:28:12 ◼   ► ways, honestly, I think will allow us to make our apps better and to do it in a way that

00:28:19 ◼   ► fits a developer mindset.

00:28:21 ◼   ► And so anything you can think of, like this is an example where you take an approach to

00:28:25 ◼   ► your design that makes it fun and easy to experiment.

00:28:29 ◼   ► Maybe you can think of other places to do that in your application or in the way that

00:28:32 ◼   ► you build it.

00:28:33 ◼   ► But that kind of a freedom, I think, is what ultimately makes it so powerful and ultimately

00:28:37 ◼   ► I think allows individual developers or developers without big design budgets.

00:28:44 ◼   ► I can't come up with it right the first time, but if I take this approach, I can try a hundred

00:28:50 ◼   ► different designs in the time that a regular designer could only come up with one or two

00:28:56 ◼   ► just because I'm just iterating so quickly through it.

00:28:59 ◼   ► And I think that is at its core what makes this so powerful.

00:29:01 ◼   ► Exactly.

00:29:02 ◼   ► All right, best of luck everybody implementing your designing by programmer style here, designed

00:29:08 ◼   ► by math.

00:29:09 ◼   ► That's all the time we have for this week.

00:29:11 ◼   ► Thank you for listening everybody and we will talk to you next week.

00:29:13 ◼   ► Bye.

00:29:14 ◼   ► [BLANK_AUDIO]