Wireframing in Sketch | Roger Ennis | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 22m)
    • 1. Introduction

      3:54
    • 2. Learn the user interface: part 1

      10:15
    • 3. Learn the user interface: part 2

      7:48
    • 4. Learn the user interface: part 3

      8:03
    • 5. Overview of plugins

      5:29
    • 6. Create and organize text styles

      9:35
    • 7. Create and use symbols: part 1

      5:03
    • 8. Create and use symbols: part 2

      7:29
    • 9. Create and use libraries

      10:48
    • 10. Start your wireframe: part 1

      4:36
    • 11. Start your wireframe: part 2

      9:22

About This Class

Students will get acclimated with Sketch App UI by building phone wireframe.

In this class we’ll focus on introducing you to the Sketch App software and afterwards build a wireframe. Gone are the days when photoshop, Illustrator and indesign (which I have used and loved) are the best tools available for designing websites, and the most popular nowadays, iOS and Android applications.

Roger will introduce you to this extremely light-weight piece of software and get you sufficiently acclimated with the SketchApp’s user interface. You’ll also look at the ecosystem of plugins to help you work smarter not harder. Then, you’ll put all the pieces together to build low fidelity wireframe that will allow you test, validate and get feedback early in order to iterate on your project.

No need to worry about prior knowledge of using Sketch, however students who take this class would have used Illustrator, photoshop etc. before.

Transcripts

1. Introduction: everyone. My name is Roger Ennis, and I am a UX designer working out of Toronto, Canada. I am a new teacher on skill share, and I'm really excited to get started and try to help in whatever way I can to share what I've learned over the years. A little bit about my background is I started off as a self taught graphic designer. Started off learning, quarrel, draw. I taught myself some of you might know what what program that is. Actually. So and then I went to Canada, uh, studied graphic design at Seneca College, after which I graduated and started, uh, they graduate graduate studies at share them shared in college, where I studied I am interactive multimedia where learned, Knew what? Using your user experience design I learned online. Are there online media as well as friend development. Now, some of the other places I've worked at our anger micro into it into a Canada bank, the Bank of Montreal, Bell Canada and currently working at sonnet of your user experience Manager uh, where I'm exercising and using a lot of my skills that I've learned over the years, which are skills like using actual er prototyping wire framing a little bit of friend development knowledge going in there in this class, we're gonna ballooning a few things to get you completely aka mated with Ewing sketch up. So starting off, we're gonna be learning about sketch up that's looking at sketch app and its features on comparing it with the other tools a little bit. Comparing with the other tools that we know of Houston will know in love like photo Shop and illustrate. I'm gonna stay into and with those three for this one, uh, learning the user interface and that will be covering the user interface from the two side panels, um, to the title panel as well and some of the menu items as well. And after that along and along the way, we're going to be going through doing an overview of plug ins and actually getting to install and use some of these plug ins so we can work harder. Sorry, Work smarter. My mistake, and not harder. That's what we want to do. And we're going to create textiles and symbols. Symbols are very, very core part of the workflow and sketch up, and you're going to love symbols, libraries. A swell Libraries are a global global symbol. So we're gonna see how to create and use those. We're going to start the wire frame for phone and get you get your project started. So you can you sketch up and then we're gonna do some information architecture, and in that we're gonna do some annotations. Just Teoh. Use what you have learned a little bit. So I am ready to begin. How are you guys? Hopefully you are. And let's get started. 2. Learn the user interface: part 1: we're gonna learn the sketch user interface is excited. All right, if you haven't already downloaded sketch, you can go to the website. It's sketch app dot com, and you can try it for free or get a license if you want either one. Um, I already downloaded it, So I will go here to my flying there and sketch up. Are you download? It already installed it. Um, see, that was very quickly. Like I said, it's lightweight. And firstly, right off the bat, you will. You'll see the menu right here. Uh, let's explore that really quickly is your usual menu for file and editing, Uh, for insert young A cny because it's not open. All right, now, on document is not open. Um, for layers, you can explore this a little bit. Um, you have replaced with and you will see what this refers to. A symbol. You see what what happened and how we can use that later on, Um, go through style and we'll see these. Use it a little bit later. You have the usual for texts. You can do current ing ligature baseline, transform a line. Uh, prototyping. You can link your different art boards and just kind of simulate on an actual app goes from one screen to another. He can do trend transitions, a swell for animations. Bring screen, um, the usual. In terms of a range. We have plug ins. I already have some installed, but you will see the details of those later, um, and view. You have the usual zoom on their different levels of zoom here. Different types you could get learned the short shortcuts for those, uh, later, Later on as well. There's layer list in canvas. And like I said, you can add your own shortcuts and customize your shortcuts differently. Okay, so let's open up a new document, double click on here or do you choose, and then we'll go to examine the this side and your left. You have the layer list on the top to a bar and on the rights. There's an inspector. I'll just minimize that, since this is the default view of inspector, so I'll start with the layer list. How sketch works is We have pages. Silver ends, for example. You can have different pages and one file you can have ah, welcome. For example, you can have um, components. Only one. File your symbols. Only one file. So if you wanted to create a page, press that quick that and create I can rename my page Page one just, for example, you could mean that welcome. And that page will have all your welcome art boards. And to add an art board, I'm going to press a That's the the shortcut A or go insert and artwork. Okay, so if I do that on the inspector, I get all my options here or create a custom size, so you'll notice that these air Apple devices you can choose Android. You can choose responsive Web or paper sizes as well. And if you wanted to change the portrait, changing portrait sizes could do that, too. For now, I'm gonna choose, uh, Apple devices and choose iPhone SD. Since that's the starting for any phone deport. So I added an art board, and you could have multiple art boards in here. It doesn't matter where you put them. I usually just click on my ORT board. You can click on name here a little select, and I usually just position my in the Inspector 00 I'm just really I like that, I guess. But I put my position, my arm were there. And then from there, I can even copy. So when impressing is ault and shift so that it doesn't move up and down hold shift so it could stay horizontal. Or if I want to stay, it will stay horizontal. I could do that and just let it go, and it makes a copy. So here, under welcome, I have to art boards there. And then from there I can add all all the vector elements. I want her art board. I can even add victor elements outside of the art board as well. I'll be good. Uh, so that's it for the pages. That's mainly how sketches structured so pages. So that sorry. The document The name of your document here, Uh, pages, multiple pages and one document and then art boards. And then all your layers are structured under here so I can add rectangle. For example, I could add there, like copying piece this command, see, to copy and paste. I could do make that rectangle. So now we just focused on this side the layer list, and I could make two shapes here. See, these would be on your second dart board be renamed those. And one thing to note is it populates from the bottom off, just like illustrated, just like photo shop. So if I rename knees, I'd say, um, multiple shapes. You call this, uh, rectangular czars the rectangular right. So multiple shapes have square in a circle. Shows here in your layer list can hide them, and that shows that it's hidden. If you see the I great out, that means you're your element is hidden. Or I can hold all the option toe luck, that element in place. So I just did that. I'll reveal it. So it's not hidden anymore. I pressed old to show the I once select Do that again. Unlock it first, so it's not hidden right now, and I'll make it hidden. Once I hover over, it'll be hidden, and it shows the I in Great I'll reveal it again, and what I'll do is press Alz over Over and Pressel the lock that will lock it in place. Right now, I can select it, so if I oppressed that, that will always be there. Great. I'll show that that layer is locked. What I do that I can select it. That's not hit it. Okay, uh, next we're going to look at the filters. It works just like any other filter, but sorts by the art board level at the our board level. So if you want to look for something with for example Oh, in it, press old here doesn't. Doesn't matter whether it's capital or calm. No, uh, it'll sort for example, copy or 10 goal. It'll you get the idea it'll sort specifically on your layers for that page at your own. The next thing you can look at is adding one of the page in this area. So if I add another page here, you can see that there are no art boards on this page because all the art boards that you created are specifically on this page. Art was an elements, and if I click this minimize button, it's high on the list. I came in sort through my list of pages here, and that also gives me more space. As you can see here toe, look at the elements on my pages, so he's pretty good that way. 3. Learn the user interface: part 2: most of these. You already know we're gonna go and really go through the ones that you are not familiar with that you need to sketch in terms of insert. We have all shapes. Rectal tool for V pencil. I never actually used that one before. Uh, t protects. I usually just do that way. No image in eight for our board. We saw that one slice is really never use hot spots. That's for prototyping. Uh, and symbols. She called us a library, actually, because when this actually is is a library that is specifically made by Apple and maintained by Apple for sketch for use end sketch. So this is, uh, Apple's IOS. Do I and everything is in here for apples. You buy whatever whenever basin and update or they update this library. That's why has this chain link here for a symbol? It would, right? Yeah, it for symbol. It would have a different leave. A different symbol? Um, yeah, that's that's pretty cool. It's all here, all the assets, all the you lie right here for you use if you're doing Iowa's you why design text of's with way have not defined anything here yet. And that's why you don't see in textiles here. What we will do that. Um let me just go into preferences so I could show you exactly where where preferences is to our So we have general canvas shows adjusting settings that you can. You just yourself personalized preferences. Uh, what? I really want to show layers. Uh, when you're export to bit map seeking to explore one X, uh, here's a plug ins looking couple plug ins that I actually use and we go through all of these, but we will look at, uh yeah, and here was I mean, it's libraries. Uh, so it has that chain, and that's why it's called Libra. Hair is the apple I Iowa's do I. So when you interest on sketch, you should see this, and all you have to do is click the download button right here, and then it's all it and it'll appear you're free to use it. Um, presets. You can set up your presets here for uploading. Sorry for exporting your images. So right now, PNG, I could do to x customize and do any of these formats. And when I'm later on, you'll see in the inspector that, um, you can add these as well, but these air just pre defining those those sets presets for sketch cloud. Um, I have an account already, so I only have to do is really flowed here and create your account. It's free. If you want to share with your clients, you want to share with friends when somebody found mode your your sketch, library, things like that or do a demo. You can upload your your document to sketch cloud and share it that way. So that's the preferences. Uh, that's you can create a symbol. You know, all these three sets. This link is for prototyping linking and elements, for example, a button specifically going to an art board, our quarry like a screen I'm previewing. Well, uh, show. Let me show you exactly what I mean. Like, this circle could be a button. I want a link that to this our board. And when I do right now, it links the art board Quick that that's it. And if I click preview, it shows exactly where this element is clickable. It shows exact art board multiple shapes quick, it goes right to it. I can also we have not starting points here. Now what a starting point is it Shoes is you can define what are would you want to start at exactly your home page or whatever starting point you choose. Uh, So I'm gonna going to choose multiple shapes and quick that and light appears beside it. That means my starting point. So if I even choose this and a preview my starting point set So we'll go there on Well, for over here we can show pixel showing high the rulers, you can show slices which we probably won't use, Um, depending learning situation. More than likely, I've never used it. Said you can show and hide the prototyping lines, um, and show grids so your grid lines are seen and you can hide that right now, and then you can show layup. This is what I mentioned earlier in terms of, uh, the 9 60 grid. This is built in. So cancel out real quick and moved to the side. So if I go layout, that's what is called here. And go to two columns make, uh, 60. It's about there. I can customize it Anyway, I Anyway, I like and I can put rose to a five point and change colors, that sort of thing, making my default. And that's about center. It's the offset. It's Ah, looking. Learn how you can learn how to work with these two, exactly. Customize your grid, the grid exactly the way you want. So in exports, I usually use export and this case where I'm exporting an element on our board. So I never really used this one. Just opening it sketch the way I believe you should see it right now, and I'm using it that way. So that's it for the toolbar. Hope that was useful. We enjoyed it and let's, uh, more. 4. Learn the user interface: part 3: So let's start from the top here. So we have our usual distribution, Um, functionality here, horizontal and vertical. We have our alignments left, center and right. We have a line top, a line middle and the line bottom. Um, but if all these air defaults there's a position X and y positioning of. Like I said earlier, I usually put mine this my art board at 00 So that's all positioning the size of any elements that you click. We'll show here is well, for your size to transform. You can rotate. Um, there we go and you can flip instantly. Flips, um, paying horizontally or vertically. We have fills borders, shadows, inner shadows and Gaussian Blur. Uh, if we click, the art board will get an additional different sets costume. It's dynamic. So we have here. It shows the exact size of the art board, and we can change that. Something bigger. I wanted to. So that's pretty handy. All this truth, that again. And, um, if for some reason your content is different size from your art board, you can click this button and all your art world will shrink to fit her content. Exactly how you want, and that's helpful. Uh, when you're when you're exporting hanging over details, we also have a just content on resize. So if you, for example, I wanted to resize this it doesn't do anything. Nothing here moves the elements on here. Don't move at all. Examined. Click this. Check this. If I do, this will resized to little right. See, I do that on resize to the right. Now the reason for this or that the how this can be used is if you want it to. For example, do ah phone version off a design and then a larger phone or a tablet or anything like that , If you were to, for example, make the iPhone s e wider to another size than this element. Click here. This element and that get it brings me to the re size and capabilities of the inspector. So if I choose an element and Ellie, Ellie, Ellie, any blah, blah, blah, tongue type, any element at all, I can fix it. So pin it, pinned the object or this element to the left and give it a fixed with so that it doesn't stretch right, and it doesn't stretch onto the top words of the bottom doesn't go here or stretch that way . It doesn't stretch left or right, but it stays, um, in the position. I don't want it to move from this position at all. So I pin it to the left so it stays right. It keeps his distance from here to here, and I pin it to the top so it keeps his distance from here to here. Now, if I choose the art board here and this is selected, what happens? I can resize and my elements If I don't want them to resize, they don't resize. They stay. But if I want it to, for example, it keeps a fixed height and not a fixed with Let's see how we the with stretches according toe what I chose. So the instructor is pretty pretty interesting. Pretty good. I someone and check all of this and I have this selected. So I have no styles attached to this layer layer styles or any symbols or anything like that. Attach it. But I do have my prototyping um enabled here. So I see. I see that this prototyping section, what it goes to goes to the target, which is which is rectangles when I can actually turn this off, creates a separate hot spot. So I get another hot spot in here so you can see the change on that layer. Undo. It will just be this rectangle. Just be linking to that, um, that art board and I can completely delete the prototype. The linking altogether. Also, I can see here before unchecked. Everything on selected. You saw the unpopulated feels border shadows. Glad you, Blair. I click any element here, I get capacity. Uh, that's a bit blending modes, just like it illustrated photo shop. Uh, I have my fields here, and that goes double for flat colors. Uh, radiance. Any grading angle ingredients? If I want to do a pattern, Phil or noise Bill. And this looks at hex. Uh, global colors and document colors. Document specific. Now there's, ah, insulation that we're gonna do a plug in for later. And if I could hear, I get my Exactly what color is the breakdown off the hex and RGB? We can see the Argenis right here. And the Alfa well can easily just do this. And it changed the Alfa value, so I also have my burning wood specifically for colors and the capacity I can apply a border or no border. I don't want a border. I can just uncheck that and delete it. I want to add shadows. I just click on here can quit the ad or anywhere in this this horizontal layer as that shadow, uh, in the shadows. Goshen blurry. Same go. Same concept for the for each of these. If I don't check that, I can delete pretty handy for art boards when we're exporting for exporting. These are only options for art boards. The moment for exporting it can export with the background, with or without the background color, including the export. And then, like I mentioned earlier, Duthie export here O. R. I can from exporting an element, a layer, anything like that. I could do the same thing. Make it exportable if I go over to my layer list. I met my art board level layer level. I can choose them anyway. Any mix. It's very simple. It's very light and very accessible can. That's well, So that's my inspector. And I hope you enjoyed that. We'll see you in the next in the next, uh, face 5. Overview of plugins: Let's look at the overview of plug ins. We're back here at the sketch app dot com, and I'm going to click on extensions And where making sketch better. That wasn't too worried. Right? Okay, so the first plug game we're looking at just looking at their developer community in all the plug ins that are offered there. There are a lot of them, um, to make our workflow better person would look at is isometric. I'm not gonna get everyone, because I of course, you can go through it yourselves. Um, take a quick look at isometric and some of the ones that where you might be using here. So this is isometric. That's the effect you can get with using isometric. I'm gonna scroll down real quick, and you can see a demo here, inject demo off being use and have used it. Some of the scroll up and Patty is the one actually used right now. This is a really good one. So if you're familiar with front end development, you know about padding and having a button, Um, have patting all around it. Well, in sketch, you can actually do that. Look at this. Them all here so you can type and everything goes as the padding your applied and you put the button in, apply the padding and you have fighting automatically. No matter how much how many worthy types the patty implies, that is a lesson. So we can dig into that that plug in. Um, there's also sketch icons. Midnight. We can actually apply. Um, and this one cost some of them costs. Of course, not all of them are free. You can actually apply a darker theme to sketch, which is really nice. Um, I know photo shop in particular has this one of these two, uh, dark themes, which is pretty good, but this seems like a one time cost. No subscription by it, and then you have it. Um, yeah, and that's it. So if you click here, take a little long, you'll see that there are a lot of other plug ins, Struse room, and you could type some keywords to look for a particular plugging that you might be interested in. What's happening here Didn't load properly, I guess. Okay, there we go. In their a lacked of these things to speed up work symbols Manager, browser preview SPG export uses s video to compress exported. So everything's here. You I don't have to use external tools because, um let me see another one and they use for one. Uh, here's Patty saw that one already. If you if you want to do charts, create the the most probably types of charts by riel or random data it's so awesome. So you dig into this. Well, here's the one sketch wk. As designers, we wanna comply with the regulations farming for W. CAG and the guidelines. So I sketch plug into This is a sketch plug in that lets you contrast test your entire color palette against WK guidelines all at once. Uh, amazing. So exciting. So yet you know where it is big in and that's it. It's looking an expense. Just before we go, we should install one luggage that would be very useful. Let's go do that right now. It's called What? What's going and see what this plug in does Speeds up sketch work, Believe it or not. So let's look at it real quick. Runner helps you get sketch quicker, giving intuitive interface to supercharge your daily work. Stop searching through menu and start running commands so it goes from here. You can install other plug ins, look for files, can look for symbols and runner. And it's a pretty so looking down low, that one right now, we'll have already having installed, So please download it way can use it. Start using it in the next race. That's it. 6. Create and organize text styles: Hey, guys. So we're going to create an organizing textiles. It's open up a new document. Well, quick there. I'm gonna go full screen with this smart preference, all right? And we're gonna open up another document, command and or file, and only with that in illustrated photo shop. Um, sorry. Do that. So we're gonna name the first well, wire frame. Say that stretched cloud. Um, And then we're any 2nd 1 wife frame library gonna go to sketch class for that too. And, sir, we're good to go. So we're gonna stay in white, brings library, and now we're gonna creates in textiles. So you're gonna go insert, Are you just 60 is a text. That's TV. Remember? With family with that from ah Illustrated Photoshopped as well. So we can either This click and a text will be ready to go. We can just start typing or weaken, drag a text box and start going. I prefer to just usually just click right, click and be ready to go. So I'll leave that as is. And I'm gonna press command to zoom in on my selected text, do a little bit there. So now I'm going. Teoh define the annotation, text, text all that we're gonna work with so we can understand how textiles work. Okay, You can choose any font you want to do annotation with your medium when are gonna move any of these options here? Um, probably firmly with these. Like other programs. Other programs. Well, um changing color Teoh 00 c zero f like the right color. Oh, no, that's a zero. Very. Oh, yeah. And then 12 size and gonna be a little not fixed. So difference between auto and fixed is I can type in spring flowing barato and with fixed as soon as I move this over here changed to fix automatically. I don't want that yet, So we're gonna do 16 for line nights and change anything else here. The reason I'm doing 16 so that we won't go on the next line. We will have ample space. It could be a little whiter, So we're gonna go 18. 20. Yeah, Should work. Well, all right. So we have that. My monitor is refreshing. Sorry about that. So now we're gonna do ISS delete this year and define the textile. So we click here. We have two options And we have nothing or organized already know textiles yet Certainly go and create right now. Eso What's what? How sketch organizes this is you can organize based on category based on color based on, um, alignments were going to do is and you slashes to do that Someone start with annotation slash left the line. That's an l slash blue. I'm doing making a short form. So it's easier to read when, after I create it, it's not really long Text Empress Enter And that's your style. First duplicate, uh, hold option and dragged down Hold, Shipton. Option dragged down because I don't want to move left. Go down. All right. I can see the spacing one more time. You do that again. Seven. I just threw that space in this random and then I'm going to change my Here we go. Sorry. Changed my alignments. One centered and we notice Here is the original Once I do right changes to with that. So that means I can Davis style. We'd find it. So we have these options here. What? I want to do a new fix, though. So what I'm gonna do here is this is now centered still blue. Enter. This is still blue. But this is the right and I have my textiles here on that, and I have, But they're all the same color. So will change to a cooler. Different color. Much was black for that one. So I'm gonna change. Highlight everything changed into black and then changing one by one. So you create a new textile go D l k. Here. I want a copy that starts easier. Enter, create and face. So we have our different alignments with a different color. That's what we want. So now we go in. I know we got a center like blue left black rights. Uh, so if you're on a team and you want to share your textiles, um is a plug in that It does that. So we're gonna use runner right now, So that's command plug ins Should have installed run already. So it's command. Uh, Kama said that right. I'm gonna use a short cut. So command comma active activates that. And right now, highlighted is run. I want to run something. I want to install something that's gonna either click or tablet. Let's have over and then tie shared text styles and sees the 1st 1 there already installed that I would just click. You just click enter and it installs share textile already installed. So what? I need only anything I need to do. Go to share textiles and export every textile. What it does is export every textile. On my document. You can name that wire frame, text style and Jason. So it's really light. That's the reason why sketches so like, because it's built on Jason. Um, so right here I have wire from Texas. I'm gonna see that sketch Glad. So it's accessible by everyone at all of my design. They rely on your team that needs to access it. So, sketch Cloud, I'm going to share that leader. Uh, that's a sketch. That's my shared stuff. So if someone you share your your style and they need to install install it are imported, they just need to do this import and, uh, important style. Same. They'll have all styles that you created. So that's it. Just before we go go to organize textiles, it can see. Excuse me. That here and you can double quick and make edits to any of the textiles they want just like that. We can organize rename, and it will shuffle around itself. And that's about it. Just created textiles. Let me see what you create. I look see it. Um Go out and hope you enjoyed that. See you. 7. Create and use symbols: part 1: Hey, guys, we're back, and we are going to create a use symbols. Um, firstly, A. You haven't already created a sketch cloud account. Please go ahead and do that. Pause a video. That's fine. Um, also, please remember to name your in layers with meaningful names. I just makes it easier for. And if anyone is else is going to use the file and for you to come back later and recognize what's going on it at any time later date. Okay, so let's get into it. Uh, I'm going to go full screen, okay? And what I've done here, a couple things is made page called elements, which is a lie from the elements and other page called devices. So what I did here was I went online and I just got a random Sorry, Random. I'm gonna hide that. I had a show, so no, the previous slayers is hidden. I just got a random picture, and just over we drew it. So that's what that is. I'm going to go ahead and name. Uh, my layer I phone five five s E. So that's what that is. Uh, so with that, I'm gonna go ahead and make symbol out of acts, and I want to have this check sent it to the symbols. And you see here, that's this was made symbols. Meat is automatically made because now you have symbols. You have a symbol. I'm gonna cook on that. And here this. So let's go back to the elements. Page, Um Sorry, devices Page. And you can see that this is the, um will go or the icon for a symbol. Let's go back to the elements age and when I've done here is named. A couple made a couple off elements here, so this would be a starting point for advancing moving forward in the after. If you press any element moves to the next next stage starting point of the arrow off the line and what it points to. So these are two different lines and we can make others as we go forward if needed. What this do you know, it's a different color on this. Is this denotes going back? That's what That's what that's for. So this is a dotted line made those Let me show you how I did that. I change the color. And when it was going borders because this essentially lying that waas used I did. I used that to do it. Go ahead and do that as an example. I'll create live here. No, press it again. Doesn't show anything because there ISS because it is actually on the this layer that was later was selected before. But if I take it out, it shows. Right? So what I did here was I went to Borders. I did three and one. And the reason why did one? It's because it shows the starting points on the line. So the gaps are much smaller, right? And that's how I got this. Okay, so I just change the color on that, and that's that. These as well. All right, So what I'm gonna do next is make symbols out of these. So go ahead and create symbols. Hurt your symbols. Okay. I mean, that you can name those forward starts, point go and sent to symbols Page. So now that's a symbol. Okay. And people here, you'll see it. That's created right there. All right, so I'm gonna go ahead and you know the others. All right. So I'll see you in part two. I'm gonna create these. And you go ahead and create these. I'm gonna create mine as well. And then we'll go on, go ahead and do the next phase. I'll see you soon. 8. Create and use symbols: part 2: Okay, so we're back on. I've made symbols out of all of these, and what I'm gonna do is go over two symbols page and it created No, an added element. Anything Teoh step to do it is organizing. So what we can do here is not just have the name off each one. Uh, we can put them in the organization just like we did with textiles. So we can basically put toward wire in front of these or elements from elements slash each of these. So, um, it's time, Teoh. Hey, guys, we're going to install a plug in through Runner, so I'm gonna hit command. Come on. And so three name, it's I t. I have that already installed. So you just hit enter and it installs right away. See them here. So go to plug ins and rename it First. Do select the Are because you want I'm going to, uh, categorize all of this. So don't rename it Renamed selected art boards. And when they used this name convention wire, framed elements and the name of the layers a wire frame, it's slash layer name. And that'll gives exactly this format in terms organizations so go ahead and hit rename, and that'll take effect. And this is what it will look like. So wire frame elements and all the elements will be in that category. You can add this single one. So why frame devices? White cream slash divisive slash iphone five. But so the next day, see here, uh, you can actually go ahead and go toe elements and elite back page because when when you created your symbols, all of these elements that you made went on the symbols you see right here and now these air edible as symbols. But only when you're on the simple page. Uh, so we can right quick and delete. That's no longer needed, because this will also be used as a library later. And we'll hit that afterwards. So we go back. Teoh are symbols, and then we're going to make a combination symbols within symbols. So what we're gonna do is copy one of these are boards that are already I already have this icon and copy the forward directional line, the starting point and the arrow here. Just put them on that our board. I'm gonna go ahead and with this checked just content on resize. Go ahead and make that a little bit bigger. So so that when I am on actually using it, you will have a good proportion. And if it's not, then we can adjust as needed, of course, but this will be it for now. When you do that, you can go to your devices page and test it out. So go to symbols, document elements and forward pointer. So we have it here. And for example, a button was here. He had another state page. It'll point to that page. So this will work very well for documentation purposes documenting your wife rain and knowing where every states of every page of every slow in the wire frame is going. Someone's gonna delete that and you can, Actually, even next thing is lock. This should have been left already, but I'm just looking it now. Then I'm going to press option again and hide. It is I don't needed anymore. Quite. Actually, I can delete this page as well because I don't need that page either. I have my device and I can actually make more devices. Other devices on the symbols page. Same thing goes for that so I'm just gonna go ahead and delete devices because it's already a symbol. Like I said, this is going to be used as a library. So, uh, so we don't need that page. So what we just did it was create symbols, do a little bit of organization with rename its install a plug in that and then made a symbol with in a symbol. So look here. This is a symbol. And it's this symbol right here. And the way you know it's a symbol is you click on it. It has this icon decided, so if I click here, it's just a path. But this path, the art board extra is on is a symbol. So this one is actually the symbol to be used. And then I can click here and change it up to that good, huh? And it's the same thing with these arrows. They're all in that that category off elements to be used, right? So, like I said, it's, um if we need any other directional arrows are lines we can make those later in the same category. Well, that was useful. And see you soon 9. Create and use libraries: Hey, guys, we're back, and we are going to create any use libraries. Okay, So first thing is, I know I've been talking about it for a while. And what a library is definition by definition, really simply is a bunch of it's a sketch file. I sketch document, Uh, that has a bunch of symbols in there that lives in a You can put it in Dropbox. You can put it in sketch Cloud. You can put in any server quote unquote server location to be accessed by yourself or team members. Whether I'm so you can access that library documents or that documents global no matter what sketch document you open, you can have access to those symbols. Reusable, reusable, simple. So that's what that's basically what a library is. Um, so now if you should have logged into your sketch cloud account, we're going to upload the symbols that we made here to sketch. So this will be your light new library document. So why things Library. We should have it logging here so quick on sketch upload documents. Load up, Load up. No. All right. And what? You should see it loaded in a different side. what you should see. Uh, IHS, it's minimize that. Is this so why frames? Library. That's your sketch document. Uh, you can view this document. You determine that people you invited, I'm gonna choose that. And then you can add people being email address, too. Comments download you use as a library. So I'm gonna check, use as a library and download. But if you want the comment, I'm gonna uncheck that for now. But if you want them to comment on there, your workflow is like that. Go ahead and do that. So I'm gonna go ahead and save that here. Not sure what is taking so long, but Yeah, there you go. So all the symbols that we created, I create a few more, um, line just so that they're reusable and you can create as many as you want as needed, So you can do that. So I'm going Teoh over here. And now we're gonna do maximize this again and I'm going. Teoh, actually go over to this. We do a refresh. You can see that wire frames, libraries, not here. So if I click on that, you see the same view that I showed you before. And this is now your sketch document. Wife rooms, library, whatever the name. Whatever you named your document is now accessible globally as a library. So now you can down with add library to sketch. Amazing. Right. So I'm going to go ahead and click, Click of acts, add library, and if you have sketch open, you add library, and then it shows this dialog box sketches open. If it's not open, you choose a file and then remember my choices sketch. I'll do that and then open. And here we go. This is preferences, sketch preferences Library. So the father you made is now gold be accessible, just like Apple Iowa's you I It is now accessible as a library. You just made a library. Awesome. Okay, so I'm gonna go ahead and close that it's checked and ready to be accessible. Go ahead and close that. And then we're gonna back to sketch switches here. So now if I choose symbols, it shows up on the symbol. Still, So I true symbols because it shows up on their symbols because, like I said, library is technically ah, file sketch file with a bunch of symbols in there so by category, this is for wire framing. So that's the library or the sketch Pharrell that we uploaded. So we have all these elements accessible, no matter what sketch fall. So now if I click this one We made nothing in this one. Absolutely zero. And now So you notice that document is not here. So I could hear documents is not is not in this file. Click over wire frames. I just have mine to, um chains, chain links and as a symbol for library. And I can access exactly that docking. So just create your library. Now, what we're gonna we're going to do next is press A to make art boards. We're gonna choose iPhone. It's we're gonna do another. I was gonna do one for now, actually. And the other one we're going to do, which is underneath. Oh, do the underneath Make a custom sighs. And actually, you know what? I don't have to use this side panel. I can just press a and that I can determine my drawing whatever size I want. I'm gonna make that 2000 by 2000 right? And that's it. Okay, So what? I'm going to going to do next is I'm going. Teoh start. You can essentially start your work from here. Um, you can look at your sketch file and even add an element, actually, if you like, for example, go into iPhone IOS and go to system because you have those in all bars, actually bars status on and on light. And that would be yes, that is far area. We have this at the top, these elements of the top, so I can just go ahead and drop that here. And this is for iPhone eight. So I kid click my lock, lock it and then the size of my width of my screen. It's 3 20 that just locks right into place or moves right into places that actually locked . But I did it all the way inside here. So that's what I see. All right. Just doesn't example. So I can and I'm in my symbols, so I can actually, if I made that change, I can grow clout in the cloud again, and either upload and new documents for update existing back in it. All right, so I can't actually do that. Update my existing document. I had the same link. I have to change anything at all. Right? And with for that's upload. And that's it. Quick night. And if we go back, Teoh sketch close that. Do a refresh. We should see that added Right here. So that's your library. Or go back to sketch now. Uh, why Frames document. I should see. That's the iPhone. Didn't have dates. Let's see our frame. See why that would be, Let's see, one that would happen. Uh, if I move these, the type is actually at the top. You can see it. Let's go to Preferences and try to see what that would check. Let's check Sketch again. It's there. Okay, I don't have to. I shouldn't have to read at it a lot. That is. I'm not sure why they didn't. But you can see here you can use a library and have different screens and start your wire framing projects. So next we're gonna do that 10. Start your wireframe: part 1: Hey, guys. Everyone, uh, we're going to start wire Free me. In the previous video, I A updated the library, but it did show that was because I had the falsity than iCloud. I moved it to a local, like in a local folder document folder. And it showed the notification, Uh, was not in full screen, though, so actually, if I go here, you don't show that down, so I'm gonna go with that. And there we have library updates available so it does work. I just need to have the local files Local. I'm not in a cloud, so it can be accessed by a sketch. So I'm going to go ahead and click that update, and you'll see that the difference, the old and the new. Here we go. And once I updates, it abates. Everyone, that is beautiful. Okay, so for doing the wire, Frango for the this whole class was so we could catch up to speed and get acclimated in sketch. And hopefully I've helped to do that. Now we're going to Okay, let's install are plugging. We're gonna go back to runner uh, go full screen and command comma. Gonna go install, plug in. It's called light wire. Reinstall that that plugging what this book does. I don't remember a few sides when we looked at the community. Probably did or have looked through that already. It's enables quick prototyping, quick wire framing so you can actually get started quickly. The whole point of wire framing is to just start ideas on test right. And like I said before this, the purpose of this class was to get acclimated and sketch, understand the concepts of sketch and do a wife frame at the same time. So with this, we can actually goingto light where art boards and you can select um, a number of difference. Art boards are different ones. For example, you want to do a log in screen sign up. It's their It's a whole lot worse. For example, log in screen. I could select that one, and I have that art board that ready to go. So I'm gonna do command, too, and zoom into that and a It's all there ready to go and then you can edit as necessary as needed. It's really nice, really, really, really good eso you can go ahead and build your wire frame based on. Ah, you're, um, scope off work. So if your view a scope of work, you're going to want to go through your business goals, uh, and your target audience to determine what a type of wire friend you want to start with. Start, go ahead and start testing and get results quickly and iterating and constantly do that process over and over until you build the wife rain tested, and then you move to the next phase, which is a mock up and prototyping right the next. Actually, next thing we want to do is again. 11. Start your wireframe: part 2: So we're going to install another flag in, and that one is particularly surrounding colors and color management. So just like textiles. If you want to go on team and you want to share, uh, your color swatches your global colors, Uh, you can do that. So if I double click on this button where from when the press command to here? Um, I have my global colors here, but these won't stay inside. Stay and all your documents. So we're going to install shared palette. So go ahead and activate runner commands, comma, install and shared. Uh, here. I'm sorry. It's ah, color promise that sheared how it's have it installed already. What was it again? So sketch pallets. Okay, so sketch pallets. Okay, so I have this installed already. Let's go ahead and click. Tap. Enter, uh, color palettes. Do that. And what that does is if you go ahead here and define exactly what colors you want in this area. Say, these are the college exactly what you want. You can go to sketch pallets and save the color palette. So I defined my colors, the colors here in global colors, and that's exactly what I want. So I go global and I want to define everything here like all the precincts. So I'll save that, and that will be also be saved. I can name it. Uh huh. As her Prada, you can name it per project because that's usually, for example, from experience as usually, how color palettes live or or are organized based on a brand's different brands. Have different products, that sort of thing. So but for this one, I'm going to go ahead and wire frame, um, wire frame y frame got sketch palette, and I'm gonna go ahead, say that here. So if someone, for example, doesn't have that gold palette, they'll go get this plug in, and then they'll go ahead and load the plug in from that shared area that shared cocoa server. Whether it's like, wow, they're sketch cloud, whether it's your own server, and then they'll go ahead and, um, get that. Okay, so that's another plug in that will be very useful in one of the I use, um, so back to going back to this light wire. Um, plug in. We do need funds. So it says here it's missing funds and to actually use it You need monster at, um, Monster X. My saying that. Right, monster. Red light. All right. So I don't think I have monster at here. Let me actually shock if I'd do you on not of its I have something called suitcase suitcase , uh, suitcase fusion. And no, I don't have it installed. I'll go ahead and get that. You should to want to use this, um, prototyping plug in its amazing, uh, and then you can actually do after that. Is this on on art board? It can actually go ahead and copy and paste these. This maybe even put it in here when we get with a background in, then we can add annotations afterwards. So I'm pretty sure that this will we'll re size exactly as we need it. Yeah, because of the way it's set up. But that's fine. Um, that's fine. You could use these as they are and resize this to fit what you need, right? So I can go ahead and believe that one. You can put this in place, but that in place. Yeah, and then we have a log in screen. You can change enough. Like I said, Aziz. Muchas you for. And then, uh, I'm sorry. Go ahead and excuse me. Go ahead and customize based on your project. All right. Uh, then we could go ahead and, for example, go get our annotation. So I would go, Let's see, put another screen here. Light wire art boards and have log in. So I go to maybe a walk through our home page or it's real. Uh huh. For example, if I did that woman when I log in and then I go get my annotation forward starting point Clary, I can actually use Runner because I know exactly what I am looking for. Runner insert forward for a directional. That's what I want. I pressed. Enter and I'm off to the races. So again we're not. We're on an art board, so it won't exactly show scenes showing one only on that. So if it's I put it up here, it's showing on both of them, all right? And we can fix that. Um, as well. Teoh, there goes again. There you go. There we go. And then we can add. Then we can add our annotation. Ah goes to work and then we can either start, choose the textile there. So what? I don't have textiles here. So what I'm going to do is excuse me. I can going to go to plug ins, textiles and imports the text on that we made. And here it is, and immediately will have our annotations. See that? That is beautiful. Right? So I want left. And so that's what I have. Okay, so that's That's it. When you're done, you lay out your, uh your boards, your boards on a big screen and on this screen big dart board and do your annotations export. And let's see what you create. I would look to see where you create. Go ahead. Awesome. Um Thanks, guys, For, um, during this class, I hope I helped as much as possible. Um, definitely post in the gallery and go ahead and ask questions. I would love to help further, even more. Whatever I missed. Hopefully I didn't miss anything, but whatever I missed, I can definitely answer questions. Thank you very much and be safe