Hey everyone, in this video we're going to draw four wide rectangles...

it's going to be exciting, we're going to explore what Artboards are...

we'll talk about mobile, tablet, or desktop first design...

and some basic navigation shortcuts to get you going...

but yeah, let's go make some boxes.

All right, to get started open up Adobe XD...

and we're going to start with either a new file...

which will give you just a generic starting file...

or you can pick from one of the presets over here, I'll just show you...

click 'New File', and it kind of defaults to...

whatever it thinks you want, and it's going to say...

"Hey, you've got a page that is the kind of a website size"...

and you might be like, "That's not what I want," 'File, 'Close' it...

and what we're going to do is pick from the presets.

So mobile stuff, web stuff, social media sizes...

a lot of design is getting done in Adobe XD...

instead of maybe something like Illustrator...

because people are getting used to it...

it's quite quick, often you have...

a lot of your colors and assets already in Adobe XD...

so people are doing a lot of kind of...

like social media stuff design work in XD...

there's nothing wrong with that...

and obviously you've got a custom size that you can type out.

Now I'm going to start with mobile for this kind of wireframe...

and in here, up to you, like I'm going to start...

with iPhone 8, this SE size...

because it's just a really generic size at the moment...

in the future, some of these kind of taller, thinner sizes...

you know, you might be watching this...

and there might be an iPhone 50.

Just Google, "what is the most common phone size?"...

and start working with that...

this one here is good for kind of Apple and Android sizes...

so I'm going to start with iPhone 8.

All right, now what we can do in here...

is we can click on the name along the top...

and what will happen is, let's click off, click back on...

over here, can you see, this adjusts, it's contextually sensitive...

which means it changes depending on what you have selected.

So if you need to change the Artboard, click on it...

and you can say, over here...

actually, I need it to be this new size, which is 400 pixels across...

a bit wider, I'm going to undo that, it's not what I want...

undo is 'Edit', 'Undo'.

I'm going to use 'Command Z' on a Mac, 'Ctrl Z' on a PC...

for the rest of this course, but you probably know undo.

The other thing you can do is...

you can draw your own custom size...

say you get in here, it's the wrong one...

you can click on it, click on the name...

hit 'Del' on your keyboard...

and you go to this kind of, like generic white matrix, snow land thing...

and you can go over here, this is your Artboard tool.

Your Artboard tool is, click on it...

and we get all those kind of defaults again over here...

they're all kind of laid out this way...

there's watches in there, social media...

but let's say I want to go back to iPhone 8SE, there we go.

So those are default ones, you can just drag them out...

you might be designing something that needs to be dragged out...

you can just click and drag these things out as you like...

click on the names along the top, and you can delete them...

for some reason mine opens up not quite wide enough.

Now just to know about picking the size...

pick generic or pick what your client has...

you know, if your client's going to be testing this thing...

and he or she has got a specific phone size...

you can tell that they've got an iPhone 13, design that size...

because they're going to be able to easily kind of use it...

and later on when it goes to coding...

and your developer's building it, and--

plus, with your help, with the responsive design...

it'll actually adjust to different phone sizes.

So you've got to pick one size to start with...

and when it goes to development, it will adjust to different phone sizes.

So what we want to do now is, we want to rename it...

so what we can do is, where it says iPhone 8...

or whatever you've got along the top here, double click that...

and let's change this one, and this is going to be...

my "Home/Marketing Page."

So I'm going to click 'Enter' on my keyboard...

so we can name our Artboard.

So Artboards is just another word of saying, our page...

now you can see them over here...

if you can't, you might be on this thing or that thing, or that thing.

So we're going to be on this Layer option over here...

and it's showing my different Artboards.

Now we're going to create four pages, and another thing...

well, before we move on I want to kind of shuffle my page over...

we're not going to get into too many shortcuts early on...

but there are some essential ones...

holding down the 'spacebar' key gives you this little hand...

and then you click, hold, and drag your mouse.

So hold 'spacebar' down, click, hold, and drag...

because what I want to do is-- click on the top of this...

I kind of click the whole Artboard...

I'm going to go, on a Mac...

'Command C', 'Command V', copy and paste...

on a PC is 'Ctrl C', 'Ctrl V'.

So double click it over here...

and I'm going to fill out my different kind of task flow...

so you can check the task flow, it's in our Exercise Files here...

we're building this one, Home page, Product Details...

Checkout, and Confirmation.

So the next one is going to be called "Product Details"...

copy, paste...

oh, if you click once, your Artboard tool...

it just throws it in where it felt like it.

So I'm going to hit 'Del' on my keyboard, 'spacebar'...

happens to the best of us, double click over here...

and this one's called, I can't remember, "Checkout"...

and then the last one, you can--

oh, do we get into too many shortcuts...

we'll do one more little shortcut too early in the course, Dan, but hey...

with your Artboard tool selected I can drag this around...

just like an object, like a square.

So I'm going to undo to move it back...

I can hold down my 'Option' key on a Mac, 'Alt' key on a PC...

and just drag out another version of it...

you can see, if I get close to it...

there's some of the magic of XD, look at this...

you get it kind of close to here...

it says, "Would you like it to line up?"...

and, "Would you like to be the same spacing?"...

you're like, "Yes, same spacing" ...

I find it exciting...

and our last one's called Confirmation.

Confirmation, have I spelled that right?

I haven't...

oh, I'll be right back.

All right, I'm back, I can't spell...

if you've done any other courses you already know this...

but it's Confirmation, there you go.

So we've got our four Artboards...

they don't quite fit in, my spacebar technique...

remember, hold space bar, click and drag...

zooming out, is another shortcut, the last one I promise.

Hold down the 'Command' key on a Mac, 'Ctrl' key on a PC...

and hit ' - ' on your keyboard to go out...

and you can probably guess how to go in, it's '+'.

So hold down 'Command' on a Mac, 'Ctrl' on a PC, and hit '+' and '-'.

All right, so there's some Artboards...

now we're going to be focusing on mobile...

there's no reason why you couldn't now.

Grab your Artboard tool and say...

actually, I'm going to go and figure out my tablet size...

and I'm using iPro Pro, I'm going to start doing this...

I'm going to work on the iPad...

you might decide, actually, I'm going to move that down here...

remember, grab the name and drag it...

spacebar to kind of click and move the thing around...

and I could do the same thing, I could copy and paste...

and build a Home page, Product Details...

Checkout, Confirmation...

and start building the tablet, and then the desktop version.

We're not in this course-- we just--

we're going to, we will do a desktop version...

and you will probably be expected to do...

a tablet and desktop version for your mock-up...

depending, if it's an app for a phone...

then no, you don't need a desktop version.

What we're doing here is a mobile website, not an app...

so there's going to have to be a tablet and a desktop version...

because we want our clients to be able to order our cheese...

or, what am I doing, green tea, from either the...

their computer, or their phone, or their tablet...

but for now let's just stick to mobile.

Another thing we're going to talk about...

is something called, well, just briefly...

we're using Mobile First design, why we-- we call it Mobile First...

because we're going to design and put our effort...

into designing this mobile design first...

and then later on adapt it for tablet and desktop.

We'll make it good for those, but we're designing mobile first...

because we know that through user research...

through, I don't know, a good guess, that most people...

are going to be ordering via their phone.

So we're designing first for that.

If you know, if you're designing a desktop app...

and you know that people access your site...

or this product via desktop first...

then do a desktop first design...

and be laying this out in a kind of desktop version.

When I say desktop, I mean these ones here, web, desktop...

and if you're unsure what to design for...

it'd be really common to do this one here, 1366, but also Google...

"What is the most common desktop size at the moment?"...

and Google will tell you, you can design for that.

All right, last thing we're going to do is name it...

otherwise we're going to have untitled...

man, you end up with a lot of untitleds, don't worry.

So we're going to name it by double clicking at the top here...

we're going to give it a name...

I'm going to call this one, call it anything you like...

but you really want-- so, not going to Checkout...

calling it Scott for the client name...

so Scott Tea is our client name, this is how I name it...

you can name it anything you like...

except you can't call it Final...

Final V1, V2...

Final V1 V2, Complete, you've done it before...

give it something nice, and, I don't know, iterative.

So I'm calling it this, I'm calling this my "Checkout Taskflow"...

because that's what we've been asked to design...

and it's going to be V1 or A1, or whatever you want to use...

and when we make significant changes we can change it to V2...

and just keep updating it that way, don't call it Final.

All right, let's hit 'Save', and we're away...

all right, so that's going to be it...

I'm not going to set proper homework...

I just want you to draw your four pages...

I'm not going to check it, but name it with your.--

you know, the name that you've got from your...

the random project generator, and name it...

and have your four pages here, ready for the next video.

Don't skip the homework, it's how you'll end up...

remembering this stuff for a longer time...

all right, I'll see you in the next video.