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.
Prerequisites
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 create a profile icon and also a comment icon. So, I'm going to copy and paste this and I'm going to name this ProfileIcon, okay? And if you come over here, you can just delete this triangle. And then, I'm going to bring in some circles, some ellipses so that we can have a body and a head for our profile icon. So, this will be the head of our profile person. I'm going to fill this in with this color one more time. So, this is like the head of our icon. And we're going to have a body and for the body, I'm just going to copy and paste this and make this a little bit bigger like that, so that I can have this as a body. But I'm just going to cut this in half so that we can have a smooth body over here like that. So, let me bring in some rectangle and once I bring this in, if I just choose this, together and subtract from each other. Here you go. Now I have my body like that. So, here is my profile. I can easily use this as a profile icon in my tab bar for our social media apps like Snapchat or Instagram, right? So, it looks good. And let's see, we have Home, Search, Play, Profile, let me copy and paste so that we can create a like icon as well. So, for example, I'm going to go for an upper arrow over here in order to make a post like or dislike. So, let me create a simple line and let me give it some thicker boundaries like that. For example, five will be the choice for us. And if I add a triangle over here like that, I can just make this field in the same color as this and then I can just choose the select tool and make this a little bit bigger like that. And here you go. Now we have our upper arrow, we can easily use this and I believe it should be a little bit shorter than that. So, we can easily use this to like an icon or you can just reverse it to dislike a post, not an icon. So, you can just use this or you can just reverse it and use it as well. So, I'm just going to call this UpIcon and one more time I'm just going to copy and paste this because we're going to create our CommentIcon. So, let me come over here and let me delete this and this one as well because we're going to create an CommentIcon like that with a rectangle and once we do that we can fill this in with this color one more time. And let me make this a little bit smoother over here. So, let me choose this and I believe we can just do it from here as well. So, for example, let me come over here and give these 4 values 4... 4 is a little bit too much, so let me go for 3. And here you go. Actually this looks good. So, I just want to make this look like that. So, you can just use 0 in one corner or you can use 3 over here as well, but just bring in a new triangle or some other shape. So, let me do this with triangles so you will see what I mean. Once I do that, I'm just going to fill this in and I'm just going to rotate it to look like this. So, I believe that's good. So, let me try to adjust this and let me feel this in. So, here you go. Now it looks like a CommentIcon. Of course, we can do some tweaks like let me zoom in so we can see it better. As you can see, it's not perfectly aligned. So, you can just take this corner and make this perfectly aligned like that. So, here we go. Now we have our CommentsIcon. Of course we can try to make this look better, like maybe we can create a triangle over here or a rectangle over here and I believe it doesn't look good. So, it was much better when we didn't have that, but you can choose to create your own icons in your own way. So, that's how you come up with new ideas, new drawings. And I actually suggest you to try much more so that you can work on your Adobe XD skills. But this is not all. We're going to stop here and we're going to do more practice in the next lecture.
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.