Learn about how to use the device libraries to create device-specific designs.
- Creating low fidelity click-throughs and medium-fidelity comps is great, but eventually, you will have to provide the context for the screen. By that I mean, using Android interface elements to say hey look, this is an Android screen, and iOS elements to say this is an iPhone or an iPad. Proto not only contains those elements, but also gives you the opportunity to edit them and to make them interactive, and that's what we're going to look at. To get started, create a blank smartphone document in Proto, and after you click Create and you come into the editor, drag the splash.png and main.png images from your exercise folder to the Assets area.
So I'm just going to open up my Finder here, there they are, just going to drag them in. And now come on over to your screen area. We're going to name Screen 1, Splash, and we're going to create a new screen called Main. With the Splash screen selected, just double-click on your Splash image to add it. Select the Main Screen, double-click the Main, and we're ready to go. So we'll come back to the Splash screen to start. We're going to need to add a status bar to indicate this is indeed an iPhone.
So come on over here to the Library, choose iOS 9 from the pop-down here, you can see that you've all the device libraries. We're going to use iOS 9. And then through the Toolbars, you're going to find Statusbar, and if you just double-click it, it is added to the screen. Now if you can't find a component you're looking for-- I'm just going to close the properties here, you can come up into the Search area and just type in the term, status, and you notice it shows you all the status bars that are available to you.
Okay, I'm going to select the status bar and open up the Properties. Now the first thing you're going to notice is that there are two color chips, one for the background, one for the foreground. These will allow you to change the color of the background and the foreground color. The foreground is the text and the icons and the background of course is that black. So if I want to change the background to say, a gray, I'm going to click the color chip, select that gray, and you can see it's immediately done, and I can click Done. I can also affect the opacity of the status bar, just by pushing it back here in the opacity area.
So you got a lot choice available to you here. I'm going to click Cancel. Now the foreground, if you want, you can change the color of any of the foreground elements. You can see, I just click the red there and it was done. So you have a lot of flexibility here to work with the components. Okay, I'm going to cancel that. Now we've got these status bars sitting on the Splash page, but we're going to have to add it to the Main. So we can just select Copy, I'm just going to right-click on the status bar, I'm going to click Copy, select Main, and just paste, command or control-v, and it goes right into place.
I'm going to close the properties and we're going to stay in the Main now. Now what I want to do here is I want to add a Nav bar that's got icons, so I'm going to turn off the status here, I'm just going to clear it off, and trying to find a Nav bar with icons and there it is. And again, to add it, you just double-click, it's added, and you can just pull it down to where you want it to be. So I'm just going to move it right under the status bar, right there, and let's take a look at its properties.
Right off the bat, you'll notice things are a bit different. First off, you can turn off any of the buttons in the content area. You can also change the background color of the component, and even change the color and placement of the Nav bar's border. So if you want to not have a title in here, you can just turn it off. I can change the background, if I want it to be say, a blue. See, you can do that. Cancel that. And I can even come in and change the border if I want, if I want to make it thicker or whatever, and the location of the bar, I can just say, look, give me a black line underneath and let's make it thicker.
So we'll just--let's go four pixels so you can see what I'm talking about here, and there's that four pixel border. And I'm just going to put it back to one, and I'm going to change the color back to that light gray it was using, there we go. Going to cancel that. You can also change the color and size of the font. And by the way, I want you to pay attention to one thing here, right here at the font. You'll notice that the font follows the iOS standard, which is the San Francisco font, and the same goes for the buttons on the bar.
Let's scroll down to the next category, and you'll notice the left button contains text and an icon. In any component, regardless of operating system, if you see this, you can not only change the text, but also change the icon. In this case, let's change the back icon to a YouTube icon. To do that, click the pop-down right here for the icon, and we'll search for YouTube, and there's the YouTube.
Double-click and it changes. And we'll change it to YouTube red, which we can just take this scroll bar right up here, change it to that color, the FF 00 00, click Save, and you notice that YouTube is red. If you want to add an icon to the Done button, which is down here, you can select Text & Icon for the right button, which is where it is, and we can add an icon, so if we want to make this say Search, I can just type in the term Search, there it is, and I can change the text to Search.
What this tells you is that it opens up a whole world of possibility when constructing your user interfaces and prototypes. As you have seen, you are not limited to simply using the components handed to you. You can customize the components, add color to the backgrounds, or even change the color of the icons. Best of all, any component used in an iOS, Android, or any other project, can be customized to the needs of your project, and finally they add that all-important context when building your high fidelity prototypes.
- Using design patterns
- Using grids and columns
- Using the Proto.io player
- Using the Proto.io smartphone app
- Working with screens
- Using components
- Creating artwork
- Creating and using containers
- Creating animation
- Publishing your prototype