Adding content - UXPin Tutorial

- In this exercise, I'm going to walk through the preparation of a high-fidelity prototype. Now a high-fidelity prototype uses all of the actual assets just to show their placement in where they belong. You can also add interactivity motion and stuff like that, but for the purposes of this exercise, let's take a look up what we've created on the screen. Now if you want to follow along, all of the images can be found in the HiFi folder in your chapter download. Now this project started by selecting an iPhone Xs and setting the background to black. And once that was in place, I drew a box and filled it with an image. So I'll just select that and there's the image fill and I just said, look, contain the image in the box. And then what I did was I actually took down the opacity of this whole thing just so the black background, which show through and take down a lot of the brightness that was in the image. Next up, I needed to add a status bar. So I opened up the design system for iOS and there's a white X status bar there. So I just added that right at the top. And then I needed some texts. So I threw in Explorer, Barcelona and of course we need to go back. So I threw a back icon in there. Now icons are real easy to get to. Basically all you do is you just select icon one click, it gives you an icon. And I'm just going to make this one bigger so you can see what I'm talking about here. And I said, look, I need a back icon. So I found this arrow, which I kind of like. And just basically change the fill to white. So that's how I did that. The next thing I wanted to do was give the user an opportunity to actually figure out where to go. So I gave him a little box. Now I used this tool here, the box tool, which is kind of sneaky because what it has inside of it is the ability to add text. So if you add a box, so I'll just throw one up here and you double click inside there's a text cursor and if I type in, this is text, you can see there's the text. Now the other cool thing about working with these boxes is that I can add some padding. So I said I wanted to pull it a little bit off to the side here so I add some right paddings. So we'll just give it to say 40 pixels of right padding. And the text will move over. So that's how I did the box. So you can see right there, there's the padding, 40 pixels of left padding, moved it over 40 pixels inside the box, and then I just found a search icon, threw it in there and sized it. Next I need a couple of cards. So I'm going to show you how I did that. Essentially all I did was I headed over to the material design system. And found that card with the full image, there it is, right there and just added it. Now these things are fully editable. So what I did was I put the image in, out of the text took out button. So let me show you how I did that with the cafe. So with cafe, all I did was I just opened it up and the first thing I wanted to do is get rid of those two buttons cause I don't need them. So I just select them and delete them. They're gone. Now I want to add the cafe image, so I'll just select the image, image fill, there's the cafe open and there we go. Now one of the things that I didn't like about it was the way the overlay worked. So basically I just opened up the overlay, went to the gradient fill and the really great thing is, if you can move these things, you can see that you can get a little bit of contrast to just move it around so you get some contrast on the text. And also if you want, you can actually take it down in opacity. So if I want to take it down to say 80% opacity, I can do that. And of course I added a bit of a drop shadow to the card. Next up of course was the headline. So I just opened up texts, selected headline four click click to select it and just typed in cafes. And then for body two, hundreds of them in Barcelona. So I just selected that box and pulled it out and got the texts to work. And what I have now is my HiFi. So of course the next question is, well what's it look like? Well that's great. Now we'll show you a little feature that comes with this application, which I think is pretty cool. It's preview with a device frame. So if I selected down on the bottom here, I can choose, which color I want to use. So I'm going to use space gray. So I'm going to take an iPhone Xs space gray frame and throw it around the preview. So if I go to the preview, it builds it and there it is inside the iPhone Xs. Which I think is a pretty cool little feature because basically what it does is it allows you to present your prototype in context. And when I say context, in the context of the device, it's going to be used in. And if there are problems with it, then you can quickly identify them in the device and make your changes from there. So there you go, there's creating a HiFi prototype inside of UX pin. As you can see, I used a number of assets that I created. And also a number of the items that are in the design systems plus icons.