Mocking up an App in Adobe XD – UI/UX & Web Design using Adobe XD [14/42]

Mocking up an App in Adobe XD – UI/UX & Web Design using Adobe XD [14/42]


Hey there, my name is Dan Scott. This is one video from
my larger Adobe XD course… which you can check out on
bringyourownlaptop.com You can also go in there to download
the free exercise files… and the free cheat sheet if you like. All right, enjoy the video. 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 jackpot. 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. ‘#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. Hey there, please ‘like’ the video. Consider subscribing to
my YouTube channel as well. If you want the full course for Adobe XD… check out my website
bringyourownlaptop.com That’s it. Bye now.

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *