Overview of Sketch Software
Lesson 6 from: Wireframing & Prototyping Your Digital DesignsAlexandra Moran
Overview of Sketch Software
Lesson 6 from: Wireframing & Prototyping Your Digital DesignsAlexandra Moran
Lessons
Introduction to Wireframing
06:42 2What is Wireframing?
04:21 3Setting Wireframing Expectations
04:48 4Defining The Problem To Solve
05:08 5Sketching and Refining the Idea
33:14 6Overview of Sketch Software
09:13 7Create a Wireframe in Sketch
17:31 8Effectively Presenting Your Work
02:12Lesson Info
Overview of Sketch Software
cool. So what we're gonna wrap up here is reviewing critically. So a really important step of this process, which we've definitely touched on as we're working through this, is to stop and look at what you've created and make sure that the problems that you think you're selling for actually solved. When I first started, I would have this great list of all of these things that I should do. And then I would go and do the work. And I would never look at my list again. Please look at your lists. You made them for a reason. They're so good for you. So we talked through that. I don't think we need to really review it again. But the basic concept is Look at that question. Look at that list of your goals, your capabilities, and make sure that what you're proposing to do for your site is something that you actually can dio on. Then, of course, the next step is to bring that into sketch. So I don't know, uh, how familiar anyone is with sketch. I'm gonna be going back and forth for my computer her...
e and then looking at my notes. Uh, but This is what it looks like on the inside. It's a piece of software. Some of you might be a lot more familiar with. The Adobe Creative Suite sketch is a piece of software that's come out within the last last few years, and it is what I currently use at work and what a lot of designers are starting to use more and more. So I want to show you just kind of what the layout of the software is so that everything is clear. Essentially, here on the left side is your pages. So that's what you're looking at. You can, um, see any our board or any content that you have on this page. You can also go to another page. And this is where you guys might recall the examples I showed earlier in the class. Um, where those are boards are When I say our board, I'm referring Teoh this space here. So right, so what I was showing is here. We have a, um on our board selected its highlighted and the layers list. You can see that everything underneath it, it's kind of organized, like the folders on your computer, everything underneath it is what is on that page, so you can see that we have folders indicated by a folder icon. We have objects. This piece of test text has a sort of a symbol in the rectangle. Whatever. And then these arrows here indicate that something is a symbol. And a symbol is, I think, three. The Adobe creative suite definitely has their version of symbols, but it's a super awesome part of sketch that makes designing really, really easy. Um, we'll get into that a little bit more leader, Um, but to let's see, what else can I show you? So over here we have the Inspector Palin, and this is where you're doing all of your editing, basically, so you can see have your alignment palette. You have the positioning and size of your objects on doll different kinds of ways to edit it. If we choose a piece of text year. Oh, and that's another thing you could tell you about sketch. So if you hold down the command key something that's in a folder here, you can sort of ignore the bounds of the group or the folder and directly select that layer. So you see, when I click on my text layer here. We're getting ah, lot more that shows up in this Inspector Palin. It's always going to be offering you whatever tools you need for that type of object or what have you that you're working with? Okay, so I'm gonna go back. Teoh this page here, the wire frame page, um, can hit command to which sort of pulls up my selection to be, uh, life size. And I've started a little bit here. Um and I want Teoh show you guys a little bit of sketch before we actually start recreating our wire frame. Um, again, when taking your sketch into this sort of next level of fidelity or of detail, uh, we're still just going with basic shapes. Simple text does not really matter what typeface he choose. Just something that's legible on basic. And we're gonna be using a lot of gray and black, not super exciting design stuff. We just want to show the functionality and we just want to show what things are and Hubble work. So here I have a drop down selector, which is a symbol right now, so I'm going to click into that and to get into the symbol, you can double click. And this actually just takes you to the symbols page on. And you can see there's this return to instance button up here, which is gonna take you to whichever page you were just on. But what this does essentially is I designed this element here, this group of layers. So I have a piece of text drop down arrow in a rectangle Ah, sort of filler shape. And that group, any time I want to insert a drop down, I can do that in my file without having to recreate it. What it also means is, if I want to change, let's say maybe when I actually get into the visual design the color of this to be read, it's going to change it any time. I have that symbol used in my file. So I'm gonna undo that toe. Leave it. Um, the other great thing is that, uh, this is actually a pretty recent update to sketch, I believe, But here where, uh, it says, drop down. I can look at my inspector pellet, and there's this overrides, uh, palette within their and it says drop down because That's the name of uh, that's what the text is in my symbol. But when I want to actually use it in mine design, this drop down might be brunch and spell French correctly. Eso I read it in here and then when I click out of that, it updates here what this does. So let's let's do with our button to I'm gonna hold down Option and shift option is gonna duplicate the layer I'm holding onto and shift is gonna hold it into, uh, basically a perpendicular parallel orientation to the button to the object that I'm copying. But here, So let's say we have several buttons. This 10 this one's not a symbol. This is a great opportunity. Teach you guys how to make your groups into a symbol. So if you right click either on the object itself in the art board or if you right click in the layers lest on the group you can scroll will be down to the bottom of that menu and hit create symbol. What it does is accuse up. Um, this field Teoh name your symbol. I'm gonna leave minus but in because that's descriptive enough and we're not really gonna be doing much else since it's just a wire frame. But now that this is a symbol, you can see my overrides pallet comes up. And if I duplicated here, I can write, Let's say click here and I can change it again and I can write submit And it's not affecting my original symbol. But I've noticed Here, let me zoom in on this. You guys can see a little clear I've noticed here that, um when I wrote in a longer, uh, call to action. So a longer description of what this button is gonna dio it's not centered anymore in my, um, sort of rectangle. So if I double click, I can select this piece of text and change it from being left lying to centered, and it should update my, um, symbol to be exactly to be centered here. So instead of having to change that specific symbol to be different, um, I'm able to make changes like that that are gonna affect all of my buttons and make my design process faster and more efficient. So that's a little bit of an intro into sketch. If you guys have any questions on how the functionality works. Please definitely ask. What I'm going to do now is move into recreating our wire frame that we sketched out into this document and I will do my best to talk through, um, everything that I am doing. But any time that there's questions, let me know, because I want you guys to feel really, really confident in sketch after this class. Okay, so what I'm gonna do is I'm gonna start with the home page sketch that we did, and I'm really just taking what's here, and I'm pulling it into sketch. I always want to be critically thinking about the work that I'm doing. And if I do notice something here that doesn't seem right, I will update it. But really, this stage of the process is just adding polished to this in just creating it in a way that is easy for me to share with the other people that I'm working with and make it look a little bit more professional and, uh, easier for them to understand
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Ilana Ziff
This is a great class for true beginners. It covers the basics of wireframing and prototyping in an effective and succinct way. The instructor also shares some cool Sketch shortcuts! If you already know the fundamentals of wireframing and prototyping then this class may not be for you, although it does serve as a great reinforcement of prior knowledge.
Qiqi Xu
Alex is very clear and personable as an instructor. I really like the examples she provided in the class, as I personally learn well when content is explained with example (also true according to research on the science of learning). I thought the exercise could use more context. Overall, good start for UX beginners!
Yana Kornienko
The class was a great overview on wire framing and prototyping for beginners. Alexandra explained every step of the process really well. It is definitely a fun process.