Free icons for your Adobe XD & UX UI projects

Course contents
SECTION: 12
Working with Illustrator 10:07

Questions

1
0
0
0
1
0
0
4
0
3
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0

Course info

89 lessons / 10 hours 32 quiz questions 17 projects Certificate of achievement

Overview

Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry professionals to product high quality & functional mockups. By the end of this course, you will be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.
 
Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.
 
This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!
 
First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.
 
I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.
 
An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.
 
One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.
 
There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.
 
It is now time to upgrade yourself & learn Adobe XD. 


What are the requirements?


  • You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
  • No previous design experience is needed.
  • No previous Adobe XD skills are needed.

What am I going to get from this course?


  • 87 lectures of well-structured, step by step content.
  • Learn to design websites & mobile phone apps.
  • Work with fonts & colors. 
  • Prototype your designs with interactions. 
  • Test on mobile phones. 
  • Send your designs for feedback & commenting.
  • Export production ready assets. 
  • Create your first UX brief & persona. 
  • Create quick wireframes. 
  • How to use premade UI kits. 
  • Learn professional workflow tricks & shortcuts. 
  • You will get the finished files so you never fall behind
  • Downloadable exercise files
  • Forum support from me and the rest of the BYOL crew
  • All the techniques used by UX professionals

What is the target audience?


  • This course is for beginners. 
  • Aimed at people new to the world of design & user experience. 
  • No previous Adobe XD experience is necessary.
  • For anyone that needs to add ‘UX Design’ to their portfolio.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

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.

Downloads & Exercise files

Transcript

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