Under the Radar

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

00:00:04 ◼   ► I'm Marco Arment.

00:00:05 ◼   ► 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 ◼   ► So a while back we had an episode, I forget what we titled it, but it was something like, you know,

00:00:14 ◼   ► "designed by programmer" or something like that.

00:00:16 ◼   ► Because, you know, as we all know with our apps, we frequently need some kind of icon to show something,

00:00:25 ◼   ► or to represent something, or the icon for our app even.

00:00:28 ◼   ► And so icons have always been an area where, you know, as a programmer first,

00:00:34 ◼   ► and a very, very, very distant wannabe designer very, very, very far second,

00:00:39 ◼   ► I have always struggled with graphic design in many ways.

00:00:44 ◼   ► I'm not a natural graphic designer.

00:00:47 ◼   ► I have no training in that area.

00:00:50 ◼   ► But making apps, you frequently need some kind of graphic design.

00:00:53 ◼   ► And in particular, icons have always been an area where I've been,

00:00:59 ◼   ► I've never been comfortable designing my own, like, app icon for Springboard.

00:01:04 ◼   ► But in app icons, I have gone through a lot of different phases, levels of capability,

00:01:13 ◼   ► styles of how I design in app icons, or what I even use for them.

00:01:18 ◼   ► And I think it's interesting to talk about this because over time,

00:01:23 ◼   ► we've gotten more and more options for, like, stock design resources.

00:01:27 ◼   ► You know, back in the early days, we had, like, the UI bar button system items,

00:01:33 ◼   ► and whatever, you know, 20, whatever it was, 12, like, it wasn't even that many,

00:01:37 ◼   ► whatever it was that we could choose, we could have, well, you could have, like,

00:01:40 ◼   ► the system share icon or the system refresh.

00:01:42 ◼   ► A few others, you know, cancel maybe.

00:01:44 ◼   ► But actually, that cancel was never one.

00:01:46 ◼   ► But, you know, you had, like, the system buttons that were built in,

00:01:49 ◼   ► and that was about it for stock design that the platform would provide you.

00:01:54 ◼   ► And so we had to go off on our own.

00:01:57 ◼   ► And back then, mostly, you know, everything was bitmap icons back then,

00:02:01 ◼   ► and mostly what you would do is hire a designer or maybe buy an icon set from somebody

00:02:06 ◼   ► and hope that would work for you.

00:02:09 ◼   ► And the world has moved in many different directions since then,

00:02:14 ◼   ► and now we have way more options.

00:02:17 ◼   ► We talked, back when we first covered this topic, we talked about how

00:02:22 ◼   ► I've been doing a lot of programmatic icon drawing.

00:02:25 ◼   ► I've designed a lot of my icons using the app called Paint Code for the Mac,

00:02:30 ◼   ► which is basically a programmer's vector drawing app that outputs, among other formats,

00:02:34 ◼   ► it can output source code that can draw your stuff using the Quartz APIs.

00:02:38 ◼   ► And I have a lot of success with that.

00:02:43 ◼   ► But now, since then, we've had the rise of a lot more stock design stuff built into the OS,

00:02:51 ◼   ► in the forms of system colors and SF symbols.

00:02:57 ◼   ► And I want to talk about that this week, because, you know, this...

00:03:02 ◼   ► I'm kind of in the middle of a pretty significant overcast reskinning and redesign,

00:03:08 ◼   ► and I've decided to lean heavily into SF symbols and some of the system colors.

00:03:14 ◼   ► And what I've found, I think, might be useful to people.

00:03:20 ◼   ► And I'm leaning more towards it as time goes on,

00:03:23 ◼   ► but I'm still kind of holding on to a lot of my dynamic paint code icons as well.

00:03:27 ◼   ► So I wanted to cover that today.

00:03:29 ◼   ► So, Dave, I'm curious, what has your journey been like in this area?

00:03:34 ◼   ► Yeah, I mean, I feel like any iOS developer who's been around a long time

00:03:38 ◼   ► has gone through all these different phases for icons.

00:03:42 ◼   ► And I will say, at first, it is amazing how universal icons are in app design.

00:03:49 ◼   ► That it's like fundamentally... I don't think I've ever shipped an app that didn't include this kind of icon inside of it.

00:03:55 ◼   ► And I think it's just fundamental to the way in which we communicate functionality to our users.

00:04:00 ◼   ► And I guess the alternative would have used all text-based buttons and all text-based descriptions,

00:04:06 ◼   ► but that's problematic in a variety of ways in terms of localization,

00:04:11 ◼   ► in terms of ease of scanning and understanding,

00:04:14 ◼   ► in terms of having consistency between other apps and between users' expectations for what a particular thing does.

00:04:20 ◼   ► And so icons is sort of the natural and logical end point that we've sort of settled on as a community

00:04:26 ◼   ► and as a platform around how to communicate that this thing is going to do something,

00:04:31 ◼   ► or identifying what is this feature, what's going to happen when you push on it.

00:04:37 ◼   ► And some of those, there are a few that Apple in the old days would include inside of iOS,

00:04:43 ◼   ► and those were useful to some degree, but I always found what was complicated there

00:04:47 ◼   ► was they gave you just enough if you did almost nothing.

00:04:51 ◼   ► But as soon as you needed something different, then you're in this weird place of

00:04:54 ◼   ► having some that are system and some that aren't leads to a lot of issues with consistency and graphic appearance.

00:04:59 ◼   ► And so inevitably what happened is I then went on, I guess, the icon set buying spree

00:05:07 ◼   ► that I feel like any early app developers probably went on

00:05:14 ◼   ► where everybody kept coming out with these icon packs that you could buy and you could use in your app.

00:05:18 ◼   ► And there was Symbolicons was one I used for a long time.

00:05:21 ◼   ► That's a good one.

00:05:26 ◼   ► It's like Parakeet primaries, which is like Louis Mantilla.

00:05:27 ◼   ► He did an icon set that I used for a while.

00:05:31 ◼   ► And there was, was it Glyphish?

00:05:35 ◼   ► There were so many.

00:05:37 ◼   ► Somewhere I have a folder that's just full of these icons,

00:05:40 ◼   ► in a folder on my computer.

00:05:44 ◼   ► And they sort of help, but they also ran into all kinds of other problems

00:05:46 ◼   ► where I had icon sets and then Apple added 2x displays.

00:05:51 ◼   ► And now I need to either rebuy or hope that the designer is going to update those icon sets

00:05:56 ◼   ► to have 2x icons.

00:06:01 ◼   ► Then there was 3x, which was the same problem again.

00:06:03 ◼   ► Then some icon designers started to go down the road of doing,

00:06:07 ◼   ► giving you SVG or something that's more flexible, which sort of works,

00:06:10 ◼   ► but is also complicated in other ways because if you,

00:06:13 ◼   ► the nature of rendering something is ideally you don't want weird image artifacts

00:06:18 ◼   ► or problems if you are rendering it slightly off size.

00:06:24 ◼   ► And so you end up with these kind of,

00:06:28 ◼   ► there's a lot of complexity in things that I would always run into.

00:06:29 ◼   ► And if you were using statically rendered icon sets,

00:06:32 ◼   ► then you always have, you're like,

00:06:35 ◼   ► "Well, it's limited to whatever size it came in to some degree."

00:06:37 ◼   ► Or you're resizing it yourself.

00:06:39 ◼   ► And it was always a bit complicated.

00:06:38 ◼   ► And then I went very briefly down the road you're talking about with PaintCode,

00:06:43 ◼   ► where I think I've made two or three icons that way.

00:06:47 ◼   ► And for me, it was always the last resort.

00:06:50 ◼   ► There's something in it in an icon that I need or I need to change.

00:06:53 ◼   ► It's just something that I can't quite manage, and so I would do it in PaintCode.

00:06:57 ◼   ► But I, just from a graphic and design perspective, really struggle there.

00:07:02 ◼   ► And so it was never something that I went down very far.

00:07:05 ◼   ► And then Apple added SF Symbols.

00:07:10 ◼   ► I guess this was three releases ago?

00:07:13 ◼   ► I think it sounds about right.

00:07:15 ◼   ► And it's been really interesting to see this evolve,

00:07:16 ◼   ► both in terms of Apple has added a tremendous variety of icon sets to this.

00:07:21 ◼   ► I think there are still things that I run into where they don't have an option for,

00:07:26 ◼   ► but the number of those is getting smaller and smaller.

00:07:30 ◼   ► And that's always just one of these problems with all these icon sets.

00:07:33 ◼   ► If there's some very specific thing that you want,

00:07:38 ◼   ► and your icon set doesn't have it,

00:07:41 ◼   ► or if SF Symbols doesn't have it,

00:07:42 ◼   ► you very quickly run into this wall where it's like, "What do I do?"

00:07:44 ◼   ► But they've done a great job of expanding it out.

00:07:47 ◼   ► And the thing that I've been so impressed with SF Symbols

00:07:50 ◼   ► and why I now,

00:07:53 ◼   ► it's like sometimes I feel like I'm changing my design

00:07:54 ◼   ► to accommodate the SF Symbol offerings.

00:07:58 ◼   ► Where I will move things or change things or structure things

00:07:59 ◼   ► such that I can use SF Symbols

00:08:04 ◼   ► rather than having to come up with my own icon.

00:08:06 ◼   ► Because it just works so well in the system.

00:08:08 ◼   ► And especially with SwiftUI,

00:08:12 ◼   ► which is almost all of what I'm building with now.

00:08:13 ◼   ► If you use SF Symbols,

00:08:16 ◼   ► they fit in perfectly in terms of the line weights

00:08:17 ◼   ► and the aesthetics of them,

00:08:21 ◼   ► in terms of getting the baseline right.

00:08:23 ◼   ► If you have a button that has an image and some text,

00:08:24 ◼   ► it's always been a slightly complicated thing

00:08:24 ◼   ► to get the baseline of the text

00:08:29 ◼   ► and the placement of the icon to look good.

00:08:31 ◼   ► Apple just sort of has taken care of that.

00:08:35 ◼   ► It looks really good with obviously the SF fonts.

00:08:38 ◼   ► And so that part works.

00:08:42 ◼   ► And so now that's just sort of where I am.

00:08:44 ◼   ► And it's just been kind of amazing

00:08:46 ◼   ► to see this development to a place that,

00:08:47 ◼   ► I mean I feel like in some ways bad for the icon set designers

00:08:50 ◼   ► who previously would make some money

00:08:51 ◼   ► from selling icon sets to people like me.

00:08:56 ◼   ► But increasingly it's like Apple does a good enough job

00:08:58 ◼   ► that I don't even really, you know,

00:09:01 ◼   ► I'm not on the lookout for any more icon sets I don't think.

00:09:03 ◼   ► We are brought to you this week

00:09:07 ◼   ► by the Best in Class iOS App Book Series.

00:09:08 ◼   ► This book series is here to help take your apps

00:09:12 ◼   ► from good to great.

00:09:14 ◼   ► It's written by indie developer Jordan Morgan,

00:09:15 ◼   ► and he's covering all he knows about what he believes

00:09:17 ◼   ► are the four most critical topics

00:09:16 ◼   ► to develop quality software in iOS,

00:09:21 ◼   ► including accessibility, design, user experience, and iOS APIs.

00:09:23 ◼   ► Accessibility helps you learn how to make sure your apps

00:09:28 ◼   ► are designed for everyone,

00:09:30 ◼   ► from deep dives into the APIs like the rotor control

00:09:32 ◼   ► or how to best support voiceover.

00:09:35 ◼   ► And every accessible app eventually wins with design,

00:09:37 ◼   ► but design looks different for each app.

00:09:40 ◼   ► Here you'll figure out how to find your apps voice

00:09:42 ◼   ► and then use that to make it look and feel

00:09:41 ◼   ► like you're at home in the iOS platform.

00:09:47 ◼   ► And the user experience section is very important, obviously.

00:09:49 ◼   ► If an app is pretty to look at but unusable, it gets deleted.

00:09:51 ◼   ► So learn how to not make that happen.

00:09:54 ◼   ► And the last section is an exhaustive look

00:09:56 ◼   ► at all the major iOS frameworks and APIs,

00:09:58 ◼   ► things like WidgetKit or how to leverage Siri APIs

00:10:02 ◼   ► to make sure your app is tightly integrated across the system.

00:10:05 ◼   ► We've personally seen parts of this book so far already,

00:10:08 ◼   ► because it's coming out, you know, as he writes it.

00:10:08 ◼   ► The book is currently in early access,

00:10:14 ◼   ► and new content updates come out every two weeks.

00:10:16 ◼   ► The first book on accessibility is done,

00:10:19 ◼   ► including over 300 pages of SwiftUI and UIKit techniques.

00:10:21 ◼   ► The next book currently in the works is about design.

00:10:25 ◼   ► It is fantastic so far.

00:10:28 ◼   ► I strongly recommend you check this out.

00:10:31 ◼   ► The book series will be $160 when it's out of early access,

00:10:33 ◼   ► but our listeners can enjoy a 50% early access discount

00:10:34 ◼   ► and get all the books in the series as they come out,

00:10:40 ◼   ► a comprehensive Xcode project with all the code samples,

00:10:43 ◼   ► access to a private Discord to chat with the author and other developers,

00:10:46 ◼   ► a bonus section just for early buyers,

00:10:49 ◼   ► and free updates for all the books.

00:10:51 ◼   ► Visit bestinclassiosapp.com/radar to get started today.

00:10:53 ◼   ► Whether you're an experienced developer who wants a reference guide,

00:10:58 ◼   ► or need to brush up on design, or just new to the world of iOS,

00:11:01 ◼   ► this book series has you covered.

00:11:00 ◼   ► It's like Apple's Human Interface guidelines,

00:11:06 ◼   ► combined with in-depth documentation and code samples.

00:11:08 ◼   ► Once again, that's bestinclassiosapp.com/radar

00:11:11 ◼   ► to get the series for 50% off.

00:11:15 ◼   ► Our thanks to bestinclassiosapp for their support of this show and Relay FM.

00:11:18 ◼   ► Yeah, I wanted to talk a little bit about,

00:11:24 ◼   ► as I'm also leaning more heavily into both the San Francisco font,

00:11:26 ◼   ► and the font family, and SF Symbols,

00:11:32 ◼   ► I've always, ever since Visual Basic,

00:11:35 ◼   ► my very first GUI programming tool,

00:11:39 ◼   ► back forever ago when I was a teenager,

00:11:42 ◼   ► I started with Visual Basic 1.0.

00:11:44 ◼   ► And back for that, it always came with a set of Microsoft built-in icons.

00:11:47 ◼   ► And there was always, not that many,

00:11:53 ◼   ► but I too would always find myself adjusting my design

00:11:53 ◼   ► to try to use as many of the stock icons as possible.

00:11:59 ◼   ► Because if you think my design skills are bad now,

00:12:03 ◼   ► you should have seen me when I was a teenager.

00:12:05 ◼   ► But, you know, and I find myself,

00:12:08 ◼   ► you mentioned that you're doing that with SF Symbols,

00:12:11 ◼   ► where you'll actually bend your design

00:12:13 ◼   ► to accommodate what they offer.

00:12:15 ◼   ► And I'm finding myself doing that exact same thing now.

00:12:17 ◼   ► Because as I lean more heavily into SF Symbols,

00:12:18 ◼   ► I still have some custom icons lingering around in the redesign,

00:12:24 ◼   ► but that's mostly because I need some kind of dynamic functionality.

00:12:30 ◼   ► Like, the overcast sleep timer icon on the Now Playing screen,

00:12:33 ◼   ► first of all, it actually shows the correct time,

00:12:37 ◼   ► because it's a clock,

00:12:39 ◼   ► and I'm not going to have a clock in my app that shows the wrong time.

00:12:40 ◼   ► So it always shows the right time,

00:12:43 ◼   ► and when you have a sleep timer set,

00:12:45 ◼   ► it turns the hands into a little bit of a pie graph

00:12:44 ◼   ► to show you what time the timer will end.

00:12:50 ◼   ► And that kind of dynamic functionality is not yet possible with SF Symbols.

00:12:52 ◼   ► And honestly, that's unfortunate.

00:12:57 ◼   ► I wish there was a way to have parameterized SF Symbols,

00:12:59 ◼   ► where some input parameter could either toggle certain shapes on and off within the icon,

00:13:04 ◼   ► or could be applied as a rotation or a scaling metric.

00:13:10 ◼   ► That obviously broadens the scope of them tremendously,

00:13:16 ◼   ► but they already support so many cool things through the symbol configuration API.

00:13:19 ◼   ► Things like different palette controls and palette colors and weights and everything.

00:13:23 ◼   ► So the precedent and the beginnings of API support are there for dynamic icons, basically.

00:13:28 ◼   ► They would just have to add certain arbitrary parameters that you could input,

00:13:36 ◼   ► and then have the symbols be able to interpret those in certain ways, optionally.

00:13:37 ◼   ► And I would love to see that.

00:13:43 ◼   ► But other than that, other than dynamic needs,

00:13:44 ◼   ► what I'm seeing really is that almost every icon in Overcast can be replaced with an SF Symbols icon,

00:13:47 ◼   ► and in most cases it ends up looking better.

00:13:55 ◼   ► Because while my design skills have gotten significantly better since 2014 when I started this app,

00:13:58 ◼   ► they're still not as good as Apple's most of the time.

00:14:02 ◼   ► And so, you know, Apple has, in many ways,

00:14:08 ◼   ► they're a very big company now,

00:14:12 ◼   ► and in many ways that's inconvenient for developers in the sense that we now,

00:14:14 ◼   ► it's such a broad company and the platform is so broad that it's hard for us to keep up in certain ways.

00:14:18 ◼   ► But because the company is so massive and sprawling and huge now,

00:14:24 ◼   ► and they have so many things going,

00:14:28 ◼   ► that also means that we get occasional things like this that just make our jobs so much easier.

00:14:29 ◼   ► A smaller Apple that was making iOS 2.0 back 12 years ago,

00:14:35 ◼   ► whenever that was, would never have done something like SF Symbols.

00:14:39 ◼   ► But now they have teams of people who are dedicated to things like this,

00:14:43 ◼   ► to making hundreds of new icons every year,

00:14:49 ◼   ► and updating the old ones to get new capabilities,

00:14:53 ◼   ► or tweaking the styles slightly to keep up with the modern UI fashion and stuff,

00:14:55 ◼   ► and adding new capabilities like the palette colors and things like that.

00:15:01 ◼   ► And you go into the fonts as well, and the fonts get new capabilities,

00:15:05 ◼   ► and some of them integrate with SF Symbols,

00:15:08 ◼   ► or they work together in harmonious ways.

00:15:10 ◼   ► And so to have this giant resource available to us,

00:15:14 ◼   ► I think it would be, it's almost stupid not to use it.

00:15:18 ◼   ► I think it's really nice that, obviously,

00:15:20 ◼   ► as I mentioned, there's still room for custom icons,

00:15:26 ◼   ► and as I said, I'm still using some custom icons myself in my new design,

00:15:29 ◼   ► but way fewer than before.

00:15:33 ◼   ► And what this results in is, first of all, a smaller app, which is great.

00:15:36 ◼   ► In the same way that less code, it tends to be better code,

00:15:41 ◼   ► it's always nice when you don't have to write something yourself,

00:15:46 ◼   ► when you can just use a system API to do something.

00:15:46 ◼   ► That also applies to design resources.

00:15:52 ◼   ► It's really nice to have fewer design resources being on your plate,

00:15:54 ◼   ► not only as an indie developer, but as any developer.

00:16:00 ◼   ► Now, the good thing is, this is an area where we can have an advantage as indies,

00:16:02 ◼   ► because the big companies will never use SF Symbols.

00:16:07 ◼   ► They have their own internal design teams,

00:16:11 ◼   ► and they want everything to look the same across all platforms,

00:16:13 ◼   ► and their own branding, and blah, blah, blah.

00:16:11 ◼   ► So they're never going to do this.

00:16:17 ◼   ► We can take advantage of this as indies,

00:16:19 ◼   ► because we don't care about all that stuff,

00:16:21 ◼   ► or we are more flexible on some of those areas than they are,

00:16:23 ◼   ► or we have a smaller problem set.

00:16:26 ◼   ► If our app doesn't look the same between iOS and Android,

00:16:28 ◼   ► well, most of us don't have iOS and Android apps, so that's fine.

00:16:32 ◼   ► So this is an area where indies can really take advantage of the fact that we are indie,

00:16:38 ◼   ► and use the system stuff, and there's massive amounts of effort and updating over time.

00:16:44 ◼   ► You mentioned when the screen sizes change, or when retina happen.

00:16:51 ◼   ► Whenever anything on the platform changes like that,

00:16:54 ◼   ► Apple will make sure that their design resources are updated,

00:16:56 ◼   ► and so we don't have to do that.

00:17:02 ◼   ► And so our apps get smaller, we have fewer design resources to maintain at all,

00:17:04 ◼   ► fewer things to have to draw or get drawn in the first place,

00:17:10 ◼   ► and so it's just a huge savings for us all around.

00:17:14 ◼   ► Not to mention the fact that then code gets simpler.

00:17:17 ◼   ► You can just call this stock "System Named API",

00:17:20 ◼   ► you mentioned SwiftUI, it's easier there, which is true.

00:17:23 ◼   ► So many things become easier when we can rely on the built-in stuff,

00:17:26 ◼   ► and the built-in stuff has just gotten so much more broad in recent years,

00:17:29 ◼   ► ever since they introduced SF Symbols and system colors and stuff like that.

00:17:35 ◼   ► So this is just a fantastic way for indies to have really nice, professional-looking apps,

00:17:39 ◼   ► without almost any effort at all.

00:17:46 ◼   ► And that's just fantastic.

00:17:50 ◼   ► And if there was any concern, one concern I would have would be,

00:17:51 ◼   ► as you're using these, is like, "Am I going to make my app just look like every other app?"

00:17:55 ◼   ► And the good thing is, as I mentioned a minute ago,

00:18:01 ◼   ► because almost no apps will even use SF Symbols at all,

00:18:03 ◼   ► let alone use them extensively,

00:18:08 ◼   ► that's not really going to be a problem in practice as far as I can guess.

00:18:11 ◼   ► It certainly isn't today.

00:18:15 ◼   ► And any cross-platform app from a big company, they're not going to use any of them.

00:18:17 ◼   ► Many of the indie apps on the App Store are designed by people who have design opinions

00:18:21 ◼   ► or design teams, and so they're not going to use them.

00:18:27 ◼   ► Many of the smaller apps or apps that don't have dedicated design teams

00:18:30 ◼   ► are already made and already designed for previous versions of iOS

00:18:34 ◼   ► and will never be updated to the new style,

00:18:38 ◼   ► or will not be updated for a very long time.

00:18:40 ◼   ► So when Overcast comes out and it shows all these icons,

00:18:42 ◼   ► I bet a lot of people are not going to know these are SF Symbols.

00:18:46 ◼   ► You might recognize a couple of them here and there from Apple's built-in apps,

00:18:48 ◼   ► but SF Symbols has over a thousand icons, I think.

00:18:54 ◼   ► It has a lot of icons, and most people are not seeing them on a regular basis.

00:18:57 ◼   ► And even if they did, is that so bad?

00:19:03 ◼   ► Like if your meatball icon, I just learned this name,

00:19:06 ◼   ► I'm so happy that this is the name of the three dots,

00:19:08 ◼   ► like the ellipsis to show a more icon,

00:19:11 ◼   ► it's apparently called a meatball.

00:19:13 ◼   ► That makes me so happy.

00:19:12 ◼   ► But if your meatball icon or your share icon looks like the system ones, that's fine.

00:19:18 ◼   ► That's good. People recognize them.

00:19:24 ◼   ► It shows that your app fits into the platform. It looks native.

00:19:26 ◼   ► Those are all good qualities.

00:19:29 ◼   ► So all around, I just see this as a win.

00:19:31 ◼   ► And I think too, it's a good thing that it fits in.

00:19:36 ◼   ► Regardless of whether or not anyone else will use it,

00:19:42 ◼   ► maybe this isn't a point of differentiation between your app and between other apps.

00:19:45 ◼   ► But I'm not sure if that's a particularly helpful differentiation,

00:19:50 ◼   ► if that's something that's actually doing you any favors or is important.

00:19:52 ◼   ► The more I use SF Symbols, the more I understand how difficult doing icons inside applications well is.

00:20:03 ◼   ► And getting a sense of how many choices and differentiations and points of design

00:20:08 ◼   ► that if you actually are going to do this, you'd have to do to do it well.

00:20:15 ◼   ► And it's way better for your app to look good and sharp and clean

00:20:19 ◼   ► than it is to be different for not looking clean, sharp and clean.

00:20:23 ◼   ► And I think the biggest way of proving this is

00:20:28 ◼   ► if you've ever watched the W2C session

00:20:29 ◼   ► where they talk about how to make your own custom SF Symbols.

00:20:34 ◼   ► Oh yeah, I tried that for about one hour.

00:20:38 ◼   ► And it's like, Apple, fair enough, they've built the infrastructure that there is a way to do this.

00:20:43 ◼   ► And I believe this last year it got a little bit better.

00:20:47 ◼   ► They improved the tooling for it slightly.

00:20:50 ◼   ► But it was one of these things where I'm like, "Okay."

00:20:52 ◼   ► The first step, it's like, "Okay, open this template. All right. Now take your icon, put it in here."

00:20:54 ◼   ► And it's like, "Now tweak your icon 36 times to make it so that it looks good in this context, in this context,

00:20:59 ◼   ► if it's expanded out here, if they're using the accessibility type sizes

00:21:05 ◼   ► where it gets really small or really big, if they want bold or unbold text for accessibility reasons."

00:21:11 ◼   ► And it very quickly was like, "Oh, right."

00:21:17 ◼   ► So someone at Apple has, I feel for that person slightly,

00:21:20 ◼   ► but someone at Apple has gone through for all of these hundreds of symbols,

00:21:25 ◼   ► and they've made sure that it looks good and is appropriate in all of those contexts.

00:21:30 ◼   ► That if a user has dynamic text turned way up and bold text turned on,

00:21:35 ◼   ► the symbol is going to look good and appropriate next to the text that it is next to.

00:21:41 ◼   ► And I didn't have to do anything to do that.

00:21:45 ◼   ► And I very quickly, as soon as I opened up that template and watched the W3C video,

00:21:47 ◼   ► I was like, "Nope, I'm just going to let someone else worry about this,

00:21:52 ◼   ► because there is no way that I have the time, energy, effort, ability, skill,

00:21:55 ◼   ► whatever attributes it would take to actually do that to make my app icons rise to that level."

00:21:59 ◼   ► And so whether or not anyone else is using it,

00:22:07 ◼   ► in some ways it would be a wonderful world if lots of people are using them,

00:22:09 ◼   ► and it's just like, it's not a point of differentiation, so fair enough.

00:22:12 ◼   ► You have to differentiate your app in other ways.

00:22:13 ◼   ► But seeing how much effort and care goes into these very quickly makes me think,

00:22:18 ◼   ► "I don't want to get anywhere near trying to do this myself,

00:22:23 ◼   ► because there's no way that I'm going to end up with a result.

00:22:26 ◼   ► I'm not willing to put in the effort it would take to get to the results that they've already gotten to."

00:22:29 ◼   ► And I hope there are a few areas in SF Symbols that I wish they would expand.

00:22:34 ◼   ► For one, for me, it's like workout modes.

00:22:38 ◼   ► It's something that there isn't SF Symbols for all the different kind of,

00:22:40 ◼   ► if you imagine all the workout types you could have with running, walking, biking, etc.

00:22:45 ◼   ► There's just not a good set of them.

00:22:50 ◼   ► But other than that, that's the only area that I've ever run into where I'm like,

00:22:52 ◼   ► "I wish they'd expanded it."

00:22:54 ◼   ► But it's like, "Otherwise, just use it and don't worry about it."

00:22:55 ◼   ► And understand that you're getting not just the icon as part of starting to use it,

00:23:00 ◼   ► but you're getting all of the other work and the dynamism that is inside of these icons,

00:23:07 ◼   ► which is essentially for free by going down this road yourself.

00:23:12 ◼   ► Yeah, it's just such a great feeling to know that you can just, with one line of code,

00:23:16 ◼   ► you can have this incredible resource available in your app, and it makes your app look good.

00:23:25 ◼   ► And I like what you said about how you shouldn't necessarily rely on custom icon work as a point of differentiation.

00:23:33 ◼   ► I think this, as the system is maturing over time, as things are getting more broad,

00:23:38 ◼   ► we have not necessarily cross-platform in the sense of iOS and Android,

00:23:46 ◼   ► but we have cross-platform in the sense of iPhone, iPad, Mac, watch.

00:23:50 ◼   ► As everything's getting more broad, I think the value of using stock design resources is going up over time.

00:23:55 ◼   ► Because this is one of the reasons why also in my redesign I have dropped the custom font.

00:24:02 ◼   ► I'm only supporting San Francisco, and I'm designing the whole app around San Francisco now.

00:24:07 ◼   ► And it's not because the custom font was bad, I love the custom font,

00:24:10 ◼   ► but if you look at, mature platforms over time tend to go towards the system font being universal.

00:24:19 ◼   ► When PC and Mac stuff was really young, a lot of stuff had custom fonts,

00:24:24 ◼   ► and as the systems matured now, it would be weird if you opened up a Mac app,

00:24:30 ◼   ► and it was just a pretty normal type of app, a common app type,

00:24:34 ◼   ► and it used a different font in the system. That's not a common thing anymore.

00:24:39 ◼   ► And I think iOS is moving in that direction as well.

00:24:43 ◼   ► I think you have to have a really good rationale for not using the system font,

00:24:47 ◼   ► and if you don't, you probably should use system font.

00:24:51 ◼   ► And there are certain exceptions, like games, obviously, that's an immersive experience,

00:24:56 ◼   ► that's a different thing, that always has been a different thing.

00:24:58 ◼   ► But for most apps, you should be using the system font,

00:25:01 ◼   ► and making your own font from scratch is such a daunting task that most developers shouldn't do that either.

00:25:09 ◼   ► Occasionally a really big company might make their own entirely custom font,

00:25:13 ◼   ► but that's not a common thing either.

00:25:15 ◼   ► I think icons kind of fall between those two.

00:25:17 ◼   ► Most people, it's easier obviously to make an icon than it is to make an entire custom font,

00:25:22 ◼   ► since the font is basically hundreds of custom icons.

00:25:26 ◼   ► But I think most apps should probably use the system icons most or all of the time,

00:25:34 ◼   ► unless there is some area where they don't cover.

00:25:37 ◼   ► And over time, hopefully those areas will shrink.

00:25:41 ◼   ► Because if you look at SF Symbols over time, every new release of iOS,

00:25:46 ◼   ► Apple adds more SF Symbols, and that's probably going to continue for some time.

00:25:50 ◼   ► I mean, it's probably going to slow down at some point, because all the low-hanging fruit will be gone.

00:25:55 ◼   ► But they keep adding more and more.

00:25:57 ◼   ► And as I mentioned, take advantage of Apple's ridiculous scale,

00:26:01 ◼   ► and let them do all that work, and you use it in your app.

00:26:04 ◼   ► But over time, I think there's going to be less and less reason for most apps to deviate from the stock designs,

00:26:11 ◼   ► both controls and fonts and icons.

00:26:16 ◼   ► So if you jump on board now, I think you'll be ahead of the curve,

00:26:19 ◼   ► and I think you'll be saving yourself a whole lot of time.

00:26:21 ◼   ► And your app will look more modern and better.

00:26:24 ◼   ► Yeah, and I think too, don't underestimate the value of helping your customer, your user,

00:26:32 ◼   ► know what something is going to do by being consistent with the system.

00:26:37 ◼   ► One of the advantages of SF Symbols is that it isn't a point of differentiation.

00:26:42 ◼   ► In some ways, that is a feature, not a bug.

00:26:44 ◼   ► It is good that if they see a button that has a particular symbol,

00:26:49 ◼   ► and you're using it in the way in which that symbol was intended to be used,

00:26:54 ◼   ► which you should be, like don't be using symbols in confusing ways,

00:26:57 ◼   ► but if you're using it as like, this is for favoriting something,

00:27:00 ◼   ► this is for sharing something, this is for rotating something.

00:27:05 ◼   ► If you're using those symbols in a way that they're intended to be used,

00:27:10 ◼   ► then you're getting this built-in help, like onboarding training with your customers,

00:27:16 ◼   ► that you didn't have to do any work there.

00:27:19 ◼   ► You didn't have to work hard to expect that they're going to know what to do with that symbol,

00:27:24 ◼   ► because if it's the same symbol that they see in Apple's, say like the crop or rotate tool,

00:27:31 ◼   ► it's like if they've seen it in the Photos app and they know what it did there,

00:27:34 ◼   ► and they see it in your app and it does the same thing, they didn't have to learn anything.

00:27:38 ◼   ► They don't have to think, oh, in the system one it looks this way, but in your app,

00:27:42 ◼   ► oh, when I want to use crop, I'm using this other tool or this other concept or this other glyph.

00:27:47 ◼   ► It becomes very, your customers can develop a vocabulary for what the icons on a platform do,

00:27:56 ◼   ► and then you can just take advantage of that in your own app.

00:27:59 ◼   ► And I think that's something that I've undervalued when I was first going down this road

00:28:03 ◼   ► of standardizing on SF symbols in my apps, is the advantage that that is conferring

00:28:08 ◼   ► rather than the sort of detraction.

00:28:10 ◼   ► The advantage that I can use something that is very familiar is transferable between my apps,

00:28:15 ◼   ► and I'm gaining this sort of level of comfort for my customers that I didn't have to really even do much work for.

00:28:22 ◼   ► Exactly, and as iOS's icons and system designs get richer,

00:28:28 ◼   ► that raises the bar for what you have to do if you want to use custom stuff.

00:28:33 ◼   ► Like the SF symbols have this concept of hierarchical rendering,

00:28:36 ◼   ► which is basically different levels of transparency based on a certain root color.

00:28:40 ◼   ► So if that becomes the norm, that people get accustomed to seeing hierarchical icons across the system,

00:28:46 ◼   ► that means if you're going to replace them with your own custom icons,

00:28:49 ◼   ► people are going to expect your icons to have that same look, and that's even more work for you.

00:28:53 ◼   ► So I think as things get more mature, again, the bar is being raised for having custom stuff,

00:29:00 ◼   ► and so that increases the value of indies like us using system stuff.

00:29:04 ◼   ► Yeah, I think you said it well when you said it,

00:29:09 ◼   ► it's like you'd just be foolish not to. And I think we've both sort of settled on this,

00:29:13 ◼   ► and I think that's for good reasons, that this is a good thing.

00:29:16 ◼   ► I think I've been using it, especially in Widgetsmith, extensively,

00:29:20 ◼   ► and it's used widely and with lots of customers, and it works really well,

00:29:24 ◼   ► and I would encourage anyone who's been reluctant or hesitant to adopt it,

00:29:29 ◼   ► try it out and see if it can work for you.

00:29:32 ◼   ► Thanks for listening, everybody, and we'll talk to you in two weeks.

00:29:35 ◼   ► Bye.

00:29:37 ◼   ► Stop dot circle.