The course is part of this learning path
This course covers how to implement a range of design features within your iOS app. In order to do that, we're going to use Adobe XD, and you will see it in practice.
- Learn how to draw icons and logos within your app
- Use UI kits to help you when building your app
- Understand the free resources that you can use as templates for your own apps
This course is intended for anyone who wants to learn how to develop apps on iOS.
To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.
Hi, within this lecture, we're going to see how we can use ready UI kits so that we can create some really good designs with using iOS kits. So, if you come over here to File menu, as you can see there is an option saying that Get UI Kits, and of course I'm going to go for Apple iOS in this course, but you can use Google material as well. So, it provides us with some different icons, different UI kits. It's a very good archive, it's a very good portal, it's a very good website actually. You can just visit Google material.io in order to see everything they got. But right now, I'm just going to go for this website. So, this is developer.apple.com one more time. But right now we are in the Design tab under Resources. So, here they provide us with the resources that are commonly used in iOS, so that we can get them and we can use them in our own designs as well. For example, you see the Adobe XD file over here and it has some other sketch or photoshop or keynote projects as well. But in fact we're going to go for Adobe XD, and as you can see they have some other UI kits for some other platforms as well like macOS, watchOS. So, right now I'm just going to discard this. I'm just going to close this down because we're going to use the downloaded UI kits. So, let me just bring this into my desktop so we can see it better. As you can see it's kind of a dmg file, it's actually at a dmg file, it's kind of an installation file but actually we're not going to install anything. We're just going to open this app and we're just going to unzip them, and I will bring them into my desktop so we can use them, okay? So, we can just delete this. We are done with that and I'm just going to eject this. So, here we go. Now, let me open this app and let's see what we got over here. So, for example, we have this app icons, iOS. So, if you double click on that it will provide a layout, it will provide a frame for you to design iOS icons, okay? So, you can actually design your icons in this frame and you can use them later on in your project. And don't worry, we're going to see how we can actually design some logos, some icons in order to use in our Apple iOS projects in the next lecture. But this is also a nice way, it gives out pixels, it gives out some frames so that we can create some good icons using that guidelines. So, that's one of them, but actually it has much more to provide in this case. And don't worry about this. Again, we're going to see how we can do this in our own projects later on. So, let me close this down and let me go for something like TabBar over here, I believe. So, as you can see, it provides us with some Tab Bar icons. We can actually use those in our tab bars. We can just export them and use them in our own projects or we can edit them and use them one more time. So, let me go for this guidelines. And in the guides, I'm going to go for iPhone, iPhone X actually, and you have some iPads or iPhone 8 as well. So, in the iPhone X Adobe XD file, as you can see we have a lot of resources. So, over here we see some color schemes, we see some layouts, we see these menus, like navigation bars, like navigation buttons like this, okay? So, as you can see, we see some color schemes like stars, some buttons, some titles, some sliders, and everything. We see some UI elements, we have some views, some menus and everything. We see some alert messages and so much more. And the point here is that you can actually get these UI kits and you can easily use them in your Adobe XD projects. Of course, if you don't want to get anything out of these resources, you're more than welcome to do so, but in most of the cases it's actually a good idea to come over here and just take some of these buttons, take some of these views over here to use in your own project so it would be consistent with iOS guidelines. So, we're going to stop here, and we're going to see how we can create icons in the next lecture for our own apps.
Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.