Video: 14 of 43
In this video we're going to look at building the iPhone version, or the app version of our product. And then we'll link it all up, so it kind of slides next to each other. All right, let's go and build this now.
We've been working with the templated Wireframes from XD for the web. So we want to go and open up the ones for Mobile. So in your 'Exercise Files', under 'UI Templates', under 'Wireframes' there's one in there called 'Mobile'. Open it up, and same sort of thing but obviously for Mobile screens. So to get started I'm looking for kind of an Onboarding type thing. Did I even have an Onboarding thing, I do. So it's that kind of thing where you open up the screen and there's that kind of like, next, next, skip. Just to kind of give you an overview of the product. Then my Wireframes, my hand drawn ones here have kind of gone through some Onboarding, it's login, and then you get to see the dashboard. So I'm going to pick one of these. And what I might do is grab this one because what I really actually want, I don't want much of this, I'll take you and I'll take this bit. And I want this, and I want this. That's the bits I want. So I'm going to copy that. Then I'm going to jump over to my—
I'm going to close the wires for web. Don't need him at the moment. So just my project, and that app version. So, I'm going to work on the Mobile phone version. I'm going to click the Artboard tool and I'm going to pick the iPhone 6S. I'm going to grab the dotted line. When you zoom out far enough, you can't see the name. Just becomes three little dots, you can drag those around. And where am I going to start them? I'm going to start them as a new little line along the bottom here. So I'm going to zoom in, 'Command 3'. Zooms into a specific place, whatever you've got selected. So I'm going to hit 'Paste' here, and check out. What I might do as well is, actually I'll do some edits, then I'll go connect it to a symbol. So this one is going to be called 'InstructorHQ'. And yes, it's all good. I'm going to grab all of them actually, and just chuck them into a symbol.
So, you, select them, symbol, awesome. And I'm just going to put some dummy text in the middle here. This is going to be an 'Exciting Onboarding message'. And this is going to be '#1'. And you're going to go in, I'm going to use that big version I've got. And I'm going to do the tiniest bit of design work. I know I shouldn't, but I like this circle in the last one. So, break the rules, that's what they're there for. Dan, you made it super exciting. I don't know why I did that. But that's going to be my super exciting onboarding message 1. There's going to be-- actually let's just do three of them. So I'm going to double click this, double click it again. You can kind of get in there pretty easily by double clicking. Select all three of these, put them in the middle. And then, remember, I can click on them and 'right click', 'Update all Symbols'. Even though I haven't used that again I'm just updating the one here in my library.
So I want-- how many of these? I want three. So I'm going to hold down-- on the end of this. This is going to be my 'App'. And this is the Onboarding. 'Onboarding#1'. Get people excited before they sign up, or have to log in, because that's the worst thing. It's like, "Hey, commit to a sign in." Whereas what we want to do is, say "Hey, before you sign in, let's see the list of the cool stuff you can do." So this is '#1', this is going to be '#2'. Just so that the user knows when they are prototyping, or at least the client knows we're going to just change colors so that we know what we're doing. And one more. That aligns to the app. And you're going to be message #3. And you can be that blue, we're running out of colors. We got two colors really, don't we? All right, so let's go back to the blue. Awesome!
So we've got three of these, and that's going to be my Onboarding. What we might do next is do our prototyping because we want to actually check the cool way you can view this on an app. So before we do that we need to kind of make these buttons a little easier to click, so like we did earlier, I'm going to select on this, I'm going to double click it. So that's why I'm normally inside of this. See this kind of green bar on the outside? I know I'm inside my symbol. I'm going to grab the Rectangle tool, and have a Fill of white. Oh, I got something selected, don't do that. Undo. I'm still inside, I can see the green bar. I'm going to grab you, and drag a nice big box. You can kind of see, I'm still in there, watch when I drag it. See that green bar on the outside, it gets bigger, I'll turn that off. I'm going to copy it, and send it to the back. Now, 'right click', 'Send to Back' works. I'm using a shortcut, you can kind of see the shortcut there. It's 'Command Shift [', the bracket next to the P key. I use it all the time because it's the same in InDesign, Illustrator, and Photoshop which is nice.
So there's my big box so it's going to be easy to click, I'm going to copy it. And over here I'm going to double click, so I'm now inside the green thing. I'm going to paste it, maybe to the back. Grab the first guy, double click it, so now I'm inside the green thing. Paste it, move it up. Send it to the back, maybe make this one just a touch smaller. It's getting quite big. Copy him, and now I'm over there. So I'm going to click on the background, click it once, so I've got it selected. Got this whole group that I made. Remember, 'Update all Symbols', and hopefully now, over here, when I double click it there's that box. Awesome!
So symbols are great because it means that when we go and now do prototyping I've got nice big boxes to click. So let's rig this box, we're going to grab the next box. And I'm going to say, when you are clicked, going there-- By default, it's been going to 'Dissolve'. Now that we are in a more kind of mobile centric world we're going to look at 'Slide to the Left'. We'll have a look at this when we preview. And what we might do, just to show you the difference, is we're going to go to this version and we'll look at the other one, which is 'Push Left'. Just see the differences between them, so next, next, next. And this one here is going to know where to go to. So what I might do is actually just grab another board. And we'll make this one, the App. And this is going to be the login screen, we won't actually build this at the moment. So we just delete everything on this page. Good bye. At least it's got somewhere to go to now, grab the white box. You're going to go there. It's going to be the same for these 'Skip' buttons I'm going to say, you go there. I want you to go there. So we're skipping, we're going all the way to the login. That didn't connect. And 'Skip' here, it's the same. Can't see it, that's why it's easy just to go here, and go 'Login'. Throw a name in, it's quite useful, I said at the beginning.
So that's then done, what I might do is I might want to change these dots to move through but I'm not going to bother, I should not because I want to, but because there's a Wireframe we're just going to go quick. The 'Back' buttons need to work. I'm going to grab this guy, go to 'Prototype'. And you my friend, go back to you. And you, go back to you. And, little bit of a flow in my symbol making. It means that these two work, but there's an error that doesn't go anywhere here. So I'm probably going to just ignore it, or I can select on-- I got my design, click on this thing. You see a green around the outside here. I can ungroup the symbol, which is not great but I need to in this case. So, goodbye. I potentially have the same problem with these dots, but I want to update them. Got a little carried away with my symbols, I was impressed when I say that.
All right, so what we want to do now is some testing on Mobile. So we're going to jump to the next video because there's a cool little app you can download. We'll look at that now.