User Experience Design Essentials - Adobe XD UI UX Design

Hi there, my name is Dan, and I'm an Adobe Certified Instructor. Now together, you and me, are going to learn how to use Adobe XD.

Now, this UI/UX design tool is going to help us create beautiful user interfaces as well as streamlining our user experience. During this course, we're going to use an actual freelance project I'm working on. The project needs both a web interface and a mobile app. So it's going to give you a really good understanding of how to run your own potential UX project. And my course here is aimed at people new to Design, and those experienced.

Hey there, you made it in the course, welcome. A couple of things before we get started is that you need to download the exercise files. So I've got some files that you can use to play along with the course. There will be a link on the page here somewhere to download those, so do that first.

All right, a couple of things we need to discuss before we move on. It's some of the terminology that gets used in both this course and in the industry, just so that you know what I'm talking about when I'm going through the course.

So before we get started I want to quickly just outline the brief for this project, because this is an actual project from one of my clients. I thought that would be a nice way to kind of explore XD, through an actual project.

So we're going to start wireframing in XD. Now wireframing or low fidelity is the term used often. High fidelity just means the version, with the fonts, and the colors, and the images. It looks exactly like the final product. The wireframing or low fidelity just has some, has one font, one color, real basic layout.

Hi there, this video is all about working out how wide your design should be. So we're doing website, but this works for mobile devices as well, and apps. How wide should my first page be? There's some easy tricks to work it out, let's get started now.

The next thing we're going to do is, we're going to start building that navigation you saw at the beginning. And how we're going to do it, we're going to cheat. We're going to start with some other UI kits that are out there. When we talk about UI kits, that just means like a template, somebody else has made them for us, and it has a lot of the elements that we can use. That's going to help us go fast, especially at this kind of wireframe stage. So there's some that are kind of built into XD, and I'll show you the way to get other ones from.

Hi there, welcome to the video, all about Type in XD, actually just getting the basics right. Now if you are an Adobe nerd, and you were like, "Man, what am I going to learn from this type of video?" stick around, XD has some quirky text things, plus we throw in some tricks and tips for distributing and duplicating. It's worth your time, hang about, let's get started.

Hey there, this video is all about creating buttons. We're going to make a nice simple button with rounded corners. And you can see here, we created some swatch colors we can use throughout the document. Plus we kind of add some of the, just kind of core components to our Home Page wireframe. All right, buddies, let's get started.

Unfortunately Adobe has removed the free icons as an extra. Optionally, you can access lots of free icons at www.iconfinder.com

Hi everyone, this video we're going to do this. We're going to put in our footer and we're going to put in some Lorem Ipsum for our frequently asked questions. We'll look at some kind of basic font stuff with bullet points, which actually don't exist but we'll cover them all in this video right now.

Hi everyone, this video is all about making new artboards, and saving some time, so we duplicate things, we're creating a new page in our website, plus I'll show you how to make an app or mobile website size as well. It's really easy, couple of little tricks in there. So let's get going.

Hi everyone, it is the class project time. It is time for me to give you a brief, give you your own persona or person to follow, give you some assets, give you some things to do so that you can practice, because following me in the class step by step is good, but doing it on your own is where the real kind of learning comes from.

Hi there, in this video we are going to connect our pages up. You can see the little wires there. We're going to preview it, we're going to make our wireframe interactive. Watch this, ready to click the button? Jumps to a different page. Go back to the Home page. It's simple, but quite the milestone in our course. Let's go work out how to do prototyping now in XD.

In this video you will learn how to create a Popup Modal or popup box in Adobe XD

All right, it is class project time again. Back to the Maynooth Furniture. So you've done Class Project 1, where you made your Home page and your Contact Us page. We're going to do basically the exact same thing as we did here. I want you to prototype using Prototype Mode, and connect these two pages, from your own Maynooth one.

Hi everyone, this video is all about working with groups and isolation mode. Just some quirky things that happen with groups inside of XD. So let's cover them now.

Hi there, this video is all about making symbols. Symbols are just objects that are connected together.

Hi there, welcome to this production video. If you see any of the video titles throughout this course, maybe another one or two, production videos are just videos where I actually have to make something, this didn't exist in the last tutorial, and we need it going forward, but it's nothing very exciting, it's a blue box with text in it.

Hi everyone, welcome to the video about Repeat Grids. Repeat grids are one of XD's, like secret, super-duper awesome powers.

Hey there, in this video you are going to learn some of the issues that you can run into with using Adobe XD, especially with resizing symbols. You're going to learn how that's a weird thing, that can't be fixed, but we'll work out how to do it.

Hi there, this video is all about some Prototype tricks. We're getting quite close to the end with our wireframe for at least our desktop. And there's going to be some things where you're like, "Man, that's taken a long time," or "It seems very exhausting." I'm going to show you a couple of tricks to fix that.

Hi there, this video is all about Navigation tricks and tips. It's also just identifying some of the problems. Some of the things, you're like, "Why don't you explain to us a good way of doing that?" Sometimes there just isn't, we'll go through them now. Ways that I get around them, and if you've got better ways, I'd love to hear them. Drop them in the comments, I'm always looking at ways.

Hi everyone, it's back to our class project. So you're going to be working on your Maynooth Furniture project. There's going to be kind of two main things. We're going to use some of the tools we've learned so far, plus you're going to build a couple of pages.

Hey there, in this video we're going to mock up a basic part of our app, link it up, look at some of the specific transitions that you will use for an app, and some of the things you need to be aware of when you're working with other people's UI kits. All right, let's get started.

Hi everyone, this video is all about testing on our phone. So we build that little mock-up wireframe of an app.

In this video you will learn how to add an iPhone & Android battery & status icons to mockup

In this video you will learn how to fix the position of the nav or battery icons in XD

Hey there, welcome to this production video. We need a dashboard, a login screen, and we need to connect up all the wires.

Hi there, in this video we are going to show you, how to share your prototypes online, email it to people, they can give comments, you can give feedback, it's quick and easy. Let's learn how to do it now in Adobe XD.

Hi there, in this video we're going to create a video of us interacting with a mock-up. So instead of sending them like an interactive mock-up, we're going to do it, and just record ourselves.

Hi everyone, it is class project time again. So you have mocked up your Maynooth Furniture wireframe. I'd like you to create your own public link.

Hi there, this video is all about Mood Boards. We want a mood for our designs. We're going to build it in XD, we're going to look at inspiration places. We get an idea of the feel, the look, the mood, before we move on and actually start building our high fidelity mock-ups. All right, let's jump in.

Hi everyone, it is class project time. This one is about generating your own mood board for Maynooth Furniture. So go out, look at any inspiration sites you like. It could be competitors to the furniture industry. It could be things like Behance, or Dribbble, or Niice. Build a mood board, I want you to kind of stack it into XD

Hi there, this video is all about creating something called a Baseline Grid.

Hi there, this video is all about creating colors. We'll steal them from logos, we'll steal them from images.

Hi there, this video I'm going to show you how to do cool quick tricks, to train transparency using super shortcuts. We're also going to go and change colors globally. Remember our wireframe? Imagine if you could just grab all the colors in one easy thing, and just go and pick a new one. Cool, huh? Let's get started with Adobe XD color tricks and tips.

All right, this video is all about Gradients. We're going to add this Linear Gradient here. I'm going to show you a couple of places where to get good gradient ideas. Cool ones you can borrow, using your own designs. We love gradients. All right, gradient time.

All right, it is class homework time. So you're working on your Maynooth project again. I want you to build up colors for it. So you can do one of two options. You can do option 1, use the colors that I've given you in your logo, or you can create your own.

Hi there, welcome to this video, all about fonts, how we pick them, where we get them from, how to pick good combinations, more good combinations. And then how to kind of get them ready in XD.

All right, this video is all about Character Styles in XD. What a character style is, is a reusable style that we get to add to our Assets Panel, so we can have some consistency.

All right, it is tips and tricks time for working with type and fonts.

Hi everyone, I hope you're ready for amazingness. It's time to look at Plugins in Adobe XD. Now there's lots of plugins, we're going to, in this case, look at a Lorem Ipsum plug-in, because it's nice and easy, but throughout this course we're going to look at more and more plugins as we go.

Hi there, this video is all about buttons. Previously I've just drawn rectangles that-- I just assumed everyone will know buttons, and often that doesn't work for me, so I'll show you here.

Hello you, it is class project time. Now we've done quite a few videos, there's a lot to throw into this one, but actually that was a lot of fairy, right? So what you're going to do is, with your Maynooth Furniture, I would like you to create your Type Stack.

Hi there, this video we're going to draw custom icons in XD. We're going to use something called the Boolean operator. We're going to draw this little Account Man. We click him, and view your account. It's super easy, let's jump in now, and work it out.

Hi there, this video is all about learning about Strokes, like dotted lines and dashed lines, and having these little rounded ends instead of kind of flat ends. So join me, it looks like a long video. We'll cover all the strokes really quickly at the beginning, then we'll kind of build out some other pages that we need for this.

Hi there, this video we are going to learn, how to draw stuff with the Pen Tool in Adobe XD. Custom stuff, easy stuff, a little bit harder, and you have a project to draw the owl yourself. Let's jump in now and learn how to use the Pen Tool.

Hi everyone, in this video we're going to draw this kind of, like cool wavy thing, with our Pen Tool skills. If you've already got Pen Tool skills, it should be easy, if you're new to it, it's probably going to be a little bit tough, but good practice. We're also going to draw this kind of like wavy money note thing. It's meant to be for pricing. Let's get started.

Hi there, this video we're going to draw this kind of graph thing going on. On our Instructor dashboard, we're going to create the dashboard. There's a couple of little tricks for drawing, mainly for dividing these up evenly, A bit of Maths in the fields.

Hi everyone, this video is all about working back and forth with Adobe Illustrator. So it's a separate product you can download from Adobe. There it is there, Adobe Illustrator. Some of you will know it well, some of you won't know it very well. I'll show you how to kind of connect with it.

Hey everyone, welcome back to our class project. It's been a little while, so we need to recap some of the techniques you've learned, and add them to your Maynooth Furniture project.

Hello everyone, if you're an InDesign user, I'm going to show you, how to take your skills from InDesign, and how to connect it with Adobe XD.

Hi there, this video is all about working with images. There's kind of pros and cons, and things to consider when you are working with images.

Hi everyone, this video is all about how the CC library, this thing here, connects between this, plus other Adobe products. We're going to mask out the background here with Photoshop, show you how it quickly updates via the Cloud.

In this video I want to share with you Adobe Stock. So Adobe makes XD, they also own something called Adobe Stock. So Adobe Stock is their stock library site. You can buy one-off images, or you can pay like me, I pay 30 bucks a month for 10 images.

Hi there, this video is all about free images, and where to get them for your XD project.

So we looked at stock library stuff in the last video. Something like Adobe Stock. You might be using something like Shutterstock, or iStock, Getty images, there's lots of paid places. Where do we get images that we can use commercially, that's the big point.

Hi everyone, we're going to look at masking a little bit more. We're going to mask inside circles. We'll do this cool thing where we blur this background, and kind of tint it a little bit as well.

Hi there, this video is all about working with Photoshop. Now if you don't have Adobe Photoshop, it's not going to, like stop you using XD, but I guess I want to show you some cool things in Photoshop, if you do, and also just identify often, as a career, to be a UX Designer, often you need more than just Adobe XD skills. You need some skills in things like Photoshop and Illustrator.

Hi there, this is a production video. Nothing new to learn so you can skip it, but what I'm going to do is I'm going to leave it in here. You will learn is how to draw Arrowheads in XD and just to give it away, it's just a triangle, you can't do Arrowheads in XD at the moment, so just draw it with the Pen Tool.We only do it because I want this project to look a little nicer as we're going through. So there's no new skills, just for the people who do like to watch, what I do while I do it, you can watch this video. For everyone else I will see you in the next video.

Hey there, this is the big one, it's class project time. We've learnt loads in the last few videos, with images, using a bit of Photoshop. Basically what we need to do now is, I feel like you've got enough skills to actually finish your website mock-up. So don't worry about the app at the moment, because we'll do that in a little bit, in future videos, but the website should be complete.

Hi there, this is a production video. We're going to produce an app version. Now there's nothing new about, or different from either building an app, or the website, in terms of the tools, they're all the same. So there's not going to be anything particularly new, but we need to build our app because we want to do some cool stuff when we do our kind of micro interactions and animation in here.

Hi everyone, it is class project time. We're going to be working on our Maynooth Furniture, and the client's come back and said, "Newsflash; we want an app as well," I'm like, "Okay." So you've adjusted your brief, have adjusted your costs, and you need to mock up and test an app.

Hey there, this video we're going to look at the Repeat Grid. I'm going to show you how to dump in loads of images, and it just flows through here, plus the text all updates automatically, nice and quickly. Don't have to copy and paste images, or copy and paste text, which can be a drag. It's one of the hidden features for the Adobe XD Repeat Grid. Let's jump in now, work out how to do it.

All right, so we're in the kind of Placeholder content and plugins, like mash up section of this course, and this is both of them; it's a really good one

Hi everyone, we're going to look at another plugin. This one's called UI Faces. It's really cool you can pick all sorts of different kinds of people for the profile photographs. The handsome people have been generated by the plugin automatically. It's really easy to use, let's jump in and have a look.

Hi everyone, this plugin is all about connecting pugs into images for all of your pug related XD projects. It's not specifically about pugs, it's all about drawing down images from Unsplash, using our plugin called PhotoSplash. It just means you don't have to jump out to the website to grab images.

In this video you will learn how to copy cat or mimic to style and images from a site

Hey there, this video is all about advanced Asset Panel tricks and tips. From the title, you might be like, "What is this video going to be all about?" Basically it's just kind of stuff, we've got to a point now in our skill level that we need a few helping tricks and tips, especially dealing with Artboards and the Asset Panels, just to make our life a little easier. Get on with it, Dan.