User Experience Design Essentials - Adobe XD UI UX Design

Free icons for your Adobe XD & UX UI projects

Daniel Walter Scott

Download Exercise Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction



You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Hey there, in this video we're going to go and find icons. You can see, the video here, there's a new icon there, there's Image1. So we're going to go and show you the main places to go and gather consistent icons. There's three main places. And then we'll lay out this real quick. Just to rest the page, or chuck in our Footer. So let's go and do that now. 

So I want some icons, right? I'm looking at my Wireframe here, and I've got a big box underneath that's going to have this plain video, this 'How To' video, and underneath that there's a big Infographic sign. So I need a couple of icons, I need a video I need a mute button, and I need kind of an icon that shows an image but obviously don't want to use specific actual images, and specific videos. A little side note, you can't actually put videos, playable videos inside of XD at the moment. So we want some icons, there's a couple of places to get them. One of the easy places is supplied by Adobe. You click on your Creative Cloud logo, and it's up here on a Mac, and it's bottom right, I think, on a PC. And you want to go to 'Assets', 'Market'. Then click on this little 'Search' icon, then type the icon you're looking for. 

Well instead of doing the video first, we'll do the image because I couldn't find a good video in here, but you can find a good image version. So that's reasonably consistent, like what I had expected as a place holder for an image. You can click on them, check that this one is a Vector Graphic, a Scalable Vector Graphic, SVG. If you're not used to SVGs, they're amazing, and they're new. They're like EPSs from the olden days. They're interchangeable but they're Vector, which is lovely. Click 'Download'. And where am I going to download it to? I'm going to make a new library for this project. I'm going to call this one 'InstructorHQ'. The name of the company. Hopefully it's downloaded into there. You can see, it's syncing away here, it will take a little second. 

If I jump back into XD now, if I go to 'File', open my 'CC Libraries', that's where I've saved it to. You can see, here I have one unsupported element, so that's a bit of a problem, I guess. XD is new and it doesn't support SVGs yet. If you downloaded JPEG or PNG, it will work, but not SVGs at the moment. There's an easy kind of work around and I'm sure they're working hard to update that. Let's close it down. I find it easy just to go into something like Illustrator. Open up your 'CC Libraries' from here. Find the library we're working on, 'InstructorHQ', double click. Then select him. Copy him, I've just gone 'Edit', 'Copy', and in XD, paste it, no big drama. 

One thing I want to do is change the color. You can see, because it's grouped, you can't see the colors. So you can ungroup it. I've just used the shortcut 'Command-Shift-G' on a Mac, and it's 'Control-Shift-G' on a PC, or up here, under 'Ungroup'. So I've got it selected, I'm going to pick colors. So this is one of the icons I want. I'm going to shrink it down now, if you hold 'Shift' while you're dragging any of the corners, it will do it proportionately. Now without Shift held down, you can see, it's a bit squidgy. Another nice thing, if you're holding Shift, hold down 'Alt' as well on a PC, or 'Option' on a Mac. So Shift and Option together while you're dragging a corner, and it goes from the center. It's getting mine to more proportionate size. That's one of the icons I want. I need two more, at two other places. 

So one of the more useful ones is on a website here, it's 'material.io'. This is run by Google. Now if you go to '/icons' there are bunch of cool icons in here. And the cool thing about them is that they're very well considered and use a lot through, say the Chrome browser, like we're looking at now, as well as through all the Android phones. So use this search icon here, and I'm going to put in 'video'. And you can see, that's not the one I want. That's the kind of thing I think will work for this, or say, part of that. It's up to you what you feel might work, I'm going to click on this one. And what you can do is pick on what color you want to download, and the size. It doesn't really matter, the size, because it's going to be SVG format. Remember that Vector stuff, that's awesome. Click on that, and it will download the SVG for you. If you want a PNG you can get it from here. I've downloaded them for us already, they're in your exercise files. So what you can do is go back into XD, you can go to 'File', 'Import'. And in there, find your 'Exercise Files', find 'Icons'. And there is a few in here we're going to use. I'm going to use this one that says 'ic-videocam'. I'm going to click 'Import'. Then, I got a little web cam. Again, I might have to ungroup it. This comes down as a nice little group. 

With it selected now, I'm going to pick the Blue, I'm probably going to get it to a bigger size and now I'm going to go find the last one at my last place which is my new icon, let's go check out where we can get that from. So this is the last place. There's millions of places to find icons, I know, but iconfinder.com is a really nice place. In here, if I want to search for a mute button, and you can see, there's some paid options but you can also say, 'Vector', 'Free', and I want it to be no link back for commercial use. I often go to those ones. You'll find lots of options in here. 

The best thing about this site is that often you can find nice consistent groups. Say you decide you like this style, but if I click on it, you'll notice it's part of a larger group, which can be super useful. In my case, I want something quite simple, so I'm going to use this one. I want the SVG option. Now I'm going to download it. I've downloaded one already, we can go grab it now, but those are the kind of like three places, you can get it from the Adobe Market, you can get it from material.io/icons, or you can get it from Iconfinder. I find that you have to use all three of those places to find everything that I need. There's no one place yet that has everything that I want. 

Let's bring in the last one, so I'm going to 'File', 'Import'. There's an option in here called 'Volume Off'. I see Volume Off. Actually it's a slightly different one than the one I looked at before. Ungroup it. Click this stuff, I'm going to pick the blue icon. Now I'm going to start using these in my big squeeze here, so let's do that. I'll zoom out, and I want you, my friend-- I've unlocked it. And I want this part as well, so I held 'Shift', and clicked both of them. Now if I hold 'Alt' while I drag them we get these two out here. So there's one, two, and then there's another one down here on my little mock-up there. This top one is the video one. And this one here is the image. I'm going to group these together. Doing great, Dan. 

What you might do now is actually just fast forward to the end and go on to the next video because now I'm just going to go through and actually put together these things. So, not super exciting, it's up to you. It's going to be our 'Auto Playing How-To' video. Put that in the middle here. And it's going to be like this, but it's going to be muted to start with. That's why I wanted this icon, I'm actually going to fill it with white, and see if I can grab it again. Hold down 'Shift', use my arrow keys to move it across. That's kind of my solution to try to show you that. Let's put in 'Muted'. All right, so that's that guy. Put him in the middle, make him centered. And now this one here is something similar. It needs to line up. And this is going to be 'Infographic for Ecosystem'. 

Now because this is not actually going out to user testing we don't have to be explicit with what everything is. I love Wireframes, getting the ideas down, but not the whole user testing. Actually we download like a full Hi-res version. So people who argue with me about that though, it's all right, so you, Onboarding message, it's this one here, like two little lists, so what I'm going to do is, it's kind of sectioned off to show two pieces this side here. It's going to be a step by step list for 'Marketing Yourself'. This one over here is going to be the same, but this one is 'Marketing Your Course'. Have a line to separate them in the middle. It can go there, it need to be actually in the middle. And I'll use two of these images. Holding down 'Alt' while I'm dragging, or option on a Mac. This one here is going to be for my Dashboard. This is going to be 'Example of Trainer Dashboard'. And this one is a little special, as in I really want to jump out to my Wireframe and find, there is 'Call to Actions'. It was a bit in here, with grasp and stuff. It is down here. 'Pricing Table Sections'. 

I kind of half want to start grabbing some of these Bar charts, and stuff but I still feel like it's probably too much details in these for what I need at the moment. So I'm just going to keep it kind of simple. I'm going to keep this for my example of User Dashboard. It's going to be an image. And over here is going to be my download of the app. So, select them all, and download. Let's put in 'iPhone app'. Those are requested by the client so we're going to make sure that gets included. Last thing down here, was going to be a Feature List. So I'm just whacking this one in as well. This one here, and this is going to be my 'Feature List'. Now, in this case, I need a bit of Body Text. So I'm going to grab some Lorem Ipsum. There isn't anything built into XD just yet so you can either use InDesign, or do what loads of other people do and go to 'lipsum.com' The nice thing about this site, it's ugly, but you can say how many words you want. I want actually just one paragraph, please. It generates quite a very big paragraph. So I'm just going to grab this first little bit. I'm going to use that as just place holder text. It's very common to use mixed up Latin to do it. So you, I'm going to use my Arial. I'm going to make sure I'm at my 100%. And actually, this stuff here, 14s too small. 

There's no bullet points in XD at the moment so you can either copy and paste one from another program, or hold down 'Option 8'. So hold down 'Option' on a Mac, or 'Alt' on a PC, and just click '8'. Gives you that kind of default. I'm going to use this over and over. Actually what I might do is copy it, just put in a bunch of them, and then space them out with the Line Spacing over here. So how much? Make sure you go back to 'Command 1'. And then, Line Spacing's going to be '32'. I typed '34'. That's going to be it for the moment. So just place holder for this at the moment. So two columns, maybe. Great! That's most of it. 

One of the last things I want to do is grab a place holder Footer from here. At the top there was these UI elements. I'm going to grab, which one? I'm not super worried at the moment. I'll grab this guy here, I'm going to just copy it. Jump across, paste it. And fit him in, ungroup it. Hold down 'Alt' like we did for the top guy, or 'Option' on a Mac. And what I might do is tuck this in now. So I'm going to grab my Artboard tool. Actually I never use Artboard tool, I just double click the edge here. And you'd be able to resize it. I'm going to have to go and change this, because if you leave this as XD and a few other things, the client just comes back and says, "Hey, this is not our address." You run into trouble that way. So I'm just going to put in 'Sample Road'. 'Sample', California's fine. And our number is going to be '000 000'. And this is going to be 'sample@'. We might as well put in 'instructorhq'. Anything else I want to quickly change? email address, that's fine. Subscribe to our newsletter sounds like something that will do. Just a Wireframe. 

And this is going to match the stuff at the top there, so we've got 'Example'. And we've got 'Pricing'. We've got 'Sign Up'. I think there's a login as well, 'Login'. Cool. We'll do copyright 'instructorHQ'. 2018. Nice. All right, that is getting close to our Home Page. We took a little bit to get this kind of chunk going, but you'll see how after a little while you've got elements lying around that you can reuse once you put your own kind of Style for our Wireframe. What I mean by Style, you can see that this one here is, I find highly designed, and looks pretty, and it is good but I find there's been too much time trying to make it look really nice, whereas this, you can see it's ugly, but it's functional. And it's not going to user testing, it's going to the client just to kind of explain all the different parts and make sure there's nothing missing before we go and spend like hours doing the design and spending time with the fonts and the images. 

All right, so that's going to be it for this tutorial. Let's jump into the next one. It's a long one, all right, let's go.