Learn how to add screens and and using the screens navigator.
- [Instructor] In this chapter, we start dealing with the heart and soul of any project, a screen. Now, before we dig in, there are a couple of things you need to know. First off, you can't mix and match screens in the project. This means, if you need a device and a tablet layout in the same project, it can't be done. What you can do is change the orientation of the screens, meaning you can have portrait and landscape versions in the same project, but you can't have different devices. And we'll get into that in a minute. But first, let's be clear. All UX UI design projects start with a pencil or a pen, and paper.
Now I'm just going to show you how I started the Southampton project. Right here, this is in my sketchbook, and the cool thing about working with pencil and paper is you can just quickly sketch out how you see it happening. If it doesn't work, crumple it up, start over again. In this chapter, we are going to use these sketches to see how screens flow, and whether the ordering makes sense. Then we are going to build a lo-fi wireframe from those sketches, and from the lo-fi, we're going to take it to a medium-fi click-through, or a medium fidelity click-through.
As you've seen earlier, these lo-fi wireframes can then be sent out for comments and even user testing, if you have the budget. The great thing here is, these things are disposable. Pages can be removed, re-ordered, redesigned, or elements can be added or subtracted. The time spent doing this can be measured in minutes, not hours, which is why the process is both iterative and rapid, so let's get started. And to get started, what we're going to do is we're just going to open up our proto.io dashboard here, and we're going to create a new project.
So we're just going to click New Project, we're going to make it a smartphone, and this time, let's go with Android. So we'll just, Android mobile, and we'll click Create. And once you have created your screen, you'll notice that the editor opens. So what we have here is a blank Android screen set up for Android. Your screen is listed over here in the Screens area, and you can see the screen name and dimensions above the canvas. What you are looking at in the Screen panel is a list view.
Click this icon, and you can change it to the thumbnail view. Now, I like this feature, because as pages get added to the project, you can actually see which is which. So let's add a screen by clicking the New Screen button. And we're going to name this one Screen2, and we'll keep it at portrait. Now, up here in the Tools panel is a Screens button. If you click it, the Screens navigator opens, and shows you all of the screens in the project. If you click a screen, it will open.
Now, a couple of things down here that you might be interested in. If you don't like this, you can change the theme to dark, so you get a little bit more contrast. You can make the screens bigger or smaller by moving this across, or you can even select the screens and export PNGs. To open a screen, we're just going to go to Screen1, click it, boom, there we go. And we're back in the Screens panel. Now, obviously, screens named Screen1 and Screen2 don't tell you much. So let's swing over to the List view, and we'll change Screen1 to splash, and we'll change the name of Screen2 to main.
There are always screens in a project that have minor changes or are based on a previous screen. For example, let's assume there will be a screen based on the main screen later on in the project. Rather than reinventing the wheel and rebuilding it from scratch, what we're going to do here is we're going to roll over the main screen and you'll see three little icons open up here. You can edit the properties, and duplicate the screen, get rid of the screen, and even add interactions. We're going to duplicate the screen. We're going to duplicate it, we're going to call it Main 2, click duplicate, and we now have three screens.
If you're like me and want them in a logical order, you can do this by dragging the splash screen to the top, and the main screens in order. So, Main 1, Main 2. So let's do that. So we're going to take the Splash screen, move it to the top of the order, take Main, move it underneath, and now I've got a logical order. Now, finally, this project needs to start somewhere. For example, there may be a series of onboarding screens or a welcome message for the user. To ensure a screen is actually the first one the user sees, you have to provide proto with this information.
Now, the first screen that you create is always the start screen. You can see it, right there. There's that little dot in the screen icon. That tells you it's the start screen. But what if we want to change it to Main? So we just select Main, go into the properties, and right here, you can set that as your project start screen, and whenever it boots up, it will start in the main screen. Okay, I'm just going to cancel this. As you have seen, proto gives you a huge amount of flexibility when it comes to working with screens. You can add them, delete them, change the name, and even decide which screen in the project is the first one the user sees.
You can use the Screens tool to quickly open a screen and even duplicate screens. As you've seen, proto does put the rapid in the term rapid prototyping.
- 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