Under the Radar

00:00:00 ◼   ► Welcome to Under the Radar, a show about independent app development.

00:00:03 ◼   ► I'm Mark Arment.

00:00:04 ◼   ► And I'm David Smith.

00:00:06 ◼   ► Under the Radar is never longer than 30 minutes, so let's get started.

00:00:09 ◼   ► This week we wanted to talk about how you can be, kind of like us, independent developers

00:00:14 ◼   ► who work for yourself without having a full-time designer or trying to minimize how much of

00:00:20 ◼   ► a designer's time you need.

00:00:23 ◼   ► Because oftentimes people who are working for themselves can't afford a full-time designer

00:00:28 ◼   ► or much design at all from other people.

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

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

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

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

00:00:39 ◼   ► you often want to keep your expenses on that app very low.

00:00:42 ◼   ► And it's often hard to justify having a full-time designer

00:00:47 ◼   ► or having lots of hours from a contract designer

00:00:50 ◼   ► helping you out there.

00:00:51 ◼   ► So we kind of wanted to talk about the reality and process

00:00:54 ◼   ► of being a programmer who kind of does your own design,

00:00:59 ◼   ► and how that works out, and then other things later on

00:01:04 ◼   ► about things like how you can do programmatic style assets

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

00:01:09 ◼   ► So, David, what has your experience been

00:01:12 ◼   ► with design for your apps?

00:01:15 ◼   ► - So I do most of the core design of my apps myself,

00:01:22 ◼   ► which is definitely-- it's a mixed bag in terms of what that ends up doing.

00:01:27 ◼   ► But for the reasons you just outlined, it's a hard thing to hire a designer,

00:01:33 ◼   ► especially, I find, at the first app, or the first version of the app,

00:01:37 ◼   ► which is a little bit backwards in some ways.

00:01:39 ◼   ► But for the way that I make apps, I don't know

00:01:43 ◼   ► if the app I'm making is going to be worth putting a lot of time,

00:01:47 ◼   ► and energy, and resources into.

00:01:48 ◼   ► And so for a lot of my apps, the first version

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

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

00:01:55 ◼   ► even just the time overhead, the cost aside,

00:01:58 ◼   ► if I could find a really inexpensive designer,

00:02:01 ◼   ► the cost overhead in terms of time, of going back and forth,

00:02:04 ◼   ► and getting everybody on the same page,

00:02:07 ◼   ► and then waiting for the assets, and doing all that,

00:02:09 ◼   ► it doesn't work as well for me.

00:02:10 ◼   ► And so I tend to just sort of hope for the best

00:02:15 ◼   ► and design things.

00:02:16 ◼   ► And the result is maybe it's a bit mixed,

00:02:20 ◼   ► But what I find though is at least once you have some experience designing apps, the core

00:02:27 ◼   ► design questions, I guess this would be the UX design.

00:02:32 ◼   ► I'm not really as familiar with the terms, all the different, like UI, UX.

00:02:34 ◼   ► Please don't email us.

00:02:35 ◼   ► And graphic design, maybe other three kinds of design, I don't know.

00:02:40 ◼   ► Making an app that sort of works right and is functional and intuitive, that part I think

00:02:47 ◼   ► I think I have a good handle on and I can make apps that do that.

00:02:50 ◼   ► They just tend to not be pretty.

00:02:53 ◼   ► And in general I found that people are pretty forgiving about things not being pretty.

00:02:57 ◼   ► They'd rather it be functional, and so you can kind of get away with a lot more than

00:03:01 ◼   ► you may otherwise have.

00:03:04 ◼   ► And definitely this has been a lot easier since people don't expect apps to be pixel

00:03:07 ◼   ► perfect anymore.

00:03:10 ◼   ► There was a time when it was really hard if your app didn't have the crazy textures and

00:03:14 ◼   ► everything is just aligned just so. Right now you're building an app that has to be

00:03:19 ◼   ► 4s size, iPhone 5 size, iPhone 6 size, iPhone 6+ size, then you have iPad, you have 1x iPad

00:03:31 ◼   ► and 2x iPad, and iPad Pro. And so your design has to scale to everything anyway, and so

00:03:38 ◼   ► you can get away with, I feel like in some ways, a lot more because you're trying to

00:03:42 ◼   ► to design something more fluid anyway.

00:03:45 ◼   ► - Like in some ways it's more like a web design, you know,

00:03:47 ◼   ► now whereas before it was this very like texturally

00:03:51 ◼   ► and graphically rich style in like the iOS 6

00:03:55 ◼   ► and earlier days.

00:03:56 ◼   ► And then since the iOS 7 style UI with, you know,

00:04:00 ◼   ► all these clean flat colors and the thin text everywhere

00:04:04 ◼   ► and lots of white space, I think it has shifted more

00:04:07 ◼   ► into what web design kind of always was where, you know,

00:04:10 ◼   ► because you have to design for so many screen sizes

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

00:04:16 ◼   ► that we don't even know about yet,

00:04:18 ◼   ► now you are kind of forced to make things simpler

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

00:04:24 ◼   ► and less about like these giant baked-in images

00:04:28 ◼   ► and also those are just out of style now,

00:04:29 ◼   ► which has been such a huge benefit to people like us

00:04:34 ◼   ► who don't have or can't afford full-time design help.

00:04:38 ◼   ► It's been a huge boon for us.

00:04:41 ◼   ► - Yeah, but I think of course it probably ends up

00:04:43 ◼   ► with meaning that we become much more reliant on,

00:04:47 ◼   ► I feel like there's a certain,

00:04:49 ◼   ► and I don't really know where I learned these,

00:04:51 ◼   ► and I think you actually have a better handle on these.

00:04:53 ◼   ► Some people ask you, but like,

00:04:54 ◼   ► there's certain, it seems like there's a certain basic set

00:04:57 ◼   ► of like rules about layout,

00:05:00 ◼   ► about how you structure like typography

00:05:04 ◼   ► or the white space of a page

00:05:07 ◼   ► and to make it look right.

00:05:08 ◼   ► And when it isn't, at least at this point now,

00:05:12 ◼   ► I have enough of a sense of it.

00:05:13 ◼   ► I don't necessarily know why it's wrong,

00:05:15 ◼   ► but I know it is wrong.

00:05:17 ◼   ► And I pick that up just sort of as you go.

00:05:19 ◼   ► But once you, it's more important in some ways

00:05:21 ◼   ► because things aren't pixel perfect,

00:05:22 ◼   ► that you just have these basic elements

00:05:25 ◼   ► of good design under your belt.

00:05:27 ◼   ► And this is something I noticed in all of your apps,

00:05:29 ◼   ► as you've gone, it always seems to have

00:05:31 ◼   ► that nice, clean, sharp look.

00:05:34 ◼   ► Where do you think you learned to do that?

00:05:36 ◼   ► Well, I mean, there's these different parts of design, right? So there's the graphical

00:05:42 ◼   ► artistry part of it, and that's things like textures, things like designing rich icons,

00:05:48 ◼   ► stuff like that. That part I have never been good at, and I probably never will be good

00:05:53 ◼   ► at, and I'm okay with that. That part I'm happy to outsource and pay whatever it takes

00:05:59 ◼   ► to get a great app icon made. If the textures ever come back in style, I hope they don't.

00:06:05 ◼   ► they probably eventually will.

00:06:08 ◼   ► And then I'll cross-site bridge when I come to it,

00:06:11 ◼   ► 'cause that will basically drive my costs up substantially.

00:06:14 ◼   ► (laughs)

00:06:15 ◼   ► But--

00:06:16 ◼   ► - It's all right, you can just have retro apps

00:06:17 ◼   ► that are without texture, it'll just be retro,

00:06:20 ◼   ► it'll be fine.

00:06:21 ◼   ► - Yeah, it'll just become an affect rather than,

00:06:23 ◼   ► this is what people do.

00:06:25 ◼   ► But I think, so there's different parts of design,

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

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

00:06:33 ◼   ► like the rest of what you encounter in most app design, things like layout, basic text

00:06:39 ◼   ► and typography, spacing, I've just kind of slowly developed my own sensibilities for

00:06:47 ◼   ► that over time by starting some of it started in web design, but also just kind of paying

00:06:53 ◼   ► attention and developing a feel for it over time, which is totally unhelpful. I recognize

00:06:59 ◼   ► like, if you're listening and trying to figure, you know, trying to answer the question, like,

00:07:02 ◼   ► how do I become familiar with the basics of design? Like, I don't know. I can't tell you

00:07:06 ◼   ► that. There's probably some decent books about it that are made for this purpose. I'll try to

00:07:12 ◼   ► find them and put them in the show notes if I can. But I just, I haven't gone that path. I've just

00:07:18 ◼   ► kind of slowly developed a sensibility by just like kind of paying attention to designers and

00:07:23 ◼   ► to design, even though I've never really been trained as a designer or considered myself one.

00:07:28 ◼   ► done. And a lot of it is just like, you know it when you see it. When you lay something

00:07:33 ◼   ► out in a way that is visually pleasing, you yourself will notice that this looks good

00:07:40 ◼   ► in most cases, because you are also a person. You are also a user of this app. So you kind

00:07:47 ◼   ► of play with it, following some basic principles. You can kind of play with it and work it out

00:07:52 ◼   ► until it looks really good. But what you said is also correct. People are very forgiving

00:07:56 ◼   ► of this. I mean, God help you if you ever look up screenshots of Instapaper 1.0. To

00:08:03 ◼   ► some degree, in many cases, it doesn't matter as much as people think it does. Design is

00:08:09 ◼   ► kind of like good marketing where it is really nice to have, if your app is going to become

00:08:17 ◼   ► big and successful, you probably need good design. But you can get an app out there and

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

00:08:27 ◼   ► without having professional quality design,

00:08:29 ◼   ► it is not like a strict requirement for success.

00:08:33 ◼   ► And in many cases, in many markets,

00:08:37 ◼   ► especially the more narrow the market gets,

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

00:08:42 ◼   ► the less design is valued or the less it matters.

00:08:46 ◼   ► And so if you're making an app like,

00:08:48 ◼   ► you know, for somebody to get their job done,

00:08:50 ◼   ► and it basically needs like four buttons and a text field,

00:08:54 ◼   ► then it doesn't really matter to a lot of,

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

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

00:09:01 ◼   ► in that narrow market as much as it would

00:09:05 ◼   ► in a mass consumer photography app, say.

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

00:09:10 ◼   ► and how much this is worth.

00:09:11 ◼   ► But ultimately, good design is something

00:09:13 ◼   ► that if you can do it, you should do it.

00:09:15 ◼   ► And if you can afford it, you should do it

00:09:18 ◼   ► in almost every case.

00:09:19 ◼   ► But that could be very expensive.

00:09:22 ◼   ► I mean, hiring a professional designer could cost

00:09:26 ◼   ► hundreds to thousands of dollars per day of their work,

00:09:30 ◼   ► and it's really, it can be, it adds up so quickly.

00:09:34 ◼   ► Just to get an app icon made,

00:09:37 ◼   ► you can get an okay icon made for a few hundred dollars.

00:09:42 ◼   ► To get a great icon made might cost a few thousand dollars.

00:09:45 ◼   ► I mean, again, this is big money we're talking about

00:09:48 ◼   ► for independent programmers,

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

00:09:52 ◼   ► comes from corporate clients.

00:09:54 ◼   ► So you have to build in all these high prices.

00:09:57 ◼   ► You have to account for how much of a pain

00:10:00 ◼   ► corporate clients are to deal with,

00:10:01 ◼   ► how much overhead you're going to have

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

00:10:06 ◼   ► You have to account for all that

00:10:07 ◼   ► and price things accordingly,

00:10:08 ◼   ► whereas when you're an independent hiring designer,

00:10:12 ◼   ► these prices are often out of reach.

00:10:14 ◼   ► So it does help to familiarize yourself

00:10:17 ◼   ► with the basics of design,

00:10:19 ◼   ► or to hire a designer for the stuff that really matters,

00:10:22 ◼   ► like your app icon and maybe like a once over

00:10:26 ◼   ► of your main interface, but not to have somebody

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

00:10:30 ◼   ► or every single month ongoing.

00:10:33 ◼   ► So it depends, and it depends a lot

00:10:34 ◼   ► on the people you can find.

00:10:36 ◼   ► If you can find a great designer who will take on your work

00:10:40 ◼   ► for a price you can afford, great, that's awesome.

00:10:43 ◼   ► But I have found that to be very difficult

00:10:45 ◼   ► most of the time myself.

00:10:47 ◼   ► - Yeah, 'cause I think the difficulty there

00:10:48 ◼   ► Because it's the best designers are, if you're not paying them well, then they're

00:10:57 ◼   ► kind of ripping them off.

00:10:59 ◼   ► That's the nature of, if they really are that good, then they should be, in some ways,

00:11:05 ◼   ► they should be well paid for their work, and doing that probably with clients who can do

00:11:11 ◼   ► it.

00:11:13 ◼   ► So you end up with a lot of small independent apps.

00:11:17 ◼   ► The economics just don't tend to work out.

00:11:21 ◼   ► And in some ways, you're probably better off.

00:11:24 ◼   ► Rather than spending that money on that design, it's like training, buying yourself books,

00:11:32 ◼   ► or spending the equivalent amount of time that you would have spent in money just trying

00:11:37 ◼   ► to practice and get better at it yourself.

00:11:40 ◼   ► Because that's certainly a skill that isn't going to go out of use or become useless to

00:11:45 ◼   ► you.

00:11:46 ◼   ► Once you have a stronger sense of design, that's only going to help your programming.

00:11:52 ◼   ► That's never going to ever come back to you or bite you to be like, "Oh, no, now you

00:11:56 ◼   ► know too much about design.

00:11:58 ◼   ► Your apps are getting worse."

00:12:00 ◼   ► It's a good thing to invest in.

00:12:01 ◼   ► If you can afford it, great.

00:12:05 ◼   ► My guess is you're probably then either working for a bigger company or just somehow very

00:12:11 ◼   ► wealthy, I suppose.

00:12:12 ◼   ► Yeah, I mean, you can look at it also as like, can you afford any other kind of staffing

00:12:16 ◼   ► or help?

00:12:17 ◼   ► Like, if you can afford to pay other programmers to be with you to help make bigger and more

00:12:22 ◼   ► complex apps, then the cost of a designer relative to other programmers is very reasonable.

00:12:28 ◼   ► But if the idea of paying another programmer to help you out is completely out of reach

00:12:33 ◼   ► because the economics aren't working out, it's probably also going to be challenging

00:12:36 ◼   ► to pay a designer.

00:12:39 ◼   ► Anyway, in much less expensive news, we are sponsored this week by Hover. Hover is, quite

00:12:45 ◼   ► simply, the best way to buy and manage domain names, and it costs way less than hiring a

00:12:50 ◼   ► full-time programmer or designer. Now, when you have an idea for a project, naming it

00:12:54 ◼   ► can be difficult. Once you finally get that name, you want to be able to quickly and easily

00:12:58 ◼   ► get the domains you need. Hover provides a simple, fast, and hassle-free method of buying

00:13:02 ◼   ► domain names. It is very easy to search for new domains, search for domains that are available,

00:13:07 ◼   ► you enter the phrase you want or some keywords if you don't know an exact name and they will

00:13:10 ◼   ► find available matches for you and show you a list of all the crazy new TLDs that are

00:13:15 ◼   ► available with that name. They have of course you know the nice old ones dot com, dot net

00:13:19 ◼   ► and all that stuff but they also have all the crazy new ones dot plumbing, dot coffee,

00:13:24 ◼   ► dot sexy if you go that way. All these TLDs they have recently lowered their prices on

00:13:28 ◼   ► pretty much all of them. So dot com domains are now just $12.99 a year and all this includes

00:13:34 ◼   ► free whois privacy for all their domains. They believe that you should not have to pay

00:13:38 ◼   ► extra to keep your private information private. And they have fantastic customer support if

00:13:43 ◼   ► you ever need it. Hover offers a no hold, no wait, no transfer telephone support policy.

00:13:48 ◼   ► They are famous for this and there's a good reason why. When you call them, you talk to

00:13:51 ◼   ► an actual human being. There's no robots, no menus, but if you do prefer robotic communication,

00:13:56 ◼   ► They also have great support documents and guides

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

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

00:14:02 ◼   ► And don't forget their Hover valet service,

00:14:04 ◼   ► where if you want, if you have a bunch of domains

00:14:06 ◼   ► somewhere else, or even just one,

00:14:09 ◼   ► any number of domains you have somewhere else,

00:14:10 ◼   ► you wanna transfer them over to Hover,

00:14:12 ◼   ► they will, if you want, do the whole transfer for you.

00:14:15 ◼   ► Because I've never met anybody who said,

00:14:17 ◼   ► "You know what I love doing?

00:14:18 ◼   ► "Domain name registration transfers."

00:14:19 ◼   ► No, not a single 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 stuff at Hover.

00:14:26 ◼   ► Check it out today, go to hover.com to try them out,

00:14:28 ◼   ► use code Swift at checkout,

00:14:31 ◼   ► and you will get 10% off your first purchase at hover.com,

00:14:34 ◼   ► and show your support for Under the Radar

00:14:35 ◼   ► and all of Relay FM.

00:14:36 ◼   ► Thank you so much to Hover,

00:14:38 ◼   ► use code Swift to check out for 10% off,

00:14:40 ◼   ► thank you so much for sponsoring this episode.

00:14:43 ◼   ► - All right, so I think the next thing

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

00:14:47 ◼   ► is something that I know, I think,

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

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

00:14:53 ◼   ► a lot more in my own apps,

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

00:14:57 ◼   ► and this is especially for the graphical assets in your app,

00:15:00 ◼   ► so button icons or images of any kind--

00:15:06 ◼   ► you can either pre-render that image,

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

00:15:11 ◼   ► or whatever design tool, Sketch, whatever it is that you're

00:15:14 ◼   ► using, render it out as a PNG, put that PNG--

00:15:17 ◼   ► well, I will put all three of the PNGs,

00:15:18 ◼   ► like the 1x, the 2x, the 3x version of that asset,

00:15:22 ◼   ► add it to your project and bundle it in that way, or you can programmatically generate

00:15:28 ◼   ► it, either as like in the draw rect of a UI view or generating an image that you put in

00:15:34 ◼   ► a UI as you turn into a UI image. And I know I think we've both been on the path towards

00:15:42 ◼   ► less and less static assets and more and more programmatic assets. And so it's probably

00:15:47 ◼   ► something that's worth talking about some of the reasons why we do that.

00:15:51 ◼   ► Oh yeah, I mean like for me, static assets are a liability for future work because anything,

00:15:57 ◼   ► any kind of image, like, you know, suppose I hire a designer to make like toolbar icons

00:16:02 ◼   ► in my app, which I've done before and it's often worth doing. So I have these toolbar

00:16:06 ◼   ► icons and then Apple comes out and says, "Oh, by the way, you know, there's going to be

00:16:10 ◼   ► a new iPad resolution, it's now going to be iPad at 3x." Then you need new versions

00:16:15 ◼   ► to those icons that can be rendered at 3x. You can attempt to do it yourself, but generally

00:16:21 ◼   ► you won't have like a source vector file. You will have like a stack of PNGs that the

00:16:27 ◼   ► designer gave you when you paid them two years ago. And so you can try to make it or resize

00:16:33 ◼   ► it yourself, it'll probably look bad. You probably shouldn't do that. So oftentimes

00:16:37 ◼   ► you have to then go back to the designer and pay for even more of their time for them to

00:16:41 ◼   ► do something that's really very trivial that they probably don't even want to do because

00:16:44 ◼   ► That's pretty uninteresting work. Dig up old files and re-render something out as a different

00:16:49 ◼   ► resolution and everything. So it's this kind of clunky procedure that, if you rely on graphical

00:16:56 ◼   ► assets that are baked into static images, you have all this liability whenever the technology

00:17:02 ◼   ► changes under you. Or if you just want to tweak the design. Like, what if you want to

00:17:05 ◼   ► make all the line widths half a pixel narrower in the next version, in the next design? That

00:17:12 ◼   ► becomes very difficult if you just have a bunch of images and you have to re-render

00:17:16 ◼   ► all those assets out.

00:17:18 ◼   ► On the other hand, if you have all those images and stuff, there's a lot of upsides to that.

00:17:23 ◼   ► Your app, first of all, will load faster because you won't have to be drawing these things

00:17:27 ◼   ► every time.

00:17:30 ◼   ► Certain art styles are only really possible in static images and become pretty impractical

00:17:35 ◼   ► to impossible to recreate with like quartz drawing commands in a draw-rect function.

00:17:42 ◼   ► So there are definitely advantages and disadvantages. Generally speaking, programmatically generated

00:17:48 ◼   ► images make your app bundle very small. This is one of the reasons why Overcast is only

00:17:51 ◼   ► something like 7 megs. It's a very, very small app bundle because I have almost no images

00:17:55 ◼   ► in it. Almost everything in Overcast is generated procedurally. So it makes your app bundle

00:18:00 ◼   ► very small, it makes it very easy to adapt to new devices and new sizes, but static images

00:18:07 ◼   ► almost certainly will load faster. There's also the OS will cache them, any kind of UI

00:18:13 ◼   ► image, image named call, those kind of things that cache, the GPU will cache certain things,

00:18:17 ◼   ► the frameworks will cache certain things. Generally speaking, for speed of operation,

00:18:23 ◼   ► you want static images, but for ease of programmer work,

00:18:28 ◼   ► programmatically generated stuff can be a lot easier.

00:18:32 ◼   ► - And I think the biggest thing too is with programmatic,

00:18:35 ◼   ► there's even like probably just the philosophy of it,

00:18:40 ◼   ► of making sure that, like what you're saying,

00:18:42 ◼   ► the biggest thing that I think you're pointing out is

00:18:44 ◼   ► if your art assets need to be, or are ideally in some format

00:18:51 ◼   ► that you're going to be able to scale and adjust and re-render later, at the very least.

00:18:58 ◼   ► Right.

00:18:59 ◼   ► If you are using a completely, like, if you have a designer, or even if you're in with

00:19:03 ◼   ► yourself, like if you're going to, if you're building things in such a way that you cannot

00:19:09 ◼   ► just easily scale them up and down, like, keeping them, you know, having vector artwork

00:19:13 ◼   ► in Photoshop or Illustrator or Sketch, or doing it in some way like that, that you can

00:19:18 ◼   ► scale up and down, it's a ticking time bomb for at some point you're going to need something

00:19:24 ◼   ► different.

00:19:25 ◼   ► Like, there was a time when we just had one X everywhere, and then there was two X and

00:19:29 ◼   ► one X, and then now there's three X as well, and it's always going to change.

00:19:35 ◼   ► Everything like, one of the few, I don't know if we'll ever get to four X, but something

00:19:41 ◼   ► else is going to happen.

00:19:42 ◼   ► Like, all of a sudden, for a long time I think I had the thought that the iPad was always

00:19:46 ◼   ► going to be 1024x768 in terms of functional size.

00:19:51 ◼   ► And it's like, no, it turns out they're going to—because when they went to the MIDI, they

00:19:53 ◼   ► kept the same resolution, they just smushed it a bit.

00:19:56 ◼   ► And with the Pro, though, it's like, oh no, here's this massive new screen.

00:20:00 ◼   ► And so the most important thing is to be able to, over time, have those assets be dynamic

00:20:09 ◼   ► and to change over time, whether that's rendered in your app, which like you were saying, sometimes

00:20:13 ◼   ► Sometimes that's good, sometimes it's bad, like it's some trade-offs, but whatever form

00:20:17 ◼   ► you're doing it in, it needs to be something that you can very easily, if all of a sudden

00:20:22 ◼   ► it's like, "I need them at a different size," even if it's not a different resolution, even

00:20:25 ◼   ► if it's just like, "You know, I think the alignment on this isn't quite right.

00:20:29 ◼   ► I need to make it a bit smaller."

00:20:31 ◼   ► Being able to re-render that from source rather than taking the image and resizing it, which

00:20:38 ◼   ► is never going to look good.

00:20:40 ◼   ► you need to be able to say, "Let's re-render this from the beginning in the exact dimensions

00:20:45 ◼   ► that I want it to be." And if you can do that, then your workflow is good. If you can't,

00:20:52 ◼   ► then you probably need to fix it, because you're just waiting for it at some point down

00:20:56 ◼   ► the road to come back and bite you.

00:20:57 ◼   ► Yeah, and even there's a hybrid approach you can do here, which I've employed for all my

00:21:03 ◼   ► watch assets. In some contexts in the OS or in the frameworks, in some contexts you can't

00:21:09 ◼   ► do a programmatic rendering of something. You have to have an image in the app bundle

00:21:14 ◼   ► with a certain name. So things like your launch icons, like your app icon just can't be programmatic

00:21:20 ◼   ► in iOS today. Other things like in WatchKit, in WatchOS 2 I would imagine it's more flexible,

00:21:27 ◼   ► but in WatchKit, WatchKit 1, many things had to be static images. There were certain things

00:21:34 ◼   ► that--

00:21:35 ◼   ► >>Erik: Everything had to be static images.

00:21:36 ◼   ► - Everything, right.

00:21:38 ◼   ► And so with Overcast, what I did,

00:21:40 ◼   ► I have my themed buttons that are in the app,

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

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

00:21:50 ◼   ► in my custom appearance class,

00:21:52 ◼   ► and you just specify what size canvas

00:21:56 ◼   ► to render this icon into,

00:21:58 ◼   ► and the line width and the color,

00:22:01 ◼   ► and some of them will display things,

00:22:03 ◼   ► like the seek buttons that have the number of seconds

00:22:06 ◼   ► inside of them that will be seeked, sought, whatever it is.

00:22:09 ◼   ► Like that's all customizable by the user

00:22:13 ◼   ► and so like those buttons just,

00:22:14 ◼   ► you know like there's a function that just says

00:22:16 ◼   ► render seek button at this size with this color,

00:22:19 ◼   ► this line width and with this number in the middle.

00:22:22 ◼   ► And the function has a text drawing call

00:22:23 ◼   ► and it went in the middle of all these shapes

00:22:25 ◼   ► and by the way Paint Code is a great app

00:22:27 ◼   ► for generating the code for any kind of non-trivial shape.

00:22:31 ◼   ► Recommend that.

00:22:32 ◼   ► But then, you know, and then it just wraps it

00:22:34 ◼   ► in like an image context where it just

00:22:35 ◼   ► does a transform that scales it.

00:22:37 ◼   ► So I can render this image that the source is in a 100 by 100

00:22:42 ◼   ► grid or whatever I set paint code to,

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

00:22:49 ◼   ► size you wanted it at.

00:22:51 ◼   ► And so when you have a context like WatchKit

00:22:54 ◼   ► where you're required to have static images,

00:22:57 ◼   ► I have a special build mode that I can set the app in where it

00:23:00 ◼   ► just generates those for me in every configuration

00:23:03 ◼   ► that it might ever need with my current code.

00:23:06 ◼   ► So it literally just calls that function

00:23:08 ◼   ► and renders out static assets

00:23:10 ◼   ► that I can then include in the app bundle.

00:23:13 ◼   ► So that kind of hybrid approach, I think,

00:23:15 ◼   ► has a lot of advantages.

00:23:16 ◼   ► It is more complex.

00:23:17 ◼   ► It will not save any space in your app bundle,

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

00:23:23 ◼   ► in calls like ImageNamed and in context

00:23:27 ◼   ► where you need static images,

00:23:28 ◼   ► and it preserves all the load time optimizations,

00:23:32 ◼   ► the caching optimization on the platform.

00:23:34 ◼   ► So the hybrid approach I think is worth considering.

00:23:37 ◼   ► But ultimately, I love doing things programmatically

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

00:23:41 ◼   ► it feels more semantically right.

00:23:44 ◼   ► If I have a graphic that is just like,

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

00:23:50 ◼   ► why does it need to be a bitmap file somewhere?

00:23:52 ◼   ► Why can't that just be represented as vectors?

00:23:55 ◼   ► It seems as a programmer,

00:23:57 ◼   ► and I recognize this isn't how design works,

00:23:59 ◼   ► but it seems as a programmer,

00:24:01 ◼   ► that is the most correct way to represent that, is by vectors. And this isn't true

00:24:06 ◼   ► for everything, of course, but so much of what we do today and the current styles of

00:24:11 ◼   ► interfaces, that is true for. And it just feels right. It feels right to represent it

00:24:16 ◼   ► as a function. And even in many ways, like I mentioned in my scaling technique earlier

00:24:21 ◼   ► with these function calls, a lot of times something really simple like drawing an X,

00:24:27 ◼   ► an icon that's just like a big X or a plus sign. I would like I render that in a 1.0

00:24:33 ◼   ► scale graph like it's you know one by one and it's like all right, draw a line from

00:24:37 ◼   ► 0.5 to 0.5 you know like and then just render that to any size like that that is actually

00:24:42 ◼   ► easier and simpler to write and to conceptualize than having 16 different PNG files that have

00:24:50 ◼   ► different thicknesses and everything and sometimes you need the dynamism you know if you offer

00:24:55 ◼   ► for things like if the icon has to be rendered

00:24:59 ◼   ► at different colors, different fonts

00:25:01 ◼   ► for any kind of embedded text, different line thicknesses,

00:25:04 ◼   ► or if it's something that's being reflected in the UI

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

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

00:25:12 ◼   ► where you're showing progress.

00:25:14 ◼   ► Do you actually wanna render out a progress bar

00:25:17 ◼   ► at 100 different widths for all the different percentages,

00:25:21 ◼   ► or do you, which I actually did for my watch app,

00:25:24 ◼   ► (laughs)

00:25:25 ◼   ► Or do you want to just have one that you can call a function

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

00:25:33 ◼   ► So in a different, there's obviously different needs here

00:25:35 ◼   ► in different situations.

00:25:36 ◼   ► Usually I prefer to go programmatic wherever possible

00:25:40 ◼   ► for my image generation because usually the downsides

00:25:44 ◼   ► are either non-existent or very, very small

00:25:46 ◼   ► and the upsides are quite big.

00:25:48 ◼   ► - And I think too, one thing that I like about,

00:25:51 ◼   ► more I've gotten into doing programmatic rendering is it keeps my, it matches well with my ability.

00:26:00 ◼   ► So if I open Photoshop, which I don't really have that much business getting into, but

00:26:05 ◼   ► I can do a lot of stuff there that probably ultimately doesn't look very good. Like I

00:26:12 ◼   ► can overdesign and try and be clever than I actually am. Whereas when I'm writing it,

00:26:19 ◼   ► even in paint code or just like in core graphics calls like it limits and constrains me in

00:26:25 ◼   ► a but I find to be a positive way that like I understand core graphics in a way that I

00:26:30 ◼   ► don't understand Photoshop. And so it's constructive for me to like, okay, I can only do like 10

00:26:38 ◼   ► drawing operations or whatever it is like you can do in core graphics like functionally,

00:26:41 ◼   ► it's like you can stroke a path, you can fill a shape, like there's a few basic things.

00:26:46 ◼   ► And so if I make my art assets align with that, I'm probably not gonna reach beyond

00:26:52 ◼   ► what I'm actually capable of doing.

00:26:54 ◼   ► Or as if I go into Photoshop and like, "Oh, I can do layer styles.

00:26:57 ◼   ► Ooh, that's pretty.

00:26:58 ◼   ► Ooh, let me go into this here.

00:26:59 ◼   ► Oh, I can blur this over here."

00:27:00 ◼   ► Like doing stuff that I have no business doing.

00:27:04 ◼   ► And so at least if I keep it as programmatic and simple, then I'm not exceeding that.

00:27:09 ◼   ► And I understand it too.

00:27:11 ◼   ► Like that's maybe another part of it.

00:27:12 ◼   ► Like we're saying from the beginning of like,

00:27:14 ◼   ► if you're doing this all yourself,

00:27:16 ◼   ► like it's one of the dangerous things too in some ways

00:27:19 ◼   ► is if you're an external designer

00:27:23 ◼   ► is making something for you,

00:27:25 ◼   ► that you have no way then of recreating.

00:27:27 ◼   ► - Or adjusting.

00:27:28 ◼   ► - Or adjusting or tweaking.

00:27:29 ◼   ► Like I don't understand it, then I can't change it really.

00:27:34 ◼   ► And that's just, has definitely come back

00:27:37 ◼   ► to bite me a few times where I just need

00:27:40 ◼   ► change something slightly and I can't because it's a baked PNG and so it's like I just have

00:27:45 ◼   ► to make do or I need to try and get back on my designer schedule to make a really minor

00:27:50 ◼   ► adjustment for them and work out the contracting for that.

00:27:53 ◼   ► If it's nice and easy and understandable, it's probably going to be better down the

00:27:58 ◼   ► road and I think so for me, this is where I'm heading.

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

00:28:05 ◼   ► I tend to do a lot more programmatic things,

00:28:08 ◼   ► or at least storing my assets in a form

00:28:11 ◼   ► that I can easily re-render and regenerate.

00:28:14 ◼   ► And I can look at it and I'm like, yep,

00:28:16 ◼   ► I understand what that's doing.

00:28:17 ◼   ► I see the lines it's drawing, the shapes it's filling,

00:28:19 ◼   ► and that makes sense to me.

00:28:21 ◼   ► - Yeah, and the result of that usually isn't as good

00:28:26 ◼   ► as what you can get with a pro designer,

00:28:27 ◼   ► but it's one of those things where you can get

00:28:32 ◼   ► two thirds of the way there for a lot less cost

00:28:36 ◼   ► and with a lot of other benefits.

00:28:38 ◼   ► So that isn't always worth it, sometimes it is.

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

00:28:43 ◼   ► So it's nice to be able to do the minimum required

00:28:48 ◼   ► with the resources you have rather than being forced

00:28:52 ◼   ► to go and spend a lot of money you don't have.

00:28:54 ◼   ► So it's good to have this option.

00:28:57 ◼   ► - Exactly.

00:28:58 ◼   ► - All right, I think that wraps it up for this week.

00:29:00 ◼   ► Thanks a lot to our sponsor this week,

00:29:01 ◼   ► Thanks a lot for all our listeners.

00:29:03 ◼   ► Please recommend us to friends and rate us on Overcast

00:29:05 ◼   ► and iTunes and everything and we will see you next week.

00:29:09 ◼   ► - Bye.

00:29:10 ◼   ► [