Adobe XD Tutorials

Responsive Web Design Tutorial in Adobe XD

today we're gonna take the design we did from our UI design course from last week and make a mobile version out of it oh and hey I'd like to mention this

video sponsor Skillshare calm now it's a brand new year here in 2019 and Skillshare will help keep you learning and thriving as they offer 25,000 different classes encoding design

business and more for instance you're about to watch my Adobe XD tutorial but you could watch this full Adobe XD course at Skillshare Skillshare is also super affordable with a subscription

that only costs 10 bucks a month but if you're one of the first 500 of my subscribers to click the link below here in the description you get the first two months free so take advantage arey Simon

of course Etro so just last week I released a popular UI design course and it's one of the first of its kind that I did it so I think about an hour and 40 minutes long definitely check that out a

link in the description and in that course I basically discussed UI design fundamentals and then we designed this here from scratch using Adobe experience design software and so I did promise

that I would be releasing a front-end development course very shortly here within the month of January that will I basically teach HTML and CSS from scratch and in doing so I translate this

and make this a reality in the browser with HTML and CSS and it's had bit of JavaScript as well but before we do that though I it's important that we create a mobile variation a mobile mock-up here

in Adobe XD um you know specifically for smartphones so that we know what it should look like I when we start to do the HTML and CSS or the front-end development process all right so that's

what we're gonna be doing today and for today's question have you been sticking to your new year's resolutions you know you have one let me know how that's been good in the comments I'll let you know

about mine I in the first pinned comment make sure to subscribe if you have it yet and let's get started alright so here's our document that we designed in the the course from last week for the UI

design course and if you don't have it of course you can go ahead and grab it in the description here in YouTube just to reiterate so after you have it we want to do is instead of just taking

this artboard and maybe duplicating it like that I think it would be best for me personally if we simply go to the artboard tool over here and then just choose the default like a basically any

mobile phone size will work iPhone X this is what I'm going to use right here so we just click on it and then it just places our preset here as you can see it is much much smaller although we

definitely will be increasing the height here quite a bit but we could do that you know as we need to and worry about that going forward so the way like the approaches is we'll start from top to

bottom left to right so the very first element that we have here is this logo graphic and this is probably around the time when I make sure these are the one the assets that need to be exported to

be be hand it off to the front-end developer if that's not yourself already make sure they're named correctly for when we export them so this one it is named correctly its logo for me down

here so you have to worry about that and so what I will do is just take these elements some time more more than one just drag them over after replicating it real quick an easy way of replication

here in Adobe XD is you just start dragging it but if you hold alt it automatically will create a copy for you and so I'm just going to put this over here and now let's focus up on this

artboard right here so first of all if you were looking at this logo on your smartphone and you can assume that this is the dimensions or the proportions of your smartphone right here this logo

seems quite big for the navigation sometimes you can get away with actually putting a navigation maybe underneath the logo if you had like three maybe maybe two or three navigation links but

that but with four it's gonna be too condensed so we're gonna use a hamburger menu icon we'll get to that in a second but first I'm gonna scale this down just initially here to something smaller

that seems better right there about that size for a logo on a smartphone so next we're gonna design our own eye icon here for the menu now you could go to a different resource I there's like icon

finder com where they have them made for you already but it this is such a simple icon we just do it ourselves really not that big of a deal so to do this I'm just going to use this rectangle tool

and I'm just going to left-click hold alt and just come out to get around a rough size of what I would want get rid of the boarder make this a fill and we'll just make it completely black and

then we will you could either use the repeat grid tool or you get this I left click drag hold alt hold shift so it stays on that vertical point now acts are the column and then just do the same

thing again and it'll let you know when you have an equal distance between them so I actually did a pretty good job of getting the width into separation right so it should look something like this

and it should also your eye what I'm looking at in terms of design is making sure we have equal padding around the right and the top and the left and top as well as from these elements this part

this little symbol that's kind of going up a little bit to closer that's not too big of a deal to me just as long as the main area of this that the top of this word mark right

here pretty much is in line with this one so if we group this and we go to our layers we want to rename this to I'll just call this ham and of course you can know why that's called a hamburger you

know it's a very abstract looking hamburger all right excuse me so what we'll do now is I will ask ourselves what is the next eye area that we need to concern ourselves with well I would

say this graphic right here so what I'll do is take this we'll duplicate it ctrl D you could do the same thing instead of just all and dragging and we'll scale it down

holding shift I'm gonna maintain that those proportions and because this is kind of off-center because of the shadow the length of this you can I have to kind of eyeball the center of this a

little bit alright so this this size to me is pretty decent it's around the area that we would probably want the icon to be maybe it had bit larger all right I so obviously when you drag these things

over you're gonna have to scale them down to match the the the device I with appropriately so you can see there's it's it's while you've done all the work over here you still have to do a little

bit of work I making these adjustments next we have this section which looks like it it's a group okay so we're gonna take that over here and by the way if you simply just go like this it's gonna

keep us on this artboard you need to make sure the the very left point of the layer is inside of this the given artboard you can't just put it in the middle like this actually i was able to

because initially already didn't put it in there so anyhow i'm digressing so let's get these saw all evened up here and now obviously we're way too large so this is a group but if we double click

into it we gain access to that specific type layer and so we're gonna have to scale this down obviously the type for the mobile viewport it's going to be quite a bit smaller now another thing

that to concern ourselves with is the the padding i we shouldn't just in this case only have scaled it down to the very artboard edges but whatever's in whatever we have d established as the

padding or the margins or the white space on the right and left we need to scale to that point now unfortunately it's not giving me guides to let me know exactly where this point is and you know

what i may decrease the margins just a little bit maybe up to around here just like that all right so then once again we'll click in here and it looks this is pretty

close I make sure you hold all by the way when you're doing that so we have around 25 from I the right and left so we'll do the same thing here all right and this one let's go ahead and scale

this down as well and I would say right around there is pretty good we could all there's no reason for the speed in group so I'm gonna right-click and ungroup it all

right now let's look at the spacing here so this could be stood to probably go up just a tad bit there we go we have equal whitespace between the top and bottom here and I would say written around here

is actually pretty good for this area all right I like that alright so next up now here's where I it definitely would make sense to ask yourself see sometimes when you're designing for different

device viewports like we are now responsive design sometimes you don't need certain elements and in it this is where also it makes sense to have a basic understanding of front-end

development as it pertains to HTML and CSS I because we have to ask ourselves does it make sense to have a little scroll indicator if we click onto this artboard we can see this is definitely

more so a portrait mode than it is like landscape and in that sense this is the bottom of the screen would it make sense to have this icon right here telling them to scroll down when clearly they're

gonna start seeing this information above the fold already so when I say above the fold that's just that's just lingo for you know the area that is automatically viewable without them

having a scrool so up here we're gonna see some of this stuff so we it doesn't make sense to have this element and with CSS we can hide that specifically for these

I these viewport width these differ just for smartphones through what's called media queries so we're not going to include this little scroll indicator and when it makes sense all right next up we

have this element so one thing that I sort of intentionally did incorrectly from the last video I is noticed that this is one complete shape right I let me show you well before I even I'm not

going to describe I'm gonna show you what is kind of incorrect about this shape especially when we go to in the front-end development course when we go to take this and all and make it HTML

and CSS I had how this would be ineffective and how we're gonna have to modify it a bit let's say for instance let's duplicate this and put it in here and then let's scale town let's get up

here real quick I'm not going to be using this one so don't even don't don't follow along at this point I just wanted to show you something real quick so say we we decided to put it right around

there and that's good and these three columns right here there's too much content to fit in three columns on such a narrow width so what you do with the help of media queries

and CSS is you stack them on top of each other so it goes from three columns to one column where there's an icon here in a description here then underneath it is the next one and underneath it in next

one it's a very common pattern that means that this container is now going to strap to stretch right because we need a lot more some vertical space to show these three so if we do that watch

what happens and well it looks okay I it's not ideal to me especially if this got larger it would kind of start to throw off the UI quite a bit so instead of I this ball being one solid shape

this is where having an understanding of what's possible is CSS sort of helps out instead of doing that what we can do is we cut this into two different eye parts so instead of we're

not technically gonna cut it but with the selection tool we're gonna double click and I'm going to delete this Anchor Point and then I'm gonna take this anchor point and we're gonna move

it up alright so right around here or so then we'll take the rectangle tool and we'll just draw down and we'll get the same color and we have to make sure that this anchor point down here matches up

with this just like that so now what is happening is we can have this container be any size without affecting the angle and how this was kind of meant to look in here and we can do this with CSS

using what's called a before selector and you'll see once you know I released that course here either this week or next what I what I mean by this one thing I'm one thing I do kind of want to

adjust about this is I think the slope the angle of this is just a little bit too much so I am gonna make an adjustment real quick so I'm gonna push this up and so now we have a slight

angle just it's a little it's less of a significant angle and then once again we're gonna have to match this up real quickly actually we'll take this one and drop it

down okay right there looks I fairly decent to me sorry I gotta get this matched up more correctly okay right around there all right that's better okay so now I

what we'll do is take the icons and we will I start to put these into order so we're gonna let's see here just duplicate it drag it over all right now I'm holding shift and I'm an alt and I'm

scaling it down actually one thing that would probably be best would strike all of them with exception to this background graphic so now in by the way the way I did that is just to left-click

and drag select and then shift left click that D selects the background so I we will left click and drag and now right now I'm only want to scale it down just to get the right size or around the

right size for the icon so if I scale this down the written around there would be a good size now these are all even size and I want to have to deal with those after afterwards so I I would say

probably right around here would be good and these are all inside as well I'm going to worry about them after let's go ahead and make the adjustment here again we'll pull this out to around 25 and we

will scale this down this type so the type needs definitely needs scale down let's put 0 for now onto the line height and then increase it just slightly maybe your to right around I would say here

around there to me looks pretty good maybe we'll bring this up a bit and from the top we could probably Inc bring this up a bit as well all right and this doesn't look even by the way there we go

now this is in the center let me take both of them there we go all right so that looks pretty pretty good right around there okay so next we'll go ahead and take

this eye and really with the type here we don't need it it's all saying the same thing anyways and I've already styled the one been on top of it so we'll put this here now we already know

I know we're gonna need more space to get these all fit in we'll duplicate that control D and you want to make sure right there there's even space between them and the reason I'm not using to

repeat grid tool is because I do have these icons already customized here so let's go ahead and take this one and this one looks a little bit too big the borders a little bit too thick there we

go all right and then we'll put our spacing I let's see if it gives us a spacing indicator for between there we go and then we'll duplicate this right around there all right so that looks

pretty pretty good to me like right around in this area now of course when we go to the front end development part you know we may scale these down perhaps me a little bit more in fact I might do

that right now because I'm just so you know about that I didn't like how big they were just go engine just a little bit more let's get these lined up

just died right around here I think is decent okay let's get rid of this see if there's anything else nope all right it looks like I there we go okay so now all right

the next up is this area so I'll just real quickly dragged us over scale it down to the complete width of the artboard all right and then we have these individuals right here so alt and

drag them over and again I'm gonna scale them down with this on selected because I want to think about the size of these the images in these as well I are gonna be the this is gonna be stacked a little

bit differently than these yes there are just going to be one testimonial or comment or whatever our quote I per row but we're also going to stack the eye we're going to change the stacks but

right now that it's floated to the left of this content right here but on here we need more room for the text itself it should be on its own row so these as well are going to be on their own rows

so it's that would be a little bit big just by itself so I'm gonna scale it down so holding shift maybe writing around there would be pretty good so now what I'll do is I will take I this

person right here and look I notice how I'm I adjusted this so that there's an equal amount of white space again between our elements right there looks pretty good from the bottom of this type

from the top of this container right here and the top of this container to the top of her now what we'll do is move this over here and again we want to make sure everything's lined up we have equal

white space on the right and left right there it would make sense to Center this text everything else is centered up here right now it's left aligned

so we'll Center it and then also it's a size 12 it with a 21 line height so we'll change that as well all right right there looks good and also right here we will I just simply Center this

as well and it's quite big so we're gonna scale that down right around there looks pretty good like that all right I think that looks pretty okay maybe a little bit smaller on these there we go

all right so now we'll just take this guy get all get rid of that and let's get him evened up as well I think we're gonna move these up just a tad bit right around there

right there there okay and then I I'd say that's a good space right there we'll duplicate this and then his name's not Jane unless he self identifies as a female probably

doesn't though so we'll call him John I'm sorry if I trick anybody here okay um right there's good okay sweet now it's coming along quite well again it's a simple layout but

there's the whole purpose of this series and from the UI design course to now till to the front-end developer course is to design something that's not too crazy and in complex so I'm right here

these are next elements so we'll just die duplicate these drag them over here let's get this button positioned over here and again these are gonna go from floating to stacked just because it

wouldn't make sense if we try to put this fit this all on one line here on such a narrow width so we will bring this over scale it down all right technically shoulda used AI or you call

them this type of text area like this where we drag it out I'll just redo it real quick start your free trial now because before I didn't drag it out just simply left click and started typing now

we can make sure we were centered up as we need to be and then we'll put this like right around here this button now of course because I the the type of text that we have it doesn't scale down as

well so we'll do that manually I'm just looking at the width of the green portion let's fix this up way too big as well so scale it I would say approximately right around there I

don't think we're gonna make this bold by the way ever is gonna make it regular all right use your keyboard arrow keys and to nudge it up or down to get it centered and I think I may be just at a

bit larger right around there looks pretty decent to me we'll make this one regular as well I'm just choosing to make it regular because I think it's just it sticks out just a tad bit too

much all right so we're getting close here now let's deal with the eye the bottom one now I already did this the part up here so I'll just take both of these and we will duplicate them ctrl D

oh man there we go I accidentally I selected the wrong thing and then what we'll do is I'm gonna alt and just switch down because we reverse the order down here if you

recall and then with the eyedropper tool get that color this is still off-center I think a little bit it's especially important that when we yeah I kind of messed these up that when we go to I do

this and we export this top graphic that it is actually correctly oriented into the urn in other words the bottom needs to be completely straight and so I'm just looking at the any gaps right here

and this needs to be nudged up one more pixel over here it looks like there we go I hope maybe down one more I'm confident we'll be able to get it to work though I know

it can because I already did it alright so I take these two putting maybe right around here I think that button is maybe a little bit too big for sure

so we'll I'm gonna scale this down holding alt and get this lined up again maybe scale down a text just a tad bit alright I will say right around there is pretty good and then I we will take our

local graphic down here I don't think they're grouped up there we go and let's make sure this is called logo maybe white we'll take our text put it over here and I think what I'll do is just

probably Center this stuff up for the mobile viewport resolution so now we got let's scale it down just a bit and then we'll Center this text scale it down

and and then we'll put our privacy policy in terms of service links I didn't include like a full navigation just because you get a little bit redundant for the purpose of this

tutorial at least and then we'll scale these down a bit and get them closer together yeah yeah maybe take that past you down just slightly on that just to create

some separation visually and then put that right around there at the bottom the artboard up all right and there we go so now we have a mobile representation of what this I this here

will look like on smartphones or similar devices now you might be wondering what about I the device is in the middle like the iPads I and tablets such like that so you could if you want to and it might

be a good exercise to do the same process as we just did I mean see if there's any adjustments that you think should be made specifically for tablets so again you could just take like an

iPad or an iPad pro or whatever and translate this design here into this I'm not going to do that right now but see what you come up with I cuz you know again you you it seems like you would

definitely have the knowledge going forward about how to uh to do this on your own if you wanted to create a version for tablets and for me i the tablets I'm probably not going to change

too much about them we'll see I if I decided to do a tablet version I will definitely let you know and show you during the different end development course which is going to be the next

video in this series by the way so the next video which is gonna be a crash course it should be a more lengthy one where I'm gonna get real into detail in terms of you know what hTML is what CSS

is from a conceptual level with slides and all that at the beginning and then we will take this and use what we've learned and make it a reality in the browser and response of all equipped

with a with a the navigation here using a little bit of JavaScript I to make this work on smaller devices alright great alright so hopefully you found that

useful make sure you answer today's questions which is have you been sticking to your new year's resolutions let me know in the comments and make sure to subscribe and you can definitely

make sure to click the the bell notification icon so you get notified right when I upload videos especially when we're gonna take this design and make it reality in the browser with the

front-end development crash course alright see you soon [Music] [Music]

https://skl.sh/designcourse19 – First 500 people to sign up will get their first 2 months free!
— This is a continuation of the project created in my UI Design Crash Course from last week: https://youtu.be/_Hp_dI0DzY4 – In this video, we’re going to take the project we created and make a mobile friendly variation. This is a necessary step before I release the frontend development crash course where we will make this mockup a reality in the browser.

The frontend development course using this mockup is here!

This is the XD file that includes both the desktop and mobile design:
https://s3.amazonaws.com/coursetro/UITut-Part2.xd

Make sure to subscribe!

Enjoy!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!