Under the Radar

Under the Radar 10: Designed by a Programmer

 

  welcome to under the radar or show about

  independent app development I'm Marco

  Arment and I'm David Smith under the

  radar is never long within 30 minutes so

  let's get started

  so this week we wanted to talk about how

  you can be kind of like us independent

  developers who work for yourself without

  having a full-time designer or trying to

  minimize how much of a designers time

  you need because oftentimes people who

  are working for themselves can't afford

  a full-time designer or much design at

  all from up from other people and

  sometimes even when you can afford it if

  you're working on on like a small app or

  you need to get something out quickly or

  you're not sure of the market of

  something you often want to keep your

  expenses on that app very low and it's

  often hard to justify having a full-time

  designer or or having lots of hours from

  a contract designer helping you out

  there so we kind of wanted to talk about

  the reality and process of being a

  programmer who kind of designs it kind

  of does your own design or and and

  having how that works out and then other

  things later on about things like how

  you can do programmatic style assets

  versus static assets in your apps so

  David what's what is your experience

  been with with design for your apps so I

  do most of the core design of my apps

  myself which is definitely it isn't it's

  a it's a mixed bag in terms of what that

  ends up doing but for the reasons you

  just outlined like I it's a hard thing

  to hire a designer

  especially I find refer like at the

  first app or like the first version of

  the app which is a little bit backwards

  in some ways but for the way that I make

  apps

  I never know if the app I'm making is

  going to be worth putting a lot of time

  and energy and resources into and so for

  a lot of my apps like the first version

  is just a couple weeks of work and like

  the concept of hiring a designer even

  just like the time overhead if you know

  like the cost aside if I could find a

  really inexpensive designer like the

  cost overhead in terms of time of going

  back and forth and trying to underlie

  k-- getting everybody on the same page

  and then waiting for the assets and

  doing all that like it doesn't work as

  well for me and so I tend to just sort

  of

  hope for the best and design things and

  you know the result is maybe it's a bit

  mixed but and what I find though is at

  least like once you get if you haven't

  once you have some experience designing

  apps like the core design questions I

  guess this would be the UX design I'm

  not really as familiar with the terms

  all the different like UI us don't email

  us and like graphic design maybe other

  three kinds of design I don't know like

  the making an app that sort of like

  works right and function is functional

  and intuitive that part I think I have a

  good handle on and I can make apps that

  do that they just tend to not be pretty

  and in general I found that people are

  pretty forgiving about things not being

  pretty they rather it be functional and

  so you can kind of get away with a lot

  more than you may otherwise have and

  definitely this has been a lot easier

  since people don't expect apps to be

  pixel perfect anymore like it's there

  was a time when it was really hard if

  you app didn't have like the crazy

  textures and everything is just aligned

  just so like you know right now you're

  building an app that has to be let's see

  it's pretty 4s sized iPhone 5 size

  iPhone 6 size iPhone 6 plus size then

  you have iPad you have 1x iPad and 2x

  iPad and iPad pro and so like it's your

  design has to scale to everything anyway

  and so you can be you can get away with

  that feel like in some ways a lot more

  because you're trying to design

  something more fluid anyway like in some

  ways it's more like a web design you

  know now whereas before it was this this

  very like texturally in graphically rich

  style in like the the iOS 6 and earlier

  days and and then since the iOS 7 style

  UI with you know all these clean flat

  colors and thin text everywhere and lots

  of white space I think it has shifted

  more into what Web Design kind of always

  was where you know you you because you

  have to design for so many screen sizes

  and be ready to adapt to new ones that

  might come out that we don't even know

  about yet now you you are kind of forced

  to make things simpler and more reliant

  on like text flow and stuff like that

  and and less about it these giant

  images and and also those your

  out-of-style now which has been such a

  huge benefit to people like us who don't

  have or can't afford full time design

  help it's been a huge boon for us yeah

  but I think of course it probably ends

  up with meaning that me we become much

  more reliant on I feel like there's a

  certain I don't really know where I

  learned these and I think you actually

  have a better handle on these some

  people ask you but like there's certain

  seem like there's a certain basic set of

  like rules about layout about how you

  structure like typography or the white

  space of a page and to make it like look

  right and when it isn't it at least at

  this point now I have enough of a sense

  of it like I don't necessarily know why

  it's wrong but I know it is wrong and I

  picked that up just as you go but like

  once you like it's more important in

  some ways because things aren't pixel

  perfect you just have these basic like

  elements of good design under your belt

  and this isn't I notice in all of your

  apps like as you've gone there always

  seems to have that nice clean sharp look

  where do you think you learned to do

  that well I mean there's these different

  parts of design right so there's like

  there's the the like graphical artistry

  part of it and that's things like

  textures things like designing like rich

  icons stuff like that that part I have

  never been good at and I probably never

  will be good at and I'm okay with that

  that part I'm happy to outsource and and

  pay whatever it takes to get you know a

  great app icon made you know if I need

  if the textures ever come back in style

  I hope they don't they probably

  eventually will and you know then I'll

  Karzai bridge when I come to it because

  that will basically drive my costs up

  substantially but it's alright you can

  just have retro apps that are without

  without texture you just be retro it'll

  be fine yeah it will always become an

  effect rather than this is what people

  do but you know I think you know so

  there's different parts of design the

  graphical stuff I really can't do but

  the rest of it as you mentioned like the

  you know the rest of what you you

  encounter are most apt design things

  like layout basic text and type

  agra fee you know spacing that I've just

  kind of slowly developed my own

  sensibilities for that over time by you

  know starting some of it started in web

  design but also just like just kind of

  paying attention and developing a feel

  for it over time which is totally

  unhelpful like that I know I recognize

  like if you're listening and trying to

  figure you know trying to answer the

  question of like how do I become

  familiar with the basics of design like

  I don't know I can't tell you that

  there's probably some decent books about

  it that are made for for this purpose

  I'll try to find them and put them the

  show notes if I if I can but I I just I

  haven't gone that pad I've just kind of

  slowly developed a sensibility by just

  like kind of paying attention to

  designers and to design even though I'm

  I've never really been trained as a

  designer or consider myself one and a

  lot of it is just like kind of like you

  know what when you see it you know like

  when when you lay something out in a way

  that is visually pleasing like you

  yourself will notice that this looks

  good

  in most case you know like it because

  you are also a Burres and you were also

  a user of this app so you kind of like

  play with it following some basic

  principles you can kind of play with it

  and work it out until until it looks

  really good but what you said is also

  correct like people are very forgiving

  of this I mean god help you if you ever

  look up a screenshot of Instapaper 1.0

  it like it to some degree in many cases

  it doesn't matter as much as people

  think it does design is kind of like

  good marketing where it is really nice

  to have if you want if you if your app

  is going to become big and successful

  you probably need good design but you

  can you can you can get an app out there

  and you can start building a market for

  yourself without having professional

  quality design it is not it is not like

  a strict requirement for success and and

  in many cases in many markets especially

  like the the more narrow the market gets

  the more specialized or professional a

  market gets the less design is valued or

  the less it matters and so if you're

  making an app like you know for somebody

  to get their job done and you know it

  basically needs like four buttons and a

  text field

  you know that then like it doesn't

  really matter to a lot of it like it

  whether that's really pretty or not it's

  probably not going to affect your

  success in in in that narrow market as

  much as much as it would in like a mass

  consumer photography app say you know so

  it really depends on what you're making

  and how much this is worth but

  ultimately you know good design

  something that if you can do it you

  should do it and if you can't afford it

  you should do it in almost every case

  but that could be very expensive I mean

  like you know like hiring a professional

  designer could cost hundreds to

  thousands of dollars per day of their

  work and and it's really it can be it

  adds up so quickly it just just to get

  an app icon made you can get a an okay

  icon made for a few hundred dollars to

  get a great icon made might cost a few

  thousand dollars I mean again this it's

  this is big money we're talking about

  for for independent programmers like

  because most designers most of their

  work comes from corporate clients so so

  you have to build in all these high

  prices you have to you have to account

  for how much of a pain corporate clients

  are to deal with how much overhead

  you're going to have for every billable

  hour that you can actually get paid for

  you have to account for all that and

  price things accordingly whereas you

  know when you're independent hiring an

  iron your designer these prices are

  often out of reach so you know it does

  help to familiarize yourself with the

  basics of design or to hire a designer

  you know for for the stuff that really

  matters like your app icon and and you

  know maybe like a once-over if your main

  interface but not to have somebody that

  you're like paying every single day or

  every single month ongoing so it depends

  it depends a lot on the people you can

  find you know if you can find a great

  designer who will take on your work for

  a price you can afford great that's

  awesome

  you know but I I have found that to be

  very difficult most of the time myself

  yeah because I think the difficulty

  there is it's the best designers like

  are like if you're not paying them well

  then you they're kind of ripping them

  off like it's like right

  Vic that's the nature of like there

  really is like if they really are that

  good then they should be in some ways

  like they they should be we know well

  paid for their work and doing

  you know and doing that probably with

  both clients who can do it and so you

  end up with kind of a lot of you know

  for small independent apps you just

  doesn't yeah economics just don't tend

  to work out and in some ways you're

  probably better off

  it's like rather than spending that

  money on the design that design it's

  like I don't even know like training

  buying yourself books or spending the

  equivalent amount of time that you would

  have spent in money just trying to

  practice and get better at your but edit

  yourself because that's certainly a

  skill that isn't going to like go out of

  use or become useless to you that if you

  are effective here once you get having a

  stronger sense of design that's only

  going to help your programming that's no

  I'm not going to and ever come back to

  invite you to be like oh no now you know

  too much about design like your apps are

  getting worse like it's it's a good

  thing to invest in if you in like if you

  can afford it great but I mean you're my

  guess is you're probably then either

  working for a bigger company or I just

  somehow very wealthy I suppose yeah I

  mean you know you could you can look at

  it also as like you know can you afford

  any other kind of staffing or help like

  if you can afford to pay other

  programmers to be with you to to help

  make bigger and more complex apps then

  the cost of a designer relative to other

  programmers is very reasonable yeah but

  you know it but if you like if the idea

  of paying another programmer to help you

  out is completely out of reach because

  the economics aren't working out it's

  probably also going to be challenging to

  paid to pay a designer anyway in in much

  less expensive news we are sponsored

  this week by hover hover is quite simply

  the best way to buy and manage domain

  names and it costs way less than hiring

  a full-time programmer or designer now

  when you have an idea for a project

  naming it can be difficult once you

  finally get that name you want to be

  able to quickly and easily get the

  domains you need however provides a

  simple fast and hassle-free method of

  buying domain names it is very easy to

  search for new domains search for the

  means that are available you enter the

  phrase you want or some keywords if you

  don't know an exact name and they will

  find available matches for you and show

  you a list of all the crazy new TLDs

  that are available with that name they

  have of course you know the nice old

  ones ComNet and all the stuff but they

  also have all the

  crazy new ones dot Plumbing dot coffee

  dot sexy if you go that way all these

  TLDs they have recently lowered their

  prices on pretty much all of them

  so dot-com domains are now just 1299 a

  year and all this includes

  free who is privacy for all their

  domains they believe that you should not

  have to pay extra to keep your private

  information private and they have

  fantastic customer support if you ever

  need it hover offers a no hold no wait

  no trends for telephone support policy

  they are famous for this and there's a

  good reason why when you call them you

  talk to an actual human being there's no

  robots no menus but if you do prefer

  robotic communication they also have

  great support documents and guides on

  their website for getting everything you

  need as well as email support if you

  need that and I don't forget their hover

  valet service where if you want if you

  if you have a bunch of domain somewhere

  else or just even just one any number

  that means if somewhere else you want to

  transfer them over to hover they will if

  you want do the whole transfer for you

  because I've never met anybody who said

  you know what I love doing domain name

  registration transfers no not a single

  person ever wants to do that

  hover will do it for you if you want

  it's fantastic there's so much great

  stuff at hover check it out today go to

  hover comm to try them out use code

  Swift at checkout and you'll get 10% off

  your first purchase at hover comm and

  show your support for under the radar

  and all of real AFM thank you so much to

  hover use code Swift to check out for

  10% off thank you so much for sponsoring

  this episode

  alright so I think the next thing that

  we wanted to dive into a little bit is

  the something that I know I think I know

  you I've heard you talk a lot about this

  and it's something that I know I've

  started doing a lot more of my own apps

  is once you have your design and this is

  especially for the graphical assets in

  your app so like you know button icons

  or images of any kind like there's you

  can either pre render that image so it's

  like have it come out of Photoshop or

  illustrator or whatever design tool

  sketch whatever it is that you're using

  rendered out as a PNG put that PNG and

  well I will put all three of the PNG s

  like the 1 X the 2 X - 3 X version of

  that asset and add it to your project

  and bundle it in that way or you can

  programmatically generate it either as

  like in the draw rect of a uiview or

  generating an image that you put in a UI

  as you turn into a UI image and I know I

  think we've both been on the path

  towards less and less static assets and

  more and more programmatic assets and so

  it's probably something that's worth

  talking about some of the reasons why we

  do that oh yeah I mean like for me

  static assets are a liability for future

  work because anything any kind of image

  like you know it let's suppose I hire a

  designer to to make like toolbar icons

  in my out which I've done before and

  it's often worth doing

  so I have these toolbar icons and then

  Apple comes out says oh by the way you

  know there's gonna be a new iPad

  resolution it's now gonna be iPad at 3 X

  then you need new versions of those

  icons that can that can be rendered at

  Brendan at 3 X you can attempt to do it

  yourself

  but generally you won't have like a

  source vector file you will you will

  have like a stack of PNG so the designer

  gave you when you paid them 2 years ago

  and so you can try to make it or resize

  it yourself it'll probably look bad you

  probably shouldn't do that so oftentimes

  you have to then go back to the designer

  and pay for even more of their time for

  them to do something that's really very

  trivial that they probably don't even

  want to do because that's pretty pretty

  uninteresting work you know dig up old

  files and rerender or something out as a

  different resolution and everything so

  it's it's this kind of clunky procedure

  that like if you rely on the on

  graphical assets that are baked into

  static images you have all this

  liability whenever the technology

  changes under you or what if you just

  want to tweak the design like what if

  you want to make all the line widths you

  know half a pixel narrower in the next

  version of in the next design it that

  becomes very difficult if you if you're

  if you just have a bunch images and you

  have to like rerender all this assets

  out on the other hand if you have all

  those images and stuff there's a lot of

  upsides to that your app first of all

  will load faster because you won't have

  to be like drawing these things every

  time you know certain certain art styles

  are only really possible in static

  images and become pretty impractical to

  impossible to recreate with like quartz

  drawing commands in a draw rect function

  so the

  there are there are definitely advantage

  to disadvantages generally speaking

  programmatically generated images make

  your app bundle very small this is one

  of the reasons why overcast is only

  something like seven Meg's it's a very

  very small iPhone because I have almost

  no images in it almost everything that

  overcast is generated procedurally so it

  makes your Apple very small it makes it

  very easy to adapt to new devices and

  new sizes but it also but but static

  images almost certainly will load faster

  there's also like the OS will cache them

  any kind of like UI image image name to

  call like those kind of things that

  cache the GPU will cache certain things

  the framework for cache certain things

  so generally speaking for for speed of

  operation you want static images but for

  for ease of programmer work

  programmatically generated stuff can be

  a lot easier and I think the biggest

  thing too is with programmatic it's it's

  there's even like probably just the feel

  of like the philosophy of it of making

  sure that like what you're say the

  biggest thing that I think you're

  pointing out is if you're your art

  assets need to be right are ideally in

  some-some format that you're going to be

  able to scale and adjust and re-render

  later at the very least right if you if

  you are using a completely like if

  you're if you have a designer or even if

  you're in with yourself like if you're

  going to if you're just building things

  in such a way that you cannot just

  easily scale them up and down like

  keeping them having vector artwork in

  Photoshop or illustrator or sketch or

  doing it in some way like that that you

  can scale up and down it's yeah it's a

  ticking time bomb for at some point

  you're going to need something different

  like there was a time when we just had

  1x everywhere and then there was 2x + 1

  X and then now there's 3x as well and

  like it's always going to change

  everything like the one of the few I

  don't know if we'll ever get to 4x but

  something else is going to happen like

  all of a sudden I for a long time I

  think I had the thought that the iPad

  was always going to be sort of 1024 by

  768 and we're hinge terms of functional

  size and it's like no turns out they're

  going cuz like when they went to the

  MIDI they kept the same resolution they

  just smushed it a bit

  and with a pro though it's like oh no

  here's this massive new screen and so

  it's like the most important thing is to

  be able to overtime

  really like update that have those

  assets be dynamic and to change over

  time whether that's like rendered in

  your app which like you were saying like

  sometimes that's good sometimes it's bad

  like it's some trade-offs but whatever

  it whatever form you're doing it in it

  needs to be something that you can very

  easily if all of a sudden it's like I

  need them at a different size even if

  it's not a different resolution even if

  it's just like you know I think the

  alignment on this isn't quite right I

  need to make it a bit smaller mm-hmm

  like being able to rent re-render that

  from source rather than taking the image

  and like resizing it which is always

  never going to look good like you need

  to be able to say like let's rerender

  this from the beginning

  within the exact dimensions that I want

  it to be and if you can do that like

  then your workflow is like good if you

  can't then you probably need to fix it

  because you it's yours waiting for at

  some point down the road it to come back

  and bite you yeah and even like there's

  like there's like a hybrid approach you

  can do here which i I've employed for my

  all my watch assets like some in some

  contexts in the OS or in the frameworks

  in some contexts you can't do a

  programmatic rendering of something you

  have to have an image in the app bundle

  with a certain name like you know so

  things like your launch icons like you

  your app icon just can't be programmatic

  in iOS today other things like in watch

  kit there in and watch iOS - I would

  imagine it's more flexible but in in

  watch kit you watch kit one many things

  had to be static images like there were

  there were certain things that

  everything had to be yeah right and so

  with overcast what I what I did like you

  know like my I have my like my my themed

  buttons that are that are in the app and

  those buttons are all generated by just

  calls to my one of my appearance manager

  functions that in my custom appearance

  class and you just specify how you know

  what size canvas to render this icon

  into and you know the line width and the

  color and you know some of them will

  display things like like the seek

  buttons that have the number of seconds

  inside of them that will be that will be

  seeked so on whatever

  like that's all customizable by the user

  and so like those buttons just you know

  like there's a function that just says

  you know render seek button at this size

  with this color this line with and with

  this number in the middle and the

  function has a text drawing call and it

  went you know in the middle of all these

  shapes and by the way paint code is a

  great app for for generating the code

  for any kind of non-trivial shape

  recommend that but then you know and

  then it just wraps it in like an image

  context where it just does it does a

  transform that scales it so you can I

  can render this image that you know the

  source is in like you know I'm 100 by

  100 great or whatever I set paint code

  to and then just scales that with CG

  code to to whatever output size you

  wanted it at and so when you have a

  context like watchkit where you you're

  required to have static images I have a

  special build mode that I can set the

  app in where it just generates the house

  for me hitting it in every in every

  configuration that that it might ever

  need with my current code so it

  literally just like calls that function

  and renders out static asset that I can

  that I can then include in the Hat

  bundle so that like that that kind of

  hybrid approach I think has a lot of

  advantages it is more complex it will

  not save any space in your app bundle

  but it will allow you to use these

  images in calls like like image named

  and in context where you need static

  images and it preserves all like the

  load time optimizations the caching

  optimization on the platform so the

  hybrid approach I think is worth

  considering but ultimately like I just I

  love doing things programmatically

  because I think you're right like it it

  feels more semantically right like if I

  have a graphic that is just like you

  know a circle with an arrow going into

  it like why does it need to be a bitmap

  file somewhere like why why can't that

  just be represented as vectors it seems

  as a programmer and I recognize this

  isn't how design works but it seems as a

  programmer that is like the most correct

  way to represent that it's by vectors

  and and that doesn't this isn't true for

  everything of course but so much of what

  we do today and then the current styles

  of interfaces that is true for and it

  just feels right you know it feels right

  to represent it as a function and and

  even in many ways like like I mentioned

  my scaling technique earlier with these

  with these function calls like

  a lot of times something really simple

  like drawing an X you know like an icon

  that's just like a big X or a plus sign

  like I would rat like I've rendered that

  in a you know in a 1.0 scale graph like

  it's you know one by one and it's

  alright render for me now draw a line

  from 0.5 to 0.5 you know like and then

  just render to any size like that that

  is actually easier and simpler to to

  write and to and to conceptualize than

  having 16 different PNG files that

  different thicknesses and everything and

  and sometimes you need the dynamism you

  know if you offer things like like if if

  the icon has to be right it has to be

  read in two different colors different

  fonts for any kind of embedded text

  different line thicknesses or if it's

  something that's being reflected in the

  UI that is some kind of dynamic element

  like you know if you have some kind of

  UI widget where you're showing progress

  you know do you actually want to render

  out a progress bar at a hundred

  different widths for all the different

  percentages or you know do you which I

  actually did for my watch app or you

  know or if you want to just have one

  that you can call a function and you can

  generate it at whatever value you need

  so in a different there's obviously

  different needs here in different

  situations usually I prefer to go

  programmatic wherever possible for Miami

  generation because usually the the

  downsides are either non-existent or

  very very small and the upsides are

  quite big and I think - one thing that I

  like about the more I've gotten into

  doing programmatic rendering is it keeps

  my it matches matches matches well with

  my ability so if I open Photoshop which

  I don't really have that much business

  getting into but like I can do a lot of

  stuff there that probably ultimately

  doesn't look very good like I can over

  design and try and be clever than I

  actually am whereas when I'm like

  writing it in either even in paint code

  or just like in core graphics calls like

  it limits in constrains me but I find to

  be a positive way that like I understand

  core graphics in a way that I don't

  understand Photoshop and so it's

  constructive for me to like okay I can

  only do of like

  ten drawing operations or whatever it is

  like you can do in court graphics like

  functionally it's like you can stroke a

  path you can fill a shape like there's a

  few basic things and so if I make my art

  assets align with that I'm probably not

  gonna like reach beyond what I'm

  actually capable of doing or is if I go

  into Photoshop and like oh I can do

  layer styles ooh that's pretty

  oh let me go into the sea or I can blur

  this over here like doing stuff that I

  have no business doing and so at least

  if I keep it as programmatic and simple

  then I'm not exceeding that and I

  understand it too like that's maybe

  another part of it like we're saying

  from the beginning of like if you're

  doing this all yourself

  like it's danger the dangerous things

  too in some ways is if you have if

  you're an external designer is making

  something for you that you have no way

  then of recreating or adjusting or

  adjusting or tweaking like I don't

  understand it then I can't change it

  really and that's just you know has

  definitely come back to bite me a few

  times where I just need to change

  something slightly and I can't because

  like it's a baked PNG and so it's like I

  just have to make do or I need to try

  and get back on my designers schedule to

  make a really smiter adjustment for them

  and work out the contracting for that

  like it's a night if it's nice and easy

  and understandable it's probably gonna

  be better down the road and I think so

  for me like this is where I'm heading

  like I very do very few static images

  anymore I tend to do a lot more

  programmatic things or at least storing

  my assets in a form that I can easily

  rerender and regenerate and I can look

  at on my kit I understand what that's

  doing like I see the lines drawing the

  shapes it's filling and like that makes

  sense to me yeah and and and the result

  of that usually isn't as good as what

  you can get with a pro designer sure but

  it's a kind of it's one of those things

  where like you can get like you know

  two-thirds of the way there for for a

  lot less cost and and with a lot of

  other benefits so like that isn't always

  worth it sometimes it is and and

  sometimes you don't have a choice so

  it's nice to be able to be able to to do

  to do the minimum required with the

  resources you have

  rather than being forced to go and spend

  a lot of money you don't have so it's

  it's good to have this option exactly

  alright that wraps it up for this week

  thanks a lot to our sponsor this week

  hover

  thanks a lot for all our listeners

  please do recommend us to friends and

  rate us on overcast and iTunes and

  everything and we will see you next week

  bye