Adobe XD Tutorials

Adobe XD Web Design Tutorial

[Music] all right so we're going to be using the Adobe XD windows beta for this and you can use I the same application for Mac

if you wish however it did just release for Windows so it's pretty stripped down in terms of functionality however there is enough and it is stable enough for us to use it and to use it to design a full

mock-up of this fictional sort of personal portfolio website that we're building as well as create a basic interaction prototype so later on in the course we're going to be using angular

to make the entire project a reality in the browser and we'll do our best here in XD to match what we hope will be the final output later on in the course alright so I'm going to switch over to

the desktop here and I have a new document open up here in XD and the first thing we want to do is to create a custom artboard so down here we have the artboard tool which you can access by

hitting a and over here on the right it does give you just some preset options but I'm just going to draw mine out manually and I'm going to left click and drag and you can see over here in the

width and height over here it tells you what we are in terms of pixels so I'm just going to match it up to around 1200 and we could always edit these afterwards and something high like

around 900 for the height so my current desktop resolution is 1920 by 1080 for recording this and so this fits nicely within my current view at 100% view okay so the first part that we want to focus

on is the header and in the header all we're going to have is our name because this is just a personal portfolio site and then kind of a subtitle kind of your description of what you do and then also

a very simple navigation over here with four differently okay so the first thing we want to do is take our type tool and I'm going to left-click right around there and I'm

just going to in all caps lock hit Gary Simon you can put whatever name you wish and I'm going to switch over to the move tool and select it now we can notice over here we have a fill and your border

may be checked on and off but we don't want a border obviously for this and I'm going to make this just completely black so all six zeros for the hex code now I'm also going to use a web font called

open sans and if you google open sans you can download it for free and then install it once you have it installed you can select it over here and we're going to make this one bold

and also will increase this around yeah we'll try 32 pixels and we want to have a good amount of white space here between the left border here at the top and the top as well you want to try to

make sure these things are even and that's just basic good design fundamentals okay so next we're going to have kind of like a subtitle down over here and so we can simply take this

select it control C and control V and then we can move it down or holding shift now you can notice we have these little guides that show up and these will be handy I when we're developing

this layout and you'll see in a little bit how those come into play so now for this of course it's going to be a lot smaller but we're just going to change this to some other kind of just a title

like for example UI / UX designer from Cleveland Oh H all right now let's go ahead and take this and we'll make it regular and let's try something around 20 maybe even just a little less maybe

around 18 and right around there seems pretty good to me okay so additionally we're going to have a header and that's going to show up just to the right side over here and on

navigation rather and again we could take our name right here control-c control-v to copy and paste and we'll start right around here and all caps lock again home and actually normally I

would just put spaces between but we don't have to do that here makes it a lot easier than say Photoshop so what we'll do is first take this down quite a bit we'll try 18 based on this side I

think that's still a little bit too big so I'm going to try 14 all right now I'm going to move it and we'll see kind of where this aligns up in relation to the title right here so I think right here

is pretty good so I'm gonna hit ctrl-c ctrl-v change this one here to my work control C control V and by the way hit escape now you can see right here once that turns pink in the middle we see we

have an even distance between the elements here about hit escape control C control V and then contact by the way when I'm moving these over a holding shift to keep them on the same path

alright so I'm taking all these and selecting holding shift and just moving them over here just to have an even amount of consistent white space okay now with these I'm just going to instead

of making them black I'm going to make them a little bit of a blue because that's going to be kind of our secondary color as a part of our color scheme be great around here so the color code

for that is one four four three five four okay all right so now the header is done as you can see very simple and the next part we want to focus on is down here which will be kind of like a

thumbnail gallery of our projects and it's going to pull this from the behance API which we'll do obviously later on when we get to the developments portion so right now I'm going to choose this

this rectangle tool and I'm going to left-click and drag out all the way kind of like a container right right around here for now we'll be good we can adjust this as needed in the future now we

don't want a border but we do want to fill and we want it to be a very light gray just so you can see barely see it right here okay now what we want to do is in the project files and I'm going to

link those so you can download them we want to open up a folder that we have alright so you can see we have these thumbnails and I'm just going to drag this over here we don't want to drag it

on top of here because it will fit it into this rectangle that we created so we just want to go out on the outside and we're going to increase this by holding shift and the size will be

roughly right around here for now okay and then what we want to do is select it and choose to repeat grid and we'll pull this to the right right around there should work pretty well and I may just

go out a little bit further to the last one so I'm going to hold ctrl and use my mouse Crower to come out there just so we can see the whole thing to the right alright that looks good and I'm going to

bring these in by left clicking and dragging so I don't want any space between these so we want to write at zero as we can see at the top alright that looks pretty

good here and I'm also going to hit ctrl C and then control V to create a second row just like that and then I'm going to right-click and for now before I do that

I do want to bring up our assets here and I'm going to choose let's see here we have one two three four five six the first six up here and drag them on to the top and you can see how it very

quickly and automatically changes what we want to be shown in here all right and then second we're going to take this and we'll take the other remaining thumbnails right here and we'll place

them on this one and now it gives us just a different look here and then I'm going to take both of these first select a top one right click on group and then ungroup as well so now we can select

each one individually I'm going to just delete these three and I'm going to take these three and increase the scale just slightly because we're going to be using a responsive flex grid for these and

they're automatically going to adapt so the bottom row may sometimes be larger based on the width of the viewport so let's drag this down here just to the bottom for this container and I'm going

to take these six up top by holding shift and selecting all and then hold shift and bring them down just so all six fit nicely in this area alright so real quickly I'm going to

take these three drag them up and then also move this up alright that looks pretty good also I don't like how these two are repeating right there so let me go ahead

and just quickly take the just one of these right here I will choose maybe this shoe over here just put it right there alright okay so in this clip we're going

head and finish off the homepage design by doing a couple things so let's switch over to the desktop and the first thing we want to do is right here when we hover over any of these thumbnails when

we have the final product finished there in angular we're going to have through CSS a hover effect so they're going to grow a little bit so let's simulate that here in XD now unfortunately at the time

of recording this and this may be different based on when you're watching this maybe they integrated this feature already they don't have the ability for you to work in any type of hover based

interaction effects so I'm just going to increase one of them and it's going to be there all the time based on you when we play it through the prototype I but that'll basically be as much as we can

do at this point I so we can just simulate what it's going to look like if you hover over one of these so I'm just going to take this one over here to the right and I'm going to hold shift and

alt and scale it up just a little bit because you don't want it to be too jarring when you're hovering over these so right around there is pretty good I'm going to increase my size just a little

bit and I'm also going to make sort of like a title and it's going to pull the title from the Behance API and it's going to show up on the bottom portion of the thumbnail right here and it's

going to be encased in this white sort of container we don't need a border right there and then inside of it we're going to have text so let's go ahead and I know as you left click right here on

the very edge and then drag all the way out to the right and then Center it by clicking this icon right here and we'll just name this shoe for now we'll just assume the project title is shoe and

we'll bring this down here to a pretty small size perhaps twelve and we'll make this black right there in the middle okay looks pretty good now over here we're going to

have two columns and left one simply gonna say front-end development with a title as well is a fake description then what other one will be a back-end development with fake description and

each one is going to have its own icon that we're going to custom design here in XD mainly with the pen tool and the shape tools really that's all to give you to work with at this point so what

I'm going to do is first we're going to focus on the first icon so we want to design an icon that's relevant to the idea of front-end development somehow so front-end development simply means

aesthetics for the most part so we're going to design sort of like a paintbrush very simple stylized paintbrush over here so the first thing we want to do is use the rectangle tool

here to do the handle portion so I'm just going to drag out something pretty large at this point and then we're going to scale it down a lot of course but we want to be able to see what's happening

so as we can see we have these little icons here if we pull them all the way in we can make rounded corners here and we're going to change the border size from 1 to 2 and we do not need a fill so

we can unjust or deselect that and then we also want a blue color something that's pretty vibrant so I'll use one AAA 3ff if you want to follow along okay so if we select it and double click it

we have access to the anchor points here so I'm gonna select the very bottom line and just hit delete and we can see it kind of rounds off this bottom portion so now we'll take the pen tool and we'll

create the actual bristles portion of the brush now if you're familiar at all with Adobe Illustrator or Dobie Dobie photoshop's pen tool this is a little bit different but for the most part it's

the same in terms of how you draw out anchor points so we'll come out right here I'm going to left click and drag and hold shift and that will constrain it to a vertical angle and

mind you you may have to do this a couple times simply because it's a little bit tricky at first and on the left click right here and then I'm going to bring this right here in and you can

hold the Alt key alright and then I'm going to left click right around here to finish off this Anchor Point in this shape right here so I hit escape we're going to select this and we want to

again change this to two and also use our color and one thing I forgot to do is to add this as a preset so we click this little button right here now we can access it quickly for other shapes now

if you have some issues for instance this isn't lining up correctly over here we can simply double click and just drag over what we need to drag over so if you click on other anchor points you have

access to be able to make other adjustments through the handles and the position of the anchor points themselves I'm pretty happy with this so what I'll do is take these now there's two

different shapes here let's take them and group them so hit ctrl G or right-clicking group and then we can scale this down okay right around there is pretty good and

now let's go ahead and add a title so for this we'll simply put front-end development and once again we want to use our open sans font all right let's get a good idea of what

size this should be we want a good amount of white space between these two elements so we'll pull that down and we'll make this black and then we'll copy and paste it by the way 20 seems to

be pretty good I think I'm going to change this to 18 coffee and then paste and actually instead of copy and paste what we'll do is simply draw out a text field right here and I'm just going to

put in some gibberish for now and I'm going to head over to website that quickly has lorem ipsum text there we go I'll just copy this first line right here and paste that in and we want this

to be smaller and right there looks to be pretty good by the way we want to make sure this is lined up right there to the left so it is that seems good all right now let's

take all this ctrl-c ctrl-v and we'll change this here to back-end development and we'll leave the text the same down here and then finally all we have to do to wrap this up is create another icon

and something that's relevant to the idea of back-end so I'm just going to put code brackets as an icon so we'll use the pen tool and I'm going to come over here just so I get a good idea of

the size I'm going to hold shift alright while Dee's putting me basically in 45-degree angles and go ahead and make this – we'll take this control C ctrl F right now I can't right click and just

flip it horizontally or vertically so we're just going to move this over and I'm going to double click it to get access to the anchor points hold shift while doing so

and we'll eyeball it right around there alright and then we're going to put a slash in the middle and so let me have to move this over yeah we'll try right around here alright and then make them

consistent – I'm going to move this over make sure these are even here bring this down all right right around there seems pretty good okay so now we want to make sure we

have an even amount of white space between the bottom of this element and the thumbnails as well as the thumbnails at the bottom of the thumbnails in the top of these elements and there's a

little bit more as we can see here so we're going to take these and there we go we can see we get an even amount of distance between them okay so now in this clip we're going to focus on

finishing off the mock up here in XD by designing a second sub page and that's one that's going to emulate what exactly it looks like and what happens when a user clicks on a project thumbnail

alright so I'm going to switch over here to the desktop and the first thing we want to do is take our artboard 1 I'm gonna double click right here to rename this to home by the way take off caps

lock and then I'm going to with it selected hit ctrl C and then ctrl B you can see it automatically just kind of pushes that over there to the right which is what we want and we'll change

this one to details okay so when this occurs when somebody clicks on one of these icons right here these thumbnails we're not going to have a navigation show up we're going to kind of do

something a little bit crazy and unconventional which is you know okay for a personal portfolio site especially for a designer just do something different so we're going to get rid of

this right here and I'm also going to get rid of all these thumbnails perhaps except for so I'm going to get rid of these as well as this I'm going to keep this one right

here as well as this also I'm going to just keep one of these over here off to the side and we're going to do is have a two column layout and on expanded desktops large desktops or view ports

this is going to be approximately a 60% width over here and we're going to pull this here to the top and to the bottom and then we're going to take this right here and it's going to match up with

this size now one thing that it did I just recalled is instead of it being a hundred percent based on the width of this column here it's can actually give me the hundred percent of the browser

width so part of it will be cut off and the person won't be able to see a full representation of what looks like and that's okay because what we'll do we're going to take this rectangle right here

we're going to range we're going to send it to or bring to front rather we're going to put this over here drag it in we're going to make it white all right also I'm going to copy this and then

paste it we're going to match it up right there we're going to right click arrange and we're going to send it back by the way it's going to be this color again so take this add that to the

swatches there we go now the reason I have this right here is because based on the size of the project image perhaps ones that are kind of more i smaller in height you're not always

going to see the full representation of whatever it is that's being shown so for that reason the background of this container right here is creating just a basic separation between these two

columns and you'll see what I mean more specifically if you're kind of confused as to what I'm talking about once we start developing the actual project okay so this is what it will look like

basically when a user clicks this this is going to slide in to the right this will slide in to the left this little panel here and then we'll have information about the project contained

right here so let's go ahead and focus on that I'm going to get rid of this icon right here where I bring this over here and we want to mount a good amount of white space between left in the top

and over here to the right as well so I'm going to bring this down or in rather now let's focus on this specifically let's change this here just to some name of the project

I believe this one was elements actually that I pulled and find okay control-c control-v to copy this and paste it and this is going to have back to projects now we don't want this to take

precedence over the main title so we're going to make this smaller actually we're going to make it maybe twelve and also change the fill to right around there which is 6e 6e 6e and for this

we're going to change the fill to black we're also going to increase the size of this perhaps to 24 all right that looks good and also one thing I do want to do them I'm going to make a change on these

three text elements right here is change the line height so I'm going to try it 22 and I'll just space them out just a little bit further all right there we go and then finally the last element that

we're going to have is going to be a call-to-action button right here where it says view project on B hands so let's take the rectangle tool right around there get rid of the border we're going

to have a fill 1 3 1 e 3 0 works pretty well we can have this as swatches as well if we need it down the road and then we'll use the type tool left click from the very left and drag to the very

right center it view on Behance and we'll change this text to or the fill rather to white we could also bring down the size I think just around 18 will work and then move it to the center ok

great so this is what your artboards should look like at this point all right so now what we want to do is connect them I threw the prototype tab up here so

let's click on that and you can see nothing changes except some of our tools goes away so now what we want to do is when we connect this right here once it's clicked over to this page so we're

going to click on the thumbnail and by the way if we go back to the design tab we can see these currently are not grouped together so we have this little text label here this little background

in this may control G to group those so now we'll go back to pro type and we'll select it as a whole and then simply drag this over here to details as the target transition will do

slide right and we'll leave these default values of ease out and point for seconds for duration all right and then for back to projects we'll click on that we'll drag it over here and the targets

home will slide left leave these the same and there we go so now let's go ahead and test this out I'll hit play we'll go ahead and click over here and there we go very easy to use okay so as

you can see based on the transitions that's not exactly how it's going to appear once we start coding in HTML CSS and angular it's going to be a little bit more dynamic in that in terms of

animation but for now in the current state of Adobe XD and its beta stay it's pretty limited in what you can do all right so now in the next clip we're going to get started with just exporting

a couple assets and also setting up the project in angular

Learn how to make this mockup a reality in the browser:
https://goo.gl/mi1fKf
(click show more)
Here’s a written tutorial of this video:
https://goo.gl/vJ1VLM

Download the assets needed to follow along with this tutorial here (this includes the final Adobe XD project file, too):
http://s3.amazonaws.com/coursetro/behance-assets.zip

———————-

Note: I received written permission from Dennis Schäfer to use his Behance portfolio and creative works as the example portfolio for this project.

View his portfolio here:
https://www.behance.net/dennisschafer

…and his personal website here:
http://www.dennisschafer.com/

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

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!