Lessons

Lesson Info

Mobile Phone Mockup

Hi there, this is a production video, we're going to produce this, the app version now there's going to be there's nothing new about or different from either building an app okay or the website in terms of the tools okay. They're all the same. So there's not gonna be anything particularly new but we need to build our app because we want to do some cool stuff when we do our kind of micro interactions and animation in here. So it needs to be built and if you're like, I just want to pause it here and build that. Cool, just do that because it here and just rebuild it based on your wire frames and I'll meet you in the next video. But some people like to see kind of how I do it. I know I like to watch people kind of do their thing. I find there's lots of tips and tricks so if you've got like, I don't know how long is this video? I can't it's the future but I bet it's gonna be like 20 minutes long. Hang around and we can do it together. But if that sounds like torture pause it here, build thi...

s and I will see you in the next video. Alright. The first thing to I guess to bring up when you are building kind of our app is should be in its own XD file. Now if it's the like our case what we're doing is we're going to build a separate app okay, it's going to go on the app store and it's gonna be different from the mobile version of the website, The mobile version of the website, definitely keeping the same XD file because they'll share lots of resources and it's just kind of a different format. If you're building an app, it's probably likely better to be on its own XD project. And why is that? I just find it difficult when the assets panel, when I've kind of come up with my buddy copy fonts, your phone is going to require kind of like a different set of headings and body copy. You'll need it with loads of character styles and loads of symbols and gets a bit confusing in our case because our product is not very big and I'm trying to keep the class consistent. We're going to keep it all in the same document. I'm gonna have mine down here to get started. So I've already got my page setup. If you're kind of like just jumping into this video, you can grab that page tool. Okay, over here, your outboard tool and pick one of the phone sizes and will just appear. I've already got one. Actually what I'm going to do is that's going to be like an app Okay, but my onboarding is going to look slightly different and I'm going to start yanking bits and pieces from the wireframe because we did a bit of work over there. Where are you wireframe, So the things that I want, I want grab this copy it, move it across, can you paste it? Okay, nice. And I want to break the link to it now. It's different from this. Remember we used the we broke the link when we're using the CC libraries. It doesn't break the link when it's linked across from different projects. So from this one all the way over here. Okay, so I'm going to break the link unlinked symbol and the very thief thing I can do is turn it into a symbol. Okay, so I'm going to get rid of that original one. I just don't like them linking across outboards. It's totally fine to have them linking across outboards and it can be useful at this part of the course that we're keeping everything kind of nice and easy. It's gonna lower the opacity down on that a little bit. Actually no, I'm not leave it up, grab our logo, that one, there's the on black, I need an on white version so I'm just going to import it. Exercise files, images and logo on a Mac. You can hit space bar, you can just click on it and before you open it or and put a hit space bar, you can't do that on a pc I don't think but just give it a little test a Rooney, see whether it's going to be right testimony. Alright. It's going to go in the center here. I am nice. We'll do that center circle again. Like we did in the last mark up even though it's just kind of like a little mock up in the last one and change the background color to that off white. So that this here is a, let me use the kind of green to get started. No border. I'll use one of these guys. Cool. Like that's probably too big. So I'm going to just -8 from it so I know it's using my grid even though I promise and I'm a grid. this one is going to be no. What your revenue is instantly. What I'll do is I'll turn it into an area type box. I'll make sure it's centered. Then I can kind of just drag the edge. Nice. Probably 24. Probably not enough to let's check that up a bit. Now I want the little tile that goes in the middle. I'm going to steal that from this copy down here. Text. What it might do is just group it, group it again, grab just one chunk group that and put this in here. Doesn't quite fit. But with responsive resize on. Let's see how well it does. Pretty sweet. Ish Same thing with this. Responsive. Resize is real handy. There's a few things that doesn't work like this thing didn't quite work for me. I'm okay with that. Save me some time. I'll do the skip and next buttons actually, I'll get rid of you fellas, wow, that's a junk lying around. Um, what we'll do is I'll just borrow this now, it's in that group. So I'm gonna have to cut it come out and paste it so it's not inside that group that I had. And what I'm gonna do is I want to skip, I'll make this the Bold version that we're using bold. There we are. And we'll make a next version. I'm gonna steal those circles off this last one and come here guys Nice. And it might just color them differently because I can so no border and these guys are just going to be like a duck gray. Probably too dark. Oh, it's probably, is that enough contrast? Maybe there's just not, we have to go back to that blue. Yeah, that'll work. So we're going to have three of these. So I'm going to drag one out, holding down my option key on a Mac or a PC On boarding 1 1 two three and I'll switch out this with the blue and then this one with that gray. I just had a bit of text in here. We'll fast forward this one. Cool. And when you get in here, go through the onboarding, you're gonna get to the login screen. What I'll do for this one is you can come down okay. The problem with doing it this way though is fine group at all. And I keep on grouping is actually made up of quite a few shapes so you can either go through the pain of, it's not really pain but just clicking on them individually and working your way through. I'm using white because I should probably put the gray box in first. So great box going to be fixed to the top there. That's why I want the light vision. Um you could go back to the wires as well. There's a light version in there. Remember wires mobile, but this is gonna work. The reason we have to do it individually is just everything has been So we have to use, that's the font for IOS. You have to keep him because they have different strokes and some of them are strokes. Some of them are feels so I want to just click in and adjusting the grind. Cool. I'm gonna use the text to my home page mainly because it's got the shadow already applied to it. I need to be a way different size. Let's try 24. This one's going to say welcome, welcome. Where it ended up. There. It is. You use parts of the login. Where are you? It's like kind of this. I want bits of it. Right? So grab, I grab all of that top yet. It's definitely worth kind of doing I guess because there's gonna be a lot to remake and because they've got it selected and it's a different size up board here. I can actually just drag it using my um remember my responsive resize on if that doesn't work for you. Especially these like little guys here, you might just want to just um group it and just do it individually. That's what I'm going to do and do it, get rid of that. Now I'm going to use a part of that. So one of the things now is this blues being used loads. It's not the same as my other blue. Weird. Okay, so what I want to do to change the color, remember that we learned this trick before, but we'll practice it. So what I want to do is say that color come on into the symbols library. Okay. Plus awesome. But then you're like, I don't want you to be that color. I want you to be my blue, which is this one and I'm going to double click it. So all I really wanted was double click it to grab the code. So now if I go out like this and say actually welcome to the gang. But I'm going to make you the old blue. Watch what happens? He'll disappear. You see? Well the bottom one disappeared. They all suck together because like it doesn't allow you have two of the same color. So what it's done is it's switched it out for that color and everything that was that blue is now this new kind of light blue hair. Alright, so that's also what I wanted to do is I'm going to extend this out so it's a bit longer, you can go there. That board. Double click the age down to the bottom. And what I'm gonna do is I felt like that was not a really good enough indication of which one you're on. So what I'm gonna do is I'll switch that one out to our black. Okay, I'm gonna use this box here. We pushed off the edge and I'm going to use a little mental because the mental to draw like a little go there. You're going to be the blue without the rectangle without the border. And when you toggle between it will animate this in a little bit. It'll go from like this one and it will kind of like animate over here to this one. Cool, anything else I want to do? I don't like this shading in the background here. I want the border just to be straight up. Let me say straight up, it's dark in the dark. Make sure the fill is white with a background color. That's why I haven't done don't know why I like the off white background color. You might not like it. So don't do it, but I just like, I think it gives it a really good contrast. Like that contrast a lot better with the background. Anyway. Also what I want to do is grab all of these fellas, you're going to be black. We're going to be wet. You shift clicking goodness. Look at all that. Mm hmm. Cool. And then this one down here, grab both of these, hold down the option key on a Mac or Pc so it pulls to both sides and I might go that dark. I haven't used that much. Huh? There's the arrow. I'm going to break it apart because it's a symbol and I don't know where that symbol came from. It came from the wisest thing. So I just being careful not to get in trouble. If I update that one, it's going to update something else in the document potentially. Did that get all the way across, yep. And the last one here is once you click on this log in it's going to change a bit. So let's update this app. I only put up at the beginning is just because we've got this combination of website plus app and when you're using the, when you're doing your prototyping it can be quite hard to know which one you've got. This one here is going to be signed, sign in, sign up. This one here is going to be Log in one word. Two words have to wrestle for it. I'm going to adjust this so it shifts over here, that one becomes great comes white and we don't need any of this stuff because you're not signing up anymore. I think the bottom chunk so what I'll do is I'll line that up. I want this one I'm gonna grab the name. I want this to line up at the bottom of my upward it's There you go, snapped, grab this nice and to make it clear which one you're on go the other color. Alright, last thing I want to do is I'm going to grab the dashboard. There was chunk in here that I don't want any of that actually. And so we'll grab this, will duplicate it didn't make this a symbol. I should have Okay because we're gonna have to update them all. We'll do that a bit. This one here is the dashboard dashboard. I don't need any of you guys. I'm gonna need a way longer one. You can double click the background when there's nothing on it, you can't do that when it's a it's full of stuff but you can just double click the background to get to the edge, otherwise they'll take the edge or the name. This one here, dashboard. Now, what I wanna do is I want to jump to one of the Ui kits because I want to pull in the wires. Let's have a look. Not that one. I don't have it open, it's going to open it up. Alright here it is, it's in the wires but in the mobile one there's a whole search sanction you don't even know why I need it for right because I wanted this stuff, I'm going to grab the square version, copy all of that, Bring it into my mock up so I can grab the icons and stuff. I don't think it's groups. It's not, you can tell if it's a symbol, it's got the green line around the outside. It's going to work for me man. I really like that. The vaccine is sick with the same problem with the blue color. But what I might do is actually just override it rather than going and switching it all out. The same with you. One group. This little gang. Oh, those are symbols sneaky hiding in there. Huh? You girls to you and you. We used the great kind of doing a pre fill in so it looks like somebody's typing it. It's pretty cool Actually. What I might do instead of that kind of like half typing thing. I don't like that. It looks like we'll put it in that kind of like pre or like suggestive text that you can go over the top of something like that. We'll just make it black and then we'll fade it out using our sweet shortcut. Here we go. Now we've used one of these guys before. We've got fitting nicely as well. Actually, that's probably skinny it up to fit. Now I'm gonna grab this again, copy and to hear paste. It's not quite the right size. It's okay. That's what I might do is I want to cheat. It's easier. You can click on the background. It's easier to actually extend that out to match. And these guys need to be centered more. They don't really send it very well when they're inside there, this responsive thing and I can't put that right up against the edge because I need the drop shadow. So yeah, it's one of those things that looks pretty close to me. I'll grab a few more, go repeat grid. Love you. Alright. Should go through and change this data in here. But that could be really time consuming. I'd have to do it to go to the client to go to testing. But I feel like for the moment we've got a reasonable app going just the basics anyway. And what you would have noticed if you did hang around for this whole thing is that there was nothing new to it. Okay? It's just you might decide that maybe your project might be at first or app only. Okay. And you'll be just studying an app. No point doing this desktop version. Um But yeah, I was wasn't was the other way around? Yeah, we use a lot of the same skills are all the same skills. If you hear at the end, you win, you win the prize. I find it interesting watching people kind of, you know, practice what they preach. Hopefully you did too. Let's wrap it up and I'll see you in the next video