Learn how to add and edit iOS components found in the UXPin library.
- [Instructor] With the wire frames constructed, you can now turn your attention to creating the medium fidelity, the wire frame or the medium fidelity prototype. And that's where you start really adding stuff to it, and, in this case, what we're going to do is use the library to start building out the UI elements. So to get yourself started, open up your dashboard, and open up your wire frame project, and when it opens up, we're going to go to work, and the first thing I want to do is just change the background color of the canvas, so, we're going to come over here to the properties, and we're going to change the canvas color to black.
And that is 000000. There we go. There's black. Okay, so everything's done. So, where are the UI elements? Well, they're in the library, and if you click on featured and get the pop-down, you can see that we're using an iPhone 6 example here, so let's open up the UI elements for the iPhone 6. And if you scroll through, you'll see there are a ton of them here. So, let's add our UI elements.
Now, the first thing I want to do is add the status bar, and I'm just going to scroll over here, 'cause we got a problem with the status bar. If you go through the UI elements for iPhone 6 there is no status bar. So, here we're going to show you a quick way of doing that. So we got a couple of UI elements here that are black, and if I scroll down, you can see there's the iTunes store, so I select it, and I pull it over, and I'm looking for just this little area up here, so I'm going to show you how to get it. What you do is you just click, click, okay, so you've selected it by double-clicking on it, we're going to copy it to the clipboard, Command+C or Control+C, and then we're just going to delete this whole thing...
And paste. And you can see, there it is there. So we're going to replace the status bar in the wire frame with an actual iOS status bar. And there we go. Now, we need a nav bar, so we're just going to come into the components here... And we're going to choose the nav bar seven, and if I select it, you can see, there's the text, and... You can add this right in and you can, again, work with it, just by simply double-clicking on it, and you can change the color of this thing, you can change the text, you can do anything you want.
So what we're going to do is we're going to take the color of this nav bar, and we're going to change it to 000000, black. We're going to get the text here, and we're just going to change the text, but we're going to change it to white, so we'll just click on the color chip and come up here, change it to white, and we'll move the component into place, so we just select the nav bar here, press the delete key, it's gone, and we can drop this into place.
Now, if it's a little bit too large, that's fine. You can just make it a little bit smaller and fit it in there. Remember, this is a prototype, so we're not looking for total precision. Okay, we also need an app bar at the bottom, so we're just going to get rid of all this stuff at the bottom for the app bar, and we're going to come up to the top of the components, where there's an app bar, and... These app bars have numbers, and the reason they have numbers, is there are icons in there, so, this app bar has four icons, that's kind of what we wanted for our design, so we just click it, there it is...
Double-click to select the background, and we'll fill it with black, so we can just click on the color chip and bring it in, and then we can just drop that into place as well. So there you go. There's adding UI components. There's all kinds of them in here if you need one. They're fully editable, so you can amend them or change them to your way of working, and I also showed you that little teacher trick where I needed this status bar and we brought it in from another of the iPhone 6 components.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus