Introduction to Design
The course is part of this learning path
This course explores the fundamentals of how to design an iOS app. You'll learn what you need to consider in the design process and the various tools available.
- Learn the fundamentals of iOS app design
- Learn how to use Adobe XD
- Understand the various design components you can use for your 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 start trying these views that we can bring in our artboard or pasteboard in general, okay? So, first of all we have the selector. So, this is the most basic one because we use this to select some views. So, when we select this, when we use the select tool we can come over here to any object in our pasteboard, we can select them, we can make them smaller, we can make them bigger, we can rotate them if it's applicable of course, to the case as you can see if we can move them, we can do whatever we want with them, okay? But if we come over here for example to the rectangle and now if you come over here and hold onto your mouse, you can just drag and create a rectangle over here. So, right now if I come over here and click one more time, it will create another rectangle. So, in order to go out of this loop I have to select the select tool or I can just hit V on my keyboard, okay? So, as you can see now I have created two rectangles. Now if I choose one, I get to see its properties on the property inspector. Right now as you can see I have some options like fill. Now I can fill any color that I want using this color inspector over here. I can even select a color. I can just pick a color using this option and it will just select the picked color for me. So, I can change the color over here and I can change the opacity of this color as well, so it will be more transparent when I go down and it won't be any transparent when I go up. So, this is a good color inspector, you can just create any color that you want. And over here, you'll see a border. So, let me zoom in so you can see the current border over here, right? So, if I want to I can just increase the size of the border by coming over here and say 6 for example, as you can see now we can even see the border from a broader perspective. I can just uncheck this to give some border but not fill or vice versa. So, if you come over here to shadow, we can give some shadow. For example, we can choose the access to give the shadow as well. So, this is the x-axis and the vertical one is the y-axis as you know. So, let me give some more shadow over here in the y-axis and as you can see we see the shadow over here. The basic idea is that you can just select a view and you can get to change, you get to change its properties over here like the opacity of the whole shape as well. So, under this you will see some blue and in this case I believe it won't do much for our case, so we can just adjust this contrast and brightness over here but I believe it made our view in a very bad shape so I'm going to undo this. I'm going to uncheck this and here we see something called mark for export. So, when we're finished with our design, we can export the things that we're going to bring in the XCode as well. So, we can use this mark for export option and we're going to see how to use them later on. Don't worry, we're just learning about rectangles right now. So, I get to select this, I get to move this around. And as you can see, I have a repeat grid button over here, which is a very cool feature of Adobe XD. If you click on this, you can create some repeated grid, repeated views like this. So, you can create as many as you want, it will just copy the same view. So, this is good, right? Now, if you just select this, you can move them around and you can even ungroup this grid to have individual views later on and you can just delete them, you can just change them, you can do whatever you want with them. So, it's a very good way to copy views into some grids. And I believe that's it for our rectangle and as you can see, I can move this into the pasteboard as well. I don't have to put some views into the artboard necessarily, but it makes sense to use artboard as I said before because it's an object, it's a tool to give us a frame. So, if I'm going to design something for iPhone, then it makes sense to do it for our frame within a frame. As you can see, I can see in the layers and if you cannot see these layers, you can just go to view and layers and you can see the individual elements in our pasteboard and in our artboard like this when you choose one, okay? Now I see the artboard content. If I just click one of them, I get to change its name or I get to delete them. And I can see all the structure on the left hand pane, on the extra menu that I got here. So, that's it for rectangle. So, let me choose each of them and delete it because it won't make sense. And you can do the same thing with a different way as well. So, let me show you. If you hold onto shift while you're creating your rectangle, it will create a square for you. So, whenever you hold onto shift, it will do this thing in a straight way. So, if you're creating a rectangle, it will create a square for you. If you're creating a circle for instance, or an ellipse, it will create a perfect circle for you. And aside from that, we have the alt or option button as well, so if you hold onto your option, it will take the first point as a center and it will just expand this view around the center. For example, let me hold onto nothing and as you can see, I can create a view like this. But if I hold onto alt or option, it will take the first point that I touch as a center. It will expand this view around that center. So, it's cool to use shift and option in order to create some centered and straight views. So, we're going to stop here and we're going to continue with inspecting other views 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.