Under the Radar

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