PodSearch

Under the Radar

Under the Radar 10: Designed by a Programmer

 

00:00:00 ◼   ► welcome to under the radar or show about

00:00:02 ◼   ► independent app development I'm Marco

00:00:04 ◼   ► Arment and I'm David Smith under the

00:00:06 ◼   ► radar is never long within 30 minutes so

00:00:08 ◼   ► let's get started

00:00:09 ◼   ► so this week we wanted to talk about how

00:00:12 ◼   ► you can be kind of like us independent

00:00:14 ◼   ► developers who work for yourself without

00:00:16 ◼   ► having a full-time designer or trying to

00:00:19 ◼   ► minimize how much of a designers time

00:00:21 ◼   ► you need because oftentimes people who

00:00:24 ◼   ► are working for themselves can't afford

00:00:27 ◼   ► a full-time designer or much design at

00:00:29 ◼   ► all from up from other people and

00:00:31 ◼   ► sometimes even when you can afford it if

00:00:33 ◼   ► you're working on on like a small app or

00:00:36 ◼   ► you need to get something out quickly or

00:00:37 ◼   ► you're not sure of the market of

00:00:39 ◼   ► something you often want to keep your

00:00:41 ◼   ► expenses on that app very low and it's

00:00:43 ◼   ► often hard to justify having a full-time

00:00:46 ◼   ► designer or or having lots of hours from

00:00:48 ◼   ► a contract designer helping you out

00:00:50 ◼   ► there so we kind of wanted to talk about

00:00:52 ◼   ► the reality and process of being a

00:00:56 ◼   ► programmer who kind of designs it kind

00:00:59 ◼   ► of does your own design or and and

00:01:01 ◼   ► having how that works out and then other

00:01:04 ◼   ► things later on about things like how

00:01:05 ◼   ► you can do programmatic style assets

00:01:07 ◼   ► versus static assets in your apps so

00:01:10 ◼   ► David what's what is your experience

00:01:12 ◼   ► been with with design for your apps so I

00:01:15 ◼   ► do most of the core design of my apps

00:01:21 ◼   ► myself which is definitely it isn't it's

00:01:24 ◼   ► a it's a mixed bag in terms of what that

00:01:26 ◼   ► ends up doing but for the reasons you

00:01:29 ◼   ► just outlined like I it's a hard thing

00:01:31 ◼   ► to hire a designer

00:01:33 ◼   ► especially I find refer like at the

00:01:36 ◼   ► first app or like the first version of

00:01:37 ◼   ► the app which is a little bit backwards

00:01:39 ◼   ► in some ways but for the way that I make

00:01:40 ◼   ► apps

00:01:41 ◼   ► I never know if the app I'm making is

00:01:44 ◼   ► going to be worth putting a lot of time

00:01:47 ◼   ► and energy and resources into and so for

00:01:48 ◼   ► a lot of my apps like the first version

00:01:50 ◼   ► is just a couple weeks of work and like

00:01:53 ◼   ► the concept of hiring a designer even

00:01:55 ◼   ► just like the time overhead if you know

00:01:57 ◼   ► like the cost aside if I could find a

00:01:59 ◼   ► really inexpensive designer like the

00:02:01 ◼   ► cost overhead in terms of time of going

00:02:03 ◼   ► back and forth and trying to underlie

00:02:05 ◼   ► k-- getting everybody on the same page

00:02:07 ◼   ► and then waiting for the assets and

00:02:08 ◼   ► doing all that like it doesn't work as

00:02:10 ◼   ► well for me and so I tend to just sort

00:02:13 ◼   ► of

00:02:13 ◼   ► hope for the best and design things and

00:02:17 ◼   ► you know the result is maybe it's a bit

00:02:19 ◼   ► mixed but and what I find though is at

00:02:23 ◼   ► least like once you get if you haven't

00:02:24 ◼   ► once you have some experience designing

00:02:26 ◼   ► apps like the core design questions I

00:02:29 ◼   ► guess this would be the UX design I'm

00:02:32 ◼   ► not really as familiar with the terms

00:02:33 ◼   ► all the different like UI us don't email

00:02:35 ◼   ► us and like graphic design maybe other

00:02:39 ◼   ► three kinds of design I don't know like

00:02:41 ◼   ► the making an app that sort of like

00:02:43 ◼   ► works right and function is functional

00:02:45 ◼   ► and intuitive that part I think I have a

00:02:48 ◼   ► good handle on and I can make apps that

00:02:50 ◼   ► do that they just tend to not be pretty

00:02:52 ◼   ► and in general I found that people are

00:02:55 ◼   ► pretty forgiving about things not being

00:02:56 ◼   ► pretty they rather it be functional and

00:02:59 ◼   ► so you can kind of get away with a lot

00:03:01 ◼   ► more than you may otherwise have and

00:03:04 ◼   ► definitely this has been a lot easier

00:03:05 ◼   ► since people don't expect apps to be

00:03:07 ◼   ► pixel perfect anymore like it's there

00:03:10 ◼   ► was a time when it was really hard if

00:03:12 ◼   ► you app didn't have like the crazy

00:03:13 ◼   ► textures and everything is just aligned

00:03:15 ◼   ► just so like you know right now you're

00:03:18 ◼   ► building an app that has to be let's see

00:03:21 ◼   ► it's pretty 4s sized iPhone 5 size

00:03:24 ◼   ► iPhone 6 size iPhone 6 plus size then

00:03:29 ◼   ► you have iPad you have 1x iPad and 2x

00:03:32 ◼   ► iPad and iPad pro and so like it's your

00:03:36 ◼   ► design has to scale to everything anyway

00:03:38 ◼   ► and so you can be you can get away with

00:03:40 ◼   ► that feel like in some ways a lot more

00:03:41 ◼   ► because you're trying to design

00:03:43 ◼   ► something more fluid anyway like in some

00:03:45 ◼   ► ways it's more like a web design you

00:03:47 ◼   ► know now whereas before it was this this

00:03:49 ◼   ► very like texturally in graphically rich

00:03:52 ◼   ► style in like the the iOS 6 and earlier

00:03:55 ◼   ► days and and then since the iOS 7 style

00:03:59 ◼   ► UI with you know all these clean flat

00:04:02 ◼   ► colors and thin text everywhere and lots

00:04:04 ◼   ► of white space I think it has shifted

00:04:06 ◼   ► more into what Web Design kind of always

00:04:08 ◼   ► was where you know you you because you

00:04:12 ◼   ► have to design for so many screen sizes

00:04:14 ◼   ► and be ready to adapt to new ones that

00:04:16 ◼   ► might come out that we don't even know

00:04:17 ◼   ► about yet now you you are kind of forced

00:04:19 ◼   ► to make things simpler and more reliant

00:04:21 ◼   ► on like text flow and stuff like that

00:04:24 ◼   ► and and less about it these giant

00:04:27 ◼   ► images and and also those your

00:04:29 ◼   ► out-of-style now which has been such a

00:04:31 ◼   ► huge benefit to people like us who don't

00:04:34 ◼   ► have or can't afford full time design

00:04:37 ◼   ► help it's been a huge boon for us yeah

00:04:41 ◼   ► but I think of course it probably ends

00:04:43 ◼   ► up with meaning that me we become much

00:04:45 ◼   ► more reliant on I feel like there's a

00:04:48 ◼   ► certain I don't really know where I

00:04:50 ◼   ► learned these and I think you actually

00:04:51 ◼   ► have a better handle on these some

00:04:53 ◼   ► people ask you but like there's certain

00:04:55 ◼   ► seem like there's a certain basic set of

00:04:57 ◼   ► like rules about layout about how you

00:05:01 ◼   ► structure like typography or the white

00:05:05 ◼   ► space of a page and to make it like look

00:05:08 ◼   ► right and when it isn't it at least at

00:05:11 ◼   ► this point now I have enough of a sense

00:05:13 ◼   ► of it like I don't necessarily know why

00:05:14 ◼   ► it's wrong but I know it is wrong and I

00:05:17 ◼   ► picked that up just as you go but like

00:05:19 ◼   ► once you like it's more important in

00:05:21 ◼   ► some ways because things aren't pixel

00:05:22 ◼   ► perfect you just have these basic like

00:05:24 ◼   ► elements of good design under your belt

00:05:27 ◼   ► and this isn't I notice in all of your

00:05:29 ◼   ► apps like as you've gone there always

00:05:30 ◼   ► seems to have that nice clean sharp look

00:05:33 ◼   ► where do you think you learned to do

00:05:35 ◼   ► that well I mean there's these different

00:05:39 ◼   ► parts of design right so there's like

00:05:41 ◼   ► there's the the like graphical artistry

00:05:43 ◼   ► part of it and that's things like

00:05:45 ◼   ► textures things like designing like rich

00:05:47 ◼   ► icons stuff like that that part I have

00:05:50 ◼   ► never been good at and I probably never

00:05:52 ◼   ► will be good at and I'm okay with that

00:05:54 ◼   ► that part I'm happy to outsource and and

00:05:58 ◼   ► pay whatever it takes to get you know a

00:06:00 ◼   ► great app icon made you know if I need

00:06:02 ◼   ► if the textures ever come back in style

00:06:04 ◼   ► I hope they don't they probably

00:06:06 ◼   ► eventually will and you know then I'll

00:06:09 ◼   ► Karzai bridge when I come to it because

00:06:11 ◼   ► that will basically drive my costs up

00:06:13 ◼   ► substantially but it's alright you can

00:06:16 ◼   ► just have retro apps that are without

00:06:18 ◼   ► without texture you just be retro it'll

00:06:20 ◼   ► be fine yeah it will always become an

00:06:22 ◼   ► effect rather than this is what people

00:06:24 ◼   ► do but you know I think you know so

00:06:28 ◼   ► there's different parts of design the

00:06:29 ◼   ► graphical stuff I really can't do but

00:06:31 ◼   ► the rest of it as you mentioned like the

00:06:34 ◼   ► you know the rest of what you you

00:06:35 ◼   ► encounter are most apt design things

00:06:36 ◼   ► like layout basic text and type

00:06:40 ◼   ► agra fee you know spacing that I've just

00:06:44 ◼   ► kind of slowly developed my own

00:06:46 ◼   ► sensibilities for that over time by you

00:06:49 ◼   ► know starting some of it started in web

00:06:51 ◼   ► design but also just like just kind of

00:06:53 ◼   ► paying attention and developing a feel

00:06:55 ◼   ► for it over time which is totally

00:06:57 ◼   ► unhelpful like that I know I recognize

00:06:59 ◼   ► like if you're listening and trying to

00:07:01 ◼   ► figure you know trying to answer the

00:07:02 ◼   ► question of like how do I become

00:07:03 ◼   ► familiar with the basics of design like

00:07:05 ◼   ► I don't know I can't tell you that

00:07:07 ◼   ► there's probably some decent books about

00:07:09 ◼   ► it that are made for for this purpose

00:07:12 ◼   ► I'll try to find them and put them the

00:07:13 ◼   ► show notes if I if I can but I I just I

00:07:17 ◼   ► haven't gone that pad I've just kind of

00:07:18 ◼   ► slowly developed a sensibility by just

00:07:20 ◼   ► like kind of paying attention to

00:07:22 ◼   ► designers and to design even though I'm

00:07:25 ◼   ► I've never really been trained as a

00:07:26 ◼   ► designer or consider myself one and a

00:07:29 ◼   ► lot of it is just like kind of like you

00:07:31 ◼   ► know what when you see it you know like

00:07:32 ◼   ► when when you lay something out in a way

00:07:35 ◼   ► that is visually pleasing like you

00:07:38 ◼   ► yourself will notice that this looks

00:07:40 ◼   ► good

00:07:40 ◼   ► in most case you know like it because

00:07:43 ◼   ► you are also a Burres and you were also

00:07:44 ◼   ► a user of this app so you kind of like

00:07:47 ◼   ► play with it following some basic

00:07:50 ◼   ► principles you can kind of play with it

00:07:51 ◼   ► and work it out until until it looks

00:07:53 ◼   ► really good but what you said is also

00:07:54 ◼   ► correct like people are very forgiving

00:07:56 ◼   ► of this I mean god help you if you ever

00:07:59 ◼   ► look up a screenshot of Instapaper 1.0

00:08:01 ◼   ► it like it to some degree in many cases

00:08:06 ◼   ► it doesn't matter as much as people

00:08:07 ◼   ► think it does design is kind of like

00:08:10 ◼   ► good marketing where it is really nice

00:08:13 ◼   ► to have if you want if you if your app

00:08:16 ◼   ► is going to become big and successful

00:08:18 ◼   ► you probably need good design but you

00:08:22 ◼   ► can you can you can get an app out there

00:08:24 ◼   ► and you can start building a market for

00:08:26 ◼   ► yourself without having professional

00:08:28 ◼   ► quality design it is not it is not like

00:08:31 ◼   ► a strict requirement for success and and

00:08:34 ◼   ► in many cases in many markets especially

00:08:37 ◼   ► like the the more narrow the market gets

00:08:39 ◼   ► the more specialized or professional a

00:08:41 ◼   ► market gets the less design is valued or

00:08:44 ◼   ► the less it matters and so if you're

00:08:46 ◼   ► making an app like you know for somebody

00:08:49 ◼   ► to get their job done and you know it

00:08:51 ◼   ► basically needs like four buttons and a

00:08:53 ◼   ► text field

00:08:53 ◼   ► you know that then like it doesn't

00:08:55 ◼   ► really matter to a lot of it like it

00:08:57 ◼   ► whether that's really pretty or not it's

00:08:59 ◼   ► probably not going to affect your

00:09:01 ◼   ► success in in in that narrow market as

00:09:03 ◼   ► much as much as it would in like a mass

00:09:06 ◼   ► consumer photography app say you know so

00:09:08 ◼   ► it really depends on what you're making

00:09:09 ◼   ► and how much this is worth but

00:09:11 ◼   ► ultimately you know good design

00:09:13 ◼   ► something that if you can do it you

00:09:14 ◼   ► should do it and if you can't afford it

00:09:16 ◼   ► you should do it in almost every case

00:09:19 ◼   ► but that could be very expensive I mean

00:09:22 ◼   ► like you know like hiring a professional

00:09:23 ◼   ► designer could cost hundreds to

00:09:27 ◼   ► thousands of dollars per day of their

00:09:29 ◼   ► work and and it's really it can be it

00:09:33 ◼   ► adds up so quickly it just just to get

00:09:36 ◼   ► an app icon made you can get a an okay

00:09:40 ◼   ► icon made for a few hundred dollars to

00:09:42 ◼   ► get a great icon made might cost a few

00:09:44 ◼   ► thousand dollars I mean again this it's

00:09:46 ◼   ► this is big money we're talking about

00:09:47 ◼   ► for for independent programmers like

00:09:50 ◼   ► because most designers most of their

00:09:52 ◼   ► work comes from corporate clients so so

00:09:55 ◼   ► you have to build in all these high

00:09:56 ◼   ► prices you have to you have to account

00:09:58 ◼   ► for how much of a pain corporate clients

00:10:00 ◼   ► are to deal with how much overhead

00:10:02 ◼   ► you're going to have for every billable

00:10:03 ◼   ► hour that you can actually get paid for

00:10:05 ◼   ► you have to account for all that and

00:10:07 ◼   ► price things accordingly whereas you

00:10:09 ◼   ► know when you're independent hiring an

00:10:11 ◼   ► iron your designer these prices are

00:10:13 ◼   ► often out of reach so you know it does

00:10:15 ◼   ► help to familiarize yourself with the

00:10:17 ◼   ► basics of design or to hire a designer

00:10:19 ◼   ► you know for for the stuff that really

00:10:22 ◼   ► matters like your app icon and and you

00:10:25 ◼   ► know maybe like a once-over if your main

00:10:27 ◼   ► interface but not to have somebody that

00:10:29 ◼   ► you're like paying every single day or

00:10:30 ◼   ► every single month ongoing so it depends

00:10:34 ◼   ► it depends a lot on the people you can

00:10:35 ◼   ► find you know if you can find a great

00:10:37 ◼   ► designer who will take on your work for

00:10:40 ◼   ► a price you can afford great that's

00:10:42 ◼   ► awesome

00:10:43 ◼   ► you know but I I have found that to be

00:10:44 ◼   ► very difficult most of the time myself

00:10:46 ◼   ► yeah because I think the difficulty

00:10:48 ◼   ► there is it's the best designers like

00:10:52 ◼   ► are like if you're not paying them well

00:10:56 ◼   ► then you they're kind of ripping them

00:10:57 ◼   ► off like it's like right

00:10:59 ◼   ► Vic that's the nature of like there

00:11:00 ◼   ► really is like if they really are that

00:11:01 ◼   ► good then they should be in some ways

00:11:04 ◼   ► like they they should be we know well

00:11:06 ◼   ► paid for their work and doing

00:11:07 ◼   ► you know and doing that probably with

00:11:10 ◼   ► both clients who can do it and so you

00:11:13 ◼   ► end up with kind of a lot of you know

00:11:15 ◼   ► for small independent apps you just

00:11:17 ◼   ► doesn't yeah economics just don't tend

00:11:19 ◼   ► to work out and in some ways you're

00:11:21 ◼   ► probably better off

00:11:23 ◼   ► it's like rather than spending that

00:11:25 ◼   ► money on the design that design it's

00:11:29 ◼   ► like I don't even know like training

00:11:30 ◼   ► buying yourself books or spending the

00:11:32 ◼   ► equivalent amount of time that you would

00:11:34 ◼   ► have spent in money just trying to

00:11:37 ◼   ► practice and get better at your but edit

00:11:39 ◼   ► yourself because that's certainly a

00:11:40 ◼   ► skill that isn't going to like go out of

00:11:44 ◼   ► use or become useless to you that if you

00:11:46 ◼   ► are effective here once you get having a

00:11:48 ◼   ► stronger sense of design that's only

00:11:51 ◼   ► going to help your programming that's no

00:11:52 ◼   ► I'm not going to and ever come back to

00:11:55 ◼   ► invite you to be like oh no now you know

00:11:56 ◼   ► too much about design like your apps are

00:11:58 ◼   ► getting worse like it's it's a good

00:12:00 ◼   ► thing to invest in if you in like if you

00:12:02 ◼   ► can afford it great but I mean you're my

00:12:05 ◼   ► guess is you're probably then either

00:12:06 ◼   ► working for a bigger company or I just

00:12:10 ◼   ► somehow very wealthy I suppose yeah I

00:12:12 ◼   ► mean you know you could you can look at

00:12:14 ◼   ► it also as like you know can you afford

00:12:15 ◼   ► any other kind of staffing or help like

00:12:17 ◼   ► if you can afford to pay other

00:12:18 ◼   ► programmers to be with you to to help

00:12:21 ◼   ► make bigger and more complex apps then

00:12:24 ◼   ► the cost of a designer relative to other

00:12:25 ◼   ► programmers is very reasonable yeah but

00:12:28 ◼   ► you know it but if you like if the idea

00:12:29 ◼   ► of paying another programmer to help you

00:12:32 ◼   ► out is completely out of reach because

00:12:33 ◼   ► the economics aren't working out it's

00:12:35 ◼   ► probably also going to be challenging to

00:12:37 ◼   ► paid to pay a designer anyway in in much

00:12:41 ◼   ► less expensive news we are sponsored

00:12:42 ◼   ► this week by hover hover is quite simply

00:12:46 ◼   ► the best way to buy and manage domain

00:12:48 ◼   ► names and it costs way less than hiring

00:12:50 ◼   ► a full-time programmer or designer now

00:12:52 ◼   ► when you have an idea for a project

00:12:54 ◼   ► naming it can be difficult once you

00:12:55 ◼   ► finally get that name you want to be

00:12:57 ◼   ► able to quickly and easily get the

00:12:58 ◼   ► domains you need however provides a

00:13:00 ◼   ► simple fast and hassle-free method of

00:13:02 ◼   ► buying domain names it is very easy to

00:13:04 ◼   ► search for new domains search for the

00:13:06 ◼   ► means that are available you enter the

00:13:07 ◼   ► phrase you want or some keywords if you

00:13:09 ◼   ► don't know an exact name and they will

00:13:11 ◼   ► find available matches for you and show

00:13:13 ◼   ► you a list of all the crazy new TLDs

00:13:15 ◼   ► that are available with that name they

00:13:16 ◼   ► have of course you know the nice old

00:13:18 ◼   ► ones ComNet and all the stuff but they

00:13:21 ◼   ► also have all the

00:13:21 ◼   ► crazy new ones dot Plumbing dot coffee

00:13:23 ◼   ► dot sexy if you go that way all these

00:13:25 ◼   ► TLDs they have recently lowered their

00:13:27 ◼   ► prices on pretty much all of them

00:13:29 ◼   ► so dot-com domains are now just 1299 a

00:13:32 ◼   ► year and all this includes

00:13:34 ◼   ► free who is privacy for all their

00:13:36 ◼   ► domains they believe that you should not

00:13:38 ◼   ► have to pay extra to keep your private

00:13:39 ◼   ► information private and they have

00:13:41 ◼   ► fantastic customer support if you ever

00:13:43 ◼   ► need it hover offers a no hold no wait

00:13:45 ◼   ► no trends for telephone support policy

00:13:47 ◼   ► they are famous for this and there's a

00:13:49 ◼   ► good reason why when you call them you

00:13:51 ◼   ► talk to an actual human being there's no

00:13:53 ◼   ► robots no menus but if you do prefer

00:13:55 ◼   ► robotic communication they also have

00:13:56 ◼   ► great support documents and guides on

00:13:58 ◼   ► their website for getting everything you

00:13:59 ◼   ► need as well as email support if you

00:14:01 ◼   ► need that and I don't forget their hover

00:14:03 ◼   ► valet service where if you want if you

00:14:05 ◼   ► if you have a bunch of domain somewhere

00:14:06 ◼   ► else or just even just one any number

00:14:09 ◼   ► that means if somewhere else you want to

00:14:10 ◼   ► transfer them over to hover they will if

00:14:12 ◼   ► you want do the whole transfer for you

00:14:14 ◼   ► because I've never met anybody who said

00:14:17 ◼   ► you know what I love doing domain name

00:14:18 ◼   ► registration transfers no not a single

00:14:20 ◼   ► person ever wants to do that

00:14:22 ◼   ► hover will do it for you if you want

00:14:23 ◼   ► it's fantastic there's so much great

00:14:25 ◼   ► stuff at hover check it out today go to

00:14:27 ◼   ► hover comm to try them out use code

00:14:29 ◼   ► Swift at checkout and you'll get 10% off

00:14:32 ◼   ► your first purchase at hover comm and

00:14:33 ◼   ► show your support for under the radar

00:14:35 ◼   ► and all of real AFM thank you so much to

00:14:37 ◼   ► hover use code Swift to check out for

00:14:39 ◼   ► 10% off thank you so much for sponsoring

00:14:41 ◼   ► this episode

00:14:42 ◼   ► alright so I think the next thing that

00:14:44 ◼   ► we wanted to dive into a little bit is

00:14:47 ◼   ► the something that I know I think I know

00:14:50 ◼   ► you I've heard you talk a lot about this

00:14:52 ◼   ► and it's something that I know I've

00:14:52 ◼   ► started doing a lot more of my own apps

00:14:54 ◼   ► is once you have your design and this is

00:14:57 ◼   ► especially for the graphical assets in

00:14:59 ◼   ► your app so like you know button icons

00:15:01 ◼   ► or images of any kind like there's you

00:15:06 ◼   ► can either pre render that image so it's

00:15:08 ◼   ► like have it come out of Photoshop or

00:15:10 ◼   ► illustrator or whatever design tool

00:15:12 ◼   ► sketch whatever it is that you're using

00:15:14 ◼   ► rendered out as a PNG put that PNG and

00:15:17 ◼   ► well I will put all three of the PNG s

00:15:18 ◼   ► like the 1 X the 2 X - 3 X version of

00:15:21 ◼   ► that asset and add it to your project

00:15:23 ◼   ► and bundle it in that way or you can

00:15:26 ◼   ► programmatically generate it either as

00:15:29 ◼   ► like in the draw rect of a uiview or

00:15:32 ◼   ► generating an image that you put in a UI

00:15:34 ◼   ► as you turn into a UI image and I know I

00:15:39 ◼   ► think we've both been on the path

00:15:41 ◼   ► towards less and less static assets and

00:15:44 ◼   ► more and more programmatic assets and so

00:15:47 ◼   ► it's probably something that's worth

00:15:48 ◼   ► talking about some of the reasons why we

00:15:50 ◼   ► do that oh yeah I mean like for me

00:15:52 ◼   ► static assets are a liability for future

00:15:55 ◼   ► work because anything any kind of image

00:15:58 ◼   ► like you know it let's suppose I hire a

00:16:00 ◼   ► designer to to make like toolbar icons

00:16:02 ◼   ► in my out which I've done before and

00:16:03 ◼   ► it's often worth doing

00:16:05 ◼   ► so I have these toolbar icons and then

00:16:07 ◼   ► Apple comes out says oh by the way you

00:16:10 ◼   ► know there's gonna be a new iPad

00:16:11 ◼   ► resolution it's now gonna be iPad at 3 X

00:16:13 ◼   ► then you need new versions of those

00:16:15 ◼   ► icons that can that can be rendered at

00:16:17 ◼   ► Brendan at 3 X you can attempt to do it

00:16:20 ◼   ► yourself

00:16:20 ◼   ► but generally you won't have like a

00:16:23 ◼   ► source vector file you will you will

00:16:25 ◼   ► have like a stack of PNG so the designer

00:16:27 ◼   ► gave you when you paid them 2 years ago

00:16:29 ◼   ► and so you can try to make it or resize

00:16:33 ◼   ► it yourself it'll probably look bad you

00:16:35 ◼   ► probably shouldn't do that so oftentimes

00:16:37 ◼   ► you have to then go back to the designer

00:16:39 ◼   ► and pay for even more of their time for

00:16:41 ◼   ► them to do something that's really very

00:16:42 ◼   ► trivial that they probably don't even

00:16:43 ◼   ► want to do because that's pretty pretty

00:16:45 ◼   ► uninteresting work you know dig up old

00:16:47 ◼   ► files and rerender or something out as a

00:16:49 ◼   ► different resolution and everything so

00:16:51 ◼   ► it's it's this kind of clunky procedure

00:16:54 ◼   ► that like if you rely on the on

00:16:55 ◼   ► graphical assets that are baked into

00:16:58 ◼   ► static images you have all this

00:17:00 ◼   ► liability whenever the technology

00:17:02 ◼   ► changes under you or what if you just

00:17:03 ◼   ► want to tweak the design like what if

00:17:05 ◼   ► you want to make all the line widths you

00:17:08 ◼   ► know half a pixel narrower in the next

00:17:10 ◼   ► version of in the next design it that

00:17:12 ◼   ► becomes very difficult if you if you're

00:17:14 ◼   ► if you just have a bunch images and you

00:17:15 ◼   ► have to like rerender all this assets

00:17:17 ◼   ► out on the other hand if you have all

00:17:20 ◼   ► those images and stuff there's a lot of

00:17:22 ◼   ► upsides to that your app first of all

00:17:24 ◼   ► will load faster because you won't have

00:17:26 ◼   ► to be like drawing these things every

00:17:27 ◼   ► time you know certain certain art styles

00:17:31 ◼   ► are only really possible in static

00:17:33 ◼   ► images and become pretty impractical to

00:17:35 ◼   ► impossible to recreate with like quartz

00:17:38 ◼   ► drawing commands in a draw rect function

00:17:41 ◼   ► so the

00:17:43 ◼   ► there are there are definitely advantage

00:17:44 ◼   ► to disadvantages generally speaking

00:17:46 ◼   ► programmatically generated images make

00:17:49 ◼   ► your app bundle very small this is one

00:17:50 ◼   ► of the reasons why overcast is only

00:17:51 ◼   ► something like seven Meg's it's a very

00:17:54 ◼   ► very small iPhone because I have almost

00:17:55 ◼   ► no images in it almost everything that

00:17:57 ◼   ► overcast is generated procedurally so it

00:18:00 ◼   ► makes your Apple very small it makes it

00:18:02 ◼   ► very easy to adapt to new devices and

00:18:04 ◼   ► new sizes but it also but but static

00:18:06 ◼   ► images almost certainly will load faster

00:18:08 ◼   ► there's also like the OS will cache them

00:18:11 ◼   ► any kind of like UI image image name to

00:18:14 ◼   ► call like those kind of things that

00:18:15 ◼   ► cache the GPU will cache certain things

00:18:17 ◼   ► the framework for cache certain things

00:18:18 ◼   ► so generally speaking for for speed of

00:18:22 ◼   ► operation you want static images but for

00:18:26 ◼   ► for ease of programmer work

00:18:29 ◼   ► programmatically generated stuff can be

00:18:31 ◼   ► a lot easier and I think the biggest

00:18:33 ◼   ► thing too is with programmatic it's it's

00:18:36 ◼   ► there's even like probably just the feel

00:18:38 ◼   ► of like the philosophy of it of making

00:18:40 ◼   ► sure that like what you're say the

00:18:42 ◼   ► biggest thing that I think you're

00:18:43 ◼   ► pointing out is if you're your art

00:18:46 ◼   ► assets need to be right are ideally in

00:18:49 ◼   ► some-some format that you're going to be

00:18:52 ◼   ► able to scale and adjust and re-render

00:18:55 ◼   ► later at the very least right if you if

00:18:59 ◼   ► you are using a completely like if

00:19:01 ◼   ► you're if you have a designer or even if

00:19:03 ◼   ► you're in with yourself like if you're

00:19:04 ◼   ► going to if you're just building things

00:19:07 ◼   ► in such a way that you cannot just

00:19:09 ◼   ► easily scale them up and down like

00:19:10 ◼   ► keeping them having vector artwork in

00:19:14 ◼   ► Photoshop or illustrator or sketch or

00:19:16 ◼   ► doing it in some way like that that you

00:19:18 ◼   ► can scale up and down it's yeah it's a

00:19:20 ◼   ► ticking time bomb for at some point

00:19:21 ◼   ► you're going to need something different

00:19:24 ◼   ► like there was a time when we just had

00:19:26 ◼   ► 1x everywhere and then there was 2x + 1

00:19:30 ◼   ► X and then now there's 3x as well and

00:19:33 ◼   ► like it's always going to change

00:19:35 ◼   ► everything like the one of the few I

00:19:38 ◼   ► don't know if we'll ever get to 4x but

00:19:40 ◼   ► something else is going to happen like

00:19:42 ◼   ► all of a sudden I for a long time I

00:19:43 ◼   ► think I had the thought that the iPad

00:19:45 ◼   ► was always going to be sort of 1024 by

00:19:48 ◼   ► 768 and we're hinge terms of functional

00:19:50 ◼   ► size and it's like no turns out they're

00:19:52 ◼   ► going cuz like when they went to the

00:19:53 ◼   ► MIDI they kept the same resolution they

00:19:54 ◼   ► just smushed it a bit

00:19:56 ◼   ► and with a pro though it's like oh no

00:19:57 ◼   ► here's this massive new screen and so

00:20:01 ◼   ► it's like the most important thing is to

00:20:02 ◼   ► be able to overtime

00:20:05 ◼   ► really like update that have those

00:20:07 ◼   ► assets be dynamic and to change over

00:20:10 ◼   ► time whether that's like rendered in

00:20:11 ◼   ► your app which like you were saying like

00:20:12 ◼   ► sometimes that's good sometimes it's bad

00:20:14 ◼   ► like it's some trade-offs but whatever

00:20:16 ◼   ► it whatever form you're doing it in it

00:20:18 ◼   ► needs to be something that you can very

00:20:20 ◼   ► easily if all of a sudden it's like I

00:20:22 ◼   ► need them at a different size even if

00:20:24 ◼   ► it's not a different resolution even if

00:20:25 ◼   ► it's just like you know I think the

00:20:27 ◼   ► alignment on this isn't quite right I

00:20:29 ◼   ► need to make it a bit smaller mm-hmm

00:20:31 ◼   ► like being able to rent re-render that

00:20:33 ◼   ► from source rather than taking the image

00:20:36 ◼   ► and like resizing it which is always

00:20:38 ◼   ► never going to look good like you need

00:20:40 ◼   ► to be able to say like let's rerender

00:20:42 ◼   ► this from the beginning

00:20:43 ◼   ► within the exact dimensions that I want

00:20:46 ◼   ► it to be and if you can do that like

00:20:48 ◼   ► then your workflow is like good if you

00:20:51 ◼   ► can't then you probably need to fix it

00:20:53 ◼   ► because you it's yours waiting for at

00:20:55 ◼   ► some point down the road it to come back

00:20:57 ◼   ► and bite you yeah and even like there's

00:20:59 ◼   ► like there's like a hybrid approach you

00:21:00 ◼   ► can do here which i I've employed for my

00:21:02 ◼   ► all my watch assets like some in some

00:21:04 ◼   ► contexts in the OS or in the frameworks

00:21:07 ◼   ► in some contexts you can't do a

00:21:09 ◼   ► programmatic rendering of something you

00:21:11 ◼   ► have to have an image in the app bundle

00:21:14 ◼   ► with a certain name like you know so

00:21:15 ◼   ► things like your launch icons like you

00:21:17 ◼   ► your app icon just can't be programmatic

00:21:19 ◼   ► in iOS today other things like in watch

00:21:23 ◼   ► kit there in and watch iOS - I would

00:21:26 ◼   ► imagine it's more flexible but in in

00:21:27 ◼   ► watch kit you watch kit one many things

00:21:32 ◼   ► had to be static images like there were

00:21:34 ◼   ► there were certain things that

00:21:35 ◼   ► everything had to be yeah right and so

00:21:38 ◼   ► with overcast what I what I did like you

00:21:40 ◼   ► know like my I have my like my my themed

00:21:42 ◼   ► buttons that are that are in the app and

00:21:44 ◼   ► those buttons are all generated by just

00:21:47 ◼   ► calls to my one of my appearance manager

00:21:49 ◼   ► functions that in my custom appearance

00:21:50 ◼   ► class and you just specify how you know

00:21:55 ◼   ► what size canvas to render this icon

00:21:57 ◼   ► into and you know the line width and the

00:22:00 ◼   ► color and you know some of them will

00:22:02 ◼   ► display things like like the seek

00:22:04 ◼   ► buttons that have the number of seconds

00:22:06 ◼   ► inside of them that will be that will be

00:22:07 ◼   ► seeked so on whatever

00:22:10 ◼   ► like that's all customizable by the user

00:22:12 ◼   ► and so like those buttons just you know

00:22:15 ◼   ► like there's a function that just says

00:22:16 ◼   ► you know render seek button at this size

00:22:18 ◼   ► with this color this line with and with

00:22:20 ◼   ► this number in the middle and the

00:22:22 ◼   ► function has a text drawing call and it

00:22:24 ◼   ► went you know in the middle of all these

00:22:25 ◼   ► shapes and by the way paint code is a

00:22:27 ◼   ► great app for for generating the code

00:22:29 ◼   ► for any kind of non-trivial shape

00:22:30 ◼   ► recommend that but then you know and

00:22:33 ◼   ► then it just wraps it in like an image

00:22:34 ◼   ► context where it just does it does a

00:22:36 ◼   ► transform that scales it so you can I

00:22:38 ◼   ► can render this image that you know the

00:22:40 ◼   ► source is in like you know I'm 100 by

00:22:42 ◼   ► 100 great or whatever I set paint code

00:22:44 ◼   ► to and then just scales that with CG

00:22:47 ◼   ► code to to whatever output size you

00:22:50 ◼   ► wanted it at and so when you have a

00:22:52 ◼   ► context like watchkit where you you're

00:22:55 ◼   ► required to have static images I have a

00:22:58 ◼   ► special build mode that I can set the

00:22:59 ◼   ► app in where it just generates the house

00:23:01 ◼   ► for me hitting it in every in every

00:23:03 ◼   ► configuration that that it might ever

00:23:04 ◼   ► need with my current code so it

00:23:06 ◼   ► literally just like calls that function

00:23:07 ◼   ► and renders out static asset that I can

00:23:10 ◼   ► that I can then include in the Hat

00:23:12 ◼   ► bundle so that like that that kind of

00:23:14 ◼   ► hybrid approach I think has a lot of

00:23:15 ◼   ► advantages it is more complex it will

00:23:18 ◼   ► not save any space in your app bundle

00:23:19 ◼   ► but it will allow you to use these

00:23:22 ◼   ► images in calls like like image named

00:23:25 ◼   ► and in context where you need static

00:23:28 ◼   ► images and it preserves all like the

00:23:30 ◼   ► load time optimizations the caching

00:23:33 ◼   ► optimization on the platform so the

00:23:34 ◼   ► hybrid approach I think is worth

00:23:35 ◼   ► considering but ultimately like I just I

00:23:39 ◼   ► love doing things programmatically

00:23:40 ◼   ► because I think you're right like it it

00:23:42 ◼   ► feels more semantically right like if I

00:23:44 ◼   ► have a graphic that is just like you

00:23:47 ◼   ► know a circle with an arrow going into

00:23:49 ◼   ► it like why does it need to be a bitmap

00:23:51 ◼   ► file somewhere like why why can't that

00:23:54 ◼   ► just be represented as vectors it seems

00:23:55 ◼   ► as a programmer and I recognize this

00:23:58 ◼   ► isn't how design works but it seems as a

00:24:00 ◼   ► programmer that is like the most correct

00:24:02 ◼   ► way to represent that it's by vectors

00:24:03 ◼   ► and and that doesn't this isn't true for

00:24:06 ◼   ► everything of course but so much of what

00:24:08 ◼   ► we do today and then the current styles

00:24:10 ◼   ► of interfaces that is true for and it

00:24:14 ◼   ► just feels right you know it feels right

00:24:16 ◼   ► to represent it as a function and and

00:24:18 ◼   ► even in many ways like like I mentioned

00:24:20 ◼   ► my scaling technique earlier with these

00:24:22 ◼   ► with these function calls like

00:24:23 ◼   ► a lot of times something really simple

00:24:25 ◼   ► like drawing an X you know like an icon

00:24:27 ◼   ► that's just like a big X or a plus sign

00:24:29 ◼   ► like I would rat like I've rendered that

00:24:31 ◼   ► in a you know in a 1.0 scale graph like

00:24:34 ◼   ► it's you know one by one and it's

00:24:35 ◼   ► alright render for me now draw a line

00:24:37 ◼   ► from 0.5 to 0.5 you know like and then

00:24:40 ◼   ► just render to any size like that that

00:24:41 ◼   ► is actually easier and simpler to to

00:24:43 ◼   ► write and to and to conceptualize than

00:24:46 ◼   ► having 16 different PNG files that

00:24:50 ◼   ► different thicknesses and everything and

00:24:52 ◼   ► and sometimes you need the dynamism you

00:24:54 ◼   ► know if you offer things like like if if

00:24:57 ◼   ► the icon has to be right it has to be

00:24:59 ◼   ► read in two different colors different

00:25:00 ◼   ► fonts for any kind of embedded text

00:25:02 ◼   ► different line thicknesses or if it's

00:25:05 ◼   ► something that's being reflected in the

00:25:07 ◼   ► UI that is some kind of dynamic element

00:25:09 ◼   ► like you know if you have some kind of

00:25:11 ◼   ► UI widget where you're showing progress

00:25:14 ◼   ► you know do you actually want to render

00:25:15 ◼   ► out a progress bar at a hundred

00:25:18 ◼   ► different widths for all the different

00:25:21 ◼   ► percentages or you know do you which I

00:25:22 ◼   ► actually did for my watch app or you

00:25:26 ◼   ► know or if you want to just have one

00:25:28 ◼   ► that you can call a function and you can

00:25:30 ◼   ► generate it at whatever value you need

00:25:32 ◼   ► so in a different there's obviously

00:25:35 ◼   ► different needs here in different

00:25:36 ◼   ► situations usually I prefer to go

00:25:38 ◼   ► programmatic wherever possible for Miami

00:25:40 ◼   ► generation because usually the the

00:25:42 ◼   ► downsides are either non-existent or

00:25:45 ◼   ► very very small and the upsides are

00:25:47 ◼   ► quite big and I think - one thing that I

00:25:49 ◼   ► like about the more I've gotten into

00:25:52 ◼   ► doing programmatic rendering is it keeps

00:25:55 ◼   ► my it matches matches matches well with

00:25:58 ◼   ► my ability so if I open Photoshop which

00:26:02 ◼   ► I don't really have that much business

00:26:04 ◼   ► getting into but like I can do a lot of

00:26:07 ◼   ► stuff there that probably ultimately

00:26:09 ◼   ► doesn't look very good like I can over

00:26:12 ◼   ► design and try and be clever than I

00:26:15 ◼   ► actually am whereas when I'm like

00:26:18 ◼   ► writing it in either even in paint code

00:26:20 ◼   ► or just like in core graphics calls like

00:26:22 ◼   ► it limits in constrains me but I find to

00:26:26 ◼   ► be a positive way that like I understand

00:26:29 ◼   ► core graphics in a way that I don't

00:26:30 ◼   ► understand Photoshop and so it's

00:26:33 ◼   ► constructive for me to like okay I can

00:26:35 ◼   ► only do of like

00:26:37 ◼   ► ten drawing operations or whatever it is

00:26:39 ◼   ► like you can do in court graphics like

00:26:40 ◼   ► functionally it's like you can stroke a

00:26:42 ◼   ► path you can fill a shape like there's a

00:26:44 ◼   ► few basic things and so if I make my art

00:26:47 ◼   ► assets align with that I'm probably not

00:26:50 ◼   ► gonna like reach beyond what I'm

00:26:52 ◼   ► actually capable of doing or is if I go

00:26:55 ◼   ► into Photoshop and like oh I can do

00:26:56 ◼   ► layer styles ooh that's pretty

00:26:58 ◼   ► oh let me go into the sea or I can blur

00:27:00 ◼   ► this over here like doing stuff that I

00:27:02 ◼   ► have no business doing and so at least

00:27:04 ◼   ► if I keep it as programmatic and simple

00:27:07 ◼   ► then I'm not exceeding that and I

00:27:10 ◼   ► understand it too like that's maybe

00:27:11 ◼   ► another part of it like we're saying

00:27:13 ◼   ► from the beginning of like if you're

00:27:14 ◼   ► doing this all yourself

00:27:15 ◼   ► like it's danger the dangerous things

00:27:19 ◼   ► too in some ways is if you have if

00:27:22 ◼   ► you're an external designer is making

00:27:24 ◼   ► something for you that you have no way

00:27:26 ◼   ► then of recreating or adjusting or

00:27:28 ◼   ► adjusting or tweaking like I don't

00:27:30 ◼   ► understand it then I can't change it

00:27:33 ◼   ► really and that's just you know has

00:27:36 ◼   ► definitely come back to bite me a few

00:27:38 ◼   ► times where I just need to change

00:27:40 ◼   ► something slightly and I can't because

00:27:43 ◼   ► like it's a baked PNG and so it's like I

00:27:45 ◼   ► just have to make do or I need to try

00:27:47 ◼   ► and get back on my designers schedule to

00:27:49 ◼   ► make a really smiter adjustment for them

00:27:51 ◼   ► and work out the contracting for that

00:27:53 ◼   ► like it's a night if it's nice and easy

00:27:55 ◼   ► and understandable it's probably gonna

00:27:57 ◼   ► be better down the road and I think so

00:28:00 ◼   ► for me like this is where I'm heading

00:28:01 ◼   ► like I very do very few static images

00:28:04 ◼   ► anymore I tend to do a lot more

00:28:06 ◼   ► programmatic things or at least storing

00:28:09 ◼   ► my assets in a form that I can easily

00:28:12 ◼   ► rerender and regenerate and I can look

00:28:15 ◼   ► at on my kit I understand what that's

00:28:16 ◼   ► doing like I see the lines drawing the

00:28:18 ◼   ► shapes it's filling and like that makes

00:28:20 ◼   ► sense to me yeah and and and the result

00:28:23 ◼   ► of that usually isn't as good as what

00:28:26 ◼   ► you can get with a pro designer sure but

00:28:28 ◼   ► it's a kind of it's one of those things

00:28:29 ◼   ► where like you can get like you know

00:28:31 ◼   ► two-thirds of the way there for for a

00:28:35 ◼   ► lot less cost and and with a lot of

00:28:37 ◼   ► other benefits so like that isn't always

00:28:39 ◼   ► worth it sometimes it is and and

00:28:41 ◼   ► sometimes you don't have a choice so

00:28:43 ◼   ► it's nice to be able to be able to to do

00:28:46 ◼   ► to do the minimum required with the

00:28:49 ◼   ► resources you have

00:28:51 ◼   ► rather than being forced to go and spend

00:28:53 ◼   ► a lot of money you don't have so it's

00:28:55 ◼   ► it's good to have this option exactly

00:28:57 ◼   ► alright that wraps it up for this week

00:28:59 ◼   ► thanks a lot to our sponsor this week

00:29:01 ◼   ► hover

00:29:02 ◼   ► thanks a lot for all our listeners

00:29:03 ◼   ► please do recommend us to friends and

00:29:05 ◼   ► rate us on overcast and iTunes and

00:29:06 ◼   ► everything and we will see you next week

00:29:08 ◼   ► bye