Adobe XD Tutorials

Designing a Web App in Adobe XD

[Music] part of the full stack development process includes creating a mock-up or a prototype of some sort so the importance

of this is extreme because if you simply just hop into a project and start doing the HTML and CSS to structure a layout usually the end result is going to be ugly so it's always easiest to first

design it in some type of graphics application so in this course we're going to use Adobe XD or experience design which is an app and website prototyping app so what we're going to

do is first design a homepage and then when a user clicks on one of the tutorial listings that the part of our code post on that project will also design a page that lists out the details

and then also finally a third page for when people want to post a tutorial through a forum and then at the end we'll create an interactive prototype where you can actually click on the

elements in the prototype and you'll see how the page transitions work and how we intend for them to work in the final result alright so let's get started alright so I launched Adobe XD or

experience design and here we have with the initial screen making us choose to open something recent or start a new project so what we want to do is start here with a web 1920 by 1080 version

right here so let's click it and I just pause to fit it within the recording area and I'm going to hold alt in my mouse scroll wheel to zoom up a bit here hit the spacebar and left-click to drag

and if we click on this little title right here web 1920 what we can do is we can adjust the artboard as needed so we have our width and height over here so if we

simply left-click and drag up or down we can adjust these values as we wish and what I'm trying to do is basically just get it to extend to a good portion so it fills out my screen just for recording

purposes so for me recording at 1920 by 1080 so this happens to be 21 68 by 1369 as long as you have the proportions pretty close to the 1920 by 1080 you'll be fine again this is just a prototype

alright and then also another thing that we want to adjust is I the viewport height if you want that's what this little dashed line here is I you can make it even with this if you want and I

think I will as well okay so the first thing I want to establish is the background color again we select on the artboard here to establish the fill right here now I personally really like

this a very desaturated dark blue so if I click on this the way you can find in the way I never gate and found it initially just go to this blue over here kind of close to this teal color and

just come down here near the D saturated dark portion so the specific color code that I ended up using is 2 a 3 1 3 6 so we'll hit enter okay next we want to import the SVG that we created for the

logo so we'll come over here we're going to import and choose our logo SVG alright great so now to scale this down just a little bit and I'm going to drag it up near the left corner

maybe right around here will be pretty good now so the design I'm intending on is going to be centered something like this so we'll just keep that in mind that we want and

eat roughly an even amount of space on the right left all right so we'll just pull this down just a bit use my keyboard down in your ear okey and next I'm not really planning to have

a navigation just because this is a pretty pretty simple project so what I'm going to do instead is just have a button called post tutorial right here a call to action so I'm going to take the

type tool it doesn't really matter where it's at because we are going to adjust it and it's going to be post tutorial all right so I'm going to increase the font size by left clicking and dragging

up and we're going to go ahead and make it discolor right here our accent color now something that's real handy is if we take this and we go to fill and we can come over here actually the eyedropper

and we can get the exact color right there and then we click on this and click this little plus and I'll add it to the swatches so that we can quickly reuse this and access it when designing

other user interface elements all right then next we're going to go ahead and take a rectangle tool and draw it around it of course we can see it but we'll fix that we don't want to fill here instead

I'll have a border and this border will be our accent color additionally we also want a border radius just slightly that looks pretty good so let me go ahead and zoom up here just so we can show you I

can show you what it looks like so now we can just select the type and position it with our keyboard arrow key all right all right this is what things look like so far and they're pretty good

so get a good idea for positioning right there looks good all right great let me bring it down just a bit all right so now the next let's go ahead I and draw or design rather

this section right here and we're going to focus on that in the next video I'll see you then all right so now what we want to do is design the actual tutorial listings that

are going to show up upon the app loading so this is going to be you know what is essentially the home page of the home screen all right so what we want to do is we're going to make this in such a

way that there's three or four different panels that are featuring each individual or latest tutorial all right so to do that zoom up here just a bit I'm going to come down we want to decent

that amount of white space between our elements you know sometimes when you get a little bit too close it really clutters things you want your design to breathe especially on the

desktop version so I'm going to draw out something roughly right around this size now of course we can always adjust these and make adjustments as needed in terms of the width so that they really fit in

with the sides of our layout so we kind of just want to eyeball this so that three of these can fit across temporarily we can choose repeat grid and just drag it out look at it's almost

correct there in terms of the size but that's not doesn't really matter because we can also scale this down as needed so if I take I this one oops take this one then we can scale so it's

even so if you look in the very right it's aligning to the right side of the post tutorial button along this edge alright so I'm going to back up just a little bit just so we're here and it's

no longer a part of the repeat grid and now I'm going to choose a color for this so do we want really this absolute white then I kind of don't like that I think it's just too much contrast that's

coming out and it just kind of breaks the flow of the layout so what I want to do is just make us very slightly lighter color of this background so to do that we'll come over here and we don't need a

boarder by the way so we can uncheck that and we can real quickly get our background color and then just choose a slightly lighter color so we're almost like that now I chose a very specific

one when I was developing the app earlier and I'm going to paste that in here actually wow that was I think that was the same sac color code what are the chances of that happening all right so

it's three six three four five that's the color code that we want hit enter all right and now what we want to do is create the title portion of it so I'm going to zoom up here just so we can get

a good look of what's happening so for the title I'm going to left-click drag out maybe right around here I'm planning on having a little circular eye arrow that can be clicked to bring you to that

particular resource so creating a – duze app with the mean stack and either four so this is just some type of bogus title essentially so now for the color here make it white and the size obviously

needs drastically increased and so we'll scale this down and I'm going to be using a Google font called a railway so over here if I type in a railway will find it and I want this variation right

down here which is going to be we'll see you light ya light now where can you find that if you just go to google and type in download railway font this is the first result you download TTFN and

install it alright and looking at this as is I think we go a little bit less maybe about 40 and also we can increase the line height so I'm going to just drag

this up slightly that way it's a little bit easier to read so again I think going to come down in size just a little bit yeah that looks good all right great

so now on the right hand side we're going to focus this on that that little circle I was talking about at the end of this lesson so let's also focus here on a description section so with the type

tool I'm going to left-click drag out an area roughly right around here all right so I'm just going to asdf a real quick here just for a second because we're going to get up a site and

that is Lipson com here's the address and you just gives you some lorem ipsum text that you can grab real quick and integrate as place filler text so I'm just going to copy

that paste it in okay so we want to make some adjustments here first it's too small so I'm going to increase the size by the way let's change our well railway font real quickly and we'll make this

light the size just a tad bit smaller to around 26 and then also we want to increase the line height to around 39 right there alright so looking at that that's pretty good so far and now we're

going to have a call-to-action button which is going to be a more info button we're going to style it the same as this button over here so control C control B drag that guy over here and scale it

down holding shift roughly right around there so this is what your design should look like so far and change this here to simply more info and we'll drag this guy in oops there we go

all right perfect now let's go ahead and design that little circle real quick so I put back into Adobe Illustrator and I open up our logo SVG file I real quickly I'm going to save this as a new file

we'll call this here icon or let's call it just external a temporary pause then I got into my r8 project folder here based on the lesson so external we'll save that hit OK okay so the reason I

opened up the logo is just so that we can create a certain similar aesthetic in terms of the arrow that we create and so this helps sometimes in terms of creating an overall consistent type of

aesthetic so what do I mean exactly well we see we have a certain angle of our slant here this isn't quite 45 degrees I think it's a little bit higher but what we'll do is I'm going to right click and

ungroup this and then we have this one isolated we can delete that and what I want to do is simply take our rectangle tool and then hold shift select both of them get out our favorite tool ever the

pathfinder – front right click we can ungroup this so we can delete this and now we just have this certain slash essentially so what we can do now is we need to create an arrow out of this so

we want the same thickness so I'm going to ctrl c ctrl F and that creates a duplicate on top I'm going to take our free transform tool and skew it eyeball is close to straight up and down as I

can and unfortunately it doesn't align to or really allow you to know where that's at actually another method of doing this which sorry about that kind of a brain fart there just to simply

take the rectangle tool and roll out right there perfect now we have the exact width that we need so now we can come down oops now we can come down here and then also hit ctrl C ctrl F we're

going to make sure we can rotate it hold shift so that's one hundred percent on a 100 degree 180 degree angle alright and then what I want to do is take this here this anchor point with the direct

selection tool we want it to follow the same angle right there same thing with this one up top except we're going to drag everything down because it's a little bit shorter all right so now it

doesn't really look very good and there's a couple issues with that that are contributing to that first this is kind of isn't aligned here exactly in the center of these two and also when we

skew it we change the width of this because if you skew it enough you'll see how much thinner it will become alright so that's what's happening there so we're going to make a few adjustments so

first we're going to take the direct selection tool we're going to move this up I'm no longer kind of interested in maintaining the same angle or realize that was kind of a bad a judgement call

so that's okay now taking the direct selection tool you just left-click and drag or the add Anchor Point tool sorry and we're going to create just two anchor points here and I'm going to drag

this one hold shift and select this one and we're going to drag it down to increase the thickness alright and then I'm going to drive this one let's see here straight up so that's in line with

this down here alright so now it's looking better and so really just required those two steps to get it looking pretty good so now if I I could probably stand to

move these so that's more in line with that angle alright that's looking pretty good alright so it's still unique enough and I think it does follow this the general

aesthetic looking at this and me want to move this over just slightly alright alright I like that so now what we'll do is take the ellipse tool and we're going to come right in

the center which isn't quite the center yet I'm going to drag that here to the bottom we're going to take these three we're going to join them and then we'll make it white and we'll scale it in just

a little bit all right so I like that right there all right and one thing I'm going to do instead of making it white we're going to make it I the same color as our

background of the website so or the app rather so what you can do is just take this color code right there copy by default it has a selected and then I'll change it here and hit OK

so now let's go ahead real quick and take our artboard get it scaled in scale it in yeah sorry about that was a little bit tricky I kind of ended up going a different route than originally planned

but that's okay all right so now we'll save that xvg we're going to bring back XD we'll go ahead and import here's our external graphic alright and we're going to stick it you know right around there

let's see them up a little bit oops right around there seems pretty good alright and then next once we have all this done this entire panel will take everything and hit ctrl G and then

repeat grid so now we can drag right and obviously it's extending too far so before we address that let's drag this down three columns right there or three rows rather and then what we can do is

increase this to even size as well all right that looks pretty good and now at the end let's go ahead and click ungroup grid and hold shift and we can scale these in so that the right sides line up

to the end of our post toriel section alright so that looks pretty good right there alright so I wanted to increase this just a bit I so to do that just to show this bottom

portion here and we'll get rid of a couple just to show what it might look like naturally also adjust the bottom portion for the same height for the aiport oops ok great so now if I hit

play woo got real big on my screen scale it down here there we go good stuff ok now in the next video we're going to focus on a detailed listing or what happens when

you click on one of these panels you

Take the full course: https://goo.gl/07vmFs
View the app you will learn to design & code: http://codepost.net

The logo.svg download (right click, save as):
http://codepost.net/assets/images/logo.svg

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

Subscribe for NEW VIDEOS weekly!

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!