How to find and use existing UI kits in Adobe XD

This lesson is exclusive to members

Course contents
SECTION: 12
Working with Illustrator 10:07

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

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

Download Exercise Files

Transcript

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, 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. 

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.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024