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: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
◼
►
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
◼
►
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
◼
►
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: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
◼
►
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: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: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