Design Practice in iOS


Design Practice
Home Icon
8m 15s

The course is part of this learning path

Home Icon

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.

Learning Objectives

  • 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

Intended Audience

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 section we're going to practice what we have learned in the previous section. So, we're going to be drawing some icons and we're going to learn how to create logos, icons for our app. And in order to do that we're going to use Adobe XD one more time and you will see it in practice. So, I'm going to go for custom size this time because we're going to be creating icons rather than a full-size screen. So, I'm going to come up here and choose the artboard, okay? When I choose this it creates the iPhone X as default. But actually let me show you another thing. So, let me delete all of this and let me go over here and choose one. If you draw something over here it will create this in a specified size. Of course, you can actually change the size after you create any artboard by clicking over the artboard and coming to properties inspector as well. So, let me go to Google and search for icon size so that we would know what icon size that we have to use, okay? So, here as you can see there are a lot of different options for icons but in my experience I have seen mostly we use this 24x24, okay? Of course, we can adjust it to another size later on but I'm going to go for 24 and 24 so that we would have a realistic artboard over here to create our icon. So, for our first icon I'm thinking of a home button icon like in Instagram and this is generally in the shape of a house or of a home, okay? So, we're going to create a home over here. In order to do that, I'm just going to take this rectangle and just draw some rectangle over here, okay? So, let me put it this way and then later on I'm going to need a roof and in order to do that, I'm just going to use this triangle and let me just put this triangle on top of my house over here and let me try to adjust its size by making this a little bit bigger or a little bit smaller. And I believe, we can leave it like that or we can just do like this, okay? So, let me try to adjust this, here we go. Now we have a house. Okay, we have the roof, we have the house. So, let me draw a door as well in the shape of rectangle one more time. Of course, we can adjust this a little bit. So, it looks like a house, it looks like an home icon to me, but we can just do some tweaks over here to make it look better like this or like that, okay? So, of course, you can try to make this in a better way by adjusting the size or just deleting some lines on the bottom. So, let me just rename this by double clicking over here and I'm going to name this home icon or house icon, okay? And then if you do command C and command V, it will just copy the artboard and paste it in the right hand side of this current artboard, and I'm just going to call this Homeicon2 so that we can create another house icon over here with another technique. So, over here we have this icon but maybe you didn't like it, so I'm going to delete this and I'm just going to use pen this time. So, I'm going to start from here and draw a straight line. You can hold on to shift in order to draw this line in a straight way and I'm just going to draw my house like this and then I'm going to come over here and close this line, and then later on you can just draw a door over here like that, okay? And this would be another example of an home icon, like this. So, if you're not satisfied with either of those of course you can just adjust it a little bit so that you can see this in a better way like that, okay? You can just make it central, you can make it a little bit smaller, okay? And don't worry if you're not satisfied with this at all, I'm going to show you how to find a better icon so that you can use it for free in your apps later on as well. But right now just try to play with it and try to make it look better. So, this is how we try and draw icons in Adobe XD. In fact, I'm going to stop here but within the next lecture, we're going to see another examples of icon drawing.


About the Author
Learning Paths

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.

Covered Topics