2.1 Familiarizing Ourselves With the Wireframe
In this first lesson, we’ll be taking a look at developing the wireframe’s aesthetics, whilst also starting to create the icons.
1.Introduction1 lesson, 00:38
2.The Design Process4 lessons, 1:07:57
2.1 Familiarizing Ourselves With the Wireframe
[MUSIC] Hello guys and welcome to another livestream. My name is Daniel White, some of you guys know me as Danske, I'm an instructor with envatotuts+ and in this live stream, we're going to be jumping into Sketch, and we're going to be doing a mobile app design. So super, super excited, and awesome to be back. So hello to everyone in the chat, if you have any questions, please do drop them down in the chat, as we go through the stream, and I'll try and answer as many as I can as we go through it. So this is gonna be super, super cool. In this stream, what we're gonna do is we're going to be creating a UI design for a fictional list app and we're going to be doing it all within Sketch. So super cool. And you can see an example of what we're going to be creating on screen now. So on the right hand side we have the very bland and very boring wire frame which is going to be our starting point. And as we go through the stream we're going to transform this into a nice slick UI and that's the design you can see on the left. And as I say this is free, fictional list app. You know those apps where you can kind of create lists and to do things. And then you kind of, the things you never actually end up doing, if you're like me anyway. So, that's what we're going to be doing and essentially we're going to try make the design for this user/client proof. So it's going to be all transparency based like you can see here. And then we can just lay some different images in the background. So the user, if they wanted to, could change their image. So what I'm gonna do start with is just move this one all way over here so we've got it as a reference. But, we're gonna focus on this one. So why might you want to wireframe something like this? Well, if you have an app or a site and you've got lots of different screens It can get very complicated. And if you jump straight in to creating the UI design, it's very easy to kind of miss some of the essential steps in creating a great product. Which is actually making sure that it works okay, and that the core concept that you put together when you link everything up, all the screens actually works and is easy to use. So that's really why it's great to come start with wireframes and then turn it into a prototype. It's something that you can get into the hands of clients, users, stakeholders, even yourself. And you can use the mirror option up here, so you can connect this to a phone or a tablet, and you can actually preview this and kind of get a real feel for how it is to use. And then once the app itself, functionally, is working great, then you can start applying all the nice designey bits on top. Designey bit, there we go. That's a technical term. [LAUGH] Adding the polish, you know what I mean. Okay so we're gonna start as I say with the Wireframe, and what I've done is created this using a bunch of different grays so you can see these, over here I've added these swatches, lots of different grays. We've got dark almost black as a color, we have a few different shades of gray, and then a light gray, almost white. Now, even at this stage, what we can do with these different shades of color is we can use them to create some visual hierarchy. So you can see here that we've got a set color for the text and we've got the color here, sort of a middle gray for the icons. And then we've got the delete option here. So when you swipe out from the right side this will reveal a delete option with an x. So we can establish kind of a sense of hierarchy, priority in terms of what's more important. So here the list item one is a darker color than the category that it belongs to underneath, so that is more important bit of information when someone is on this screen of the app. Now, even though we are wireframing, that is going to translate through into the final design once we start adding color, but it's good to have that set in place now. And the icons, I've just very quickly drawn these, and this is the great thing about wireframing, you can just quickly Use the vector tool and the shape tool here to just quickly and easily throw these shapes together just into the wireframe, and we're going to design all of these really nicely as well. Okay, enough waffling on about wireframes, lets just jump into it. So, as I said I got the wireframe to start with and I select the art board, and go to edit and duplicate and it creates a copy. We've got all the assets here created in Sketch, so there's no point starting again, unless you really, really want to. And the first thing that I'm going to do is just look at the text. Now at the moment, we're just using Arial which is fine. Arial's okay, it's a sans-serif font, pretty easy to read across most devices and at lots of different sizes. We could do something a bit better though. So we got lots of different fonts to choose from, and when you're selecting your font it's always worth considering legibility on different devices. So when you're on a smaller kind of iPhone 5S, for example, or a 7 Plus, or an Android phone or whatever kind of phone you're on and you need to consider how legible the text is going to be. Now I'm a big fan of the font lLtto and it's a great web font and it comes in lots of different weights as well. So you have your italics, your lights, your bolds so a lot of variety. So I think what we're going to do is go with something like that for this so we've gone with Lotto and the size is 16. Could adjust the weight, make this bold so we'll try that and we're just going to apply this. To these other ones and Sketch nicely remembers your favorite fonts. As you can see I've used Lotto, so it's kind of listed at the top so you can really quickly access it. So we'll bold these up. Now we're going to make these Lotto as well. Unless there's a real need to kind of pick another font, it's usually pretty good to try to keep the fonts within a screen design to a minimum. It just makes everything look a lot cleaner within that space. So we could try these as italic. I think I'll keep them regular for now. What we can do as we sort of go through this and evolve the design, we can always come back and revisit this. Because the design process is never a straight line. It's all wibbly-wobbly. It goes in all different directions but that's part of the fun of creativity. Okay, so this circle over here represents the number of comments on a list item. So if you were to add a note or a comment or you were to share it with someone else they could add a comment. And I've just represented this with this oval shape. We'll turn that into a speech bubble later on, but as I created this font over here, I can just drag this holding alt and just double-click. And we'll type zero for now. And just bring this in and I'm gonna center this as well. So I could line these up with this here to keep order line or maybe the top line. But as I bring that over the right, yeah, you can see it. Just it could work like that but I think it just makes a lot more sense to keep it vertically aligned. They just aligns with the shape here as well when this slides out. And then the tick box over here as well, you can see around the left, top and bottom edge you've got a nice, consistent margin around this tick box. So it just keeps it quite organized having it in the center. So what I can do is then just go and cut these. And just hold shift and select both the number and the icon here, hold alt and drag. And you can see it's moved that number behind there. So what we can do, is I'll just undo that. So you got your layers over here on the left, so when you do have an icon you can see here the oval and the number are very far apart so we an just drag this up. So there now paired together and then we drag now this will sit on top. And we can use the arrow keys just to nudge this in place. And then hold alt, shift, and left click and drag down, and when you hold alt and drag anything in Sketch it will create a copy. So really, really handy to know, and when you hold shift as well it will keep that copy that you're dragging straight, either horizontally or vertically. So super, super handy. Okay, so we've added a few fonts there. We can go up here and do the same. So we'll go Lotto. And then for the list. This is in a group, so I'm just gonna go and ungroup this one first. And then I can select the text and change this to Lotto. And we'll keep it like this for now but as I said, we can evolve this as we go through it. Now these icons, they're very crudely done. Very quick. So I'm just gonna remove these boxes for now. And I'm gonna start styling the containers here as well. So these are the containers that house each list item, and what we can do is we can select one of these boxes and you have the radius in the property inspector on the right and we can adjust this slider and it will quickly round off those corners. So you can really get a real time preview of how it's going to look. Or we can type in a value and press return. So if we zoom in on this corner you can see that it just rounded those off by four pixels, so very, very subtle. And we can do the same again on this x here as well. So the x here is intended, that a user on a mobile device could swipe out from the right side, and it brings up the x so they then click, and it deletes the list item. But we're going to need to round off the corners here as well. So we can select this large gray container and well, we don't want to round off all of the corners, just the two on the right-hand side. So what we can do is double-click on the gray square and we can then select individual points. Now, we can left-click and hold shift and select these two right-hand points. And again, with those selected, we get that same corner option that we can use to round them off in real time, or we can just go over here, type in a value. So four for consistency and press return, and it will round off just those two corners, and you can see it now matches what we have underneath. Cool, so we've round of those corners. What we can do now, is do this again for these two down here. So just select them both holding shift and then just change the radius to four. So as you style one element it makes it very quick and easy just to quickly select other elements and apply that same styling. And we can do this for the search bar as well. So we set that to four and press return. And what I'm going to do is actually just move these icons out of the way. So these are very similar to the ones that we will be drawing, but we're gonna do them from scratch in a moment. So those are now kind of in the outside workspace, they're not actually on any particular art board. And we've got a triangle here as well. This is a drop-drown, so the user can change to a different list. We'll move that out of the way as well. And we'll keep these here for now. And we've got a tick here as well. Right, so let's start drawing some of these. And there's no set way how you might choose to work through your app design. For me personally, I approach every project differently, as you can see here. I started doing a bit of typography, and then very quickly moved into let's draw some icons. And I'm sure we'll get to having color at some point, as well. So if we select the vector tool and the first thing we're going to do is draw the tick so it allows a user to add a tick to an item and then they get some options that they can do with that. So with the vector tool what we can do is just left click and hold shift and it will keep that line at a 45 degree angle. And we can left click again. I'm still holding shift, and left click again. And you can see, it wants to continue that line but we can just press escape, and it will then stop that continuation, and we now have a tick. And we can move this around. Again, we can double click the tick and click individual points and hold shift. No that doesn't want to work. But we can drag this back down. So you can see, it wants to continue that again. There we go. I was kind of hoping that holding shift would let me move that down and adjust the size but it doesn't want to. But that's fine. We drew it in the right way anyway. Another way around that actually is to draw your tick like this. So draw it horizontally and then you can freely adjust this. So what we could actually do, another way around that is to just rotate the shape so it's on a horizontal, and then we can double click. And it's much easier to adjust that. So there's always a way around everything. And then we can just rotate that holding shift to make sure it snaps to those 45 degree increments. And we can just shorten than and then push it back into place. And we can, of course, hold shift and scale up or down as we need to for all of the corners as well. Now, I think I'm probably just going to. Shorten that left bit as well. So let's just rotate this. Double click to go inside. Select this point, hold shift, and bring it down. And remember escape to cancel that selection, and hold shift and rotate from the corner using the rotate tool at the top here. Okay, so we've just shortened that a little bit and we can scale this down again. And we can actually go to the borders panel over here on the right and we can adjust the thickness, so we can set this to two.Back to the top