In this video, Emmanuel Henri creates the first artboard that is used as a background and symbol throughout the rest of the designs.
- [Narrator] So now we are ready to start building our purchase flow designs. First, we'll start by creating a background we'll reuse across all our art boards, and set it as a symbol. Let's get to it. So the first thing I want to do, is create a new page, so you click on the plus here to add a new page. And we'll call this one "designs". And create a new hard board. So you type "a" to create a new hard board, and let's make sure we go inside of the Apple devices. And let's select the iPhone 7.
Perfect, so what we want to do now, is to call this one "background", because we'll reuse it as a symbol. So once we have it done, we'll create a symbol from it. And what is a symbol? If you haven't done any symbols before, or if you haven't followed any Sketch courses in the past, basically a symbol is something you can reuse across multiple designs. And once you need to change one item and the symbol, it will change it across all the other designs. So this is very good when you want to create a button that you will use across different designs.
And then you just want to change a color to see how it's going to impact the entire application. So for this case, we'll create a background that will be reused across all the other screens. And therefore if we change something in the background, we want to make sure we replicate that change across all the views. So let's go ahead and do that. The first thing I want to do is create a rectangle, so "r". And we'll fill the actual screen with that rectangle, like so. And we'll change the background to an image.
So we select the fill, and then select background. And then choose the image that we want to fill it with. So go inside of the exercise files, resources, and then click on background. And the one I really like on this one is the surfer, this one here, like so. Perfect. So the next thing I want to do is create a background that will go over this one, to kind of make it darker and allow us to add things on top of it. So let's go ahead and create a second rectangle, hitting "r".
And then filling the screen like so. And what we'll want to do, is do a fill like so. And do a fill that will go across the screen like so. So I selected basically the second one, this is a gradient that we'll do. And then for the colors, we'll select black here. Completely select black like so. And then make sure that you go at 50% here.
Okay, perfect. And then for the opacity, put it at 80%, like so. So once you click on the fill, you should see this ... Okay, so I just created a second fill, so let's put that in the trash. Let's just remove this. Now, create a third one. All right, so the first thing you want to do is unhide this, and then trash them. So if you create by mistake any other fields then do it that way.
All right, so the next thing I want to do is drop the actual logo, the company at the top. So let's go ahead and insert an image. So you can literally drag and drop inside of Sketch to enter any new images. So let's go ahead and click on the exercise files. And while we're here, we'll also drag and drop the cart that we'll use as well. So let's go ahead and do that. The first one is the H Plus simple logo, that I want to drag and drop, and then we'll just resize accordingly, 'cause this is ...
I don't think you want that logo this big. And let's drag and drop, also, the cart icon. And then what we'll do, we'll do exactly the positions by using the position numbers here, and the size as well. So for the logo itself, click on it, and the positions that I want is 136 by 35. And I'm doing very specific things because I've designed this before, and I want to make sure that it looks good when you also design it.
But feel free to go ahead and pause the video and play around, do it the way you want. So in terms of size, I want 103 by 103. And this is perfectly positioned in the middle. And you could have just resized it and just played around like this. You would see that it's now positioned properly. So for the cart, we'll do basically the same thing. So we want to do 276 in terms of the position, by 61. And then the size itself, I want to do 60 by 51.
Again, feel free to play around if you'd like. These are the positions that I've built for this particular item here. So the next thing we want to do is create the login or the user ... And let me just resize this full screen. Because now we don't need to drag anything for the time being. And let's make sure that we also add a login oval here. So let me create an oval, by tapping on "o". And just using shift, creating something of the same size.
I want something by 60 by 60, like so. Release, and then let's position it right away. So I want this to be positioned at 34 by 57. So this will be filled with an image that we can get. And these are royalty-free images by the way, that we can use from Craft. So this is a tool, and if you're not familiar with Craft, I actually have a course on it, which you can take, and get a little bit more information as to what these things are here.
But I'm not going to go through them on this course. So I want to do custom photos. And then use unsplash, and then in the unsplash, I want to use something like a portrait. And unplace photos. And then it's going to insert a photo in the user here. If you don't like it, you can do that again, and do it as long as you want, until you get the right picture. So the one thing I don't want to have is a border. And what I want to do is a shadow.
So let's go ahead and do a shadow because all the other items in this particular application will have some type of shadow. So let's go ahead and do that. And when I do shadows, I usually like to make it very small, very discreet. So I do a 1 on the y, and then the blur I do a 1. And we need to ... Let me just undo that, and delete it. So this one is good, and let's do also the logo, the same thing.
We'll add a shadow on the logo, do a 1 on the y, and then the blur a 1. We're good, okay. And let's do one last one for the cart itself. So the last thing we need to do, is to add a little line in the back here. So you add a line by tapping on "l". And let's just do a simple line, and then we'll readjust the line accordingly. I want the line to be at 107.5. And these are very precise because I've done this beforehand.
But feel free to change this as you please. The width is actually the right width, and let's go ahead and do 87 like so. Perfect, and we want the line to be white. And I want the thickness to be a 2. And we don't want to be over the logo, but behind. So the way you do this, you drag and drop where you want it. So we want it behind the logo. Okay, so now we've got this background on, but we want to create it as a symbol.
So let's group all this. So I'm selecting all the items that I want to group, and then I do command "g". And I'm going to call this "background". Lower cap "b" by the way, and I'll explain a little bit later when we start reorganizing our project for exportation. But you need to basically do it a lower cap. And then create symbol from this, and yeah we want to create a symbol called "background." Okay, so that's pretty much it.
So now we've got our main background and symbol, so we can reuse it across multiple hard boards.
- Getting visual inspiration for your project
- Researching a user-friendly purchase flow
- Creating initial mockups
- Adding an initial background with symbols
- Creating the shipping view
- Creating the payment view with credit card fields
- Creating the order success view
- Labeling and organizing artboards to make them ready for exporting