Under the Radar

Under the Radar 54: Parametric Design


00:00:00   welcome to under the radar show but

00:00:02   independent iOS app development I'm

00:00:04   Marco Arment and I'm David Smith under

00:00:06   the radar is never longer than 30

00:00:08   minutes so let's get started so today we

00:00:11   wanted to talk a little bit about design

00:00:13   to pull it back into something a little

00:00:17   more pretty I suppose to talk a little

00:00:21   bit about though a very low level

00:00:22   approach to design that I think we both

00:00:25   take in our apps and it's something that

00:00:27   I think can be really powerful once you

00:00:29   start taking this approach and start

00:00:31   using it in all of your apps and it's

00:00:33   something that I tend to call for myself

00:00:35   parametric design which is a very fancy

00:00:37   and nonsensical name to have for

00:00:40   something like this but basically it's

00:00:41   designing your app in such a way that

00:00:44   large amount parts of the appearance of

00:00:48   the layout of the sort of the way that

00:00:50   it will appear visually on the screen is

00:00:52   controlled by parameters and variables

00:00:55   within your code to the degree that you

00:00:58   can change a few few numbers change a

00:01:01   few values and you can radically change

00:01:03   the appearance of your application and

00:01:06   this is something that I think works

00:01:08   best if you do a lot of programmatic UI

00:01:10   rather than you know something like a

00:01:12   storyboard where a lot of those values

00:01:14   are baked into the storyboard or baked

00:01:16   into the nib if you were doing any

00:01:19   amount of your UI in code it's possible

00:01:22   to do a lot of this um if you're doing

00:01:24   the in storyboards and so if you can

00:01:25   still do it there you're just going to

00:01:26   have duplicated effort in a lot of

00:01:28   places where you set a value in your

00:01:31   storyboard and then you also have

00:01:32   somewhere in code that you can override

00:01:34   that value but either way however you

00:01:36   end up with it if you design your app

00:01:38   such that you can change everything

00:01:40   dynamically it makes the development

00:01:44   process I think much more fluid and is

00:01:46   something that I found for myself helps

00:01:48   me very quickly iterate on a design

00:01:51   because usually what happens and this is

00:01:54   something the reason this topic is

00:01:55   friend of mine for me is I'm going

00:01:57   through the sort of layout and design

00:01:59   phase of my next app and I the way I

00:02:02   tend to do with this is I'll put a very

00:02:05   basic super simple kind of horrendously

00:02:07   ugly design in place it has bad colors

00:02:10   that has bad fonts or sizes and weights

00:02:14   and I'm just trying to get it's sort of

00:02:16   basically working and once I have that I

00:02:19   then want to go through and actually

00:02:21   sort of like adjust it and dial it down

00:02:22   and and this is sort of the I guess the

00:02:25   bottom-up design approach rather than

00:02:27   you know if you're working with a

00:02:28   professional designer or somebody who's

00:02:30   giving you a here's what it should look

00:02:32   like in the end and you're working from

00:02:33   there down obviously this isn't

00:02:35   something will print approach that would

00:02:36   work but if you're working it from the

00:02:37   purse like me where you're starting with

00:02:38   just basic like it's just the UI button

00:02:41   that looks like a UI button it's a UI

00:02:42   label that just looks like a UI label if

00:02:44   you start there and are working on it if

00:02:46   you build your app such that you can you

00:02:50   know have all these dials and hooks into

00:02:51   it and then you can quickly change

00:02:53   things and this is the approach that I

00:02:55   tend to take that when I'm actually

00:02:57   iterating on my UI I'm just sitting

00:02:58   there changing variables and then build

00:03:01   and run look at it see how it feels

00:03:02   running on my device I've even seen

00:03:06   people who do this where you'll actually

00:03:07   build a method into the application

00:03:09   where if you you know it's like

00:03:10   quadruple tap on the screen with three

00:03:12   fingers a little UI pops up that you can

00:03:15   change the the values to be well they've

00:03:17   app is live and running but it's an

00:03:19   approach I think that is a way of

00:03:21   thinking about your app and a level that

00:03:23   gives you that flexibility and

00:03:25   ultimately it probably even makes your

00:03:26   app better from a like attest ability or

00:03:30   really write tests but from an ability

00:03:33   to understand what's going on

00:03:34   perspective because everything that's in

00:03:37   the app everything about the way it

00:03:39   looks is you know explicitly written out

00:03:42   somewhere because it's a variable that

00:03:44   whose value you can change yeah I mean

00:03:47   this is the kind of thing I've designed

00:03:49   overcast from day one to be this way in

00:03:52   many ways and and you know this this can

00:03:54   start with very simple things it can

00:03:56   start with something like text sizes and

00:03:58   whether your app has like a light or

00:04:00   dark theme and if you make all this

00:04:03   managed by some kind of central class

00:04:05   like my and overcast is called OC

00:04:07   appearance you know cuz you know it's it

00:04:09   goes beyond what you eye appearance

00:04:10   offers although the appearance manages

00:04:12   the UI appearance but OC appearance is

00:04:16   just my centralized class that listens

00:04:18   for notifications for things like the

00:04:20   dynamic text size preference changing

00:04:23   then it posts it basically repost a

00:04:26   notification to all my custom controls

00:04:29   and classes and controllers and

00:04:31   everything they all listen for the UI or

00:04:33   the for the OC appearance did change

00:04:35   notification and then they set their own

00:04:38   layouts accordingly and when you take

00:04:40   this kind of approach this makes it way

00:04:43   easier to do things like support dynamic

00:04:45   type or support a dark mode or alternate

00:04:49   color schemes or to support certain

00:04:50   accessibility options like bold text or

00:04:53   button button shapes so there's lots of

00:04:56   different things you can do once you

00:04:58   have this kind of centralized design and

00:05:01   appearance and theme manager

00:05:03   infrastructure and so and one of the

00:05:06   things I've done is you know very simply

00:05:08   I've created you know if you have like a

00:05:10   you know some kind of control or screen

00:05:12   or area where you have a background you

00:05:15   can assume that background probably be

00:05:17   white by default in most things in

00:05:19   overcast I make that an OC background

00:05:21   view which is a custom UI view subclass

00:05:23   that literally just listens to the OC

00:05:26   appearance to change notification and

00:05:28   sets itself to be the current themes

00:05:29   background color and that way it's very

00:05:33   very easy for me to not only change the

00:05:35   design but to implement dark mode and so

00:05:37   I can test out all sorts of colors and

00:05:39   things very easily and then every

00:05:41   background in my app automatically

00:05:43   changes with this custom OC back review

00:05:46   similar I have you know OC button aisle

00:05:48   OC bordered button for all the little

00:05:50   round rect buttons I have an overcast

00:05:51   those are all you know a standard class

00:05:52   that automatically customizes its own

00:05:54   appearance whenever the appearance

00:05:55   changes and can respond to all these

00:05:57   different values and everything both

00:05:59   dynamically or you know or every killing

00:06:00   the code like you were saying I also

00:06:02   have an OC styled label and this is one

00:06:06   of my most used and biggest time-saver

00:06:08   UI things I've ever done is the OC

00:06:11   styled label and basically it's it's a

00:06:14   UI label subclass like the other ones it

00:06:16   manages its own appearance and its own

00:06:18   parameters and everything based on based

00:06:20   on the current overcast theme whether

00:06:23   it's dark mode or whatever but the OC

00:06:25   styled label takes as its main parameter

00:06:27   the UI font text style which is you know

00:06:30   just like if you're picking a UI font

00:06:32   you can call the preferred font with

00:06:34   whatever the full method name is

00:06:36   font with style UI font textile and this

00:06:38   these are all the iOS 7 and above

00:06:40   built-in textiles you have like you know

00:06:41   headline body caption one caption to

00:06:43   stuff like that and my OC styled label I

00:06:46   can just create one of these instances

00:06:47   and stick it right into a UI in code or

00:06:50   an interface builder and it

00:06:52   automatically will style itself not only

00:06:55   for that style but it also will pick up

00:06:56   things like in my OC appearance class

00:06:58   I've defined default colors default font

00:07:01   attributes so for instance you know in

00:07:04   the San Francisco font numbers by

00:07:06   default are not proportional exactly

00:07:08   they like like a1 is narrower than a

00:07:11   zero for instance you know it's it's

00:07:12   they're not fixed fixed proportions

00:07:15   rather in many of my contexts I need

00:07:18   that so I have one place to set that in

00:07:21   the OC appearance manager or have a

00:07:22   function that's called something on the

00:07:23   lines of default font attributes for

00:07:26   text style and I know that in certain

00:07:28   text styles in almost all of them I want

00:07:30   my fixed width numerals so I have that

00:07:33   one place to set it and my OC styled

00:07:35   label class can it can it add it can

00:07:37   manage all that for me so all over the

00:07:38   UI I'm only having to change this stuff

00:07:40   in one place I change one value in my in

00:07:43   100cc a parent's line and then all the

00:07:47   labels across my entire app will

00:07:49   automatically update dynamic text is

00:07:51   super easy because all the all those

00:07:54   styled labels they include either a

00:07:57   forced fixed size for things that are

00:07:59   really tight like the labels that are in

00:08:00   the title bar on the Now Playing screen

00:08:01   or a dynamic size adjustment based on

00:08:05   dynamic type so I can say just create

00:08:08   this label and have it be the regular

00:08:10   preferred dynamic type size whatever the

00:08:12   current size is or I can have it say

00:08:14   that size plus 2 points if so in some

00:08:17   needs to be little bit bigger early you

00:08:18   know - two points little bit smaller and

00:08:19   that makes it so easy to support these

00:08:22   accessibility features and to you know

00:08:24   use an emic type and make all that

00:08:26   happen for people who want or need that

00:08:27   and and still have this incredible ease

00:08:31   on the code side where I don't have to

00:08:33   code that into every view controller I

00:08:34   don't have to have that part of every

00:08:36   every custom control like it just

00:08:38   automatically inherits from these few

00:08:39   base classes I've made that manage their

00:08:41   own appearance and then the OC

00:08:43   appearance class that handles at all

00:08:44   parametrically as yes you would say like

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

00:08:48   if I want to change the font way

00:08:50   across the entire app I changed that in

00:08:52   one place and one line of code in that

00:08:55   class it's doing it this way it makes

00:08:57   things so much easier and as as

00:09:00   conditions change as Styles change as

00:09:03   fashion changes in in app design or as

00:09:06   Apple adds things like you know there's

00:09:08   there's a rumor that they might soon add

00:09:10   a system-wide dark mode then you this

00:09:12   again if you have designed this way this

00:09:14   gives you one place where you have to

00:09:16   implement that and then all the rest of

00:09:18   your app automatically picks it up from

00:09:20   your appearance manager it's you really

00:09:22   should design a suede you can yeah and I

00:09:24   think there's this sort of there's two

00:09:26   levels of where this comes into play

00:09:27   there's the the approach they decide if

00:09:30   it's that you're talking about where I

00:09:31   think it's very much the following the

00:09:34   principle of like not repeating yourself

00:09:36   of avoiding duplication that you don't

00:09:38   have every single view controller has a

00:09:40   viewdidload method that's just 50 lines

00:09:43   of settings style stuff and obviously a

00:09:46   lot of this got better when they

00:09:48   introduced the appearance manager stuff

00:09:50   to UIKit which is certainly something

00:09:51   that I think we both use but even beyond

00:09:54   that there's so much of this that you

00:09:56   know you're still needing to have more

00:09:58   things than beyond that and then even

00:10:01   just other stuff that beyond appearance

00:10:04   like the actual UI kid appearance stuff

00:10:06   that you actually need to do and so

00:10:07   there's not repeating yourself and

00:10:08   trying to consolidate all of this code

00:10:11   into a place that you can easily update

00:10:14   and that you know you would I what I

00:10:16   like about that approach is you

00:10:18   inevitably they'll you'll have one offs

00:10:20   and you'll have things that are slightly

00:10:21   different but you can you know even

00:10:25   inside of that you have you know two

00:10:26   different methods that are you know

00:10:30   physically close to each other in your

00:10:31   in your application that are doing the

00:10:34   you know the there's the default version

00:10:36   and then there's the you know the bold

00:10:37   version or whatever it is by putting

00:10:40   those logically similar close to each

00:10:42   other I find it so much easier when I'm

00:10:44   debugging when I'm like you know I

00:10:45   changed I change one and I expect the

00:10:47   other one to change and it doesn't it's

00:10:48   like there's something even helpful

00:10:49   about like well it's all I have to do is

00:10:52   look down a few lines and I'll probably

00:10:53   see where I'm doing it wrong but also I

00:10:56   think it's it can be really helpful even

00:10:58   just at the really really few were all

00:10:59   the way down from like to the lowest

00:11:01   level like I run into this law

00:11:03   I'm weird for doing my late layout this

00:11:05   way but I do a lot of my like view

00:11:07   layouts programmatically so I do a lot

00:11:10   of work in like view will layout sub

00:11:12   views and those types of methods that's

00:11:14   just you know that's just how I think

00:11:16   that's fine it's definitely not for

00:11:18   everybody no you don't have to apologize

00:11:20   for that as so basically a week after we

00:11:22   did the episode about how I've been

00:11:24   embracing interface builder and/or

00:11:25   layout I converted to what you're doing

00:11:28   because I just like everything with

00:11:31   interface builder and auto layout it's

00:11:33   great until you hit a wall and then you

00:11:36   realize that you're spending an

00:11:37   incredible amount of time and effort to

00:11:39   do things that you could really do very

00:11:42   easily with like a 10 line

00:11:44   you know the layout sub useful but in

00:11:48   those layouts sub view function I think

00:11:50   it's another place that I have found

00:11:51   this kind of parametric approach to be

00:11:52   really really powerful like even so in

00:11:54   Westham ways even more when you're early

00:11:57   on especially like if you define you

00:12:01   know I end up with a lot of these very

00:12:03   like my buted layout subviews methods

00:12:05   are often it's like it's half like

00:12:08   defining variables there's a lot of I

00:12:10   guess now that I'm in Swift is all these

00:12:11   let you know let's something equal

00:12:13   something let's something equals

00:12:14   something that's like the first half and

00:12:16   the second half is all the actual like

00:12:17   the framework where I'm actually saying

00:12:19   like you know build the frame and do the

00:12:21   math and wait out but you can do all

00:12:22   these fun things where you're stuck okay

00:12:24   this is the padding this is the inside

00:12:25   padding this is the outside padding and

00:12:28   you can put all those values as just

00:12:31   values that you know that you can change

00:12:33   dynamically and it's so powerful when

00:12:35   you're looking at a UI because I feel

00:12:37   like there's like I can get the bait the

00:12:41   initial UI vaguely right you know fairly

00:12:44   quickly by eye but then there's a

00:12:47   certain point that you're just kind of

00:12:48   looking at and you're like you know that

00:12:51   label just looks I think that a lot of

00:12:54   think there's a term for this where it's

00:12:55   like visual centering is a lot of times

00:12:59   that you have something to do an icon

00:13:00   design where something is technically

00:13:02   centered but it doesn't look centered

00:13:04   because yeah the like it's not if you

00:13:07   know a perfect a perfect circle is easy

00:13:08   to Center but if say you have something

00:13:10   that's really thin at the top and heavy

00:13:12   on the bottom it can actually look like

00:13:13   it's off-center if it's actually

00:13:15   centered and I think you have a lot of

00:13:16   these things in

00:13:17   in user interface design where things

00:13:20   can be technically correct like say you

00:13:22   say oh I always have eight pixel or

00:13:25   eight points of padding on the left side

00:13:26   of all my views but there's possible

00:13:29   that's somewhere in somewhere you know

00:13:31   and we put in your layout nine points

00:13:33   would actually look better and so be

00:13:35   pulling all these things into these font

00:13:37   DS function you know out of you know so

00:13:40   that there's no magic numbers in your

00:13:42   frame stuff all your frame logic in this

00:13:44   case it's just equations you know their

00:13:46   third and they're all nice and labeled

00:13:48   equations that are saying like you know

00:13:50   it's padding plus label with plus

00:13:53   padding or however you want to lay it

00:13:55   out like you're being very clear and

00:13:57   explicit can make this really a powerful

00:13:59   approach I think it works both ways like

00:14:01   either way it's like the last thing you

00:14:03   want in your app is to have a design

00:14:05   that is expressed somewhere that you

00:14:08   can't change easily you know it's I

00:14:11   think even I remember to the extent of I

00:14:13   remember I think was Vesper that I first

00:14:15   saw someone do this where they even were

00:14:17   just in Vesper I think they would say

00:14:19   they defined a bunch of these things

00:14:20   even in a plist file which is how they

00:14:24   which is an interesting approach they

00:14:25   took because it allowed non design non

00:14:29   developer people to make changes to the

00:14:33   applications appearance because they

00:14:35   would just go into a P list and change

00:14:36   stuff and so it's even more powerful in

00:14:39   that sense of that you can actually even

00:14:40   extract all this developer logic and put

00:14:43   it into something that is a bit less

00:14:44   scary like you may not necessarily want

00:14:46   your designer going into your code and

00:14:50   changing things I mean the let me

00:14:51   against designers they're lovely but

00:14:52   that's a problematic thing in a couple

00:14:55   of ways versus you know here's this P

00:14:57   list file that you can change and it's

00:15:00   much less likely to cause problems or

00:15:02   conflicts or issues down the road it's

00:15:04   also it lets them work faster you know

00:15:06   like you know if you know it it's part

00:15:08   of when you were you working on a team

00:15:10   with multiple people like that like if

00:15:11   you have a separate designer they can do

00:15:13   their job faster if you can give them

00:15:15   that kind of infrastructure and that

00:15:17   kind of setup and I think to like

00:15:19   between our two are to like you know

00:15:21   main points in like having these

00:15:23   variables defined and you know at the

00:15:25   top of your layout function versus me

00:15:27   having them try to be defined like in a

00:15:29   central place like an appearance manager

00:15:30   class

00:15:31   you can actually combine these things

00:15:32   like one of the principles of design

00:15:35   generally it's not to have too many

00:15:37   different things in one layout so like

00:15:40   and if you're gonna have like you know

00:15:42   certain fonts don't have like ten

00:15:44   different fonts in your app have maybe

00:15:46   two you know or what you know different

00:15:48   don't have like regular semi bold bold

00:15:51   heavy and book like you know have two

00:15:54   font weights and you know use have like

00:15:56   one boldest font weight and one regular

00:15:58   font weight things like that like you

00:16:00   try to minimize the amount of different

00:16:02   combos you have because it just looks it

00:16:05   tends to look better if you standardize

00:16:07   on one or two values in each one of

00:16:09   these areas so one of the things you can

00:16:10   do is you can define your default

00:16:14   spacing between elements on the screen

00:16:16   like default left margin 8 you know and

00:16:19   you can have that in your appearance

00:16:20   manager class and so you can have your

00:16:23   custom layout functions use that as a

00:16:25   starting point and then for the ones

00:16:27   that need additional padding don't just

00:16:30   put a match number in the says nine you

00:16:32   know have have it be default padding

00:16:34   plus one or even better you know the

00:16:37   floor of default padding plus ten

00:16:39   percent you know if it's if it's

00:16:42   proportional it's even better because

00:16:43   then you can scale to different sizes

00:16:44   and everything and so that kind of

00:16:47   approach it still allows you to

00:16:48   standardize things and - and it's even

00:16:50   better for what you're describing as

00:16:52   parametric design because then you can

00:16:54   go to your appearance manager class and

00:16:55   even have spacing be one of those things

00:16:58   like that you can change in one place

00:16:59   and have the whole app change as a

00:17:01   result yeah and it's it's so powerful

00:17:05   when you get when you get into this and

00:17:06   I guess it's sort of like why I wanted

00:17:07   to do an episode on it is it's it's

00:17:09   something that I remember I have every

00:17:11   now and then I'll go back though I mean

00:17:12   I have a lot of old projects and some of

00:17:14   them are still in the store and I'll go

00:17:15   back and look at the code and of course

00:17:17   like the like any programmers worst

00:17:18   nightmare is when you open if you open

00:17:20   something and there's just all these

00:17:23   magic numbers all of these just you know

00:17:26   and like I call it say a magic number is

00:17:27   any number that doesn't happen they have

00:17:29   a label as to what it means is a magic

00:17:32   number so you know sometimes it's you

00:17:35   can get away with it if it's an obvious

00:17:37   thing like the number of times I divided

00:17:39   by 60 you know and when I'm doing date

00:17:41   or time things like maybe you that's

00:17:44   okay it's not constant seconds per

00:17:46   minute hey yeah sure that's even better

00:17:49   but like what you really don't is when

00:17:51   you go into a you know something that

00:17:53   and you have like this font is it's like

00:17:55   it's 18 here it's 17 there you don't

00:17:57   know why some some place you have

00:17:59   padding here or you just have these just

00:18:01   numbers that are it's like the you know

00:18:04   I remember back in the day when I used

00:18:05   to always assume that a an iPhone's

00:18:07   width was 320 and you know when the

00:18:12   iPhone six came out all of a sudden I

00:18:14   had to go through my app and I see I

00:18:16   this is what I actually I actually did I

00:18:18   opened up Xcode and did you know fine

00:18:20   you know like search all for 324 644 480

00:18:25   like all of the these values and I found

00:18:27   dozens of them everywhere and that's

00:18:30   really problematic it's like that's

00:18:32   really shouldn't be there that should be

00:18:33   in that case it's proportional to the

00:18:35   screen so somewhere I should have a you

00:18:38   know device and get the device bounds

00:18:40   get the width and then should just

00:18:42   dynamically update and by making it

00:18:45   parent you know making it not tied to

00:18:46   something that's hard-coded in that way

00:18:48   it's like your example with padding and

00:18:50   using the floor rather than just adding

00:18:52   one if you get out of those habits like

00:18:55   anytime in a weird way you're doing

00:18:57   something that's so numerical but it

00:18:59   should have almost no numbers in it that

00:19:01   it's like only the numbers only exist at

00:19:03   the top and then everything else is

00:19:04   proportional and kind of expanding from

00:19:06   that it works really well like I've been

00:19:09   doing this a lot with on my Apple watch

00:19:11   work where you know there's these two

00:19:14   different sizes and so you have to have

00:19:17   a but another thing with the watch is

00:19:19   you don't typically change the UI

00:19:22   between the 48 and the 38 to 42 and the

00:19:25   38 millimeter Apple watch is like it's

00:19:27   not like you have a totally new it's not

00:19:29   like an iPad 2 an iPhone it's like

00:19:31   they're so close but slightly different

00:19:32   and so everything you have to do has to

00:19:34   be proportional everything needs to be

00:19:35   adaptable and flexible and unless you

00:19:38   wrap your mind around it and kind of

00:19:39   commit to that approach it's like all

00:19:41   these things just kind of like all these

00:19:42   other problems that you would have

00:19:43   otherwise just kind of fall out

00:19:45   we're sponsored this week by Linode go

00:19:48   to lynda.com slash radar and use code

00:19:52   radar 20 a check out for $20 in credit

00:19:55   Linode is a combination of high

00:19:57   performer

00:19:57   SSD Linux servers spread across eight

00:19:59   data centers around the world they're a

00:20:01   fantastic solution if your server

00:20:03   infrastructure needs you can get a

00:20:04   server up and running at Linode in just

00:20:06   under a minute with plans starting at

00:20:08   just $10 a month that now gets you two

00:20:10   gigs of RAM for just 10 bucks a month

00:20:12   this is like amazing pricing for what

00:20:15   you get at Linode David and I are both

00:20:17   customers of Lynda we both been there

00:20:18   since long before they were sponsors of

00:20:20   our show a little it's great I

00:20:22   definitely recommend them Linode is they

00:20:25   have an amazing control panel they have

00:20:27   amazing options have amazing pricing

00:20:28   this is great for things like if you

00:20:30   have to run a server for your app or

00:20:32   even if you want to run a private git

00:20:33   server if you want to host databases

00:20:36   we're on a mail server although you

00:20:37   shouldn't run your own mail server but

00:20:38   you can at Linode you can operate

00:20:40   powerful applications I have I think I

00:20:42   think overcast runs on something like 16

00:20:44   Linode VPS it's incredible you can do so

00:20:47   much there from from one little thing

00:20:50   for 20 bucks a month all the way up or

00:20:52   for 10 bucks a month even all the way up

00:20:54   to you know me running overcast there

00:20:56   for something like $1,000 a month with

00:20:58   all these different servers all these

00:20:59   high specs you can do crazy stuff at

00:21:01   Linode it's amazing I love it you should

00:21:03   love it too check it out go to lynda.com

00:21:05   slash radar he'll be supporting us by

00:21:08   doing that and you get 20 hours towards

00:21:10   any Linode plan using code radar 20 at

00:21:13   checkout and they have a 7 day

00:21:14   money-back guarantee so there's nothing

00:21:16   to lose thanks a lot to Linode for

00:21:18   supporting the show so to finish out

00:21:20   this show I seem to also kind of a fun

00:21:22   little thing for us too now that you've

00:21:23   hopefully you at this point we've

00:21:25   convinced you that parametric design

00:21:26   it's a good thing that you should build

00:21:28   your apps once you've done that there's

00:21:31   some really fun things that you can use

00:21:33   as a result to make your apps better and

00:21:36   as an example something that I do a lot

00:21:38   when I have when I'm trying to kind of

00:21:40   narrow in on a good design is I will set

00:21:44   have my app randomly change some of

00:21:47   these parameters inside of it and it

00:21:50   lets me experiment or even maybe not

00:21:52   randomly even but it's like I want it to

00:21:54   I'm trying to work out what the right

00:21:56   padding is and so I set it to you know

00:21:58   it starts at one and then five seconds

00:22:01   later it goes 2 to 5 seconds later it

00:22:02   goes to 3 that's awesome

00:22:04   have your app grow and shrink and adjust

00:22:07   as you go because it's all printed so

00:22:10   it's all just numb

00:22:11   and so it's and if you build this

00:22:14   approach you can do stuff like that

00:22:15   where you can kind of ice trout like I

00:22:17   sometimes struggle to visualize in my

00:22:19   head what different values are gonna be

00:22:22   and I mean that's part of why I'm not a

00:22:23   designer I'm a developer like I can't

00:22:25   imagine it I can just write it but if

00:22:27   you build your app this way you can sit

00:22:29   there and be like I don't really know

00:22:31   which one I should do another example is

00:22:34   you can do the same take the same

00:22:35   approach but with fonts and you say a

00:22:37   random font well you you only have so

00:22:40   many system fonts right and it isn't so

00:22:42   much that you wanted like randomly pick

00:22:44   us pick a font but it's EQ can it helps

00:22:48   start my mind thinking about how my app

00:22:51   could be different if I try different

00:22:54   things that I wouldn't necessarily think

00:22:55   to otherwise that if I had to manually

00:22:57   go through and you know type in all the

00:23:00   different font names I would never do it

00:23:02   but it's like you try through and you're

00:23:03   like huh actually this one kind of looks

00:23:06   good why does this one look good

00:23:08   and it may not be that I'm gonna end up

00:23:10   using that random font but it's like huh

00:23:11   that maybe the reason I liked that one

00:23:14   for example is that it was more

00:23:15   condensed rather than more wide or it

00:23:18   had you know obviously like big obvious

00:23:20   things like seraphs Arnon sans serifs or

00:23:22   different font weights like I feel like

00:23:24   there's something to be said for just

00:23:26   taking the approach of just like having

00:23:28   your app be very flexible this way and

00:23:30   then taking advantage of the flexibility

00:23:31   to be like let's change all the things

00:23:33   and most of the time it's not gonna look

00:23:37   good but every now and then you can kind

00:23:38   of look in maybe like that one that's

00:23:41   the one that I like and you dial into it

00:23:44   and I think you did a similar thing when

00:23:46   you were doing your dark mode there for

00:23:48   a different reason right because you

00:23:49   kept switching between the delight and

00:23:52   dark mode to accomplish to make sure

00:23:54   that you were doing it right yeah it's

00:23:56   it's actually it's kind of a way to make

00:23:57   sure that you've accommodated for all

00:23:58   four the four dynamic changes and all of

00:24:00   your screens

00:24:01   I just set a timer in the app delegate

00:24:03   to change color scheme every five

00:24:06   seconds and I went through the entire a

00:24:08   even if for some reason you find a way

00:24:11   to change the color scheme without being

00:24:13   logged in even the login screens change

00:24:16   the password reset screens change every

00:24:18   screen and overcast change dynamically

00:24:20   for docked for dark mode and any any

00:24:22   other kind of theme changes dynamic text

00:24:23   everything and

00:24:24   every screen changes because I literally

00:24:26   went through and had this running every

00:24:28   five seconds were toggle it and I went

00:24:30   through every single screen in the app

00:24:31   and and converted it and and I actually

00:24:33   and it's the you know similar you know I

00:24:35   just been fun you it's not gonna go for

00:24:36   random fonts but when I was picking over

00:24:38   castes font back when I was developing

00:24:40   1.0 I did basically that same thing I I

00:24:43   just I had like a folder full of ten

00:24:46   different custom fonts plus a couple

00:24:48   plus a list of some of the built-in ones

00:24:49   and I had all this dynamic appearance

00:24:52   stuff already in place namely for this

00:24:54   purpose and so I just tried it out

00:24:57   because it you know you can't really do

00:24:59   is in the simulator you really have to

00:25:00   see on device you have to see how the

00:25:02   stuff looks how whether it whether it

00:25:04   seems right whether it fits in and so

00:25:07   that's what I did I I had the font be

00:25:10   managed by this appearance manager class

00:25:11   since 1.0 and I just tried all these

00:25:13   different fonts and different you know

00:25:15   adjustments to the sizing and this line

00:25:17   spacing and everything else and

00:25:19   eventually found the one that I thought

00:25:21   worked best and then that I like the

00:25:23   look of best but I think if there's kind

00:25:25   of like an overriding theme of what

00:25:27   we're getting at here you know we as

00:25:29   programmers we often are not the best

00:25:32   designers III think I think it's safe to

00:25:36   say and and and yeah and back all the

00:25:40   way back in episode number 10 of this

00:25:42   show we called design by a programmer we

00:25:44   kind of talked about some of the ways we

00:25:45   make images this way and I would be

00:25:47   horribly new outfit I didn't mention

00:25:50   paint code as as being an incredible

00:25:53   resource paint code not only allows you

00:25:55   to draw stuff and it's a vector drawing

00:25:58   program that outputs either images or

00:26:00   source code and you can you render

00:26:02   things dynamically which is awesome for

00:26:04   parametric design but even within paint

00:26:06   code you can have variables in your

00:26:09   paint code documents for things like

00:26:11   colors stroke wits font you know things

00:26:14   like that and you can you can you can

00:26:16   dynamically just like hit a button like

00:26:18   an up-or-down stepper control on some of

00:26:20   these things to like increase the stroke

00:26:22   width on everything in your document

00:26:23   that uses it and or you can have colors

00:26:25   that are derived from other colors you

00:26:27   can say this color should be base color

00:26:29   minus twenty percent saturation or

00:26:31   whatever you want it you can have cool

00:26:33   stuff like that in paint code I highly

00:26:35   recommend this app it's amazing

00:26:38   you know this is all a way for

00:26:40   programmers like us who are not really

00:26:43   designers by training or by skill really

00:26:46   to fumble our way through and and we

00:26:50   discussed a lot back in episode 10 why

00:26:52   you might want to do this yourself and

00:26:53   not hire a full-time designer and for

00:26:55   many people that choice is made for them

00:26:57   by economics you know so so a lot of

00:26:59   times you are your own designer just

00:27:01   because that's what you can afford to do

00:27:03   and it's nice when you have this kind of

00:27:06   parametric approach because we don't

00:27:10   inherently we can't just as you said

00:27:12   earlier we can't just kind of come up

00:27:13   with the right thing on our first try in

00:27:14   our head we have to just kind of build

00:27:16   it that way try it see it in the app and

00:27:20   then kind of figure out play with the

00:27:22   values a little bit to see like what

00:27:23   really looks best what really works best

00:27:25   here and when you have this kind of

00:27:28   parametric approach this kind of

00:27:30   procedural value based parametric

00:27:32   centralized approach it makes that so

00:27:34   much more possible and so much easier to

00:27:37   be able to experiment with your design

00:27:38   so that you can eventually come up with

00:27:40   what's right and I think in many ways

00:27:42   that is at the end of that I kept at the

00:27:44   core of this idea is anything we can do

00:27:46   as developers to make experimentation

00:27:49   and exploration of our app easier and

00:27:52   safer you know that I'm having complete

00:27:55   confidence that if I may change one of

00:27:57   these values I'm not gonna horribly

00:27:59   break everything and if I do like it's I

00:28:01   just undo it it's it's not that kind of

00:28:03   change where it feels heavy and anything

00:28:06   we can do I think to make

00:28:08   experimentation to make exploration

00:28:10   light and fun in some ways honestly I

00:28:13   think will allow us to make our apps

00:28:16   better and to do it in a way that fits a

00:28:19   developer mindset and so anything you

00:28:22   can think of like this is an example

00:28:24   where you know do you take an approach

00:28:25   to deteriorate fun and easy to

00:28:27   experiment maybe you can think of other

00:28:30   places to do that in your application or

00:28:31   in the way that you build it but like

00:28:33   that kind of a freedom I think is what

00:28:35   ultimately makes us so powerful and

00:28:37   ultimate I think allows you know

00:28:39   individual developers or developers

00:28:42   without big design budgets you know like

00:28:44   I can't come up with it right the first

00:28:46   time but I can if I take this approach I

00:28:49   can try a hundred different designs

00:28:52   in the time that a regular designer you

00:28:54   know could only come up with one or two

00:28:56   just because I'm just iterating so

00:28:57   quickly through it and I think that is

00:28:59   at its core what makes it so powerful

00:29:01   exactly all right best of luck everybody

00:29:04   amending your designing by programmer

00:29:06   style here designed by math that's all

00:29:09   the time we have for this week thank you

00:29:11   for listening everybody and we will talk

00:29:12   to you next week bye