Sketch App Basics: How to Design and Prototype Using Sketch

1. Introduction: Hello and welcome. My name is Anna Addition. I'm a UX designer with fact development backgrounds. I'm also a future at skill share, and in today's class, I'll teach you the sketch up Basics. Sketch Up is one of the most powerful professional design tools. It works with Mac and utilizes a full of vector based workflow Thea apples for all kinds of creators. Whether you're a product designer, you x you why website designer or a person with no professional or specialized skills? By the end of this class, you will be able to design and prototype using sketch. I will also share to mobile app cover page desires for your practice and inspiration. And you learned some of the best sketch practices were working more effectively. So let's jump right in. I cannot wait to see what it creates. 2. Your Class Project & Resources: in today's class, we are going to create a mobile APP design using sketch. Then we will create a prototype using those designs. When you're ready, upload your project to the gallery. A complete student project shouldn't go. The following design pages in PNG or JPEG format Cover squash me gently out Sign up pages The main page that people see after signing up. You will need the following resources for this class. Aamodt, Berg and sketch up 30 day free trial. Think oven up that you want to design. You can't even pick an existing out and redesign it. Or you could use the sketch file I share to kick off your project. For color inspiration, feel free to use my personal color mood board on Pinterest, so let's move forward and get to know sketch. 3. Sketch Interface Walkthrough: The interface of sketch is minimal by design. The left panel shows all the layers are boards and pages on the document. The toolbar along the top contains all the important tools and actions inspector on the right way to adjust the properties of the layers. Last but not least, the chemist in the middle is where you will see your designs. Let's go through some of the tools and see how they work here. On the left, we can see the first page, which was created by default. To add a new page, we can simply click on this plus icon. We can create as many pages as we weren't, and to remove a page, we can simply right click on it and click delete to start designing something we need in our port way can insert our boat from this left top corner, insert our port or by simply pressing the letter A on the keyboard. When we do, we can see always options In the inspector panel, the's are old pre made templates created by sketch to make it easier to choose what device to design for it already has. All the correct size is all you need to do is just quick on the device that you want to work with, and it will create an art board for you. You can select Apple devices or android devices, responsive Web paper sizes or custom. Another way of creating a custom art board is too quick in drag. This way we can see what created the first out port Here. We can change the naming and to change the size of the airport. We can go to the inspector and include new numbers. The first number W is for with and the age is for height. To change the height, I didn't put a different number and simply press enter. These two numbers at the tub are for position of the our port, so to change the position, we can change the number. Impress enter. Let's now add a couple of different layers and play with the tools to see how they work to Adam Rectangle to our our board between two. Press the letter R, then quick and drag for over repress Oh, and then click and drag again for a circle press. Oh, and then press shift, then quick and drink or text with press keep just type something by default. It says Type something. So let's change the properties of our shapes in the inspector panel. You can change the color of this circle, and then let's do the same for their tingle. Then let's place the circle on top of the rectangle to practice some of these tools. So when we click on the circle, it's selected, and then we can use this tool to Senate backward. Click back, worked and then click forward to bring it back. We can also group shapes together or edit them so quick at it and pull the edges to create a conflict. Shake out of your circle way can quick, anywhere on the art board or press finished editing to exit the editing load. Then we can rotate it, click on the rectangle press shift and click on the new complex shape and then quick mask. So this way we have created our mask out of two shapes. You can play with the tools of the top to see how they work for some of them, like preview Claude or export. We're going to use them later in the class, so let's give them for now, my schedule layout might seem a little different. For example, these I comes here I might be missing from your interface. And the reason is I have several sketch plug ins installed and they provide some additional features. That's more bad sketch, and I'll cover that in a different class. So if you notice anything like that, don't get confused. This is the basic structure of sketch was no move forward and start designing our app. 4. Part 1: Designing The App Cover Page: to start designing the up. Let's press a for our board and from the templates on the right, I'm gonna choose iPhone excess. Let's rename the Are bored by double clicking here. No, we need a returnable with the same size, so if you select the Arbour by clicking on it, you can see it's size. The with is 375 in the height is 112. So now let's press are for rectangle, click and drag, and then let's remove the forger and make the size exactly the same as our board. So it was 375 by 812. No, I need to align it a line of the rectangle with ER board by first, click here to Alanya horizontally, and then I click here to Lenny vertically. Then I need to change the color. So I click on the color. I can choose the color from here, or I can use some of the colors that I already have in my talent to add in your color to your appellate unit two. Quick this plus icon here. So I'm gonna choose this calmer and then I see there are different styles for Iranians. It was tried this and see how they work. I'm gonna choose this style and to change the tough color I click on this circle, then go down to my palette and picked this color. Then click on the right circle when I go down and pick this color. So now I have is notice Cranie int I could make changes to this great And by dragging this edge of the circle two different angles I'm gonna keep it like this from now to add tax, let's press the tea on the keyboard and then just type the name of the APP is a local. I'm gonna divide my tax into two parts. So I select this price Command see and then command be and then shift and the arrow key to movement. And this part is going to be designed. Then I selected and again used a shift and Cherokee to move it. Let's select both parts by selecting the first and then pressing shaved click and group those two together. You can name it local to align this perfectly in the center, in the middle of the artwork. At first, press this to align horizontally and then this to Atlantic vertically. So right now I have my Splash page design last move forward and continue designing the APP . 5. Part 2: Designing The Sign Up Pages: Let's click on the rig, tangled, then double click on the name to rename it and done. Click on the create symbol to turn the backward into a symbol. Press OK, and we can see that know this background is a symbol. Soon you will see how we can. We use the same element over and over again in our design. So let's click on the Are Your Name, then press currency and committee to copy the art board. Let's rename this second page to page two, and now we need to move the logo, and then we need to resize it. Selected text and I changed the fun size from the inspector. We need to move the second cards now click on the logo group and again align it horizontally. Then let's present a T for text. What about a tax? I'm going to choose a different front avenue, and the text science is going to be 24. I went to a Linus perfectly in the middle of our board. You can select signing, design a parts press command, be to make a book, and so now we have the second page of our app. Let's click on the are born name Press come and C command V two coming again We named er board. If you don't rename the airport later, when you expert your world, he will have trouble because even only extra won't work one of that one of the our boards. So no, we won't create the sign up cage on the first page. We will need the folding clothes stick lane. Press comment Be to remove the baldness of the taxed looks placing the last part to create a line I pressed the letter l click and drag it here I can change the property of my line making white I also wanted to be perfectly in the centre Include here. No, I want to create a button so I press Oh, and shift click Indrek removed a border making right now Here we need a little shadow because that's too much. So let's make a couple of changes here. I think it looks cool. So x zero y zero in this only one and blur. No, I need to place an icon over my button to add an icon. I go to the known project That con in that attack next brings up tons of different next psychos. I'm gonna pick this one, and I can drag and drop it into my sketch file. Let's choose the size to make sure it's perfectly in the center of the circle. So let both the circle in the icon and then the line it bulls vertically and horizontally and then so, like the arrow only go to the final section in the inspector and use the color looks good. So now I want to show you how it can actually use our symbol that we created previously. So it's double click on the background, which is our symbol. Let's say, if I want to change my background color, I don't look on it again, and I go into editing mood. So here I can select a different color. No, let's go back and see what happened. As we can see in all the our boards are background color has changed, so this is the power of symbol. If you have, let's say dozens of different pages, you don't have to spend time to change the background color or any other element over and over again. You can just do it in a single symbol and that is great. I don't want to go back to my previous colors, so I'm gonna change them here. Bottom and the great thing about sketches. You can also add your creators as global. So as you can see, when you click on this plus icon, these exact same great and will be added to your palate and you can reuse it in any other project. No, Let's create another symbol to make our world faster. So when a group this two together, But I'm gonna need in the group form field, then going to create a symbol I can click here or I can do a right click and creates a move . From there I'm gonna keep the name sold where I felt. No, let's copy and paste this art board. Let's we name this our board h four. No, As I can see, the structure is pretty much the same. But I want a different text you write. So what I do because it's a symbol, I click on it. And here on my Inspector Pano, I can change the value. What I do is I just type beaming. Press enter. This is the power of symbol was copy and paste again. This is Page five in this one. This one is going to be all password. Let's also add attacks, further terms and conditions. Let's go back to this art board and type something like my son. You know. You agree. Teoh seen commissions? No. Let's make this tax the fixed size and then changed the service. You. Let's change the font size and making a Tim pixels. Let's make it centered and line into the center. Just copy and paste us into our own boards. Okay, so let's create the next outboard. The best numbers sakes. Confirm password. It's allow you to do just change the text year, all right. It looks like way have all signed up ages. So our next step is to design a page that people see after setting up 6. Part 3: Designing The Final Page: Let's not create the main page that users see after they sign up quick on this art board. Commence See to copy command, be to paste. Chase the airport name to bait. Seven. Let's remove some of the parts that we don't need. Let's change of size for the background rectangle to use it as a header way. Also need to change the local size. Select wolf parts of the text and changed the phone size too 40. Then let's move the bottom part to align it correctly. Select the logo group moving up and then a lightning in the center of the rectangle. Let's now create the food. Er, copy the background with tangle. Hey, stead and really to the bottom. It has changed the size, and I can feel like Graydon doesn't look very well here. So let's detach it from the symbol and create a different stand for it. So we go to the field instead of great, and I select this first circle, which is a single color. Then I click on the eyedropper to Teoh, pick a color and select this one. Well, this is going to be my footer now. We need some icons for the Footer. Let's assume that we have three categories here. Gallery help in profile. So go back to the non project. In first I surge gallery. Let's see what we have. I'm gonna pick this one and then help. Let's pick this one in the next one profile. I'm trying to use icons that are identical in their style. Let's try this one. Now let's select all of this by cars. Change the size to 55 pixels and then rest field and use the color. No, I need to align this. So let's go to the alignment tools in quick, this very last one to align it from the bottom and then to align the space between them. Once I do this, I can press command G to group this icons into a single group. I rename it two footer icons and click the middle alignment tool to make sure it's perfectly in the center of the food. Er then I quick on the food or rectangle press shift and select this group and click on the other alignment to to make sure it's vertically aligned in the footer. Now let's create the main categories of our application I assume that this application is for deciding different things like banners, icons, patterns, logos, etcetera. So let's create those categories. Press are for rectangle removed the poor dinner click on the field color. Rob the eyedropper tool in picked this very top color from the arbor next to it. Let's align it in the center, and then we want Teoh. Place a text on it. So Presti in right have designed. I want to change the font face to Aven ER and also changed the styling too heavy. Let's also change the font size to 24. Select a week tango press shift. Select the text in a line it vertically. No, let's select a rectangle and cheese the radius to get rounded corners and then press shift . So, like the text and copy those two lingers. The 2nd 1 is going to be better sign. Let's cut bait again in this one is designed. The next category is icon design and local design. So for the second with 10 low, I'm going to pick a different color trying to create the same grand. This would tangles. Yeah, take the color picker and choose the color. No, let's select the text layers. You know this categories and aligned them to the left by clicking on the left alignment. No, we want to add some bikers to make it visually more appealing. Let's go back to the non project in The first thing is website design was to design. Let's pick this icon so the next one is planning on design better because I'm gonna pick this one. Next thing is pattern design for the sake of time. I don't pick the perfect icons. Let's see what we have for icon design. I'm trying to pick icons that are identical in style. We don't have a lot of options for I couldn't design, I think. Okay, let's at this one. And Leslie. Local design. Well, local design. Let's pick this one. Now let's select all of these icons and change the size to rectify pixels. And then let's align them to the right. Next step is to click on the field and change the color to white or whatever color works for you. So now we can see that it looks better with the ICO's. Well, I want to make it a load. A little smaller, maybe 50 pixels in The last thing we wanted to is to make sure that each of the icons is aligned in the middle of that rectangle. So select a rectangle, click on the icon and align it online it to the middle and do this for each of them. Now we have our page ready. We are not going to design the entire application because it would take a lot more time. But hopefully this was enough for you to understand how sketch works. So our next step is to use this page is to create a prototype. 7. Part 4: Prototyping: before prototyping. I want to show you how you can explore your work quick on the cameras and drag to select all of your our ports and then quick make exportable on the right. You see this patterns over on the our board. It means that background is transparent. It shows to have a white background, but when expert, it's going to be transparent. So we select Bagram color and check include in expert. This will make sure that it's not transparent, but it's actually white, so you can slag and then click expert on the right top corner. And if you click expert, you will be able to export your work into PNG. Here, you can select a format that you want an expert to. It can be panned. You J pack were different. Want to create a prototype click on the art for that? You want to start with and then to place a hot spot on it. Press age. Click and drag the area that you want a quick on, and when you do, you will have this I can hear. If you click on it, you will be able to see all the pages so select the page that you want to navigate to. From this point this case, it's Page two again with press age and put a hot spot on the sign up, which is going to be a link to this next page. Next, place a hot spot on the third page to the next one in the same thing for other pages. No, let's see how this prototype works. Quick on the first, our board that you started, what and then like preview to view with a prototype and let's testing. As we can see, it works according to the hot spots we could. You can also upload your work to the sketch cloud and share it with the rest of your team. 8. Final Thoughts: Thank you so much for taking this. Plus I hope you enjoyed it. Don't hesitate to reach up to me if you have any questions or feedback. Employee, share your project in the gallery of this house. I cannot wait to see your work.