Working with existing UI kits in Adobe XD – UI/UX & Web Design using Adobe XD [6/42]

Working with existing UI kits in Adobe XD – UI/UX & Web Design using Adobe XD [6/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. Hi there, in this tutorial we’re going to
get our page started here. We’re going to go to page,
get it to have a navigation. We’re going to pull it from some of
the templates that are built in from XD. And make it look like this. All right, let’s get into it,
and get started in XD. So we’ve finally got XD open. Now, first thing we’re going to do is… download one of the Templates
that XD has helpfully made for us. We’re just going to pull parts
from that as we work because… they’ve just made some pre-made Wireframes
that we can steal parts from… to help speed up our process. You can do it by downloading here,
where it says ‘UI Kits’… there’s an option that says ‘Wireframes’… or you can go up to ‘File’, ‘UI Kits’,
and click on them here. This will just open up ‘Behance’,
let’s have a look at that. And in here, you can
click on ‘Download Kits’. Now I’ve already downloaded them for you,
and put them in the exercise files. So if you download the exercise files,
they’ll be there, ready to go. Let’s jump back into ‘XD’. In here in XD, let’s open up ‘Wireframe’,
go to ‘File’, ‘Open’. And the exercise files
that we’ve downloaded… there’s one there called ‘UI Templates’. So I’ve downloaded this Wireframes here,
and we’re going to start with ‘Web’. Now why are we starting with Web,
and not Mobile? This is totally up to your project. Our brief is quite specific. Their main targets are going to be
using Web, the Web Interface. But if you knew that
your project was based… primarily for either Mobile Web use,
or maybe an App… you would start with Mobile… but we’re going to start with Web,
and just open it up. First things first, is navigating
and zooming around. The easiest way is holding down
‘Command’ on a Mac, or ‘Control’ on a PC… and tapping the ‘+’ key to zoom in,
and the ‘-‘ key to zoom out, nice and easy. A couple of other navigation techniques… is holding down ‘space’ bar, gives me
my ‘hand’, I get to kind of move around. If I zoom in a little bit,
hold down the ‘space’ bar… click, hold, and drag with my mouse… and that allows me
to move around the documents. Now two other little useful navigation
shortcuts before we get started… is holding down ‘Command’ on a Mac,
or ‘Control’ on a PC… and tapping the ‘1’ key. That will zoom in to 100%. And this is where we should be doing
most of our work. Two files zoomed out,
and two files zoomed in… and making kind of decisions on
font choice and size. It’s not that useful, because I use it
only if I’m going to see it at 100%. So it’s great to be at this size. So ‘Command 1’, or ‘Control 1’
if you’re on a PC. Last one, I promise, is my favorite. It’s, if I select this element here… and go ‘Command 3’,
or ‘Control 3’ on a PC… it zooms in, just kind of
highlights that one area. I find that super useful. You can do it to
the whole Artboard as well. Say you want to see this Artboard,
you can click on the name along the top… ‘Command 3’, and it will
center it in your view. So that’s the basic navigation. What we’re going to do is
create our own document now. So we’re going to go to ‘File’, ‘New’,
there are some defaults along here. You hit this little drop down
to find other options. It really depends on what you want to do. I like starting websites with this,
this 920 across x 1080 high. You can type in a custom size over here… or if you’re obviously working with iPhones
or iPads, you can use those by default. I’m going to use this guy, click on it. We’re going to save this one,
go to ‘File’, ‘Save’. And we’re going to put all of our files
for this class on to our Desktop. I’m going to make a new folder. This one’s going to be called
‘InstructorHQ’. And we’re going to call this file,
‘InstructorHQ prototype V1’. So the first thing we need to do,
is let’s name our Artboard. You just double click the words over here,
we’re going to call this one ‘Home Page’. Now if you’re a person like me… who never names your layers
in Photoshop or Illustrator… you’ve got layer, like 57,
it’s got no name. Naming your Artboards here in
XD becomes super useful… when we start prototyping this later on. So, get in the habit. The other thing I’m going to do is,
zoom out, and make my Artboard quite long. Now, because I had nothing on my page,
and nothing selected… I just default to the Artboard. There is an Artboard tool that you
can use, if you want to be official… but because I have nothing
else on my page… I can just easily update the Artboard. You’ll notice, here is the dotted line. This is just a nice little
visual guide here… to show you what the initial
view port is, or say, above the fold. This just means, everything above here… is stuff that people are going
to see first on your web page. Everything under here is going to be
stuff they have to scroll for. So here is where the magic
needs to happen. You need to do your selling,
your main convincing… your Call to Action,
all above this dotted line here. You can adjust this initial view point… if you think that is too tall,
or too small. So first of all we’re going to go steal
some parts of that Template. So we’re going to jump to it. You can go to ‘Window’,
and toggle between them here. So that’s jumping between this one,
and this one. It’s up to you, I use ‘Command ~’ on a Mac. Tilde is the weird wave ‘~’ key
above your Tab key. On a PC, I think it’s ‘Control Tab’,
just toggles between them. So I do a lot of jumping between, that way. So what I want now is, I want
one of these navigation elements. So I’m just going to pick the one that
closest resembles my hand drawn mock-up. It’s probably this one here,
so I’m going to click it once… go to copy, so ‘Edit’, ‘Copy’. I’m going to jump across to my design,
and go to ‘Paste’. What I want to do is,
I’m going to use my ‘Black arrow’. The nice thing about– I’m going to try get it in the center,
but you watch XD, it’s clever. Kind of knows the center,
you can see, that picks it. It’s figured it at the top. Now, when we’re designing this, I pick
the size– if I click on the edge here… we click on the names the easiest way. Gives me my document settings,
my Artboard settings. And we’ve picked 1920 across. I never want to design a site that big,
especially for my Wireframes. I picked this size because I like
to use the same size here… 1400 across to do my website… but I like to have these
extra edges here… just so that I’m not trying
to design within a tiny box. This is here as just kind of
like a buffer area… so that I can see what it
looks like on potentially a larger screen. What I’d also like to do is
extend my Nav along… because it’s going to be
across the top. So what I’m go to do is,
I’m going to ungroup this. Right click, and you’ll see
all the shortcuts here. We’ll go through more and more
shortcuts as we go along… but ‘ungroup’, that shortcut is the same
as a lot of other Adobe products. So, I’ve got this, I’m going
to copy and paste it… because I want this just as a–
I’m going to zoom out. I’m using this as kind of
a guide here to show me… where I should be designing inside of. And what I’m going to do with it,
I’m going to grab the Fill… and I’m just going to lower
the Opacity of this, pull it right down. Just so it’s just as a hint
in the background there… to show me where my boundaries are. What I’m also going to do with it,
I’m going to lock it, so I can’t move it. With it selected, you can either
right click and lock it. There’s a couple of ways
to get him to lock. There it is there, I use the shortcuts… ‘Command L’ on a Mac,
or ‘Control L’ on as PC. And you just get this locking icon,
you can unlock it easily by clicking on it. So that’s giving me my width,
and it just means I can’t move it now. I can select it, but I can’t move it. One of the things I want to do is that… it’s actually above everything here,
in my layers. So when I try and click on my Navigation,
it’s in the way… so I’m going to click, hold, and drag him,
so it’s at the bottom. And you can see there,
in your Layers panel, it’s locked. If you can’t see your layers,
click on this little icon here. So I’m going to click on this,
and hold down– a little shortcut… hold down the ‘Alt’ key on a PC,
or ‘Option’ key on a Mac… and drag one side. You’ll see, it kind of goes up both ways. Doesn’t really matter how you drag it out. But that’s kind of what I want
to get started. I’ve got kind of a guide here to know
where the center of my website is… and my Navigation goes all
the way along the top… because that’s how I plan
to have it on my final result… and it just looks kind of nice
in my Wireframe. So one last thing before we go. Over here, in my Wireframe, the Template… you might have noticed, and already
fixed that, you might have fonts missing. Click on the button, and you can center
the fonts using Typekit. It’s nice and easy, don’t ignore it. If you can’t fix it, don’t stress. It will work just fine with this tutorial
if you can’t find the fonts… no big drama, but if you can fix this up… then we’ll move on to the next video. 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.

7 thoughts to “Working with existing UI kits in Adobe XD – UI/UX & Web Design using Adobe XD [6/42]”

  1. Some people say those kits "were made for lazy people" and I will never agree with such an absurd like that. What's your thought about that "rumor"?

  2. Hi during this video you copied and pasted the nav to stretch it out. I can't seem to do the same thing on the newest version of Adobe XD. Can idea how to move forward??

  3. So UI kits have to be made in XD first, you couldn't bring in a html style guide? Is the XD templates file format proprietary (text,binary)?

Leave a Reply

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