Creating a Wireframe16:31 with Christopher Downer
Do some real designing in Sketch now that we know how to use the app, by bringing what we’ve learned together as we design two screens of an application’s interface.
Refer to the Sketch documentation to learn more about all the features we cover.
[SOUND] In this stage, we'll finally be doing some real designing and sketch. 0:00 Now we know how to use the app by bringing what we've learned together, 0:07 as we create these two screens of an application interface. 0:11 When designing this this fictional app, I'll also touch upon some more advanced 0:15 techniques and features that you may find useful when designing the rest of the app 0:19 when this course ends or in other future projects. 0:23 I'm sure you're all eager to begin, so let's get to it. 0:26 Here we have a new blank document and as we're going to be designing an iPhone app, 0:31 the first thing we want to do is create an Aart board. 0:36 So, I'll select Portrait Six from the art board 0:39 list after pressing A to enable the tool. 0:43 Now, I will add a rectangle for my background. 0:47 I'll press R to get the tool and I'll draw it from the top-left corner. 0:50 [BLANK_AUDIO] 0:55 Sketch will do this neat thing where it will snap the edges of my new layer to 1:02 the edges of the art board, so I don't have to worry about being too precise. 1:07 Right now, all new layers are drawn with a border. 1:11 And I don't want to add too many borders in my design, so I can disable this. 1:15 I'll uncheck the Border option and 1:19 then press the Delete button that appears in its header. 1:22 Once that's gone, I'll go to the Edit option 1:27 in the menu bar and press Set Style as Default. 1:31 Now all the shapes I'll draw will have this grey fill applied to them, but 1:36 I'm just gonna change this color of this one just now so it is slightly darker. 1:42 Something cool that comes included with Sketch are its templates and 1:47 we'll be using one for this project. 1:51 To open a template, click on File in the menu bar and 1:54 you'll see the second option in the list is New From Template. 1:58 If we hover over that, we can go on to select iOS UI Design from the submenu. 2:03 Templates are sketch files that you can use and select from this menu for 2:10 your projects like this one. 2:15 This iOS template contains typical elements you may be familiar with if 2:16 you are an iPhone user, recreated in separate layers and 2:21 groups to make designing an iPhone app easier and faster. 2:25 You may have noticed these groups and 2:29 this template have a purple folder icon, which shows us their symbols. 2:31 This means that if the same group is used elsewhere in your document and 2:36 you update it, all the instances of that symbol will update automatically. 2:40 Which is an awesome feature that can be a huge time saver when working with 2:45 larger documents. 2:50 So for the document I'll be working on, I'll copy and 2:52 paste over some of these layers I'll need. 2:55 I'll select this navigation bar and press Cmd+C to complete the layer. 2:58 If we switch out to the document we are working on, 3:04 I'll press Cmd+V to paste it to my art board. 3:08 It's pasted into the middle here, so let's move it to the top by dragging it. 3:12 [BLANK_AUDIO] 3:16 The red guides that appear insure us that the layer is lined up properly. 3:22 We also need a status bar and a tab bar, so let's grab them both from the template. 3:27 [BLANK_AUDIO] 3:34 Both these groups pasted into the document should be in the middle of the art board 3:53 and on top of the navigation bar in the layer list. 3:57 We want to position these appropriately too and 4:00 we can do this using the align tools that appear at the top of the inspector. 4:03 If I selected a tab bar group and press and you write my [INAUDIBLE] in this bar, 4:08 it will align the item to the bottom of the art board. 4:12 [BLANK_AUDIO] 4:15 For our status bar, we want to align it to the top. 4:18 So let's select it and press the icon that will do that. 4:23 [BLANK_AUDIO] 4:27 Now if there's some basic elements on the page, we'll want to style them. 4:30 So let's start from the top. 4:34 We don't need the back or the edit buttons in the application we'll be designing. 4:36 So let's select and delete them. 4:40 [BLANK_AUDIO] 4:42 For my title in the middle, I'll select the text and 4:50 press Enter to edit it and then type in Today. 4:56 I'll also change its color so it is white. 5:01 For the bars background, I'll select the layer and change its fill to black. 5:06 I'll also adjust it's capacity, so it's at 50% alpha. 5:13 The light line that you can see underneath is caused by a shadow, so 5:20 we need to change the color of this too. 5:25 Let's open the color popover and drag the color point, so it is black. 5:28 As for our tap bar, I'll hide this group just now as I won't need it until later. 5:34 Next, we'll need to draw a thin rectangle layer to act as the basis of our timeline. 5:41 So lets do that. 5:46 I'll zoom into my document, so 5:48 I'm at 400% and I'll draw 5:53 a line that's 1 pixel wide. 5:58 The height doesn't matter just now as we'll clean that up later. 6:03 I'll just adjust it's position in the inspector, so the x value is 40. 6:08 And I'll nudge the y value, so it sits just under the title bar layer. 6:16 If I zoom back out, I'll adjust its height using the inspector and I can tell you 6:22 this value is 602 pixels, so you don't have to work it out for yourself. 6:26 [BLANK_AUDIO] 6:31 I'll adjust the color, so it's not so 6:38 vibrant and I'll rename this layer timeline. 6:42 [SOUND] Once that's in place, 6:47 only to draw the first cell in this view. 6:50 So let's start with the icon in the timeline. 6:55 I'll press O for an oval and I'll hold down Shift when I draw it, so 6:57 I can ensure it's a perfect circle and I'll make it 32 by 32 pixels. 7:02 I'll just nudge this into position a little bit with my arrow keys and 7:08 I'll rename this too. 7:13 [SOUND] Let's add a text layer and 7:15 call it Woke Up. 7:21 [BLANK_AUDIO] 7:24 Make it white, change the weight to medium and 7:30 give it a size of 12, then drag into position. 7:35 I'll use the top of circle we drew as a guideline of where it should sit and 7:39 let its x position be about 75. 7:44 [BLANK_AUDIO] 7:46 The information for 7:51 this point in the timeline app is going to relate to your night's sleep. 7:52 We want some extra information for this marker, so let's add it. 7:57 With the layer we just added selected, create a duplicate by pressing Cmd+D. 8:01 With the duplicated layer hold Shift and 8:07 press the down arrow two times to move this layer by 20 pixels. 8:10 Do the same again for a third text layer. 8:14 The second line will be for our information, so let's edit this text so 8:21 it says, slept for seven hours and 27 minutes. 8:26 [BLANK_AUDIO] 8:29 Change the weight to regular and adjust the opacity of the layer to 70%, so 8:41 it looks a little different from the title. 8:46 [BLANK_AUDIO] 8:49 The third line will show the time the entry was logged. 8:54 So let's say that was 7:45. 8:57 [BLANK_AUDIO] 9:01 Then I'm going to draw a separator for the bottom of this cell, 9:08 as there will be others underneath. 9:12 I could just draw another line like I did for the timeline, but 9:15 I'm going to do something a little different. 9:18 I'll draw a box from the bottom of the title bar, where the left edge of the text 9:21 is indicated by the smart guide and I'll make it about 95 pixels high. 9:26 [BLANK_AUDIO] 9:30 With that done, I'll disable the fill and add an inner shadow. 9:44 [BLANK_AUDIO] 9:48 I'll make the y value minus 1 and 9:51 the blur value 0. 9:57 I'll change the shadows opacity by the color pop over to about 20 to make it 10:00 less prominent. 10:05 [BLANK_AUDIO] 10:06 Now looking at what we've just done, you can see this is looking pretty good, but 10:13 my layer list is a bit of a mess. 10:18 So let me group some of these layers. 10:20 I can select multiple layers in the list by pressing Cmd when I click them. 10:23 And once the rectangle, oval and three text layers are all selected, 10:27 I'll group them using the toolbar icon. 10:31 [BLANK_AUDIO] 10:33 Then I'll change it's name to woke up to match the text. 10:39 Before we duplicate this group, I'll create some textiles 10:47 out of the two different text layers in this group. 10:52 I'll select the woke up text layer and 10:56 in the inspector click no text style. 11:00 You can see that this list is already populated, 11:04 because of the text style set were in some of the groups we had imported. 11:07 But for now, we want to create a new one. 11:12 We'll call it Cell Title. 11:16 Do the same for the next layer and call it Cell Subtitle. 11:23 [BLANK_AUDIO] 11:26 As for the third text layer, the time, this has the same style as a title. 11:36 So from the list, let's apply the Cell Title style to it. 11:41 [BLANK_AUDIO] 11:45 Nothing has changed to this layer yet, but 11:50 you'll soon see the results of this action. 11:53 Now let's duplicate this group and move it below the original. 11:56 [BLANK_AUDIO] 11:59 When the red guide appears, we know it's in the right place. 12:05 And that's why I drew the rectangle and 12:09 removed its film to help the positioning, so I can get its spacing exact. 12:11 The next thing I want to log is my food intake and 12:16 that will be my breakfast in this example. 12:19 So let's fill out some dummy data. 12:22 [BLANK_AUDIO] 12:24 I'll then duplicate this group again, move it and add some data about my bike ride. 12:53 [BLANK_AUDIO] 12:57 After I've updated my subtext, I want to add in a rectangle that will act as 13:20 a placeholder for a map, so I can view my route. 13:25 I'll zoom in and use the log time to get the positioning right and I'll make it so 13:28 it is 160 pixels high. 13:33 [BLANK_AUDIO] 13:35 I'll drag the rectangle into the group, but this overlaps my time and 13:47 the cell separator. 13:52 Because we know this is a 160 pixels high, 13:53 we will just move the other elements to account for the extra pixels. 13:56 [BLANK_AUDIO] 13:59 I'll select my times y value and at the end of this, 14:02 I'll hit plus 172, which is the height of the box and 14:07 text combined and hit Enter. 14:13 This will move the layer below the rectangle and 14:16 then we'll add 172 onto the height of the cell rectangle the same way. 14:19 [BLANK_AUDIO] 14:24 And let's not forget to rename our group. 14:31 [BLANK_AUDIO] 14:34 For the last cell, we'll zoom back out and duplicate the Woke Up group and 14:43 drag it into place. 14:48 [BLANK_AUDIO] 14:49 This will contain data about my check in. 14:58 [BLANK_AUDIO] 15:00 Feel free to pause this part of the video to ensure your screen has 15:23 duplicated cells and there is no repeating data. 15:28 If we just take a look at what we've done here for a minute, 15:31 we can see that we've got a quite nice, low fidelity mock up of our app. 15:34 That really gives us a sense of what it will look like. 15:38 The only other main component that's missing is the tap bar, 15:41 which we've hidden. 15:44 So let's enable it and move it to the top of our layer list. 15:46 We can hold down Option and press the to front option in the toolbar, 15:52 which replaces forward when the key is pressed. 15:57 We don't want this opt bar to be white, so 16:01 let's make it black with the 50% of opacity and change the shadow's color too. 16:04 [BLANK_AUDIO] 16:10 In the next video, we'll be styling the elements we've created as well as drawing 16:24 some icons to use in the app. 16:29
You need to sign up for Treehouse in order to download course files.Sign up