Transcripts
1. Introduction: Hi, I'm Andrew Mercando. I'm a Digital Product Designer over here at Skillshare. So, as a designer at Skillshare, I get to work on the full design process, whether that's sketching out new features, putting together some wire frames that our engineering team can start specking out and building, or actually designing UI for, say, our iPhone app or a website. So, in this class, we're going to focus on that last piece. I'm going to teach you how to really quickly create beautiful user interfaces using Sketch. I think it's a great time to learn Sketch. It's one of the newer design tools, but it's really a tool that's from the ground up being built for user interfaces [inaudible]. So, there's a bunch of features that make it really easy to get ideas out of your head and onto the screen in a way that you can quickly see the results of your ideas and your work. So, I think this class is great for anybody who wants to get their first taste of mobile app design. We're going to cover the basics of Sketch, so things like creating your first shapes and styling your shapes in your text to make a really beautiful iPhone experience. By the end of this class, you should have a really great grasp of the tool and what it can do, and how you can really leverage it to make any idea that you have possible.
2. Project: Design a To-Do List App: This class is really for beginners, so you don't need any experience to come to this class. You don't need to know any other softwares, we're really going to start from the very basics of sketch and throughout the lessons really build on those core concepts and very quickly design ourselves a really beautiful To-Do List App. I think that To-Do List App is a great first UI design project, so our App's going to be really simple. It's not going to be a ton of screens, but it's going to allow you to get really creative with how you want to design the To-Do List App. I'm going to walk you through designing my own To-Do List App, and you'll learn all about the basics of sketch and how to really quickly produce high-quality, beautiful user interface design. I'm really excited to see what you guys come up with. Be sure to upload your project to the Skillshare Project Gallery, and I'll go through and leave feedback and comments on what you guys create.
3. Shapes, Text, and Simple Styling : Hey, guys, welcome to your first lesson. If you haven't already downloaded Sketch, head over to bohemiancoding.com. From this page, you'll be able to download a free trial. Once you're all set up and installed, we're going to just get started on a brand new Sketch file. Once you're all set up and installed, open up the Sketch file that I linked to you in the class project tab on skillshare.com. In this video, we're going to go over some of the basics of Sketch. By the end of it, you'll learn how to make shapes like rectangles, circles, and even some more complex ones to create a project cover photo like you see here. Let's get started recreating this project cover photo. So, the first thing we're going to want to do is insert a new rectangle onto our Sketch canvas. You can insert anything you want onto the Sketch canvas by going to this insert dropdown in the upper left-hand corner of the interface. Here, you have everything that you can put onto the Sketch canvas. We'll go through most of these things in this class, but for now, let's start with the shape and choose rectangle. You can also use the shortcut key R for quick access to rectangle. You'll see my cursor has changed to a crosshair with a little square next to it. So, what you're going to want to do now is click and drag to create your rectangle. Don't worry too much about the size because we're going to adjust that in a second. Great, so you've created your first rectangle. So now, let's adjusted it a little bit. If we go over here to the right-hand side of Sketch, you'll see that we have our inspector panel, and this is where we can adjust all the various properties of our shapes or anything else that we have selected in Sketch. So let's start by changing its size. You're going to select the width text field and let's make that 800 and hit enter. You'll see that the width of your shape updated as soon as you hit enter, and now let's also just make it 450 pixels tall. Great. So now, we have a rectangle in the exact size that we want. So, the next thing I'm going to want to do is actually make this rectangle a different color. So if we go over to this fill section in the inspector panel and click on this little gray box, you'll see a little tooltip come up that has a bunch of different options for styling this rectangle. So, I can change the color by just selecting the color I want from this little color picker. I can also use one of Sketch's preset color options. So let's go ahead and make our rectangle blue. So I'm pretty happy with this color blue. So, I'm going to click outside to just close that color picker. You'll see right below it there's another section called borders. What borders lets you control is the style of the outline of your shape. Let me make this 10-pixels wide so you can better see what I'm talking about. So, the border is basically just an outline of your shape. You can choose where it's position, so either inside to the center or directly outside your shape, and just like fills you can adjust its color as well. I actually don't want a border on my shapes, so I'm going to go ahead and uncheck this. So next, let's make a circle. You can either go to the insert dropdown or you can just hit O to create a new oval. So this time when you click and drag, I want you to hold down shift. What you'll see here is that as you're dragging the height and width of the new oval that you're creating or staying the same. I'll go ahead and center that circle. So, you'll see up here in the size, we've created an oval that's 230-pixels wide by 230-pixels tall. Because we held shift down while we were creating it, this shape's proportions are constraint. If you go ahead and drag this to resize it, you'll see that it always stays the same width and height. You can turn this off by clicking on this little lock in-between the width and height in the inspector panel. For now, I'm going to leave it on because I want this to be a perfect circle. I'll go ahead and center it within my background. You'll see that this little red guideline shows up indicating that you have now centered your circle. Let's style this circle. I'm going to turn off its border and I just want to make it white. So I use one of Sketch's global colors to change that to white. Awesome. So, I now have a background and a circle. Let's go ahead and create our check mark now. So let's think about what a check mark is. Basically, it's two overlapping rectangles. So I'll go ahead and draw those now. Let's make our first rectangle 20-pixels wide by 100-pixels tall, and we'll just make a second rectangle that's 20-pixels tall by let's make it 60-pixels wide. Great. So, let's just position these two right on top of each other. So, what we want to do now is take these two rectangles and transform them into just a single shape. So, what you're going to want to do is select both your rectangles and go up here to your compound shape options. We'll go over the first one. So, what union does is it takes two overlapping shapes and creates one shape by combining them, so go ahead and click on union. So, you'll see now what you have is just one shape from our two rectangles that can be styled and edited as one. So, I'll go ahead and rotate this negative 45 degrees to make a check mark and just go ahead and position that right over the circle. Awesome. So, let's make our next compound shape. So, if you select your check mark and your circle, you'll go up here and let's try the subtract tool. So, what this does is it subtracts whatever the top shape is from the bottom shape. So, what this actually did is it created one shape with a check mark cut out of it. So, the next thing I'm going to want to add to my project cover photo is the title of our app. So to do this, I'll add a text layer to my canvas. The shortcut key for text layer is T and I'll just go ahead and click. So, what you see is some pre-filled text comes up that says types something and it's selected so far. I just start typing the name of my app, Todo App, it appears right on my canvas. You can hit escape to get out of text editing mode. Awesome. So let's change the style of our text now. So in the inspector panel, you see I have some text-specific options here. The first is typeface. This will basically just pull any typeface that you have installed on your computer. I'll change mine to Bell Gothic for now and continue styling my text. Below the typeface and weight, you have some other options. So, in this little cog, you can do things like add an underline or a strikethrough or change your text to a list. Similarly to your shape layers, you can choose different colors for your text. I'm going to go ahead and leave mine white, and you can also adjust the size of your text. So I'll make mine 48. Sometimes these little tooltips don't close, but if you just click on the the color button, it'll usually dismiss itself. So, you also have control of the alignment of your text. Right now, mine is left, so any text that I add to it is just going to be added to the left. I'm actually going to want to make this centered. So as I add text to this title, it'll just go ahead and center itself. The next option you have is width. So, there's two options here. If you just click when you're creating your text layer, you'll create an auto width. Basically, what this is good for is a single line of text. If I keep adding to this line of text, you'll notice that it never word wraps. If I wanted to create a paragraph of text, I can either change this to fixed; or while I'm creating my text layer, I can click and drag to create a text layer that is of a certain dimension. Let me just change this to black. As I type here, you'll notice words word wrap. So this is better if you're typesetting a paragraph or a multi-line text area. For now, I'll go ahead and delete that. Below width, you can also adjust the space in-between your characters, your line-height, and your paragraph spacing if you are going to create a fixed width text field. I'm not loving this typeface that I chose, so I'm actually going to go back to Avenir next and not make that bold. I'll just make that a simple medium. Awesome. So, we have a great start to our project cover photo. In the next video, we'll learn how to do some more advanced styling to create something really unique that we can then upload to Skillshare.
4. Advanced Styling and Polish: All right. Now that we have a handle on some of the basics of sketch, let's do some more advanced styling. So, the first thing I want to do is talk about some fill options that we have. So, if you go ahead and select your background here, you'll know from the last video that we've done just a very basic fill of blue. Sketch is pretty powerful though because it lets you add multiple fills to any object on its canvas. So, if you go over here to the fill section and hit this little plus icon, you'll notice that we now have two different fills on this object. So, what we have here is a gradient fill. With a gradient, you can control things like direction of the gradient, you can also change the color of the gradient by selecting one of these endpoints and adjusting the gradient using your color picker. So, let me go ahead and make this a little bit deeper of a blue over here, and over here, that's looking pretty cool so far. So, let's explore some of the other fill options. So, you also have things like radial gradients, so that's going to make us a gradient emitting from a center point, angular gradients or something called pattern fills. So, what pattern fills are is basically, sketch will fill your area with an image of your choosing. I'm going to add a background fill but I'm going to choose this little graph paper looking grid over here. I can adjust the scale of my fill ray from here. So, let me make that about 55, that's looking good, and I'll close the fill picker. Now, I don't have granular control of the color of that fill, but what I can do is change its blending mode and also opacity. So, let me just go ahead and change this to a 20 percent opacity. I'll hit enter and then maybe multiply although just leaving it normal will probably suit my needs. Awesome. So, now I have this cool grid paper looking gradient filled background. So, the next thing I want to do is talk about adding some drop shadows to our objects. So, if I select my checkmark and go down here to the shadows area in the inspector panel and add a new one of those, you'll see that a little drop shadow has been added to my composition. I have full control over this so if I want to make the x and y offset 00, so it's directly under it, you're just getting this glow around it. I'll bump this up to show you what that looks like. It really starts to make this look like it's popping off the screen a little bit. It gives it a little bit of depth, this is hovering over my background. I'll make this a six, and you can also do things like change the actual color and opacity of this background. I'm pretty happy with the default settings, but if I wanted to make it a red, which is hard to see because it's so transparent, you can do that as well. Shadows can be applied to any object. So, you can actually go ahead and add a shadow to your text as well. So, I'll make this six, and now the text is looking like it's popping off as well. All right. So, now that you guys know your way around sketch, what I want you to do is style your project cover photo however you want. You can go crazy a little bit. Think of this as an opportunity to really set the tone and art direction for the rest of your app. When you're done styling your cover photo, we'll go ahead and upload that to the SkillShare Project Gallery, so you can show the rest of your classmates what you're trying to create.
5. Export and Upload: So now that you have your project cover photo styled however you'd like, I want to talk a little bit about layers and good hygiene while you're designing a sketch. So, you'll notice on the left hand side of the sketch interface you have a list of basically everything that you've added to the sketch canvas so far. What this list allows you to do is order your object so you can place things in front of or behind each other. You can also expand your compound shapes to adjust each of the shapes that make it up in a granular way and most importantly for this you can actually rename these layers. So, what I like to do is I'm designing is just stay really organized and rename my layer so they're easy to find and get back to you. So, let's go ahead and call this one background. We'll change the name of this to check mark and we can leave our text as it is, sketched by default names, your text layers, whatever you type into them. Awesome. So, now we have a nice clean design file. Another feature of sketch that helps you stay organized is grouping. So, what do I mean by that? So, if I go to my canvas and you can also do this from your layers panel and select all my layers and hit command G, you'll see that it collapsed everything into a folder. So, basically what this is is a group and sketch. So, I can name this group, so I'll just call it cover photo and now sketch will treat this as one object. So, if I click on this it'll select the group and I can drag it around and everything that's in that group will move together. If I want to select things in the group, I can either hold down command and that'll let me deep select into the group or I can double-click on objects and that'll let me go one level deeper into the groupings. So now that I have my project cover photo grouped, I can go ahead and select it and if I go down to the bottom right hand corner of the sketch interface, there's this little area called make exportable. What this lets me do is select the size and file type that I would want to export this group so I can use these files outside of sketch. So I can choose various image files from PNG to PDF to SVG. I'm going to leave mine PNG. I can also make multiple exports of the same options. So, if I'm designing for iPhone and I need graphics at 2x or 3x, I can do that as well. If I need both PNGs and SVGs I can also just export those in one quick swoop. I'll actually delete these two options. If you hit export photo, you'll see that your file picker comes up and you can just save that wherever you want. Awesome. So now that you've exported your cover photo go ahead and log on to Skillshare, start your project and upload this as your cover photo to it and I can't wait to see what you guys create.
6. Pages and Artboards: All right. So, we're about ready to get started on designing our app. But first, let's talk a little bit about how Sketch files are structured. So, we've learned about the layers list in groups, but Sketch also has other organizational tools which are really awesome for when you're designing apps, or web pages or whatever you're going to be designing with Sketch. So, if you notice this, Gets Started Here exclamation point, is a little drop-down. What this is is a page in Sketch. So, Sketch allows you to divide your file up into various pages each with its own canvas. What this allows you to do is divide whatever you're working up into groups that organizationally makes sense. So, for this file, I've made one page for our main App Screens, I've included another page that has Interactions and Microstates, and I've included two other pages that have some other components that we're going to be using while we're doing some UI. I've included some just basic UI components from iOS that we'll be using when we get into actually designing our app. So, if you click on the little icon, you can expand the pages to see a full list of what you have and quickly jump around to them. You can also add a new page directly from here and similar to groups or any layers list. You can name this whatever you want. I'll go ahead and delete this. So, pages are really great tool to keep you organized in Sketch. So, let's go into one of the pages. Let's go into App Screens. So, in App Screens, you will see that we have a bunch of, basically, app views. If you need to click and drag around, if you hold down the space bar, your mouse cursor will lock and you'll be able to drag the canvas around, just super helpful as you're navigating the Sketch interface. So, what I've done in App Screens is I've created a bunch of Artboards. What Artboards basically are, are a special type of group. So, Artboards are fixed frames. I like to use them to represent various states of my app. So I have, for example, our app icon. If you go over to the layers list, you can expand the Artboard to see exactly what shapes and objects are on top of that Artboard. You'll notice, just as an example, that these Artboards are fixed frame. So, if something is in your Artboard and you drag it off the side, it'll actually clip it for you. So, I'll just recenter that. So, to create an Artboard, you can either go to the Insert drop-down or hit the shortcut key A, and you'll notice that your Inspector panel comes up with a bunch of pre-defined templates that Sketch includes. So, if I wanted to add another screen to this file, I just click iPhone 6, and you'll see that Sketch adds another Artboard right next to my last Artboard. Awesome. So, Artboards can be named just like any other object in Sketch, List View UI. Artboards can also be dragged around and placed wherever you want them on the canvas. While we're designing, I'm going to just lay our UI Artboards right below our wireframe Artboards. So, I can quickly refer back to the wireframes that we've laid out for ourselves. Awesome. So, those are just some of the great features that Sketch has to keep you organized and seeing while you're designing. So, in the next video, we're actually going to start working on some of the UI for our app.
7. Header: Okay. So now, we're ready to get started on designing the UI for a To-Do list app. The first thing I'm going to want to do is, go back to my cover photo and just grab it and bring it into my app screens page so I can reference back to the styling that I set forth in it. So, I'll just go ahead and put it right next to my first UI screen that I have down here. So, what I'll actually do now is, just go ahead and create the other art boards for the main UI sections. So, what I'll do is I'll duplicate this art board a bunch of times. So, I can either go to the app board creation tool by hitting the A or I can select this app board and I can hold down option and drag. What that's going to do is it's just going to duplicate whatever I'm dragging on here. So I'll just create these other three art boards and place some right underneath the wireframes that I'm going to be creating. You can go ahead and just rename these, and one last one for edit task, awesome. So, let's zoom in and check out our wireframes. So, in the List View we have basically a header where we can add a new to-do item, we have a section for our not done items and we have a listing of our done items. Seems like every single wireframe that we're going to be doing UI for has one of these headers. So, that's probably a good place to start as the first thing that we'll go ahead and create. So, let's get started on that right now. So, the first thing I'm going to want to do is actually create the background for my header. So, I'll hit R to create a new rectangle. I'll drag that to be the full width of my art board for an iPhone six that's 375 pixels wide if we're designing at the 1X and I'll just remove the border of that. So, what I'm going to want to do now is, look back to my project cover photo and start taking some styling cues from it. So, the first thing I'll notice is, it has this really rich blue background. So, if I go ahead and click on the background of my cover photo I can see what I have back here. So, if I go to this fill, I want this blue for my header. So, I can either go ahead and copy the hex value right here or I can hit this little plus down here next to my document colors. What that's going to do, is it's going to save that color for me and allow me to just have quick access in any of my color pickers. So, let's select the background of our header and just make it that nice blue. So, the next thing that I'm going to want to add to this header is this, iOS status bar up here. Like I mentioned in a previous video, I've included some of these iOS components, also have a link in the class notes in the project description and just paste that right on there. So, now that it's on there, you're just going to want to position it right flush with the top and sides of your art board, and you now have your iOS status bar. So, this is really quickly starting to look like a real iPhone app. So, the next things that I'm going to want to do is just add my title and my action links to the header. So, just go ahead and hit "T" to add a new text layer. For this, you're just going to want to click because you're not going to want it fixed with text layer. Let's call this Todos, since this is a list of our to-do items. I'll make this centered. So, if I want to adjust the contents of this box it'll keep it nice and centered, and I'll make it a little bit thicker by making it a medium font weight, just because it's a title, so it should be pretty important. The size is 18, I'm actually pretty happy with that for right now, so I'll leave that. Next, let's create the action. So, we had a little new link up here in the upper right of our header. So, what I'll do is I'll select my title and I'll hit "option", and drag it. While I'm dragging this time, I'm going to hold down Shift. What that's going to do is, it's going to just drag this along the x or y axis. In this case, it's dragging it along the x. So, it won't change the y-coordinates of it, it'll just change the x. So, I'll just drop that. Because this is right-aligned, I'll change the alignment to right and I'll type in new right here. I can check the distance of how far this object is away from various things in the header, just by selecting it and hitting the Alt key. What this is going to do, is it's going to bring up some measuring tools that Sketch provides for us. So, you'll see that this is 13 pixels away from the right edge of the art board and the bounding box of this x layer is 27 pixels away from the bottom of our background. Depending on what amounts over, it'll give me different measurement tools. The next thing I want to do is actually also just make this a little bit lighter. So, it has a little bit of a different type weight from the title of my app. So this is a pretty big header. I actually think somewhere down around the mid 60s is probably a better header size for us. So, what I'll do there is, I'll change the height of that, and then I want to just center this between the status bar and the bottom of my background. So, that was 13, so let me just match that up to 10. Then, we have 10 and 11. So we're not going to get that perfectly even, but it's probably good for now. Then over here, I'll go ahead and change this to 16. You'll notice that sometimes, if you have an object selected and you hold down the option key to move it, it'll move by a 10th of a pixel. It's a really weird thing that Sketch does. I don't know why anybody would want to move this a 10th of a pixel but it's just one of those little quirks that Sketch has, hopefully they'll one day fix. So, what I'll actually do is make sure that this is 16 pixels away from the side of this art board. Cool. Now, the next thing I want to do is just give this header a little bit of depth. So, a header sits on top of your UI and things are likely going to be sliding behind it. So, what I'm going to want to do is just add a simple little drop shadow here. So, the default drop shadow is a little dark. So, I'll go into the color and let me knock this down to 30 percent opacity, and I'll make the blur a little bit less too, maybe make the offset in the Y-axis just one. So, yes. That gives me a nice subtle shadow. So, it'll really look like things are passing behind it. So, great. Now we have our header, let's go ahead and just stay organized. So, I'll select the background and let me just rename that and everything else is named pretty correctly, but I'll just go ahead and group these into header group. Awesome. So now, you have a header that you can use on the rest of your iPhone App screen. So, if you just add it over to the Create.Task View and change this to Save, you have a really reusable component that you can use across your entire app. You'll have to go ahead and create that little x to get out of the Save view or the back icon. So I can go ahead and just do that right now. So I'll make two rectangles. So let's make that three pixels wide and 35 pixels tall. Kill the border on it. Copy it [inaudible] command, V end just rotate that 90 degrees. It looks like this is a little bit off center. So, why don't we make that even numbers. I'll use my.Union tool and then I'll rotate them 45 degrees and I could put this right up in my header now. It's a little bit big so I'll just size it down to 20 by 20 and make it a white color. Cool. So you can go ahead now and style your header however you want and duplicate it onto all the art boards that are needed for the rest of your app and I'll see you in the next video.
8. Symbols: So, in our last lesson we started our UI by creating headers for each of our app screens. Next, let's start by creating some of the objects that are in our List View. Let's zoom in on the List View by hitting Command Plus and dragging our canvas by holding down spacebar. What we have in this List View is a couple of repeating items. So, we have a repeating header for each of these sections, and then within each of these sections, we have not done, todos, and we have some crossed off todos. So, what I want to show you in this lesson is how to make a reusable piece of design. So, let's start with making these section titles as a really simple example. So, Sketch has a really powerful tool called Symbols. So, if I go ahead and create a rectangle for my section header, I'll just go ahead and I'll style this, I'll bring this down till it's really light blue-gray down here. I'll add this color to my document colors because I might want to reuse it. I create this little background for my section header and I'll just go ahead and I'll create a title for it. So, I'll call this one Not Done, and I'll just adjust the font. I'll actually make this a nice dark blue. Everything's going with a sort of blue color tone here, and I'll just visually center it. Make this 16 pixels away from the side to match my action item over here. Great, this is looking a little bit big so I'll knock this down to 14 and just center it in there. Awesome! So, let me create a group for this and call this a Section Heading. Your app might have a bunch of section heading. So, we have a Not Done section, but we also have a Done section. Now, I can easily, in the same way that we made our headers, just create two objects like this. But if I want to change the color of this, to say a dark with a light heading, I have to go and do the exact same thing or recopy it and remake this other section header. Luckily, Sketch gives you a pretty awesome tool called Symbols where if you just update one, you can update the rest of them. It will automatically update the rest of them. So, let's try it out. So, if you select your heading that you want to create a symbol and just right-click on it, you can go down to this Create Symbol option. Alternatively, you can also go up here in the header. So, if you create a symbol, you'll notice that it changed that folder to this purple color. So now, anytime you have another Section Heading in this purple color, if you update one of these, they'll both update, and you can do this for anything you want. So, if you update your type styles, it'll update. If you update the sizes, colors, it'll just update. So, one thing that you should know, that by default, it will also update the text in here. So, you'll notice that I changed the text and it changed in both places. But that's not something that we want. So, what you have to do is actually, on your text layer, go up to this little check mark that shows up when your text layer is in assemble, and just hit Exclude Text Value from Symbol. So, what this is going to now let you do is actually have different text values in here and the symbol will ignore whatever's in that text field, but it will still keep all its styling options so you can stay consistent and keep the styling. Another thing to note is, these two symbols are linked, but you can change the title of them independently if you want to stay organized. So, you can do Section Heading for this guy and hit Done and then you can do over here, Not Done. Cool, so this is really powerful. So, the next thing we're going to do is to use Symbols to create the rows of our to do list. So, these are all basically the same and we want to create symbols. So, if we update the styling of one of them, they all change. So, let's get started creating that row. So, let's create the Not Done to do item. So, I'm just going to give it a background. I'll make this background white for right now. What I'm going to want to do is copy and paste right on there. I want to just make a really light stroke on the bottom of it so I can separate each of my to do items. So, I have this object. What I'll do now is I'll change the height of it to one pixel tall. So, I'll do one and you'll see that I now have a one pixel rectangle. I'll call this one bottom stroke, and I'll call this object Background. So, I want this to be bottom-aligned with the background, this bottom stroke and the background to be bottom-aligned. So, I'll select both of those objects and I'll come up here to these align tools, and what these let you do is, you can do things like align it to the center, to the top, or to the bottom. So, I want to align mine to the bottom. So, I have this little stroke right down here. The next thing I want to do is put an empty check mark to denote that this object hasn't been checked off yet. So, let's go back to our project cover photo. We've already made a check mark so I'm going to just go ahead and take it right from here. I'll copy and paste it into my new row and resize it right in there. I'll make this 40 pixels by 40 pixels, and then I'll select the background, and I'll use my align tool to make sure it's just center-aligned on there. Let's make this 16 pixels away from the side. Great. Before we go any further, I'll just go ahead and I'll group these into a group and just call it Task - Not Done. Awesome. So, I want to change up the styling of this. I'll actually change the color to our little light blue right there, and I want it to look imprinted onto the row, as opposed to hovering over it. So, I'll turn the shadow off and I'll try one of these little Inner Shadows. So, make that zero. Keep it a blur of three, but only change this to 30 so it's just a little bit more subtle. I can actually- let me try 20. Great. So, now we have our empty check mark. It looks like it's something that might need to be filled in and we can go ahead and just create the title for this. So, I'll make this 18 point, I want to make it medium, and I'll call it Lorem Ipsum. Awesome. It has my nice dark-blue on there and I know that on some of these there was a due date so I'll just go ahead and I'll add a due date layer. I'll make this much smaller, maybe a 14 and I'll make this a little lighter grayish blue and I can make that regular. Let's say, "Due tomorrow at 12:00 PM." Awesome, and align those up. You guys can design this however you see fit. Play around with the sizing and the spacing until you have something that you like. I'll select both of these and hope they're not in my group. So, if you want to add something to a group that's already existed, you just go over to this layers list and just drag them right in and now, I should be able to do the measurement away from this check mark. Okay, great. So now, I have this 16 pixels by 16 pixels and sometimes I like to also just line stuff up. Sketch gives you these tools. They're called rulers and basically what these are good for is you can click on these rulers on the side and add these guidelines really quickly to your file. So, what I might do is actually align the baseline of that and the top of that one. So, everything fits really neatly within this little check mark. You can always get rid of rulers just by dragging them right off the ruler. So, it's a really quick and easy tool. Okay, awesome. So, what we're going to want to do now is select this whole group and we'll create a symbol out of it, and then just be sure to go back in and exclude both those texts values from the symbol. So now, if you copy and paste this guy, you want to do something like change the text here, it will change it for all of them. Awesome. I'll go ahead and change that back to that darker blue. I'll just drag this row heading because now, I have my two Not Done items. So now, what I want to do is create my Done items. But you know that if I go down here and I just create another instance of this symbol and then I start to fill this in with maybe like a green, it's going to fill it in for all of them, and that's not something we want. So, what you're actually going to want to do is right-click on this new symbol and you're going to want to detach it. So, what this will do, is it will no longer be connected to the rest of the symbol so I can go ahead and change this as I see fit and my other symbols will not change. But I can also just go ahead and create a new symbol out of it so now, I can make my Done rows down here. So, maybe I want this to be crossed off. Awesome. So, what I want you to do now is just finish out the rest of the screens in this page. Remember, you can use some of the components that I included in the iOS components page or create things completely from scratch. It's really up to you however you want to design your app. I'll catch you in the next video where we'll talk about some of the microstate.
9. Microstates and Icons: Okay, hopefully, you've been able to finish designing the main screens of your app. In this video, we're going to go over some of the last interactions of microstates. Let's head on over to the page now. So here we have a couple microstates. We have our row interactions. An empty state for our ListView when either the app loads for the first time or maybe after you've finished and cleared out all your to-do items and lastly you have a Delete Task confirmation. Let's start with these row interactions. Just like when we were designing the main use of our app I'm just going to go ahead and add a new art board. I'll make it iPhone six size. I'll drag it right underneath the row interactions and I'll name it row interactions UI. I don't want my art board to be white, so I have two options. I can either draw a rectangle and cover the entire art board with a rectangle color or I can select the art board and turn on a background color for it. So, let me do that. I'll make it this light blue that I've been using in other places in the app. Okay, awesome. So, now we have our row interaction. So, the first thing I'm going to want to do is just throw a default task row on my art board. So, I can either go back to my app screens and copy and paste the symbol that I created in the previous video lesson or I can just insert an instance of that symbol. So, if you go up here to the 'Insert' drop down, you'll see that you now have a symbol area. So, in here are all the symbols that I've created so far on my app. Let's do task not done and it's going to add just an instance of that symbol directly onto my art board. Now remember, anything you change here is going to change all the pages in your sketch file. So, if you change something here it's going to change on your main app views as well. Just keep that in mind. So, we have our default row. The next one we're going to want to do is just add a row. It looks like we have a little new icon right on top of where the checkmark is right now. So, let's create that. So, I'm going to just zoom in. I'll create a new oval and I want to create it the exact same size as the checkmark oval and remember, you don't want to put this into the symbol because it'll then put that oval onto all of your rows. So, I'll go ahead and I'll make this white and I want to make the borders this nice blue, I'll bump it up to two and I'm just going to add the word new into it. So, I don't want white text on here I'll make this blue also and just bolden it up a little bit. I'll set my alignment to centered. So if I wanted to add an exclamation point or something, I could do that very easily. Awesome, so, I'll zoom out a little bit. That's like a tab big for my taste. So, I'm going to try it at 11. That's looking good and then usually when I use all uppercase texts I like to space out the letters a little bit so just type in a one on the character and space out those letters. Let's try two, I think one was working better. Okay, great, so now we have our new row state. The next one that we're going to want to do are a couple of these swipe interactions. So, it looks like each of these interactions has a pretty consistent icon with a label and a background. So, I'm going to actually just go ahead and create all the icons at once to make them all consistent. So, let's see. We have a checkmark, a trash can and a little pencil. So, let's create each of those right now. Let's start with the checkmark. This should be pretty easy for us now because we've done it so many times and let me just make this 25 by seven and then I'll make another rectangle seven pixels wide by let's do 50 pixels tall and I'll just go ahead and adjust this right in there. Okay, cool and just like we did before we'll just union and give that a negative 45 degree rotation. Well, let's make these two pixels thick and I'm going to do it on the outside. That's looking like it might be a little bit big so let's just knock that down to about 35 pixels tall and that's about the size I will use for all of our icons now, okay great. So, I'm going to actually just make myself little guides right here so I can keep everything relatively within the same scale. Let's make our trash can now. Make the trash can what I'm going to want to do is just create the trash cans base and the trash can has a wider top than it does bottom. So one way to do this in sketch is to double-click on my rectangle to go into path editing mode. What path editing mode lets me do is select each of the anchor points on this shape one-by-one or if I hold down shift, I can select two at a time and now if I move those around, you'll see that I'm able to just move those anchor points while the rest of the anchor points that aren't selected stay stationary. So, what we'll actually want to do is just go ahead and select that one bottom anchor point at a time and just move it in two pixels to the center. Great. Now let's just style that the way we wanted it to, that's fine for now and we don't want any center fill. So, let's now create the top of the trash can. So if we just make a rectangle and we can make it a few pixels wider. Let's just style these up and we'll set this for the outside. Okay, great. I'm feeling like my trash can is maybe a little bit narrow so I'll just go ahead and widen it up a little bit and then drag this out and I'll just go ahead and center align these. Awesome. Then let's just give it a little handle, I zoomed in, I'll zoom back out by creating one last rectangle and we'll make that thickness two take off the fill and what we're going to have to do now and we'll just overlay these things right on top of each other. So, we have a little check mark and we have a trash can and the last one we're going to want to make is a pencil. So, we'll start with a simple rectangle. Let's make that about seven or eight pixels wide. Just go ahead make the thickness two and remove the fill. So just like we did with the trash can, let's double-click on this rectangle. We'll select the two top anchor points. So, in addition to moving them by themselves, we can also control the radius of just certain anchor points. So, bump this up to four since this is eight pixels wide, this should basically be a perfectly round end to this pencil. Now we want to create the tip of the pencil. So, if you mouse over these lines, you'll see that your cursor turns to a little pen with a plus on it. What this is going to do is it's going to add an anchor point here. So, if you click you'll see that I have a brand new anchor point on that shape and now I can select that and I can drag it and move it around any which way I want. So, just drag it down a few pixels to make it a sharp end like a normal pencil would have. Okay great. You may want to just go ahead and add a little line right here to show where the tip of the pencil starts and you can do that by hitting L for the line tool and then just dragging a line right across it and you want to position that right in there and then just again just go ahead and make it a two pixel thick line and similarly maybe this pencil has an eraser on the top, so you can just go ahead and drag a line up there too. Cool. So, now what we want to do is we'll probably want to group this and call it, give it a name so I'll call it icon edit. We'll do the same thing with our trash can. Great. So we have some just really simple icons that we can now use when we're making our rows. Again, you can just get rid of these rulers by dragging them off right there. So, let's copy and paste our main task row, and what we're going to want to do is just slide it over a little bit and we'll make a rectangle that's the exact same height as it is. Move its border and this one should probably be green to denote that you're about to check something off. We'll drag our checkmark icon right on top of it and center it in the middle, let's go ahead and make this stroke white and add just a little label so people know what's about to happen. We'll do done exclamation point. Again, let's make it white and set it to the center and there we go. Cool and now you can just do the same thing for the other two row interactions. So, we'll just copy this twice. Let's change this to a red and we'll just bring in these icons over here. We'll probably want to delete those guys. Put this right in the center. That's the align tool. Let's just make this negative 45 degrees and we'll want to go in make these all white. Copy this. Awesome. So, now we have our row interactions. So, you can go ahead and finish out these rows styles however you like so they match your app and then when you're done with those just finish out the rest of the microstates that we have in here. So, the empty and the confirmation message. Remember, I've included a confirmation message in the iOS components. If you want to use the default iOS operating system confirmation message or you can just design your own custom one. It's up to you. In the next video, we'll learn how to export our screens so we can share them around with people.
10. Export Artboards: Okay, so now that we're done designing our iPhone app, we're going to want to export our screens so we can share them around with either an engineer that's going to be building our app or upload them to the Skillshare project gallery, where we can get some feedback from our classmates. So Sketch makes it really easy to do this. What you're going to want to do is select each of the artboards that you want to export from your layers list on the left-hand side of Sketch. Then, what you're going to do is come back down to this lower right-hand corner and hit this make exportable button. You'll see a little previews of each of your artboards and you'll also be able to add various sizes as well. Just to show you what this does, I'm going to go ahead hit a plus and I'll add the 2X size here so I get double-sized images of my originals. So I'll go ahead and I'll hit export artboards, I'll pick the folder that I want to export them to and I'll hit the export button. Also, one quick and easy feature the Sketch allows is the ability to share directly to mail or even iMessage directly from Sketch. It comes in handy sometimes. So now if I minimize Sketch and navigate over to the folder where I saved all my artboards app, I can see I have a copy of each of my artboards in png at both 1X size and 2X size. I'm now ready to share these with my friends or upload them to the Skillshare project gallery. So what I want you to do now is upload your main app screen to the Skillshare project gallery, and I and your other classmates will go in there and drop some comments and feedback on your work.
11. Explore Design on Skillshare: way.