Designing Your First App in Sketch

Mark Wahlbeck
A free video tutorial from Mark Wahlbeck
CEO Devslopes | iOS | Android | Freelancing
4.3 instructor rating • 15 courses • 293,470 students

Lecture description

Dive right in and design your first mobile app with Sketch 3

Learn more from the full course

Mastering Mobile App Design With Sketch 3

Learn how to design mobile apps with Sketch 3 for beginners

05:04:46 of on-demand video • Updated September 2018

  • Use Sketch 3 fluently
  • Know how to do mobile app design
  • Create designs for iOS apps and Android apps with Sketch 3
English [Auto] Everyone Caleb Stoltze with Dev slopestyle come here and we are going to start today by designing our very first. So go ahead and go down to your doc click Open sketch and as soon as it opens you'll see this screen and we're just going to go ahead and click OK because we don't actually want to use any of those templates and we can go up here to the top and click new and open up a new file. Now we pull that open and full screen for you there. By the way what I just did how my windows can snap like that it's a little little app called flexi glass. It's pretty cool. Let you kind of get that Windows 7 Windows snapping it's kind of helpful for certain things. Anyway now that we've got a window open I'm going to teach you about a few things. You're going to learn all about some of the shape tools today. So up here in the top left there is a button that says insert. And if we scroll down to shape you can see that there is a laundry list of all kinds of different shapes you can do rectangles ovals which are also circles if you hold down the Shift key to maintain aspect ratio the rounded rectangle tool the star tool polygon tool where you can tell how many sides you want on your polygon. And the triangle tool is well line and erro are also helpful. We're just not going to use them today but we're going to start by using the rounded rectangle tool. So either click on that or just press the key whenever you want to use it. And you'll notice there's a little rounded rectangle that shows up over our little cross hairs on our mouse there. So in order to create one and all we have to do is to click and to drag. Do you see how the corners of that rectangle are nice and rounded. That's exactly what we want. But before we create another shape let's go and delete this one and make an art board and our board is basically where all of your art will happen and it just helps you to design to a certain a certain screen size. So they have all kinds of templates over here. They have iPad Pro iPhone 6 iPhone 6 Plus even the Apple Watch is in here. You can design for Android so material design web design all kinds of stuff. Mac icons TVO icons and I accidentally clicked on that. So this is what a TV OS icon template looks like for the home icon the large icon and the top shelf image. But we're not going to be doing that today if you press the A key on the keyboard it pulls up. Those are Bortz for you just in case you were curious. I'm going to start by opening up an iPhone 6 art board and zooming in a bit so we can see it a little better. There we go. So let's go ahead and click insert go to shape go to rounded and click rounded. After that I'm just going to go ahead and I'm going to drag a rounded rectangle. And do you see those red lines. Those are our smart guides those help us to snap our shapes exactly in the center of our design. It's super helpful for putting things exactly where you want them. Even just kind of quickly throws them together snap snap and it just goes right to the center. It's really nice. But before we move on I'm going to actually change this by going to the size tools and I'm going to increase the width to 250 pixels and I'll change the height to 50 pixels just like that. And now I'm going to go ahead and I'm going to change the radius of my shape to 25 and I'll tell you why whoops 25. Now do you see how that makes that nice rounded button. You might have seen buttons like this in other iOS apps before. And that's that's what I like to do and that's what we're going to do in this app. So the reason that I chose 25 for my radius is because my height is 50. So if you think about it if we cut this -- down the middle it's 50 high. But in the middle would be 25 on each side. So if I create a radius of 25 that means that it's going to curve and then stop right in the middle. So 25 is all I need. If I go above it still has the same shape. But really all I need is 25 to get that rounded button look kind of looks like a pill. All right so there's our button and let's go ahead and create two more and you can press command d to duplicate your button. Or alternatively you could hold option and then drag a new button from that button that's the same. If you'd like you can also just go ahead and do copy and paste or cut and paste whatever you want to do. But I just went ahead and did the duplicate function. Now I'm going to drag these up here make them look like that. Excellent. And now we're going to learn about adding text to our documents so we can click insert and then drop right down to the text functions and click text. Now where ever we click on the document it will bring up a text box or a line of text. So let's click there and let's type sign in in all caps. Now that's a little small. If this is going to be a sign in button. So let's make the font size bigger by going to our font tools over here. Maybe 24 is a bit too big. But 20 looks good. And let's go ahead and just drop that right in the middle of our button there and there it is. We have a sign in button. Awesome. Let's go ahead and click the text there. Press command d to duplicate. And we can drag this up here and do it one more time and we can drag it here. Now this is going to be a rounded username and password field. So double click on your text and it will allow you to edit it. And I'm just going to go ahead and type user name. Now you probably notice that that is not centered anymore so just drag it to the snapping grids and then for the seinen or sorry for the password we're going to do. Those little dots that you see in a password field but to do that you could hold down option and just press 8. And it makes those bullet points that look like a password field. Again we want to drag and center that make sure it's nice and centered but you probably noticed that these look like they're slightly higher than the center and that's because in a text field there's a little bit of spacing below every character but in order for this to be exactly in the center we can select both items by either dragging to select both or if you have a lot of elements behind that you can click one and then hold shift and click the other and that's all you need to do but to center it. We're going to want to go up here to the align tools and click center and then let's click the vertical centers as well and look at that. Now it's exactly in the center. The Ital. lines from the character not from the size of the text box. So let's do the same thing there click hold shift click again. Center. Center click hold shift click and then Center Center. Now those look really nice in the middle. Next we're going to do is we're going to wups we're going to change the léa style of this to make it look nice and colorful because an act like this with just great design would be kind of boring. So let's click on our button and we're going to go over and take a look at the fill section. Now if we click the little drop down we'll get all of these awesome color options that we can choose from. I'm just going to go with maybe read. Yeah that looks good. So it's quick read. But if you zoom in you'll probably notice there's a gray border around this shape so we don't we don't want that. So what I'm going to do is I'm going to just turn off borders and now we're just left with that simple red pill shape. OK so if you're looking at this thinking while gray and red. Those don't really look good together. I agree. Let's change it by clicking our textfield Let's click color and I'm going to make it white. But I think that we can make this stand out even more so unbuttons I like to make my font bold but not too bold. So if I'm using this font which is called Avenir next I just personally like using this one and do it's called Demy bold. It's kind of in-between bold and regular. So I have made my font Demi bold. That's a nice looking sign in button. Great. So what I'm going to do is I'm going to actually just do the same thing with these ones going to turn the buttons red. Turn off the border and then change the font size to white so let's do that again change it to read change the font size to whites and I'm going out to order here let's turn off the border. All right. So that looks pretty good. But I think I want to make some some contrasts between the button and the text fields. So I'm actually going to go back here and I'm going to select both of my buttons by clicking and then holding Shift and clicking again. And I think I think what I want to do is actually make a border of red and a fill of white. Let's let's do the opposite of what we were just doing. And now our fonts have to have disappeared so let's click hold shift and click and let's make these that same matching red. That is a nice sign in-field. So in the app you just tap on the username type your username tap on password type your password and then you click this nice little sign in button. So this looks good but I think we need a logo a good app has a nice logo. So let's go ahead and just make a really simple shape. Let's go to insert and down to shapes and click triangle and let's just drag a simple triangle shape although I'm not really impressed with it looks a little tall I want it to be a little or short little shorter. There we go. All right. So that looks nice. Let's drag that there and let's give that the same pattern and same theming as before. Let's turn off the border and change the fill to that red color. That looks pretty good but I think we should add some text or app should have a name so click insert click text and lets add a text field. Let's call this super app and that looks pretty good. There's our icon super app. Nice and let's boost up the font size here and make it a little bigger not too big. Maybe 36. Yeah. And then let's make this nice and bold and let's center it there. So that looks pretty good. I think I'm going I think I'm going to make these a little bigger though because they are a little skinnier than these these fields and if we zoom this out to look at it as if it was an iPhone sized screen that icons a little small. So I think I'm going to select both by dragging and holding Shift while dragging to make these bigger. But you probably noticed that the font didn't change and that's because when you zoom textfield it doesn't actually change the font size. So you need to go in and do that directly. So let's boost that up to 48. And you know what I'm saying that it's not exactly centered. So we can use our alignment tools here to center it as well. So there we go. And you know what this looks like a pretty awesome Sign-Up screen. I mean it's simple it's it's elegant. So congratulations. Believe it or not if you've been following along you have just made your very first iPhone app design you could drop these files into X code and you could build a sign up screen for your app using just these simple principles. Congratulations and you know what. In the next lecture we're going to learn a little more about layers and with the things we can do with them. Stay tuned. We'll see in the next video. Thanks for watching. This is Caleb stuff with slopestyle.