Under the Radar

Under the Radar 54: Parametric Design

 

  welcome to under the radar show but

  independent iOS app development I'm

  Marco Arment and I'm David Smith under

  the radar is never longer than 30

  minutes so let's get started so today we

  wanted to talk a little bit about design

  to pull it back into something a little

  more pretty I suppose to talk a little

  bit about though a very low level

  approach to design that I think we both

  take in our apps and it's something that

  I think can be really powerful once you

  start taking this approach and start

  using it in all of your apps and it's

  something that I tend to call for myself

  parametric design which is a very fancy

  and nonsensical name to have for

  something like this but basically it's

  designing your app in such a way that

  large amount parts of the appearance of

  the layout of the sort of the way that

  it will appear visually on the screen is

  controlled by parameters and variables

  within your code to the degree that you

  can change a few few numbers change a

  few values and you can radically change

  the appearance of your application and

  this is something that I think works

  best if you do a lot of programmatic UI

  rather than you know something like a

  storyboard where a lot of those values

  are baked into the storyboard or baked

  into the nib if you were doing any

  amount of your UI in code it's possible

  to do a lot of this um if you're doing

  the in storyboards and so if you can

  still do it there you're just going to

  have duplicated effort in a lot of

  places where you set a value in your

  storyboard and then you also have

  somewhere in code that you can override

  that value but either way however you

  end up with it if you design your app

  such that you can change everything

  dynamically it makes the development

  process I think much more fluid and is

  something that I found for myself helps

  me very quickly iterate on a design

  because usually what happens and this is

  something the reason this topic is

  friend of mine for me is I'm going

  through the sort of layout and design

  phase of my next app and I the way I

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

  basic super simple kind of horrendously

  ugly design in place it has bad colors

  that has bad fonts or sizes and weights

  and I'm just trying to get it's sort of

  basically working and once I have that I

  then want to go through and actually

  sort of like adjust it and dial it down

  and and this is sort of the I guess the

  bottom-up design approach rather than

  you know if you're working with a

  professional designer or somebody who's

  giving you a here's what it should look

  like in the end and you're working from

  there down obviously this isn't

  something will print approach that would

  work but if you're working it from the

  purse like me where you're starting with

  just basic like it's just the UI button

  that looks like a UI button it's a UI

  label that just looks like a UI label if

  you start there and are working on it if

  you build your app such that you can you

  know have all these dials and hooks into

  it and then you can quickly change

  things and this is the approach that I

  tend to take that when I'm actually

  iterating on my UI I'm just sitting

  there changing variables and then build

  and run look at it see how it feels

  running on my device I've even seen

  people who do this where you'll actually

  build a method into the application

  where if you you know it's like

  quadruple tap on the screen with three

  fingers a little UI pops up that you can

  change the the values to be well they've

  app is live and running but it's an

  approach I think that is a way of

  thinking about your app and a level that

  gives you that flexibility and

  ultimately it probably even makes your

  app better from a like attest ability or

  really write tests but from an ability

  to understand what's going on

  perspective because everything that's in

  the app everything about the way it

  looks is you know explicitly written out

  somewhere because it's a variable that

  whose value you can change yeah I mean

  this is the kind of thing I've designed

  overcast from day one to be this way in

  many ways and and you know this this can

  start with very simple things it can

  start with something like text sizes and

  whether your app has like a light or

  dark theme and if you make all this

  managed by some kind of central class

  like my and overcast is called OC

  appearance you know cuz you know it's it

  goes beyond what you eye appearance

  offers although the appearance manages

  the UI appearance but OC appearance is

  just my centralized class that listens

  for notifications for things like the

  dynamic text size preference changing

  then it posts it basically repost a

  notification to all my custom controls

  and classes and controllers and

  everything they all listen for the UI or

  the for the OC appearance did change

  notification and then they set their own

  layouts accordingly and when you take

  this kind of approach this makes it way

  easier to do things like support dynamic

  type or support a dark mode or alternate

  color schemes or to support certain

  accessibility options like bold text or

  button button shapes so there's lots of

  different things you can do once you

  have this kind of centralized design and

  appearance and theme manager

  infrastructure and so and one of the

  things I've done is you know very simply

  I've created you know if you have like a

  you know some kind of control or screen

  or area where you have a background you

  can assume that background probably be

  white by default in most things in

  overcast I make that an OC background

  view which is a custom UI view subclass

  that literally just listens to the OC

  appearance to change notification and

  sets itself to be the current themes

  background color and that way it's very

  very easy for me to not only change the

  design but to implement dark mode and so

  I can test out all sorts of colors and

  things very easily and then every

  background in my app automatically

  changes with this custom OC back review

  similar I have you know OC button aisle

  OC bordered button for all the little

  round rect buttons I have an overcast

  those are all you know a standard class

  that automatically customizes its own

  appearance whenever the appearance

  changes and can respond to all these

  different values and everything both

  dynamically or you know or every killing

  the code like you were saying I also

  have an OC styled label and this is one

  of my most used and biggest time-saver

  UI things I've ever done is the OC

  styled label and basically it's it's a

  UI label subclass like the other ones it

  manages its own appearance and its own

  parameters and everything based on based

  on the current overcast theme whether

  it's dark mode or whatever but the OC

  styled label takes as its main parameter

  the UI font text style which is you know

  just like if you're picking a UI font

  you can call the preferred font with

  whatever the full method name is

  font with style UI font textile and this

  these are all the iOS 7 and above

  built-in textiles you have like you know

  headline body caption one caption to

  stuff like that and my OC styled label I

  can just create one of these instances

  and stick it right into a UI in code or

  an interface builder and it

  automatically will style itself not only

  for that style but it also will pick up

  things like in my OC appearance class

  I've defined default colors default font

  attributes so for instance you know in

  the San Francisco font numbers by

  default are not proportional exactly

  they like like a1 is narrower than a

  zero for instance you know it's it's

  they're not fixed fixed proportions

  rather in many of my contexts I need

  that so I have one place to set that in

  the OC appearance manager or have a

  function that's called something on the

  lines of default font attributes for

  text style and I know that in certain

  text styles in almost all of them I want

  my fixed width numerals so I have that

  one place to set it and my OC styled

  label class can it can it add it can

  manage all that for me so all over the

  UI I'm only having to change this stuff

  in one place I change one value in my in

  100cc a parent's line and then all the

  labels across my entire app will

  automatically update dynamic text is

  super easy because all the all those

  styled labels they include either a

  forced fixed size for things that are

  really tight like the labels that are in

  the title bar on the Now Playing screen

  or a dynamic size adjustment based on

  dynamic type so I can say just create

  this label and have it be the regular

  preferred dynamic type size whatever the

  current size is or I can have it say

  that size plus 2 points if so in some

  needs to be little bit bigger early you

  know - two points little bit smaller and

  that makes it so easy to support these

  accessibility features and to you know

  use an emic type and make all that

  happen for people who want or need that

  and and still have this incredible ease

  on the code side where I don't have to

  code that into every view controller I

  don't have to have that part of every

  every custom control like it just

  automatically inherits from these few

  base classes I've made that manage their

  own appearance and then the OC

  appearance class that handles at all

  parametrically as yes you would say like

  I have one place where I can change this

  if I want to change the font way

  across the entire app I changed that in

  one place and one line of code in that

  class it's doing it this way it makes

  things so much easier and as as

  conditions change as Styles change as

  fashion changes in in app design or as

  Apple adds things like you know there's

  there's a rumor that they might soon add

  a system-wide dark mode then you this

  again if you have designed this way this

  gives you one place where you have to

  implement that and then all the rest of

  your app automatically picks it up from

  your appearance manager it's you really

  should design a suede you can yeah and I

  think there's this sort of there's two

  levels of where this comes into play

  there's the the approach they decide if

  it's that you're talking about where I

  think it's very much the following the

  principle of like not repeating yourself

  of avoiding duplication that you don't

  have every single view controller has a

  viewdidload method that's just 50 lines

  of settings style stuff and obviously a

  lot of this got better when they

  introduced the appearance manager stuff

  to UIKit which is certainly something

  that I think we both use but even beyond

  that there's so much of this that you

  know you're still needing to have more

  things than beyond that and then even

  just other stuff that beyond appearance

  like the actual UI kid appearance stuff

  that you actually need to do and so

  there's not repeating yourself and

  trying to consolidate all of this code

  into a place that you can easily update

  and that you know you would I what I

  like about that approach is you

  inevitably they'll you'll have one offs

  and you'll have things that are slightly

  different but you can you know even

  inside of that you have you know two

  different methods that are you know

  physically close to each other in your

  in your application that are doing the

  you know the there's the default version

  and then there's the you know the bold

  version or whatever it is by putting

  those logically similar close to each

  other I find it so much easier when I'm

  debugging when I'm like you know I

  changed I change one and I expect the

  other one to change and it doesn't it's

  like there's something even helpful

  about like well it's all I have to do is

  look down a few lines and I'll probably

  see where I'm doing it wrong but also I

  think it's it can be really helpful even

  just at the really really few were all

  the way down from like to the lowest

  level like I run into this law

  I'm weird for doing my late layout this

  way but I do a lot of my like view

  layouts programmatically so I do a lot

  of work in like view will layout sub

  views and those types of methods that's

  just you know that's just how I think

  that's fine it's definitely not for

  everybody no you don't have to apologize

  for that as so basically a week after we

  did the episode about how I've been

  embracing interface builder and/or

  layout I converted to what you're doing

  because I just like everything with

  interface builder and auto layout it's

  great until you hit a wall and then you

  realize that you're spending an

  incredible amount of time and effort to

  do things that you could really do very

  easily with like a 10 line

  you know the layout sub useful but in

  those layouts sub view function I think

  it's another place that I have found

  this kind of parametric approach to be

  really really powerful like even so in

  Westham ways even more when you're early

  on especially like if you define you

  know I end up with a lot of these very

  like my buted layout subviews methods

  are often it's like it's half like

  defining variables there's a lot of I

  guess now that I'm in Swift is all these

  let you know let's something equal

  something let's something equals

  something that's like the first half and

  the second half is all the actual like

  the framework where I'm actually saying

  like you know build the frame and do the

  math and wait out but you can do all

  these fun things where you're stuck okay

  this is the padding this is the inside

  padding this is the outside padding and

  you can put all those values as just

  values that you know that you can change

  dynamically and it's so powerful when

  you're looking at a UI because I feel

  like there's like I can get the bait the

  initial UI vaguely right you know fairly

  quickly by eye but then there's a

  certain point that you're just kind of

  looking at and you're like you know that

  label just looks I think that a lot of

  think there's a term for this where it's

  like visual centering is a lot of times

  that you have something to do an icon

  design where something is technically

  centered but it doesn't look centered

  because yeah the like it's not if you

  know a perfect a perfect circle is easy

  to Center but if say you have something

  that's really thin at the top and heavy

  on the bottom it can actually look like

  it's off-center if it's actually

  centered and I think you have a lot of

  these things in

  in user interface design where things

  can be technically correct like say you

  say oh I always have eight pixel or

  eight points of padding on the left side

  of all my views but there's possible

  that's somewhere in somewhere you know

  and we put in your layout nine points

  would actually look better and so be

  pulling all these things into these font

  DS function you know out of you know so

  that there's no magic numbers in your

  frame stuff all your frame logic in this

  case it's just equations you know their

  third and they're all nice and labeled

  equations that are saying like you know

  it's padding plus label with plus

  padding or however you want to lay it

  out like you're being very clear and

  explicit can make this really a powerful

  approach I think it works both ways like

  either way it's like the last thing you

  want in your app is to have a design

  that is expressed somewhere that you

  can't change easily you know it's I

  think even I remember to the extent of I

  remember I think was Vesper that I first

  saw someone do this where they even were

  just in Vesper I think they would say

  they defined a bunch of these things

  even in a plist file which is how they

  which is an interesting approach they

  took because it allowed non design non

  developer people to make changes to the

  applications appearance because they

  would just go into a P list and change

  stuff and so it's even more powerful in

  that sense of that you can actually even

  extract all this developer logic and put

  it into something that is a bit less

  scary like you may not necessarily want

  your designer going into your code and

  changing things I mean the let me

  against designers they're lovely but

  that's a problematic thing in a couple

  of ways versus you know here's this P

  list file that you can change and it's

  much less likely to cause problems or

  conflicts or issues down the road it's

  also it lets them work faster you know

  like you know if you know it it's part

  of when you were you working on a team

  with multiple people like that like if

  you have a separate designer they can do

  their job faster if you can give them

  that kind of infrastructure and that

  kind of setup and I think to like

  between our two are to like you know

  main points in like having these

  variables defined and you know at the

  top of your layout function versus me

  having them try to be defined like in a

  central place like an appearance manager

  class

  you can actually combine these things

  like one of the principles of design

  generally it's not to have too many

  different things in one layout so like

  and if you're gonna have like you know

  certain fonts don't have like ten

  different fonts in your app have maybe

  two you know or what you know different

  don't have like regular semi bold bold

  heavy and book like you know have two

  font weights and you know use have like

  one boldest font weight and one regular

  font weight things like that like you

  try to minimize the amount of different

  combos you have because it just looks it

  tends to look better if you standardize

  on one or two values in each one of

  these areas so one of the things you can

  do is you can define your default

  spacing between elements on the screen

  like default left margin 8 you know and

  you can have that in your appearance

  manager class and so you can have your

  custom layout functions use that as a

  starting point and then for the ones

  that need additional padding don't just

  put a match number in the says nine you

  know have have it be default padding

  plus one or even better you know the

  floor of default padding plus ten

  percent you know if it's if it's

  proportional it's even better because

  then you can scale to different sizes

  and everything and so that kind of

  approach it still allows you to

  standardize things and - and it's even

  better for what you're describing as

  parametric design because then you can

  go to your appearance manager class and

  even have spacing be one of those things

  like that you can change in one place

  and have the whole app change as a

  result yeah and it's it's so powerful

  when you get when you get into this and

  I guess it's sort of like why I wanted

  to do an episode on it is it's it's

  something that I remember I have every

  now and then I'll go back though I mean

  I have a lot of old projects and some of

  them are still in the store and I'll go

  back and look at the code and of course

  like the like any programmers worst

  nightmare is when you open if you open

  something and there's just all these

  magic numbers all of these just you know

  and like I call it say a magic number is

  any number that doesn't happen they have

  a label as to what it means is a magic

  number so you know sometimes it's you

  can get away with it if it's an obvious

  thing like the number of times I divided

  by 60 you know and when I'm doing date

  or time things like maybe you that's

  okay it's not constant seconds per

  minute hey yeah sure that's even better

  but like what you really don't is when

  you go into a you know something that

  and you have like this font is it's like

  it's 18 here it's 17 there you don't

  know why some some place you have

  padding here or you just have these just

  numbers that are it's like the you know

  I remember back in the day when I used

  to always assume that a an iPhone's

  width was 320 and you know when the

  iPhone six came out all of a sudden I

  had to go through my app and I see I

  this is what I actually I actually did I

  opened up Xcode and did you know fine

  you know like search all for 324 644 480

  like all of the these values and I found

  dozens of them everywhere and that's

  really problematic it's like that's

  really shouldn't be there that should be

  in that case it's proportional to the

  screen so somewhere I should have a you

  know device and get the device bounds

  get the width and then should just

  dynamically update and by making it

  parent you know making it not tied to

  something that's hard-coded in that way

  it's like your example with padding and

  using the floor rather than just adding

  one if you get out of those habits like

  anytime in a weird way you're doing

  something that's so numerical but it

  should have almost no numbers in it that

  it's like only the numbers only exist at

  the top and then everything else is

  proportional and kind of expanding from

  that it works really well like I've been

  doing this a lot with on my Apple watch

  work where you know there's these two

  different sizes and so you have to have

  a but another thing with the watch is

  you don't typically change the UI

  between the 48 and the 38 to 42 and the

  38 millimeter Apple watch is like it's

  not like you have a totally new it's not

  like an iPad 2 an iPhone it's like

  they're so close but slightly different

  and so everything you have to do has to

  be proportional everything needs to be

  adaptable and flexible and unless you

  wrap your mind around it and kind of

  commit to that approach it's like all

  these things just kind of like all these

  other problems that you would have

  otherwise just kind of fall out

  we're sponsored this week by Linode go

  to lynda.com slash radar and use code

  radar 20 a check out for $20 in credit

  Linode is a combination of high

  performer

  SSD Linux servers spread across eight

  data centers around the world they're a

  fantastic solution if your server

  infrastructure needs you can get a

  server up and running at Linode in just

  under a minute with plans starting at

  just $10 a month that now gets you two

  gigs of RAM for just 10 bucks a month

  this is like amazing pricing for what

  you get at Linode David and I are both

  customers of Lynda we both been there

  since long before they were sponsors of

  our show a little it's great I

  definitely recommend them Linode is they

  have an amazing control panel they have

  amazing options have amazing pricing

  this is great for things like if you

  have to run a server for your app or

  even if you want to run a private git

  server if you want to host databases

  we're on a mail server although you

  shouldn't run your own mail server but

  you can at Linode you can operate

  powerful applications I have I think I

  think overcast runs on something like 16

  Linode VPS it's incredible you can do so

  much there from from one little thing

  for 20 bucks a month all the way up or

  for 10 bucks a month even all the way up

  to you know me running overcast there

  for something like $1,000 a month with

  all these different servers all these

  high specs you can do crazy stuff at

  Linode it's amazing I love it you should

  love it too check it out go to lynda.com

  slash radar he'll be supporting us by

  doing that and you get 20 hours towards

  any Linode plan using code radar 20 at

  checkout and they have a 7 day

  money-back guarantee so there's nothing

  to lose thanks a lot to Linode for

  supporting the show so to finish out

  this show I seem to also kind of a fun

  little thing for us too now that you've

  hopefully you at this point we've

  convinced you that parametric design

  it's a good thing that you should build

  your apps once you've done that there's

  some really fun things that you can use

  as a result to make your apps better and

  as an example something that I do a lot

  when I have when I'm trying to kind of

  narrow in on a good design is I will set

  have my app randomly change some of

  these parameters inside of it and it

  lets me experiment or even maybe not

  randomly even but it's like I want it to

  I'm trying to work out what the right

  padding is and so I set it to you know

  it starts at one and then five seconds

  later it goes 2 to 5 seconds later it

  goes to 3 that's awesome

  have your app grow and shrink and adjust

  as you go because it's all printed so

  it's all just numb

  and so it's and if you build this

  approach you can do stuff like that

  where you can kind of ice trout like I

  sometimes struggle to visualize in my

  head what different values are gonna be

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

  designer I'm a developer like I can't

  imagine it I can just write it but if

  you build your app this way you can sit

  there and be like I don't really know

  which one I should do another example is

  you can do the same take the same

  approach but with fonts and you say a

  random font well you you only have so

  many system fonts right and it isn't so

  much that you wanted like randomly pick

  us pick a font but it's EQ can it helps

  start my mind thinking about how my app

  could be different if I try different

  things that I wouldn't necessarily think

  to otherwise that if I had to manually

  go through and you know type in all the

  different font names I would never do it

  but it's like you try through and you're

  like huh actually this one kind of looks

  good why does this one look good

  and it may not be that I'm gonna end up

  using that random font but it's like huh

  that maybe the reason I liked that one

  for example is that it was more

  condensed rather than more wide or it

  had you know obviously like big obvious

  things like seraphs Arnon sans serifs or

  different font weights like I feel like

  there's something to be said for just

  taking the approach of just like having

  your app be very flexible this way and

  then taking advantage of the flexibility

  to be like let's change all the things

  and most of the time it's not gonna look

  good but every now and then you can kind

  of look in maybe like that one that's

  the one that I like and you dial into it

  and I think you did a similar thing when

  you were doing your dark mode there for

  a different reason right because you

  kept switching between the delight and

  dark mode to accomplish to make sure

  that you were doing it right yeah it's

  it's actually it's kind of a way to make

  sure that you've accommodated for all

  four the four dynamic changes and all of

  your screens

  I just set a timer in the app delegate

  to change color scheme every five

  seconds and I went through the entire a

  even if for some reason you find a way

  to change the color scheme without being

  logged in even the login screens change

  the password reset screens change every

  screen and overcast change dynamically

  for docked for dark mode and any any

  other kind of theme changes dynamic text

  everything and

  every screen changes because I literally

  went through and had this running every

  five seconds were toggle it and I went

  through every single screen in the app

  and and converted it and and I actually

  and it's the you know similar you know I

  just been fun you it's not gonna go for

  random fonts but when I was picking over

  castes font back when I was developing

  1.0 I did basically that same thing I I

  just I had like a folder full of ten

  different custom fonts plus a couple

  plus a list of some of the built-in ones

  and I had all this dynamic appearance

  stuff already in place namely for this

  purpose and so I just tried it out

  because it you know you can't really do

  is in the simulator you really have to

  see on device you have to see how the

  stuff looks how whether it whether it

  seems right whether it fits in and so

  that's what I did I I had the font be

  managed by this appearance manager class

  since 1.0 and I just tried all these

  different fonts and different you know

  adjustments to the sizing and this line

  spacing and everything else and

  eventually found the one that I thought

  worked best and then that I like the

  look of best but I think if there's kind

  of like an overriding theme of what

  we're getting at here you know we as

  programmers we often are not the best

  designers III think I think it's safe to

  say and and and yeah and back all the

  way back in episode number 10 of this

  show we called design by a programmer we

  kind of talked about some of the ways we

  make images this way and I would be

  horribly new outfit I didn't mention

  paint code as as being an incredible

  resource paint code not only allows you

  to draw stuff and it's a vector drawing

  program that outputs either images or

  source code and you can you render

  things dynamically which is awesome for

  parametric design but even within paint

  code you can have variables in your

  paint code documents for things like

  colors stroke wits font you know things

  like that and you can you can you can

  dynamically just like hit a button like

  an up-or-down stepper control on some of

  these things to like increase the stroke

  width on everything in your document

  that uses it and or you can have colors

  that are derived from other colors you

  can say this color should be base color

  minus twenty percent saturation or

  whatever you want it you can have cool

  stuff like that in paint code I highly

  recommend this app it's amazing

  you know this is all a way for

  programmers like us who are not really

  designers by training or by skill really

  to fumble our way through and and we

  discussed a lot back in episode 10 why

  you might want to do this yourself and

  not hire a full-time designer and for

  many people that choice is made for them

  by economics you know so so a lot of

  times you are your own designer just

  because that's what you can afford to do

  and it's nice when you have this kind of

  parametric approach because we don't

  inherently we can't just as you said

  earlier we can't just kind of come up

  with the right thing on our first try in

  our head we have to just kind of build

  it that way try it see it in the app and

  then kind of figure out play with the

  values a little bit to see like what

  really looks best what really works best

  here and when you have this kind of

  parametric approach this kind of

  procedural value based parametric

  centralized approach it makes that so

  much more possible and so much easier to

  be able to experiment with your design

  so that you can eventually come up with

  what's right and I think in many ways

  that is at the end of that I kept at the

  core of this idea is anything we can do

  as developers to make experimentation

  and exploration of our app easier and

  safer you know that I'm having complete

  confidence that if I may change one of

  these values I'm not gonna horribly

  break everything and if I do like it's I

  just undo it it's it's not that kind of

  change where it feels heavy and anything

  we can do I think to make

  experimentation to make exploration

  light and fun in some ways honestly I

  think will allow us to make our apps

  better and to do it in a way that fits a

  developer mindset and so anything you

  can think of like this is an example

  where you know do you take an approach

  to deteriorate fun and easy to

  experiment maybe you can think of other

  places to do that in your application or

  in the way that you build it but like

  that kind of a freedom I think is what

  ultimately makes us so powerful and

  ultimate I think allows you know

  individual developers or developers

  without big design budgets you know like

  I can't come up with it right the first

  time but I can if I take this approach I

  can try a hundred different designs

  in the time that a regular designer you

  know could only come up with one or two

  just because I'm just iterating so

  quickly through it and I think that is

  at its core what makes it so powerful

  exactly all right best of luck everybody

  amending your designing by programmer

  style here designed by math that's all

  the time we have for this week thank you

  for listening everybody and we will talk

  to you next week bye