In this video Emmanuel Henri demonstrates how to quickly build a simple screen with the UXPin design tools when one need to add new things.
- [Instructor] Let's get started on building our main screen. Again, this is purely as an exercise for developers to understand the process that will lead to the design systems and other assets you'll leverage in your development. So the first thing we're going to do is start building up this main screen here. So the first thing I'm going to do is kind of change the background for the main page here. So let's go ahead and do that, and you can do that by going to the properties and then image fill. And then what we'll do is go into the exercise files, click on resources, then on the background, select the background that you want. In this case, I'm going to select this guy here. And then the image fill is going to fill my screen of my main page. Now let's go and change the name of this guy and then what we'll do is leverage the box here and basically put this box across our screen so we can create a black over the image so we can basically focus on the items that are going to be on top, so I'm going to select a fill, make it black, and then drop the opacity a little bit, around 50 to 40%. Decide what works for you. All right, now that we have this, we're going to add the logo. So what I'm going to start using is the items on the left here, so I'm going to use an image and then go back to the resources and then scroll into the resources and grab that logo. And then I'll resize this guy roughly around that number and then position him in the middle like that. And if you want, you can use the values on the left here to be even more precise on this case. If you want to be at 50 in the Y-axis, you can actually do that on the right here. You can also change the width and the height in the properties and a lot more options, as you can see. So the next thing we're going to do is add some text. So let's go and do that, so click on text, and then we're going to add some text to this guy, so let's do something like 40% specials on all items. And then you can change in the properties, the typography, color, so let's make this white, like so. And then let's change this to something else, so I would like to do Lato, so in all you have Lato, which is a much better font, in my opinion, and then if you want to make this bigger, you can select a bigger font. And then position this guy where you'd like it to be. So if you want to make sure that it's position center, you can basically resize the box of the text and do that. One other thing that you can do, if you want, is to leverage some of the tools on the right here. So if you want to align this item in center, so let's say, for example, it was here. You can click on this and it will align to the center. If you want to align it also in the middle, you can do that. Top, bottom, left, and right. So let's do middle like that and then let's do middle like that, then I'm just going to reposition it like so. Slightly higher. All right, so now let's use a square to make kind of the first card of our store, so let's go ahead and do that, so let's use a rectangle for that. Let's position him like so. Drag the rectangle. Maybe make it slightly smaller, like so. And then what I would like to do is add some radius on the corners, so I like to have some rounded corners on this guy, so let's do something like five, and that looks pretty good. So let's see, even increase it to 10, if we'd like to. That's better, and you can also select which corners that you want. So if you want to have which corners will have the exact number, you can actually change that, but I'm not going to do that, so I'm going to keep it at 10 across the board and you have the first card. So what I'd like to do now is create a duplicate layer, so let's bring up our layers and let's close our pages for now, and we have this box here that I'd like to duplicate to create a second card that will kind of fade into the right of that screen. And let's go and click on that box and then click on duplicate and you can use the shortcut, Control + D. And now you have a second card, and then what I can do is position this guy like so, maybe make it around 20, like so, and then this guy will be in the background of that preview. So if we click on preview, this is how our prototype looks like at the moment. And you can make it full page, if you want, and as we add interactions, we're going to see those interactions in real time. All right, so let's close this, so now we have sort of a first build of our main screen here. We'll continue working on this in the next video.
- Starting a project
- Building assets
- Playing with interactions
- Creating a design system
- Exploring dev specs and styles
- Creating new iterations