UI Design for Developers with Heidi Helen Pilypas

In this episode, Leo talks with Heidi Helen Pilypas about UI Design. We talk communication for developers, iOS 14 updates, Widgets, and SwiftUI.

Guest

Related Episodes

Related Links

Sponsors

AppFigures
The tools you need to monitor, optimize, and get more downloads.

If you want your app to succeed, there's never been a better time to read up on App Store Optimization and Appfigures provides that for you. 
  • One of the most known conferences about Apple platforms development is going remote this year! 
  • NSSpain 2020 is an online, continuous 36 hours conference, carefully crafted by the community for the community.
  • Guests of the show Paul Hudson and Donny Wals will be speaking as well as others
Go to NSSpain.com and use promo code empowerapps to get 10% off

Also speaking at...

UI Design

  • What has changed in iOS Design?
  • What's the difference between skeuomorphic vs flat?
  • Differences with Android and material design
  • Differences between web design
  • What's changed in iOS 14 design?
  • Differences on the iPad
  • How to design for Widgets

Design and Developer Teams

  • How developers should communicate with designers?
  • Best Tools for Getting Started
  • Best Guides and Courses for Getting Started
  • Common Mistakes
  • Pattern Libraries and Design Systems
  • Impact of SwiftUI

Social Media

Credits


Transcription

Leo Dion (Host): Welcome to another episode of empower apps. I'm your host. Leo Dion with us today is Heidi Helen. Hey, Heidi, how's it going? Hey, not too bad. So glad to have you on. We've had a lot of requests for having someone who can talk about UI design, because a lot of developers have a hard time. With UI design and designing their iOS app, or just talking to a designer.

[00:00:29] And so I'm really glad to have you on, I've looked at a lot of your work especially, Capsicum and some of the other stuff that you've done. Just awesome. Awesome stuff. I'm really excited to have you on today. 

[00:00:43] Heidi Helen Pilypas (guest): Oh, thank you very much for having me. And I hope that I can describe UI design in a way that does it justice.

[00:00:51] Leo Dion (Host): And through a podcast without the, without the, the easiness of visuals. So go ahead for those who might not know who you are, I'll let you go ahead and introduce yourself. 

[00:01:04] Heidi Helen Pilypas (guest): Sure. Thanks. So my name is Heidi Helen Pilypas. I live in Adelaide, South Australia. I work on a couple of apps as a designer, so.

[00:01:18] My main apps are Capsicum. And when did I, Capsicum is an app for planning your day tracking habits and telling your story when inspired by beautiful paper planners. And then when did I is an app for. Tracking when you do things like anything you want, really, it could be making a bed, it could be brushing your teeth.

[00:01:42] It could be flossing. It could be changing the oil in your car, or even when you took your medication. 

[00:01:48] Leo Dion (Host): That's awesome. How long have you been working on those apps? 

[00:01:52] Heidi Helen Pilypas (guest): I've been working on apps for a couple of years now. I first started in 2011 when I. Got my first iPhone in a very mod way, I should say. Cause what, what happened was I was just in love with all of the apps and I was artistic myself.

[00:02:14] I went to university and studied a bachelor of visual arts and I always love drawing and painting as a kid. And I eventually like got more into design. So when I saw apps. I really wanted to get one of every area of my life, including logging my dreams. And there was an app called dream journal and I downloaded it and I noticed a few little things that can use improvement.

[00:02:43] And the app had an area for you to write a support request to the developer. So I sent off an email with. A PDF document that I made, where I had screenshots and I had areas and notes about things that could use improving. And I was like, so excited about sending this email. Like I just thought, like I was really passionate about it and that would be really useful.

[00:03:08] However, it can also be confronting to someone to get told there's all these issues. This is what's wrong with it. And to my surprise, like I got a positive response actually. And. The developer thanked me and that developer was Ishmael shahbaz who I work with today on our, on our apps, including Capsicum and a couple of others.

[00:03:31] And yeah, over the years, we, we eventually built up to larger projects. It started with me helping him with a few design elements for one of his apps. And then it grew to more. I learned all about iOS app design through him, coaching and mentoring me. That's 

[00:03:52] Leo Dion (Host): awesome. My so I got my bachelor's in computer science and I've always had like a, I wouldn't say a passion, but a desire to get better at UI design.

[00:04:03] I ended up getting a graduate degree in digital media and art technology. Cause I was just so interested in UI and I feel like in the last. 15 years. My UI design skills have definitely like atrophied. So it's something I'm really interested in. So. Excited to have, have you on, you've been doing this for quite a while.

[00:04:23] It sounds like. What do you think has really changed when it comes to like UI design for the iPhone? 

[00:04:29] Heidi Helen Pilypas (guest): Let me see. A lot of things change over time with design patterns. So when I first got my iPhone flat design, wasn't so much of a thing. It was heavily skeuomorphic. Things were very much influenced by the real world around us.

[00:04:50] So you had actual textures in the notes app for instance of paper, texture, and stitching in the nav bar. And. Then with iOS 7 things changed, things became more flat. And I actually really liked that. I actually really jumped on that. And I, when I looked at the old designs, I started thinking they were really outdated and like, Really thinking flat is the way in flat is the answer.

[00:05:21] Yes. 

[00:05:21] Leo Dion (Host): Yeah. I really, I agree. I like the flat design I've seen this recently. I've switched over to big Sur and you've kind of seen that as well with big Sur, like that kind of design update where everything is flat. 

[00:05:35] Heidi Helen Pilypas (guest): Yeah. So eventually though, over time, I've actually come to appreciate like both.

[00:05:42] Skeuomorphism and flat. And I really like marrying the two together to get something that is the best of both worlds. 

[00:05:51] Leo Dion (Host): What's a good example of an app that you think does that 

[00:05:55] Heidi Helen Pilypas (guest): we try and do in Capsicum actually, because we want it to remind people of. Like paper notebooks, but we also want it to be a digital experience that has the versitilty of what you can do on a phone and an iPad.

[00:06:18]AppFigures Sponsorship Start

[00:06:18] Leo Dion (Host): So here's the thing you're probably thinking to yourself. I want a build a brand new app, or maybe you already have an app in the app store. I think now is probably the time you're going to want to really optimize that app in the app store. And what I mean by that, make it easy for people to find it and for people to download it.

[00:06:39] It's one thing that you can build this great app for the iPhone 12 or iOS 14, or watchOS 7. It's another thing. Being able to help folks who have their brand new iPhone or their hand me down, being able to find all these new apps. And this is where at figures really comes in. There give you everything.

[00:06:58] You need to do this all in one place. So if you have a really good idea or an app idea, and you want to see how many people are searching for that, AppFigures is going to be your spot. If you already have an app in the app store, and you want to see what words you need to use or what terms you need to use so that people can find you easily AppFigures is for you.

[00:07:19] And it's really easy. All you have to do is use our promo code and power 30, 30 to get 30% off for the next three months. That's it. That's on asking a lot in AppFigures they don't just have this really great universal analytics dashboard. They also provide a lot of other great app store tools for optimization.

[00:07:38] And that's really the name of the game. That's going to improve your visibility and that's going to help you find more users and figures has more than a decade of providing mobile analytics and insights. And they also have this new tool called the competitor intelligence. Dashboard. And that allows you to track competitor downloads and understand what strategies you're gonna use so that you can grow your bottom line.

[00:08:03] That's the thing. You can have a great idea. You can get users. Maybe by personally reaching out to them. But if you can improve your visibility on the app store, that's really the name of the game. So go ahead, head over to app figures.com to try app figures for free. If you like it, both the new and existing customers can use the special code, empower 30, 30 to get 30% off for the next three months.

[00:08:27] So go ahead, give it a shot and let me know what you think. And if you need any help, try out some of those new app tear downs that Ariel has been doing. They've been fantastic and they've been really providing a lot of help to me. And I think to a lot of folks to what they need to do to get their app store apps up and working.

[00:08:45] So go ahead and try it out with the empower 30, 30, you get 30% off for the next three months, or try the link in the show notes below. Thank you AppFigures for sponsoring our show.

[00:09:02]AppFigures Sponsorship End

[00:09:02] So it sounds like you communicate with Ish quite a bit. What have you found really works with, you know, your two person team, but would work with any other team when it comes to like. Being able to design an app and communicate clearly for the both of you 

[00:09:20] Heidi Helen Pilypas (guest): communication starts with mutual respect. For one another, understanding you both have different skills to bring to the table with ish.

[00:09:32] He knows all about coding and development. I don't often understand a lot of the constraints, so it's really helpful for me to listen when he gives me feedback on things that I don't know like I sometimes design things that don't actually, I sometimes design things that might not actually work with the constraints of iOS.

[00:09:58] So he's able to tell me, and I'm able to adapt. 

[00:10:02] Leo Dion (Host): Can you give an example of something like that? Cause like what I run into, when I talk to designers, they're more acquainted with like, for instance, Android and they'll design it because that's what they're more acquainted to. And then it's like, yeah, well we don't have a back button on our phones in iOS or like, that seems to me, like the biggest hurdle with designers is like, or, or they just design an app universally.

[00:10:28] Right. And then they don't realize that different operating systems have different patterns. Sure. 

[00:10:34] Heidi Helen Pilypas (guest): That's exactly right. Different operating systems have different guidelines about what fits into them. I have briefly studied material design, which is developed by Google and that is a pattern or a system that's.

[00:10:53] Heavily used with Android apps. However, it can also be used on the web and an iOS app, 

[00:10:59] Leo Dion (Host): right. Especially like Google apps use 

[00:11:00] Heidi Helen Pilypas (guest): that. But then iOS has their own components, things that are completely different. Like when I studied material design, for instance, it had a floating action button as part of the operating system, but that's not something that.

[00:11:20] That's not something that comes with iOS. So you have to do things in different ways that respect the platforms. Like there's more than one way of presenting information to people. There's like, like you could do a menu or you could do like a modal view or you could, you can actually have different navigation and buttons and things.

[00:11:42] So it really, it really depends on. The platform you're designing for. It's useful to familiarize yourself with the guidelines. So Apple has their human interface guidelines on their developer website. They have guidelines for iOS, macOS, watchOS, and TVs T V O S. And they update it every year as operating system evolves.

[00:12:11] So. I, I read that to find out what is new. And I, I read it when I first started so that I got a good idea of what iOS supports. 

[00:12:24] Leo Dion (Host): What have you seen anything new as far as like iOS 14 this year? That's changed in the guidelines. Yeah. There's 

[00:12:30] Heidi Helen Pilypas (guest): quite a lot of new things. One thing that many people are excited about is widgets on the home screen.

[00:12:37] Leo Dion (Host): Yeah. Yeah. Ask David Smith that 

[00:12:41] Heidi Helen Pilypas (guest): David Smith actually has changed the landscape in a lot of ways with how people use their phones. 

[00:12:48] Leo Dion (Host): I find it interesting how, like one of the big features, I think people are attracted by is like the customization I was listening to the latest ATP. And they were just talking about how like, Apple is very much, like you said, they have certain guidelines and they like try to keep it fairly strict, but people like really want to customize their home screen to the like.

[00:13:08] To the nth degree, even if it might look hideous to other folks, and like, you've seen this with like widgets, you can customize colors and fonts. I know David added that recently. And then like the big thing I've heard is, I don't know if you've heard about this, but like custom icons where people hack shortcuts to use custom icons so that it can like really customize their home screen as much as they want.

[00:13:33] And I find that really interesting, especially with like UI design, because we tend to be like, this looks pretty, this doesn't. And we try to like give people guidelines, but people want to like personalize. They want to personalize to the nth degree as much as they can. 

[00:13:46] Heidi Helen Pilypas (guest): Exactly. And I think that's great as an option for users to have to make something more of their own.

[00:13:53] Leo Dion (Host): Have you done anything on the watch? I 

[00:13:56] Heidi Helen Pilypas (guest): have looked into the watch before for projects that I've worked on. I'm not in great debt, 

[00:14:04] Leo Dion (Host): but you have done iPad. Correct. What is like the big differences you've seen with doing UI design on the phone versus the iPad? 

[00:14:14] Heidi Helen Pilypas (guest): Well, the iPad has much more real estate recently in iOS 14.

[00:14:21] Apple also announced that you can have multiple column formats. With the split view previously could have liked to, but now it can have more than that. And now I've had design can also be heavily sidebar based so you can navigate your app using the sidebar, like maybe instead of using a tab bar, for instance, you can put navigation elements in there.

[00:14:52] And then on an iPhone, you would have those in a tab bar, cause you don't have room for a sidebar. So you would have. A slightly different presentation of your app, depending on what screen you're using. 

[00:15:07] Leo Dion (Host): So it sounds to me like screen sizes are our big deal. As far as like designing, like one thing I love to use on my iPad is like split screen to where I'll have something on one side and something on the other.

[00:15:20] And by the time we release this episode, we'll have. Probably new iPhones out the iPhone 12 with its new screen sizes. So what are some tips or things that you've dealt with when you're talking with Ish, especially when it comes to designing an app so that it can adapt to, you know, the new screen sizes that we have with the new iPhones or cars.

[00:15:45] Like they seem to be changing every year pretty much. What have you found is like really helpful for, for your communication with your developers in order to make sure that your designs are like adaptable or responsive? 

[00:15:58] Heidi Helen Pilypas (guest): Well, I usually mock things up in multiple sizes. I, I usually pick a standard iPhone size and mock up something on there and also.

[00:16:12] A standard, iPad size. However, there are variations with many different sizes. I leave, I leave a lot of the rescaling up to ish to do because I don't, I don't fully understand it all. I try and work the best with guidelines that I read examples. I see. And I use. Also a third party library from Apple in sketch that has all of that.

[00:16:45] User interface components. 

[00:16:47] Leo Dion (Host): Oh yeah. I know you mean, so like where you can go, like people have like, like usually like a dribble site or what's the other big UI design resource where you can pretty much Oh yeah. Apple has that too. Well, we'll put a link to that where you can pretty much like they have the Photoshop version and then the sketch version where you can like use the drag little widgets in your program, your good graphic design program.

[00:17:10] Is that what you're talking about? 

[00:17:13] Heidi Helen Pilypas (guest): Okay. It's like a pattern library. You can download it for your user interface, design tool of choice. So I use sketch. They do have, they do have a Figma version now I think, and Photoshop as well. And even keynote, a lot of people are Apple design in Keynote. I've heard.

[00:17:39] Leo Dion (Host): Nice. What are some like good tools for, for a developer to get started with like designing their app? Like, for me, I used to be much more into like, Just opening up X code and dragging things into the storyboard and see how they look or, you know, now I guess it'd be more like writing the Swift UI code in order to design my app because I find it to be more consistent with how I actually look.

[00:18:08] But then like there's obviously benefits to pulling up a graphics program and doing what you're doing with catch what, like, what are some ways that I can really. Pick up more UI design skills and better design my apps 

[00:18:23] Heidi Helen Pilypas (guest): sure. Sorry. Some, some good examples. Of tools I used when I was learning design design plus code, which has several courses, including how to use sketch, but it also has UI design for developers.

[00:18:41] I did a course on learning iOS design from it, which helped me get started. And it was kind of like the missing manual I needed because even though I read the human interface guidelines from Apple, I still wasn't always fully sure where to start and even like what font sizes to pick and stuff. So it really, it really helped me to get more of an idea.

[00:19:08] That's right. He founded it. He's got 

[00:19:10] Leo Dion (Host): a lot of stuff. 

[00:19:12] Heidi Helen Pilypas (guest): Exactly. And then there's. Another thing I came across, which is refactoring UI. It's a book written from a developer's perspective who over learnt tips and tricks from his designer. So that's worth checking out as well. I'll tell you a little bit about my process though.

[00:19:31] So when I am working on designing an app, I think about features that the user wants and that will help them. Solve their problem. So Capsicum, which I'm working on right now, a major redesign, actually, we already have a lot of features in there and I'm just, I'm trying to make it a lot better at the moment, using both what's new in iOS in terms of design, but also.

[00:20:03] Improving it based on feedback and my personal preferences, even of what is better. So what I do is I first actually draw something. I use linear sketch on my iPad to do that. However, you could also just use a piece of paper and I actually draw like a rectangle of the screen. And then I start trying to figure out what I want to happen on there.

[00:20:31] So. I'll draw all the elements and put all of the information that I want to go on there. And while I'm drawing it, I can like it. It's coming to my mind what I'm going to need to use. And I find that better than like just starting. In software, because that can involve a lot of trial and error and even creating things from scratch, which is quite timely.

[00:20:57] So if you just draw it first, you kind of get a better idea before you go and create it in your graphic program or even in code. 

[00:21:07] Leo Dion (Host): That sounds really cool. I want to try that, that app out. What was it called again? 

[00:21:11] Heidi Helen Pilypas (guest): Linear Sketch by icon factory. 

[00:21:15] Leo Dion (Host): Is it compatible with the Apple pencil? 

[00:21:17] Heidi Helen Pilypas (guest): Yes, it is. This is one thing I love about it.

[00:21:20] Leo Dion (Host): I was going to say I want to use my pencil a lot more so. And yeah, I, I'm always looking for a way to like, use the iPad more for, for sketching and things like that. So that sounds awesome. So we did briefly touch on widgets and what they've brought to iOS 14. Have you done any work with widgets?

[00:21:41] Yep. 

[00:21:41] Heidi Helen Pilypas (guest): I'm currently working on something, although I'm not ready to share the details just yet. 

[00:21:47] Leo Dion (Host): If you can. What have you found are like some of the big challenges or guidelines that you've started to follow when it comes to building widgets? 

[00:21:56] Heidi Helen Pilypas (guest): I would say about widgets that it's about focusing one idea.

[00:22:01] So there's. There's lots of things in an app. There's lots of features and you don't want to cram too much into a widget. You can actually have multiple widgets for one app. So, yeah. Focus on one idea and. Make it easy and glanceable so that people can find out information really quickly when they look at it, you don't want it to be too dense or crowded.

[00:22:34]Speaker Schedule Start

[00:22:34] Leo Dion (Host): Hey folks, I wanted to take the opportunity to let you know about my public speaking schedule. I'll be speaking at three conferences over the next. Two months. By the time you hear this, I will have a couple of videos out with the online conference, back to Mac. It's basically a YouTube playlist of videos from a lot of great folks in the Swift developer community.

[00:22:56] We also have the iOS dev camp DC, which will be on October 30th as well. I'll be speaking there. And then last but not least is NS Spain, which is an awesome conference. That's been going on every year. As with 2020, this is, of course it will be a remote conference. So you can save some money and not have to fly to Spain this year.

[00:23:18] But NSSpain is one of the most known conferences about Apple platforms and it's going to be a continuous 36 hour conference, which sounds awesome. I will be speaking on 50 packages, dependency management of the future. And as you probably know, I use Swift packages quite a bit. So I'm really excited to speak on this topic.

[00:23:42] There's a list of other great speakers that you'll want to check out as well. If you are interested in attending and seeing some of the great conferences, you can check out  NSSpain.com but you can also use the promo code EmpowerApps to get 10% off. So you have no reason not to attend this fantastic conference again, that promo code is empower apps, E M P O w E R a P P S.

[00:24:10] And get 10% off your ticket to NS Spain this year. So definitely check that out. Thank you so much for listening to the show, the list of conferences and the promo code for NSSpain will be in the show notes for this episode. And I look forward to seeing you remotely at these conferences this year. Thank you again,

[00:24:33]Speaker Schedule End

[00:24:33] it sounds a lot like watch complications in a lot of ways, like from what I've heard from people who do watch complications, like essentially is moving. It's it's doing the same thing except on the iPhone home screen. And like, I like you use the term glanceable cause that's exactly what it is. It's like, I just want to get all the information I need quickly by just looking at my home phone screen.

[00:24:55] Heidi Helen Pilypas (guest): Exactly I will say like with watches, like I find like all the little apps, like you still have to open them to get lots of information, but I find that. Widgets on the home screen are a lot more easy to look at on the iPhone. 

[00:25:14] Leo Dion (Host): Right. I agree because like the weather on the watch or temperature, for instance, it'll only tell me the temperature right now, but I'm actually more interested in the forecast.

[00:25:23] Whereas the weather widget on the phone, like actually give me like a graph to see, Oh, Hey, this is sweater. This is sweater, weather, this isn't shorts weather, which is what would I really care about when I'm looking at the weather? So, yeah. That's really interesting. Have you worked with any apps that had a web interface or an Android interface and you had to like deal with the hurdle of having to communicate the differences with iOS versus.

[00:25:56] The web or versus Android, we kind of touched briefly on Android, I guess, but like, as far as like, how would you explain to somebody what the big differences with iPhone apps designing those as opposed to designing a webpage? 

[00:26:11] Heidi Helen Pilypas (guest): I have worked with one Android app actually was the first thing I started with, with my designing UI journey.

[00:26:22] Even though I don't own an Android phone. So that was a bit challenging. Like I have an iPhone, I read the guidelines from Google's material design, which helped me get a big understanding about what's available in the operating system. I think. It is important to know. There are differences between Android and iOS and web.

[00:26:47] Like you can't just take a website and have it look exactly the same on the iPhone or exactly the same on an Android phone. You have to consider, you have to consider what the differences are and what is the best experience for the user of that device. Yeah, 

[00:27:07] Leo Dion (Host): it seems like a lot of companies and businesses, they just want to take the shortcut and we constantly get this question about like cross-platform tools.

[00:27:17] Like I just want to build it once and have it use everywhere. And I mean, it's okay when you're first starting off, I think, but like, if you really want a good looking app, Building it natively and designing it for that native interface is always like the best guideline to follow in the long run. It seems like, you know, even on the desktop, you see this with Slack, for instance, where it's like, it's all built in electron and it looks the same, but it has its own little quirks and ways of doing things like that could be a headache, honestly, for, for some Mac users.

[00:27:53] Heidi Helen Pilypas (guest): You want to do things that the user of that operating system is familiar with. You don't want to make people have to relearn how to interact with everything. So iOS has navigation bars and tab bars and tool bars you don't want to suddenly redesign the whole way that is done in a way that isn't familiar to people.

[00:28:18] Leo Dion (Host): Ironically, like on the desktop, I'm a cheapskate. And I use gimp and Inkscape for like graphic design right now, but I'm, I'm willing to spend some money, but I haven't found the ideal desktop app yet. And like those apps, like they use some cross-platform stuff. It is a mess to like, like half of the keyboard shortcuts work or they work differently and they're all built on this, like cross-platform layer and yeah, they're graphic design apps, but they're, I know why people spend money on graphic design apps because these ones are just like, The interface is totally not matching with the pattern that you would expect on that less.

[00:28:57] So, yeah, I need to, I, I need to spend some money on sketch or something cause yeah. It's it's okay. It works. Okay. But I could use a better app. 

[00:29:06] Heidi Helen Pilypas (guest): I definitely highly recommend sketch. I've been using it for several years. 

[00:29:11] Leo Dion (Host): It seems like that's been the most popular one. What are some other mistakes that you've seen teams make, or maybe you've made mistakes that you've made that you wish you knew about earlier when it came to like building an app with when, when I'm talking about is like, when you've tried to like communicate different ideas or built concepts between you and whoever you're working with on an iOS app, 

[00:29:37] Heidi Helen Pilypas (guest): one mistake is a lack of communication.

[00:29:40] And an example of that is. Just say I mock up a design that I would like implemented. And then when I get a beta to test the app, I find things I completely different, not how I like laid it out or not using the specs that I specified. And what would help with that is for the developer to say the design of.

[00:30:12] For instance, something like, I wasn't able to do this because of platform constraints or I'm not finished yet. I'm still, I'm still going with implementing this or even just consulting the designer before doing certain things. So they. Know what you're doing and don't freak out when it's changed. 

[00:30:36] Leo Dion (Host): I think another thing is communicating with the designer.

[00:30:40] Not necessarily just that it won't work, but sometimes yeah. Communicating with them that something is very customized or like that's not the default behavior. It's going to take X hours for me to develop this specific thing. Because I think to a lot of designers, they don't realize like what exactly is built in and baked into iOS and what is like really customized that they may have seen in a really like, Popular or well-designed app.

[00:31:09] Right. You know, for instance, like you said, with, with the with the action button, right. That material design has like, it's going to take a lot of work or you're going to have to import some third-party library and it's, it's going to be a headache to maintain and I think it's helpful that those considerations are communicated with the designer.

[00:31:28] Heidi Helen Pilypas (guest): Yeah. It's very easy as a new designer to not necessarily respect the platforms, guidelines. Or not know what will and won't work, but over time you actually do learn and do come become more familiar with it. And a developer and designer can both help each other by communicating that, like what works well from the platform.

[00:31:55] But even if you do know the rules or guidelines, it is good to know. When maybe you can break them is first of all, good to understand them. But at times you can break them, you can actually do something custom. And that comes back to your goals as well. What you're trying to achieve, like maybe you really want to delight users and blow them away with a really unique experience.

[00:32:22] Maybe you want to remind them, like we do in Capsicum of a paper notebook. However, even when I say that, like, There's certain things that when it comes to digital that are different from real life and are hard to convey. And it is okay to have controls that don't remind people of paper as well. Like you just have to know what your goals are and what you're able to achieve with what the constraints are as well.

[00:32:54] Leo Dion (Host): One issue that I think designers can run into is designing everything like as customized as possible, but not designing it in a consistent way. And I've seen this idea in, from web design folks about like atomic web design. I don't know if you've heard of it, but the idea of where like, You design it like a bullet or a button or a radio button or a checkbox and as add-on essentially.

[00:33:20] And then you build molecules, which is like a whole like list or checkbox list. And then it grows from there. Essentially. Have you seen anything as far as like an iOS design where you have this idea of like, Keeping consistency by designing specific features, obviously like Apple has made it pretty encourages a much more default design, but like what have you found?

[00:33:44] Has there been anything like this atomic design idea, which helps with consistency and your iOS app? 

[00:33:51] Heidi Helen Pilypas (guest): So atomic design can work with iOS because it's a methodology that is for all user interfaces, even though. The author of it is a web designer himself. So I have been reading about it in preparation for this podcast and learning little bit about it.

[00:34:14] And I will say that when it comes to iOS and working together with a team. On an iOS project that a pattern library helps. And I believe that is something that Brad frost covers with atomic design. So a pattern library is like components that you use in your design when you design something or even work in a team of multiple designers, you don't want.

[00:34:44] Everything to be designed from scratch every single time, because that's going to lead to inconsistencies. You want to, you want to have like a system that you can refer to so you can use a pattern library for that our design system is even larger than a pattern library. Like a design system includes more than just your components.

[00:35:10] Like a design system might include like, Colors in my include descriptions of why you're doing things and where you're using them. It's a lot more documented. But anyway, going back to a pattern library for my projects, I use symbols and sketch, which are reusable components. And like I mentioned earlier, I use a third party library from Apple that contains a little of their standard UI components.

[00:35:43] And I do aim to use system controls where possible, because they do require less work to implement and users are more familiar with them. And I, I create custom UI when it adds linked to the project or it meets a specific need. And then I export my designs to Zeplin, which is a software. That both me, my developer used to help with collaboration.

[00:36:11] It has tools to inspect the design, like spacing and sizes. So you can find out what the designer wants when implementing it into design to make it consistent. And you can also export individual components like a button. Does that plan. So that helps other team members know what the specifications are.

[00:36:35] And you, you could build your pattern library in Zeplin if you wanted, but there's probably many other tools and places where you could build them. 

[00:36:44] Leo Dion (Host): I'm really curious if like Swift UI is going to make it easier to create like pattern libraries. Cause then you could codify everything if you were ish worked with, well, I guess more ish worked with Swift UI.

[00:36:56] Heidi Helen Pilypas (guest): Yeah. Ish has been working this with SwiftUI we're actually. Rebuilding Capsicum in Swift UI. 

[00:37:04] Oh, 

[00:37:04] Heidi Helen Pilypas (guest): all the way I believe so. 

[00:37:07] Leo Dion (Host): Wow. What is he talked to you about as far as, like how that might change UI design for the both of you? 

[00:37:16] Heidi Helen Pilypas (guest): He has let me know sometimes that certain things aren't possible with Swift UI yet.

[00:37:22] So I might have to adapt my design sometimes like Swift UI. Is evolving. So it adds more functionality over time. 

[00:37:33] Leo Dion (Host): Have you been brave enough to look at any Swift UI code yet? 

[00:37:37] Heidi Helen Pilypas (guest): I have actually, I actually started doing a hundred days of Swift UI from Paul Hudson on his hacking with Swift website I've gotten about 30 days into it.

[00:37:50] But I'm. Also I'm a little bit out of touch at the moment, cause I've had a lengthy break while I work on redesigning Capsicum. And I really need to get back to it too. 

[00:38:02] Leo Dion (Host): What's your initial feeling about designing with Swift UI as a designer? I guess my 

[00:38:09] Heidi Helen Pilypas (guest): initial feeling is that he makes it. Easy to build out the interface.

[00:38:19] He has modifiers that I can use to specify things like padding that makes it easier to build things from what I've heard, because prior to , it was a lot more complicated to write code and. It required a lot more lines and a lot more knowledge to do something and what you can do with Swift UI. 

[00:38:50] Leo Dion (Host): Yeah, I agree.

[00:38:51] I think it's. Brings the ease of like HTML editing to building iOS interfaces. And like, I don't know if you've done worked with any of the preview stuff that you can do in X code, but like, you can actually see what you're doing source of truth is, is the term I've heard. Whereas like, Doing it in Swift or objective C doing your UI.

[00:39:15] That way is a pain in the neck. And then with storyboards or zips, you can never do it textually. You had to open up and do it in the GUI. And that was always a pain in 

[00:39:24] Heidi Helen Pilypas (guest): the neck. Yeah, no, I haven't used the old system and I think for developers who know that the old and current system, since that's still.

[00:39:39] Still an option and very much encouraged to use as well. Learning's 52. I can still be a learning curve and still require lots of patience skills to learn. So if you come to it brand-new without any coding background before doing it, I think it's a good place to start. 

[00:40:05] Leo Dion (Host): Have you talked about putting.

[00:40:08] Capsicum on the Mac. 

[00:40:11] Heidi Helen Pilypas (guest): Yes. We have one thing with using Swift UI and having a really good iPad is that that can come over to the Mac really easy. 

[00:40:22] Leo Dion (Host): So it sounds like you're, you're thinking of doing Catalyst, I guess. 

[00:40:25] Heidi Helen Pilypas (guest): Well, I don't know if we need, need to use Catalyst or not, because I think I've read that.

[00:40:34] use Catalyst for apps that, that aren't pure Swift UI, but with Swift UI, you can, you should be able to work on the Mac. I really, yeah. 

[00:40:44] Leo Dion (Host): You're you're exactly correct. Yes. 

[00:40:47] Heidi Helen Pilypas (guest): Depends. I think on, on what our code needs in, as we get further along, ish would definitely know more about that than me, but our first focus is on.

[00:41:03] Like really getting it to look good on the iPad. Because even though when we originally started working on Capsicum, we really wanted it to be good on iPad because that is the size of a notebook. Typically it's larger than an iPhone. Like I still focused on iPhone designs when I was. Creating mock-ups on my computer and I didn't have an iPad right.

[00:41:30] At the beginning of us working on it either. So it was something that I didn't prioritize as much, but now as we're really. Working on a big remake to make it even better. It is something we're prioritizing it's like Ish is always wanting to prioritize. But I, I was, I was hesitant one and I was taking my time with that.

[00:41:55] But now that's really what we're working on 

[00:41:58] Leo Dion (Host): before we close out. Was there anything else you wanted to mention as far as some of the new stuff that we have in iOS 14? 

[00:42:06] Heidi Helen Pilypas (guest): Yeah, there is actually. So with iOS 14, As I mentioned previously, there are widgets, but there's also a bunch of other new things.

[00:42:15] There's new date pickers, menus and page controls that are quick to scrub with your finger. There are also 715 new SF symbols. So SF symbols are symbols. Apple provides that integrate with the San Francisco font, which is the system font on iOS. 

[00:42:35] Leo Dion (Host): I love SF symbols. And now they have it working in MacOs as well, which is awesome.

[00:42:41] Heidi Helen Pilypas (guest): Yeah. I really like it too. It just, it just makes using symbols in your apps so much more consistent because they're scalable to different accessibility sizes as well. And they, they work next to text labels. Really well. So they also now support multiple colors and they have several out of the box that work with multiple colors and they also have more localized symbols as well for languages that have some different script characters and also left to right text support.

[00:43:23] And then on iPad, we also have introduction of the sidebar and multiple 

[00:43:28] Leo Dion (Host): columns. Yeah. That's something to think about the, the left to right. And right to left text and dealing with internationalization. I think people should consider that when they're designing their app is what it's going to look like on other languages.

[00:43:44] Exactly. Well, thank you so much for coming on Heidi. Really appreciate it. Where can people find you online? 

[00:43:51] Heidi Helen Pilypas (guest): People can find me on Twitter at Heidi "underscore" Helen. I also have a website, Heidi hillen.com don't have much on it right now, but hopefully over time I will have more blog posts on there. And more examples of my work.

[00:44:11] It's just kind of. At the beginning of my website at the moment, you can also check out my apps, Capsicum there's a website for that Capsicum.app. And also my app. When did I, I tracking when you do things that is, when did I, whendidi.app? And they're both available on the iOS app store, not available for Android or any other platforms at the moment.

[00:44:40] Anyway. Yeah. 

[00:44:42] Leo Dion (Host): Well, thank you so much for coming on we'll have links to that in the show notes as well. Folks can find me on Twitter at Leo G Dion. My company is bright at digit. If you could take some time to add a review to Apple podcast or Google. Podcasts or Spotify I'd really appreciate it. And if there's anything that you want to talk about, or you want to hear more about, please let me know, send me a DM on Twitter or send me a tweet and let me know what you think really appreciate it.

[00:45:21] And we look forward to talking to you again. Thank you.



★ Support this podcast on Patreon ★

Join our newsletter

Got it. You're on the list!
© Bright Digit, LLC 2018