Transcripts
1. Introduction to Adobe XD: Hi there. My name is Dan and I'm an Adobe certified instructor. Together me and you are going to learn 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 that I'm working on. The project needs both a web interface and a mobile app. It's going to give you a really good understanding of how to run your own potential UX project. My course here is aimed at people new to design and user experience. We'll start right at the beginning and move our way through just step-by-step. First step, I'll show you how to construct a good brief and UX [inaudible] , then you'll learn how to create some simple wireframes. From there you learn how to implement and colors and images properly in your designs. You'll learn the do's and don'ts for choosing fonts for websites and mobile apps. We will also cheat a little by [inaudible] premade UI kits to speed up our workflow. We'll build a prototype, both our website design and mobile app design, connecting the pages and adding full interactivity ready for use and testing. I'll share with you all of the secret tricks inside Adobe XD that will really help you speed up all those repetitive tasks, all the way through to exporting the right files and creating your own design space. At the end, I've got a project for you, to help you develop your skills and so you've got something ready for your portfolio. I hope you are ready to upgrade yourself and join me to the Adobe XD. Yes, that's a fake plant from [inaudible] You'll walk into the store and they look great and it's going to look good in the office and then you get it home, and it's a fake plant.
2. Getting started with your Adobe XD project: Hey there. To get started, you need to download the exercise files. There's be a link in the comments or description below. Sometimes, there's a button. You're looking out for the download exercise files. The other thing you can do is during this course, what I do is in the end of every video I save what I'm up to, and the same to something called the completed file. Okay, so every video will have either a link or a button where you can download where I'm up to in XD and if yours is not quite looking the same, you can download mine and just compare the two. Last thing is, is that during this course you're going to be asked for a review. Review is the life blood of me as a trainer and why I get to do this full time. If you are enjoying the course and you do get ask for a review, please drop one in there, okay an honest review, that would help me a lot. All right, let's get going with the course.
3. What is UI vs UX User Interface vs User Experience: Before we get started, we'll just quickly cover what UX verses UI is. If you're new to the field, they get banded around together. UX is more of an umbrella term. It covers a lot of components including UI. UI, user interface design is what we're going to cover in this course. We're going to do a lot in Adobe Extreme where we developed the user interface for a web and app. That's the UI component, but that is generally part of a larger UX project. UX can be broken into three main parts. One is the research side, so you do your user experience research. That's just breaking up and working out who the personas are, who your clients are, what are the requirements of the client. Is building out a brief, all the features that need to be in your product. That's the research side of stuff. Then there's the actual design, the UI design which we're going to cover in this course. Then you move into the user the usability testing, afterwards, you take your XD project and you start testing it. We're going to focus on this middle bit, we'll show you a little bit of how I got the brief and how to get ready for user testing. But I've got another course called How To Be a UX designer, check that out. That's more of an overview of UX design. That'll give you strategies to build out briefs properly, persona's properly, and also the user testing, way to get that done a little bit more will cover in briefly here. But we're going to focus on the actual UX design features. You as a UX designer, just so you know, depends on where you're working. If you're working in a smaller company, medium company, you're probably going to be expected to do all three pots; research, the UI, and the testing. If you're working in a large company, you could just be the UI designer as part of that larger UX project. You might have specialized researchers, you might have a specialized user testers, so it will depend on where you're at. But XD sits in the middle there for the design tools. Yeah, that's it. Let's go through now and start building our stuff in XD.
4. The brief & persona for our real life project : 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, and I thought that'd be a nice way to explore XD through an actual projects. What we had to do this UX research side of things and we had to build out are client brief, which I will show you here and we had to build out the persona, just like who that target audience is going to be. Let's have a little look here on the screen. Both what the client sent me as an initial brief and then what we had to actually move it into so we had an actual project to work through. Let's check out here now. First off, like any good creative job, and you've got to get the brief right especially for UX because often the client, especially clients I deal, with haven't really run through a lot of UX projects before. I guess [inaudible] what's covered, what's not covered, those things, so a brief is always essential for any project. I figured I'd show you the one that we got. This is the brief we got from the client. So basically was pretty thin. They've got a website, bringyouronlylaptop.com and they've built this back-in for it, for the train is to use, and they want to just release it to other trainers to potentially use it as a product. So they want a website, they want an app, they're very basic. So what I did is I had a little look through their details, through the analytics for their website. I know a bit about them because I've dealt with him before about basically I went through the UX research project, working out who their competitors were, what the product does, its USPs, who the potential users would be and built out a brief. So this is the thing that I emailed them and basically just covers the basics of most briefs. Let me just quickly run through it. If you're not interested, you can just skip on and we'll start making XD stuff but in this case, project name description. Basically that's what I've said. So just outlining the description, who's is it for is quite important. So we built a persona. I'll show you that in a second about what the persona actually looks like. But this is what we agreed with the client who the potential persona is. Now, the big thing with personas is that you can guess and you can have a best guess, but you need to revise potentially who your persona might be, because you might go, "Yeah, it's definitely this person," but you need to allow wiggle room and beta spelling and grammar. We've built out who we think the client is for, we built out a features list. Just to make sure that we know what's actually going into the wireframes at the beginning, what the important parts are. We leave out things like a footer or other features that are just normal. The contact us page needs to be there, all of that stuff. So this is the unique stuff for this project. Competitors and product inspiration. This just helps us know and the client know that we're aligned in terms of this is the kind of thing we're building. Deliverables, this is super important. So we go through two parts, there is Wireframing and then there is High fidelity: wireframes are really simple, High-fidelity has all the fonts and colors and images. So we build wireframes purely just for client approval. I don't go out and test wireframes. We'll talk about that letter on. Then we build a high fidelity prototype and then we go out to some user testing. Based on the user tasting, we'll do a usability report and that can be big or small. Basically just feeds back what you found out when you're user testing. Then once that's all finished and we've tidied up any of the problems with the user testing, we'll grab all of the UI assets for the developers. That just means giving them images and code, and icons and symbols so they can build either the app or a website. So that's where our job's going to finish. So I always have a Not Included, just to make sure that the boundaries are set nice and clear. So the first is to prototype the back-end, which is the instruct aside of this website. There was also a student side of it which they've already got it developed, they don't want us to redesign that. so I'm just making sure it's clear. They told me that it's clear, we're not covering that because they expect to use their current systems, the instructor side that we're going to be testing. Costs, so this is what I charge for this job. Jobs vary, often they start at about two and half grand US and get up to about 10 grand for larger projects. This one here basically I workout what my day rate is and it's roughly about $800 and then I work out how many days I need to work with something like a timeline, add in a bit of a buffer, then give them an hourly rate after that. So that if they do start asking for stuff that's not covered in the deliverables, you can say, "Sure, I can do that, but it's going to probably take me another half day." Then they know your hourly rate, so they know that it's going to cost X, Y, and Z. And I find that it's a good way from stopping the job to creep out. So job creep happens with every job. They go, "Can you quickly just add this extra little thing?" You add it and you'll decide later on if you build them for it or not, and then the job overruns and you either surprise them with a giant bill or you just suck in those costs which suck. So I make to sure that the beginning I give him [inaudible] costs because that's what everyone wants. Nobody wants an hourly rate. But giving them an hourly rate, as well, so that when you are chatting and they're like, "Hey, can you also do this?" You're like, "Sure, it's going to probably take me three hours." They know what the hourly rate is and you can add it your bill and everyone is clear right from the beginning, I always ask for 50 percent payment upfront to start the work. There's so many jobs that I end up starting that never get finished. So I like to make sure I get 50 percent up front so I can cover my costs for the initial part. It's the most important part that doing the UX research and working out the features. That's the super important part of the job, I think. So I always ask for a percentage upfront, you might have asked something smaller than that, but 50 percent is quite common. Then 50 percent on completion. Deadlines, every jobs a little different but yeah, this is what we have done. So there's a thin and me. So I'll do the user research to get started with, the wireframes get delivered to bring your only laptop thin, then they give me feedback by this certain date then I give them the high fidelity. Then they give me feedback on that high fidelity and then i actually goes to user testing. Then we allow for a couple of weeks for user testing. This can be different, it depends on how like for this project, we're going to do a lot of what's called hallway testing or over the shoulder testing. We're going to try and meet up with people to do physical life stuff. Find people that match your persona and actually work with them. Now again, we're not going to have a full-on testing here. I've got another course for that. Check out to how to be a UX designer for some of the testing techniques. But yeah, we're going to do over the shoulder stuff possible, probably do some unmoderated testing where we go to you say userstesting.com, I find is really useful, and you can just send it to them and people record themselves shapes quick and it's something you don't have to organize meetings for and you have recording so you can snip out, but so you can show the client some of the results. Then there will be a user testing and completed reports. Basically just feedback about this is what happens in the user testing. These are the changes we are going to make and you make those changes. Once the final changes have been done, we'll hand over the assets to the developer to get built, which in this case would be, I'll probably end up doing the web side of things, at least the front-end web design stuff but the app in the back-end development will have to be done by a developer, which is totally out of my zone. I'm more of that creative side, the front-end side. Yeah, that is the kind of brief that we see in through to the client. I bet you a 100 percent promised that this will not get at the 4th of December, mainly because of the feedback. So your client will see this date and say they'll do it, but things will just turn up late. Just be one or two days late and I just make sure as soon as it is a couple of days late, I revise the next timeline, so that they know that it's them that pushed it out. So when it is like two months overdue, it's not because of me, it's because of their poor feedback. So, be really kind of rigid at the beginning saying that, it needs to be here by this date and as soon as that late, add that to the time and just push that out because this is going to look long if it pushes over to the next year, because it is going to add another couple of weeks in the middle of a Christmas. So we should have been handing this over mid-December and before you know it it's February. Then they had in the middle of December. So just be very clear about timelines and deadlines. Now again, this is my process. You might be working in an agency in that $4000 just wouldn't cover the range. So you might be starting in the $5000 and ending in the $50,000 mark, depending on how large the project is. You might be just getting started and you might be taking home work a lot cheaper than that UK. You might be doing designs for $1500 or even $500 to get your first job. But I figured I'd show you where I'm at as a freelance UX designers. So you've got some idea of pricing and timelines and briefs. Let's have a quick look at the persona that I got made. So this is the persona that we built for this project now, and the initial briefs had a rough outline. What we've done since then is some UX research into who this person is most likely to be. The nice thing about this particular client is that they have lots of Google Analytics and have a strong YouTube channel. So it's easy to get in there and see actual hard data about who's using the channel, who's using their product, and then talking to the client about who this potential person could be. Then what goes into this will really depend on your project. So we've given this guy a name, Peter, that's a fake stock library image, but I feel like it represents the person. We give him an age, his job title, and a place he lives. Now, what you really want to do is be able to communicate. Well, after reading this know the person. Do you need to write down the toothpaste he uses or the car he drives potentially, but potentially not. If it's a Prius or a Ferrari, that's an indication potentially of what kind of person he is. I've seen some personas that just get into it's my new short detail, I guess what you want in there is just so you can have enough and he had to walk away and go, I understand where Peter is coming from in relation to my product. So it could be shorter than this, probably not much shorter, but I wouldn't make it too much longer either. Have a read through this just so you understand who Peter is, why we're doing this project. What I've done for you is in the exercise files there is folder called persona template. You can use this if you want. There's an Illustrator file you can switch out the images and fonts and stuff and use it if you like, you have total permission to use it, but yeah, have a read through and see how Peter does things. So have a read through and understand Peter and his positions that when we're building an XD, we can make some decisions based on what Peter would want, not what the client wants, and not what I want personally. So that's the brief and personas. Let's get on to the next video.
5. Wireframing (low fidelity) in Adobe XD: We're going to start wire framing in XD, now wire framing or low fidelity, is the term used often. High-fidelity just means the vision with the fonts and the colors and the images. It looks exactly like the final product, the wire framing or low fidelity just has one font, one-color, real basic layout. For me the wire framing is probably the most important part. That's where my value comes from my guess is, working out the user flow, how they get from A to B, how long it takes? How many steps? How easy it is? That sort of wire framing is where most of the value comes from for me as a designer. Even though I love the high fidelity stuff, the wire framing I find is quite important. Now, do you test the wire frames? I use wire frames to send to the client so they can check it to make sure that everything's in the right place but I don't use it for actual testing for actual end users or the personas, you can. I find, I'm quick enough at getting the high fidelity versions ready for testing and I prefer to test with those with all the right marketing material, right imagery, fonts and all that stuff in there. The other thing is in terms of wire framing, I'll do them by hand first like I'll something like this, and in my book real quick this doesn't go to anybody but me, so I'll hold it up. The microphone disappears and you can't really hear me. Hopefully you can see that. Maybe you can even hand me but yeah, it's just real basic outlines. There's pages and pages of these and I just go through and flesh out the ideas where everything needs to be going and then start building in the next thing. Just quicker at this way, you might prefer to go straight to computer. That's fine too. Let's actually go get started in XD now and look at some of the UI kits. Finally XD time, he keeps promising it. I promise, next video.
6. Working with existing UI kits in Adobe XD: Hi there. In this tutorial, we're going to get our page started here. We're going to get a page, we're going to 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. Let's get into it and get started in XD. We've finally got XD open. Now, first thing we're going to do is we're going to 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're 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, this is Wireframes or you can go up to file "UI Kits" and click on them here and this will just open up Behance. Let's have a look at that. 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, lets open that wireframe got a "File" go to "Open" and the exercise files that we've downloaded this one in a code UI templates. I've downloaded this wireframes here and we're going to start with web. Now, why are we starting with web and not. Our brief is quite specific. The 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 and the easiest way is holding down command on a Mac or control on a PC and tapping the plus key to zoom in and the minus key to zoom out, nice and easy. A couple of other navigation techniques is holding down space bar. Gives me my hand and I get to 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 one key, that will zoom in to a 100 percent and this is where we should be doing most of our work, being too far zoomed out and too far zoomed in and making decisions on font choice and size is not that useful because I users are only ever going to see it at a 100 percent, so it's great to be at this size, command one or control one if you're on a PC. Last one, I promise is my favorite is if I select this element here and go command three or control three on a PC, it zooms in, it just highlights that one area. I find that super-useful. You can do it to the whole up-board as well. You want to see this up-board. You can click on the name along the top command three and it will center it in your view. That's the basic navigation. What we're going to do is create a run document now. We're going to go to "File", we're going to go to "New". There are some defaults along here. You can hit this little drop-down to find other options. It really depends on what you want to do. I like starting websites with this 920 across by 1080 high. You can type in a custom size over here or if you 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 onto our desktop. I'm going to make a new folder and this one's going to be called instructor HQ and we're going to call this file instructor HQ, we'll call it a prototype, and we'll call this one V1. The first thing we need to do is name up-board. You just double-click the words over here. We're going to call this one homepage. 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 up-board here in XD, becomes super-useful when we stop prototyping this later on. I get in the habit. The other thing I'm going to do is I'm going to zoom out, and I'm going to make my up-board quite long. Now because I have nothing on my page and nothing selected. I just default to the up-board. There is an up-board 2 that you could use if you want to be official, but because I have nothing else on my page, I can just easily update the up-board. You'll notice that here there's dotted line. This is just a nice little visual guide here to show you what the initial view point is or say above the fold. This just means everything above here is the 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. 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 viewpoint if you think that is too tall or too small. First of all, we're going to go and steal some parts of that template, we're going to jump to it. You can get a window and toggle between them here, so that's jumping between this one and this one, it's up to you. I use command tilde on Mac. Tilde is the wide way key above your tab key. On a PC, I think it's control tab just toggles between them. I do a lot of jumping between that way. What I want now is I want one of these navigation elements. I'm just going to pick the one that closest resembles my hand-drawn mock-up, and it's probably this one here. I'm going to click it once, got a copy, Edit Copy. I'm going to jump across to my design, and I'm going to go to paste. What I want to do is I'm going to use my black arrow and the nice thing about it, I'm going to try get in the center, but you watch XD, it's clever, knows the center that you can see that pixels. Stick it to the top. Now, when we're designing this, I picked a size. If I click on the edge here, we click on the names the easiest way. It gives me my document sittings, my up-board would sittings, and we've picked 1920 across. I never wanted to design a site that big, especially for my wireframes. I pick this size because I like to use the say 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 just like buffer area so that I can see what it looks like on potentially a larger screen. What I also like to do is extend my nav along because it's going to be across the top. What I'm going to do is I'm going to ungroup this, right-click. You see 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 IW products. I've got this, I'm going to copy it and paste it. Why? I'm going to zoom out, I'm using this as a guide here to to show me where I should be designing inside of. 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 fill right down. It's just as a hint in the background there to show me when my boundaries are. What I'm also going to do with it is 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 getting to lock. I use the shortcuts Command L on a Mac or Control L on a PC, and you just get this locking icon. You can unlock it easily by clicking on it. 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. When I try and click on my navigation, it's in the way. I'm going to click hold and drag him, so he's at the bottom and you can see there in your layers panel he's locked. If you can't see your layers, click on this little icon here. I'm going to click on this and I'm going to hold down a little shortcut. Hold down the Alt key on a PC or the Option key on the Mac and drag one side, you'll see it goes out both ways. Doesn't really matter how you drag it out, but that's what I want to get started. I've got a guide here to know where the center of our 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 nice on my wireframe. One last thing before we go is that 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 sync the fonts using type kits, nice and easy. Don't ignore it and if you can't fix it, don't stress, it'll work just fine with this tutorial. If you can't find the fonts, no big drama, but if you can fix those up then we'll move onto the next video.
7. Working with type in your XD wireframes: Hi there, in this video, we're going to look at Type in XD. We're going to update some of the nav here. We're going to talk about what fonts we can use and can't use. We'll do some aligning and distributing and we'll update the logo here in the top left, very exciting, not really, but some essential stuff. Let's get in and do it. Working with Type in XD is pretty easy, we'll cover more specific web fonts and stuff later on when we get into our high fidelity final version. But the basics for the moment is I want to replace this XD with our business logo. So I'm going to select on it and delete it, select my title. Now, you might be inclined now to start using the branded logo for the company, it's not handy and wire frames, you just got to keep it real simple on wire frames and then let your creativity run free in the high-fidelity versions of the final versions. I know myself that I get caught up too much in like putting a logo in and you like, "I'll just use the brand color for the navigation," then you start picking fonts and then before you know it, you'll fully designing a wire frame and it should be a quite easy process. So I'm just going to put in INSTRUCTOR HQ so the name of the company, and I'm not going to worry about anything except the color, over here fill, just that it can be seen. So the basics are over here. You've got font size and you've got your font obviously, and the different sizes or the weights, and you've only got some basic type. You've got the spaces between letters, so I can open it up maybe 200 and I get some more spacing between the characters. I don't want to be doing this at this process and this is deleting the space between the lines. Now, one of the handy tricks when you are working with fonts is this thing here is not like a drop-down, you got actually type it and so it's easy as sometimes just to click "Hold", and see this little dot here, grab that black arrow, see this little white dot, he does a couple of things, if I drag him down, he does the font size up and down, which is cool, and you'll also notice if you just below it a little bit, you can start rotating it. My advice though is does not rotate any text in a website or app design, it's just quite hard technically to get "Type" to rotate, it seems like an easy thing to do, but if you've ever dealt with websites before, actually, rotating "Type" is impossible, so we have to turn it into an image and it's a big drama, so try not to do that. The other thing is when you're picking sizes, you would want to be at a 100 percent, you can see I'm at 75 percent. So I'm starting to make some decisions on, "Oh, is this big enough?" But when you're not at a 100 percent, you might make some bad decisions. So if I go in and then command one on a Mac, control one on a PC, then you can get a sense of these are the actual sizes that users are going to see, so I feel like they're quite small and this is quite big. I'm going to shrink this down a little bit, what is it at 20? So I can either drag it here, obviously type it over there. I'm going to stick to a really consistent font size, 16 is a really standard basic, the biggest font that you want to be using. I'm going to click on these guys as well. Actually, I'm going to be adjusting a few of these, so I don't want, I got three of them that I want. I'm going to select all three. Actually no, we'll just do one and then duplicate it. I'm just going to use my black arrow, just deleting them, and I'm going to click on this first one. This one is going to be example, and I'll make the font size up to 16 to match the other thing and I want a couple of them now. A little trick is you can select it and go to edit, copy and paste or Control D on a PC or Command D on a Mac and that gives you two of them. I find the easiest way though is, with your black arrow, with this selected, hold down the "Option key" on your Mac, the "Alt key" on a PC and drag it across, and you'll notice that just as you drag it holding the key down, you get a duplicate. Pricing, login. Remember, I'm pulling these from my features. These are the main things that need to go in and in this case, the last one is sign up. What I want to do is I probably want this guy to the edge here, maybe just inside a little bit, and I'm going to hold Shift and select them all. I got my black arrow holding Shift and just clicking them each, and actually I might drag this one out a little bit further. You can drag them and you watch, can you see the spaces between them start lining, you see that pink dot there? So you could do that, then they will equal, It's up to you, or whether you select them all holding shift and use this option up here that says, see this fourth option in here says, distribute horizontally, just spreads them all out. Now, the other thing you need to be doing is like me, fighting with yourself not to go through and pick a nicer font, just a nicer one, and maybe using uppers and lowers and you just want to keep that out of the moment. You want it to be this really clunky, functional wire frame, no style. As I go through and align them up nicely, there's only so much you can ignore. All right. So that's going to be us onto the next video.
8. How to create forms, checkboxes & buttons in Adobe XD: Hey there. In this video we're going to make some input boxes and some check boxes and a button. We'll also look at creating our first character style. So let's go and start creating now. The first thing I want to do is I'm going to grab the rectangle tool and just divide off a bit of space. This is going to be my on-boarding box. It's above the fold, it's my most important. It's asking people to become a member or at least taste the course. What I'd like to do is, I'm heavy with a white fill, the border here, I'm going to change a little bit to be dark. You know how I say don't spin too much picking fonts and color. I can't help myself sometimes. But I've just picked a slightly darker gray and I'm going to reuse this gray throughout the course. So see this little plus button here, I hit plus, and it means that it's easily accessible. I'm going to do the same thing for down here. I'm going to click on the navigation. I'm going to click on the blue, and I'm going to add that so it's nice and easy to reuse. What I'm also going to do is hit this little dot here. He can be dragged around for your colors. I'm going to drag them to the top-left so he's fully white. Don't worry about this navigation at the moment. So I've got a white color at least there and a full black. So I'm just dragging it all the way to the bottom left, clicking and dragging past that corner. So I've got at least some basic colors to start working with. So I'm going to sit him back, my navigation back to the blue. Now why am I using blue? It just happened to be the one that's on the template and I'm reluctant to go pick the brand color to use, maybe the green from the color I could start using. No. You could use black and white. That's fine. This is going to be my on-boarding box. What I'm going to do is just lock it, remember Command L, or Control L on a PC, actually a bit of type at the top here first. This is going to be when my on-boarding message goes. I'm going to make this just a larger font. On-boarding message goes here. I try not to add any actual dialogue or actual marketing material in here. Again, just to keep it simple, given idea what the title is going to be useful. So now when I want a text field or an input box, then I'm going to go and get from my template. Here, my wireframe, I was looking around and I have found there's a form section. Then I guess it's just picking the style that you like the most. I'm going to grab this one here. I'm going to copy it, jump it back into my option here. That works for me. Instead of entered, I'm going to put in name your course. I was just going over my thing that's had no marketing messages or no actual type, but couldn't think of a better way to describe it without actually writing the text in this case. In terms of the text, I'm going to keep everything gray, just keep it boring consistency through the throttle, and I'm going to add a little plus sign here by just clicking once, hitting plus, selecting it, I might make it a bit thicker so it can be seen, bold, size-wise probably needs to be up, 30 even, Black Arrow, move into position. Next thing I want is a checkbox. You can drag in this thing around if you really want to snap to stuff. It's normally really cool. What you can do is if you're finding that a bit hard, is to let go of that and just use your keyboard. I'm using my arrow keys on my keyboard just to move it around. You can hold Shift, and use the arrow keys and it moves in big chunks, and without it just moves in small little pieces. Now I want a checkbox. So I'm going to jump back into my wire frame. There's one right there. That'll do. I've got him and I copy it, move it across. It's going to be somewhere there. I'm going to double-click him, and I'm going to say, "Use sample video." I'm going to use my color that I'm using throughout. Next I want to put an equals and now I'm going to put in a button here. So I'm going to go find a nice plain button hopefully. There is a button there for me. I'm going to ungroup these. That's a one unit. I'm going to copy it, move it across, paste it, and that's what I'm going to use. This one's going to be same, and this one says preview. What I might do is select it, make it sainted. Now you'll notice that actually it's group with the outside box, but it's not connected. I'm going to ungroup it, so that I can drag it into the middle here. Now in terms of the font size, I've decided to go for a larger, what have we got here? Fourteen. I've got 16 and 14, so I might actually make this a bit more consistent. You, you, and you, and you, all going to be 14 as well. I feel like it's a better font-size. There's something weird thing, I'm going to get rid of him. One of the things that happens to me when I'm designing here is that you can see, I find it hard to see both edges. I want to stay at 100 percent. I'm designing it the right size, but it's hard to see both sides. You're going to have to turn this on and off if you're working on like this screen here is a MacBook Pro. I guess that's a 15 inch. So the screen's not quite big enough. If your are on 13, you're in lots of trouble. But hopefully maybe you might be working on an external monitor. That's what I normally do when I'm not recording. I just have an extra bigger monitor, 4K monitor that I plugged it into to work from. I'm going to at least make this centered, in there. That looks nice-ish. Well, the last things I forgot to do is, you can skip on now we're not getting any more exciting, I'm going to add little option in here that's going to say, "Choose your file and a plus." I'm going to use the same font and stuff as this, so what I wanted to do is I'm going to actually dive into a bit of styles. We're not going to use styles too much at this level. So with this selected, I'm going to ungroup it so I can select on just this type. I'm going to open up what's called my assets panel. So here in assets, I can have something called a character style. So it's like character styles from other products like Illustrator or InDesign, if I click on it, it's just like a pre-made size that I get to reuse really easily. If I click on him, and I click on him now, they all match. If I update this one by right-clicking it, I'm going to edit and say later on and decide, "Actually, no. I think 16 needs to be used." You can see everything goes and gets updated. You can see this one wasn't part of that style, but exceeded some hoo-do magic where it reaches into the document and find the ones that are exactly the same and updates those as well. It's super useful. Actually, I'm going to turn those back to 14. One thing I might do to make it look like a link that can be clicked is do an underline. Weirdly, you can't do underlines yet in XD, it's envision one, so we're going to cut a little slack but its got one of the important ones, so I'm going to get the line two and fake an underline. To indicate a bit of hierarchy between that being the most important and this being the nicks bit, I might actually use a slightly different size, 14 and adjust this in. They can go underneath. You can use our sample video or choose you own file. When we get to a high fidelity version, I'll be able to show that a lot more and clear out. I'm fighting with them. I really want to spend some time making this look like a second option, but we're going to leave it there for the moment. Let's get on to the next video.
9. Free icons for your Adobe XD & UX UI projects: Hey, there in this video we're going to go and find icons. You can see the video here is a mural icon there, there's an image one. So we're going to go and show you the main places to go and gather consistent icons and this three main places, and then we'll lay out this real quick. Just the rest of the page and we'll check in our footer. So let's go and do that now. So I want some icons. I'm looking at my wireframe here and I've got a big box underneath that's going to have this auto playing video, this "how to" video. Underneath that there's a big infographics. So I need a couple of icons, I need a video, I need a mute button and I need a icon that shows an image because I obviously don't want to use specific actual images and specific videos. A little side note, you can 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. So you click on your Creative Cloud logo and it's up here on a Mac, and it's bottom-right on a PC. You want to go to Assets and then Market, then click on this little Search icon and then type the icon you're looking for. Instead of doing the video first, we do image because I couldn't find a good video in here, but you can find a good image version. So that's a reasonable, consistent, like what I'd expect as a placeholder for an image. You can click on them. Check that this one's a scalable vector graphics SVG. If you're not used to SVGs, they're amazing and they're knew. They are like EPSs from the olden days. They're interchangeable but they're vector, which is lovely. Click Download. Where am I going download it to? I'm going make a new library for this project. I'm going to call this one Instructor. Let's write the HQ, the name of the company. Hopefully it's downloaded into there. You can see it's syncing away here. It'll 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 t, and you can see here I have one unsupported element. That's a bit of a problem I guess. XD is new and it doesn't support SVGs yet. If you downloaded a JPEG or a PNG it will work, but not SVGs at the moment. There is an easy workarounds and I'm sure they're working hard to update that. Let's close that down. I find it's easy just to go into something like Illustrator. Open up your CC Libraries from here, find the library that we're working on, Instructor, HQ, there is it, a double-click them, then select them. Copy them. I've just gone on Edit, Copy, and then in XD Paste it. No big drama. One thing I want to do is I want to change the color, and 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 its Control, Shift G on a PC or up here under ungroup. Cool. So I've got it selected, I'm going to pick one of the colors. This is one of the icons I want, I'm going to shrink it down now. If you hold Shift while you're dragging in either corners, it will do it proportionately. Now without shift held down, you can see it's a bit squeegee. 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, show you two other places. So one of the more useful ones is on a website here, it's material.io, so this is run by Google. If you go to /icons, there are a bunch of cool icons in here, and the cool thing about them is that they're very well considered and used 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. 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. What you can do is you can pick them what color you want to download and the size. It doesn't really matter the size because it's going to be an SVG format. Remember that Vector stuff, that's awesome. So you click on that and it will download an SVG for you. If you want a PNG, you can get it from here. I've downloaded them for us already and they're in your exercise files. So what you can do is you can go back into XD. You can go to file and you can go to import. In there find your exercise files, find icons, and there's a few in here that we're going to use. I'm going to use this one, it says IC Webcam. I'm going to click Import and got a little webcam. Again, I might have to ungroup it. Just 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 the bigger size, and now I'm going to go find the last one at my last place, which is my Mute 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 about iconfinder.com is a really nice place in here if I want to search for a mute button. You can see there's some paid options, but you can also say Vector, I want Free, and I want there to be No Link Back for commercial use. I often go to those ones and you will find lots of options in here. The nice thing about this site is that often you can find a nice consistent group. Let's say you decide you like this style, but if I click on it, you'll notice that it's part of a larger group which can be super useful. But in my case I want something quite simple, so I'm going to use this one. Yes. I want the SVG option and I'm going to download it. I've downloaded one already and we can go and grab it now, but those are the three places. You can get it from the Adobe market. You can get them from material.io/icons, or you can get them 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. So let's bring in the last one, so I'm going to go to file. I'm going to go to import and there's an option in here called volume off, I see volume off. Actually slightly different one than when I looked at before. I'm going to 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'm going to zoom out and I want you, my friend, I've unlocked it and I want this part as well. So I've hold Shift and click both of them. Now if I hold Alt while I drag them, we get these two big guys here. So there's 1, 2, and then there's another one down here on my little mock-up there. Great. This top one is the video one, and this one here is the image. 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 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 my solution to try show that. Let's put it in this muted, that's that guy and put him in the middle. I'm making asymptote, great. Now this one here is something similar this is the line up. This is going to be my Infographic for the ecosystem. Now because this is no got actually going out to use the testing. We didn't have to be explicit with whatever the thing is. I love wireframes, getting the ideas down, but not the whole user testing that should be done with a full Hi-res version. They'll be people who argue with me about that though, it's all right. You on boarding message. This one here is two little lists, what I'm going to do is sectioned off to show two pieces. The slide here, is going to be step by step list for marketing yourself. This one over here is going to be the same but this one is marketing your course, I've aligned, separate them in the middle, you can go there, you 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. There's going to be an example of trainer dashboard. This one is a little special as in, I really want to jump out to my wireframe and find there's call to actions. There was a bit in here with graphs and stuff, it is down here, pricing and table selection. I have want to start grabbing some of these pie charts and stuff, but I still feel there's probably too much detail in these for what I need at the moment. I'm just going to keep it simple. I'm going to keep this from my example of user dashboards. It's going to be another image and over here is going to be my download of the app. Here you go select them all and download. Will just put an iPhone app. That was requested by the client, we're going to make sure that gets included. Last thing down here was going to be a feature list. I'm just waking this one item 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, I'm going to grab some Loren ipsum. There wasn't anything built into XD just yet. You could either use InDesign or do what lots of people do and go to lipsum.com. The nice thing about the site, it's ugly, but you could say how many words you want. I want I actually just one paragraph please. It generates as a very big paragraph. I'm just going to grab this fist little sentence of it. I'm going to use that as just place holder text. It's very common to use mixed up length to do it. I'm going to use my Arial. I'm going to make sure I'm at my 100 percent and actually this stuff here, 14 is too small. There's no bullet points in XD at the moment. You can either copy and paste one from another program or hold down Option eight. Hold down Option on a Mac or O a PC, you just click the Eight, the number eight key gives you that default. I'm going to use this over and over actually, what am I do is copy it and just put in a bunch of them and then space them out with the line spacing over here. How much? Make sure you go back to Command one and then line spacing is going to be 32, type they fall. That's going to be it for the moment. Just place holder for this at the moment, two columns maybe. All right, great, so 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, let me grab this guy here, I'm going to just Copy it, tap across Paste it and fit him in, ungroup it, hold down Alt like what we did for the top guy or Option on a Mac. What am I doing is tucking this in now so I'm going to grab my Apple tool actually, I never use the Apple tool, I actually just don't click the edge here and you're 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, client just comes back and says, "hey, this not our address" and you run into trouble that way. I'm just going to put in and I'll put in sample road, sample in California is fine. Our number is going to be 0, 0, 0 and this is going to be sample. We might as well put instructor HQ. Anything else, that I want to quickly change, email address that's fine. Subscribe to our newsletter sounds like something we'll do. Just a wireframe and this is going to match the stuff at the top there. We've got example and we've got pricing, we're got sign up. I think there's a login as well, login. There would we copyright instructorHQ 2018. That is getting close to our homepage. We took a little bit to get this chunk going, but you'll see how after a little while you got elements lying around that you can reuse. Once you've got your own style for a wireframe of what I mean by style as you can see that this one here is, I find highly designed and looks pretty and it is good. But I find has been too much time trying to make it look really nice, whereas, this you could see it's ugly, but it's functional. It's not going to use a testing. It's gone to the client just to explain all the different parts and make sure there's nothing missing before we go and spend hours doing the design, and spending time with the fonts and the images. All right, that's going to be it for this tutorial. Let's jump into the next one, is a long one. All right, let's go.
10. ProtoTyping & adding interactivity to Adobe XD: Hi there. Welcome to this tutorial where we're going to start prototyping and adding a bit of interaction. You can see these wires hanging around here. What happens is when I hit "Play", I can hit "Preview" and then close it down and go back so that's going to add a little bit of interaction so that we can stop moving around these bullets and start doing some testing while we're working. Let's get started. To start prototyping and connecting up our wire-frames so we get some interaction we need to have more than one page. We've got an outboard called homepage. You are a couple of ways of making a new one. You can click on this and well, trick that we've been using so far in this course we hold down the "Option" key on Mac or O key on a PC and then click the word "Homepage." You can just drag it across and get a new one. I don't want all of these elements, so that's not what I'm going to do. I'm going to go to undo. You can go to your last panel and just click this guy, right-click him and say duplicate, and you'll have two of them. I want a new page. To do that, you can grab the outboard too and just click once over here. You could go and resize it if you like. If you need a different kind of document, you can see down here, there is the Apple ones, there is Google, there is Microsoft web. So you can click on any. Let's say I needed an iPhone, and that'll add them to it. That's easy, adding pages. Before we connect them out, we just need to add something to this page so there's something to connect to. We're going to rename the onboard and this one's going to be our preview option page. When people click on this little icon here, I'm going to zoom in. When they click on this, they get to decide on what kind of preview with that they see the student side, or that teacher side. First up I'm going to borrow some bits. I'm going to grab you. I'll grab you as well. Anything else I want? But a text I'm going to be you. Copy them, click on this page, paste them, they come along for the ride. That's the bits that I want. I'm going to resize this to be something like this and the middle-ish. I'm going to use these two, I'm holding shift, to grab them both. Looking at my wire-frame, a hand-drawn one, I've got two of these. I want this one to say show me. Actually, I want them both to say show me. It's this text here. I'll use all 16 point for the slightly larger text. In here I want to say, and what your student sees. That guy goes there, I'll write align them so that when I duplicate them and get on hand, say watch. You see as the instructor, I'm going to be interested to say, I'm just using this language to get started. It's going to be the testing that allows me to work out with the fact actually makes me since. I feel like it might not. I am pretty sure the user tasting is going to come back and go. We get confused here. But okay, it's alpha star. The other thing I want is a cross. I could use the X on my keyboard, but that generally doesn't look that nice. So I'm going to go through in here and find a cross. There is one there. It's handy little document, this guy, isn't it? I'm going to click on him and group him. I want you please. I'm going to paste him here. He's going to go over here and he can he can stay blue. Now we're going to break this thing up as a prototype. I've got two pages and I want to be able to prototype it and connect it. Why do we doing it now and we're not finished a wire-frame, I find that's a really weird way of doing it. What I need to do while I'm developing this, is I need to design it and be testing it on both a width and a phone as I am working rather than waiting to the end. You work between designing and prototyping quite a bit. We're in design mode. You can see we've got our design options. If you've got a prototype, this is the way where we can add interactivity. What I'd like to do is first of all, that's my homepage. I'm unclear. That's kind of home-based and it'll be whatever the previous stats it. Then prototype, and you'll notice that none of the options change, we're missing a little properties panel here. But what we can do is what I wanted to do is when this preview button is clicked, not the text, this text is by itself or the box. I'm actually going to select them both. Watch this, if I click off in the background and then click on shift, click both of these, I can group them. I'm using the shortcut but the long way is there. With them both selected, this is little option that pokes out, that is how we connect upwards. I'm going to zoom out a little bit. I'm going to click "Hold" and drag it. That means when that button is clicked, it's going to go to this page here. Now you get some options, by default it is going to dissolve. This is going to be like a fade going across and there's a bit of an Ease which just makes it look nice in terms of the motion. This is how long it takes. The cool thing about it is whoever did this in XD, they're all pretty sweet to start with, and I don't really need to change them. Let's test this thing and figure out what we need to do next. To test it, we use this little play button up the here, it's desktop preview, because we're previewing a web page, it's best to preview actually on your laptop. If you were designing an app, you'd go straight to mobile to be testing. We'll talk about mobile testing a little bit later on when we start building the app version of this, but we're going to hit "Play" now. Here, this is like a little window that opens up and it allows us to do our testing. All right, so now we're going to click on preview and you see it did that little cross dissolve faith thing. You might not like that, you can change it and turn it off. Now I can click on anything. We're stuck. I'm going to close down the preview. In here I need to do some other bits, so that works. You can see that it's connected. Another way of getting to the this thing here it says example, I'm going to use that as my button to get across. But one of the problems is that, that ticks is quite small so it'd be really common here in XD too. If you've got a button here, I'm going to make a fake little buttons. I'm going to go back to Design. I'm just going to make a big area for this to hit. I'm going to turn off the border, give it the same blue color so it looks the same as the background. What I want to do is make sure that this send the text. I'm going to go bring to front. Grab my rectangle and it's a little hard to see I guess, but I've shift click to them both and I'm going to group them. That means that just the clickable area is more. instead of just a little ticks which can be hard to click on. I'm going to make it nice and big, especially when we get down to mobile versions of prototypes. Back to prototype. Zoom out a little bit. I want this guy to go to the same one. It doesn't really matter where you click it and it will jump to the right point. Do we want to dissolve. We'll just test and show you some of the other ones. We could do slide right. You can decide what you want to use. What I also wanted to do is this little cross button, I want it to collect to go back to this page here. What I'm going to do the same trick. So back to design, grab this tool, draw out something that's easier to hit, turn off the border. It's easier to move this to the front than it is the other one to the back side. Go behind this box, bring him to the front, find my pucks. A little bit hard. I'm using my arrow key just to tap it around. Second both holding shift to click, both of them, group them. Now I've got a prototype. What you might find is that dragging and dropping is because you can zoom out and then go and drag it here and that works fine. But sometimes it's easier actually. Or I want to undo that. Undo is not working. The normal, typical undo when you're in prototype mode. What you can do, say say you want to break that, just click and drag it to no-man's land and that will disconnect it. I find often when I'm in this close, I don't want to have to zoom out to try and find the app board, is you just click on this, in this case, previous outboard would work or homepage. I'm going to get to pick out back to the homepage and you'll see it jumps out like that already. Either way you want to do it. Let's go and preview this now. Let's go play. For now we can click on this. Cross that out. Came about a little slide left, which is weird example. I don't like that sliding. It works, but I get confused. There's a special time and a place mainly through phones where the slide works, not through websites because no websites do the slide thing. It's just weird. We're going to go turn it off. The other thing is, is that this is a separate window. Now I'm working on my laptop at the moment for this training course. But what I do when I'm working normally is that I've got a big full came on to that I work from and I have my laptop on the side of it. I like working from two monitors. What I normally do is I've got two monitors. I've got this laptop and I've got a big monitor that I worked for mainly. I'll have them both open next to each other and I'll have this panel on one of them, normally in my laptop and I will be working on this pot in my main big monitor. The cool thing about it, it's a live updates. As you move stuff in here this thing updates. I have this open 100 percent of the time. I could be making adjustments, seeing what it looks like at 100 percent and be playing around with the interactions to prototype so I don't have to keep cutting that "Play" button. Anyway, I have to close it down and open it back up at the moment because I'm just waiting on the laptop. What I would like to do is example here. I don't like the slide. I'm just going to go to dissolve. Probably just needs a jump by dissolve looks nice. Click on this little dot here. You can click on either side and I'm going to go to dissolve as well. That's the basics for prototyping. We're going to go through and build more pages and prototype more as we go along but that's an introduction to it.
11. Production video student views: Hi, there. This is a production video. What is a production video? It's where I need to make some stuff for this tutorial to carry on. You can either follow me or skip it because we're not going to learn anything particularly new. You see some of the workflow that I go through so it can be interesting or you can just skip on to the following video where we learn some new stuff. In this particular video, what we're doing is we're going to create this page and connect that button so that jumps to this, create a cross button to go back into this. There's nothing really going on here because the client in their brief is asked us not to work on student view. They've already got student view. They want us to prototype the trainer or instructor view. All right, let's get into the video and start making it, or you can skip it and I'll only be a tiny little bit offended. Go then. First up, start we need another page, I find this is easy to hold Alt and just drag this across so you get a duplicate. I love all the pink boxes, the automatic spacing. I can rename this and this is going to be Student View. I'm going to keep only a cop-out pieces out of here. I am going to select all of this on you gone. I don't want the button I just want the tics and the close. In here I got some tics. This is what the student sees the front-end of the platform. Remember the client is asked us not to design this, so we just leave it in here so that the button has got somewhere to go. What I might do is, because 16 is good, yeah that's final size and I'm going to put a cross here. What I might do is actually turn this into a bigger button. I'm ungrouping it and I am selecting on it. Ungrouping is not working. It is totally working. I'm going to put the border back on it and try and make it into a perfect circle. Easiest way is not to link them, it just to make sure that they're the same height and width. Select both of them are horizontally align, vertically align, group them. Cool. This is going to be on this page, not much going on and I'm going to make sure it's in the center. Now let's bring it up. We're going to go to prototype. I am going to do a couple of things. It's that when this button is clicked, the Show Me, I'm going to group it with the blue box and you can group while you're in prototype, or design, which is kind of cool. When you click that, you're going to go to this page here. What we're going to do, is dissolve and we're going to continue on with that. When they click on this cross button here, I'm going to get them back to the homepage or that preview option, probably homepage. I'll test this to make sure. Let's do that quick test to see where we're at. You would have a click on the preview and you can see what the student sees. This is what the student sees, close that down back to the homepage. I think that's probably the best way to do it. That's why I like having prototype open and working as you're developing, not waiting till the end. That's going to be it for this one. Let's close this one down, let's go to Full View Command 0 or Control 0 on a PC. Let's save it and get onto the next video.
12. How to make & use symbols in Adobe XD: Hi there. In this video, we're going to look at symbols in XD. So why they are good is because when I've got a symbol, you can see here, I've got the navigation used on more than one page, and when I update it, they both update and change which is super helpful for things that are reused across lots of documents like footers and headers. Let's go and look how to create those now. To create a symbol, we're going to reuse this both as the header and the footer. I'm going to create a new page, and there's lots of ways, I keep showing you different ways. I'm going to go back to the page tool, and click on this, which is my default that I used at the beginning, I'll drag it by dragging the name underneath, and give it a name, and I call this one the "Instructor Dashboard". I want to extend it out just a little bit, cool. So remember the benefit for using a symbol is I can connect them all together and when I make updates to the navigation, say on this homepage here, it'll update for all instances of it. So I'm going to zoom in here, what I want is I want all of this. Starting up here, in the gray area with my black arrow, I'm just clicking, holding and dragging, just settle courses like top little bitty bit. What I want to do is, you can see I've selected lots, but have also selected this light blue thing that I'm using to give me my widths. So I'm going to hold "Shift" and just click on Home to get rid of them. I've got everything along the top here. How do I know, I drag it off to check. They all came along for the ride. So what I'm going to do is you might be on your"Layers" panel, you want to go to this top one here. The "Assets" panel. Within here, something I'll go "Symbols" click plus, and that's it. That is now symbol that I get to reuse. Let me click hold and drag it and that's useful I guess, I've got a nice little thing that I get to reuse, but I could copied and pasted that I guess. What's really useful, is now, if I comes back and says, actually some people use "LOGIN" as one word, it should be two words. It's up to you. But let's say we've been convinced it should be log space in. So we've done that, but by default, it actually becomes a unique symbol. So this one up here has not changed yet. What we need to do is right-click this fellow and say "Update All Symbols". It updates symbol in the library. I'm going to have to zoom out, this one here. Come on three to zoom in on it, zoom in a bit more. You can see it's login. So that is the peg for symbols. You get to link them to this thing, so that easily drag out and reusable, but was really super-useful as you'd update one and update them all, so obviously good for navigation. Anything up here is in all the pages, so I'm going to do the same down here. I'm going to grab my friend. I'm going to shift click this guy, so only got that selected, just check that I've got it all and I'm going to get a symbol. You can't name them yet, the icons are a little bit small for this one. It's okay. Is this the right page? It is. Drag him on, coming here, and there you go. If I update one now, they'll both update. Couple of things I want to do to finish this off is I want to put that big blue stripe in the background so I know where the edges are, so you copy and over here, paste, wrong one. I want you and go to unlock it. Copy it, lock it again, and then come over here, click on this dashboard. If you hit paste, the cool thing about it, it goes perfectly where it should. The only trouble is it's probably on top of everything else. So I'm just going to right-click and say, "Send to the Back", and then I can either use Command L, or Control L or I can right-click and go lock. Cool. It gives me my boundaries. What I need now is a left-hand menu. I'm looking at my hand-drawn wire-frame here. So I want that left nav and I'm going to jump out to this thing here and I'm going to find, a left hand nav, where can I see one? There's a navigation over here that looks good. It's going to be my starting anyway. I'm going to grab you, also copy it, drag it across, paste it, and that'll be my starting for this one. I'm going to ungroup it all, because it's a few things that I need to do. I need to clear the bottom and left to tidy that up in a little bit. I don't need a way to stay there. Coming here it require hard click. I do want the word dashboard, so I am going to probably delete you, move here to the top. I'm going to make this wood dashboard, but I'm going to use my 14, about 75 percent, it's bad habit. You've got to be at 100 so you can do font sizes, I guess this one is going to be dashboard. Dashboard. I will make this bold. Cool. Underneath here. Actually, I'll make this 16 using 12 and 16 to differentiate heights. Now, what I'll do also is grab my top tool, click in here. This is the ticks that we're going to use with my mumbling now, because I'm just filling in fonts. To be honest, if there's going to be any more genius in this class that you might want to hang around for, I think about of genius. So I'm just putting these in. What I might do, is just put the little dots in the front to make them look like a sub menu. Remember there I am putting in, it's holding Alt and hitting 8, or option A on on a PC, because this doesn't have bullet points to start with, because a dashboard you for the different things you can choose. Awesome. One last thing that's on my little hand-drawn wire-frame here is, and I've got that little ad from the homepage. Now it's not a really easy way to jump between pages, you can use the layers panel, go back to here, and go back to homepage. It's not that great, I don't think. Hopefully one of the upgrades will give us a feature like that. So here, I'm not why come back for this but in takes but I did. So we're going to use it, and let's go into here command 3, a little bit more paste, and it's going to go in this little area here. Now, I think this needs to be bigger, because I'm going to have longer dimes than they definitely go download the app thing, maybe even smaller. There's actually zero genius coming. The last thing we're going to do is because we're going to use this course, all of the instructor and pages. We're going to turn it into a symbol itself. So we're just going to drag a box around. All of this, deselect the lighter blue color and say, its "Symbol". That's going to be it for this video. If you've waited to the end, you are awesome. That got a bit painful there at the end, I know, but the next video is going to be awesome. We start doing repeated grids. Oh my goodness, it's awesome. Let's go and do that. Now in the next video, add it up.
13. Using the repeat grid in Adobe XD: Hi there. Welcome to the best video in this whole course. It's about the Repeat Grid. I love Repeat Grid. It's got a lame name. It should have a super exciting name, but it doesn't. What it does is you draw a certain lines and it just repeats on forever. Look at that. Some with these we're going to make this course list and it shrinks and contracts and just keeps adding more and more forever. So good, I love it. Let's go and learn how to do it now in this video. We're going to be using the Repeat Grid on our dashboard here. I'm going to draw out a box for arrow and where are we going? We going to the rectangle tool and draw a box roughly about that size. I'm going to cut like three step across. I'm going to add a bit of dummy text and type in stats and I'm going use my character style. I might actually use this 16 for this one. It's going to have stats and there's going to be a number in the middle, what number. I'm not sure yet so probably dollar sign to start with. I'll put in $4,000. This is going to have things like the monthly recurring revenue, how many visitors on the side, how many sales this month versus last month also the dashboard stats. I'm just put this in, trying not to design it. Trying not to. Just some basics. Then it needs to be a little bit of explanation tips down the bottom thing. I'll think I'll steal it from the Homepage. This will just describe what's going on in this particular tile. There we go. Paste, yes that looks beautiful. It's going to go in the middle. They will all go in the middle, let's do that. Let's even select them all and do properly again. We've got our tile. Actually, there needs to be like a little see more button. I'm going to add a little plus probably in this top corner here so you can click. Not sure if I should be the three little dots, or the nav sandwich now probably not sure. Will decide and use a testing. I've got my tile. I'm going to select all of these pots. This is the magical button here. Repeat Grid should be cool. I don't know something more amazing, the amazing button or something. I click on this and look what happens. Magic just like duplicates it, which is cool, but it's even more awesome look at that. I'm not sure how many of these we're going to actually have. I'll do this many. The things you can do to do adjustments is you can obviously see these pink things appearing between the lines. I can drag those out to expand them or contract them. You can go negatives. They are actually looking okay the way they were before. I'm going to leave them like that. The Repeat Grid will obviously duplicate them. But what gets nice is I can grab the type tool I can actually make these quite unique. This one might be 50k. It might be to do with the numbers. Now, see that I could adjust the numbers. I'm going to actually make that centered. I'm going to grab that and make them all centered. But if I stop physically moving them, they're all connected. It's the best of both worlds I get to go through and actually put in different data because I'm just a represent the different things hence I have full control over if I want to actually delete the plus button, I just delete it off one and they all deleted. If I add one. If I decide that I actually want to add a little thing to this guy, you'll notice that they all get it. Repeat Grid is awesome. We'll leave that there. I want to show you one last amazing piece of feature for the Repeat Grid is that you can work with images as well. What I'm going to do is I'm going to build out courses page, which is the next page on this list. Actually, what I'm going to do is that I'm going to speed it up because it is nothing new. I'll just make a new page and build out the first element. Let's speed through this. Tyler, take it away, speed it up and I'll see you when we're done. Here we are on our course page. I'm going to select everything. I'm going to go to Repeat Grid. Just like we did with the trainer thing, I'm still amazed by this. Every time I use it is amazing. Let's say we've got this mini courses. The image thing I was referring to now is probably my most exciting thing to show anyone. I'm actually in our Exercise Files. I'm in Images and I have found all our Course Images. I've selected them all. The easiest way is to be able to see the Finder window or if you're on a PC have the window open and just drag it in from there into any of these blue squares. Ready for the magic. My goodness, that is magic. I'm super excited by that. Goes through and just replicates them all the way through. Yeah, I love it. Repeat Grid, it's extends magic weapon. It means that I can still have a bit of control. Remember, I can select on here and I can find my grids here and I can open and close these. Say that I want all banked up together or maybe just a little bit apart. I've got a little bit of adjustment and say this checklist here, I need to go and change this to the black or the gray. Easy to go and update. Now, can you do it with text? Yes, you can. In your example file, you just need a text file. Like this one here it's got a bunch of names in there and I'm just going to make sure it's not either or a dot TXT or RTF file, just something really basic, nothing that has any formatting like Word, or PDF. Just a plain old text document and then you just click hold and drag the actual document itself across one of the titles and bingo. How cool is that? I love the Repeat Grid and I couldn't leave it later in the course especially these images because it's just too special. But for this actual wireframe, we're getting too detailed and okay. I'm going to have to go through and undo to get rid of all these images and and go back to where it was just all plain Jane. I should probably go move this width here and just put in sample course. That is it for Repeat Grids. I love them, but you are probably sick of me going on about them. Let's go on to more of the awesomeness in XD and another video.
14. Mocking up an App in Adobe XD: In this video we're going to look at building the iPhone version only at version of OWL products. Then we'll link overlap, so it slides next to each other. Let's go and build this now. We've been working with the wireframes for the templated wireframes from UCSD for the web. We want to go and open up the ones for mobile. In your exercise files and the UI templates under wireframes is one of the cool mobile. I'd been up and saying sort of thing. But obviously for mobile screens. To get started, I'm looking for collecting onboarding type thing. Do they even have an onboarding thing? They do, cool. It's that kind of thing when you open up the screen and there's that like Nick's skip. Just to give you a bit of an overview of the product. Then my wireframes, my hand-drawn ones here, we've gone through some onboarding that's login and then you get to see the dashboard. I'm going to pick one all of these and what am I do is grab this one because what I really actually want, I don't want much of this. I'll take you and I'll take this part. I want this and I want this. Yeah, that's the bits I want. I'm going to copy that and I'm going to jump over to minor close the wise for web don't need to have them at moment. Just my project and the app version. I'm going to work on the mobile phone version. I'm going to click on the "Ad Board Tool", and I'm going to pick it the iPhone 6S. I grabbed the dotted line. When you zoom out far enough to see you can't see the name just becomes a three little dots. You can drag those around and where am I going to start them? I'm going to start them as a new little line along the bottom here. I'm going to zoom in command 3. Zoom, zooms into a specific place, whatever you've got selected. I'm going to hit "Paste Here" and "Jackpot". What I might do as well as actually I'll do some edits and then I'll go and commit it to a symbol. This one's going to be called instructor and structure HQ. Yes, this is all good. I'm going to grab all of them actually and just chuck them into a symbol. You site them symbol. Awesome, and I'm just going to put some dummy text in the middle here. This is going to be an exciting onboarding message. I'm just going to be number 1, okay, and you are going to go in, I'm going to use that big version have got and I'm going to do the tiniest bit of design work, and no, I shouldn't, but I like that circle that I saw on the last one. Rector rows, therefore. Well, you're done, you've made it super exciting. I don't know why I did that. But that's going to be my super exciting onboard message 1, there's going to be, actually let's just do three of them. I'm going to double click this double click it again. You can get in there pretty easy by double-clicking, select all three of these, put them in the middle, and then remember, I can click on them and say right click, update all symbols. Even though I haven't used that again, I've just updating the one here, my library. Great. I want how many of these? I want three. I'm going to hold that. I'll name them first. This is going to be my app, and this is the on-boarding number 1, get people excited before they sign up or have to login because that's the worst thing is like, "Hey, commit to a sign-in, whereas what we want to do is say, hey before you sign in, and it's a good list, cool stuff you can do." This is number 1, this is going to be number 2, and just so the user knows when that app prototyping, or at least the client knows we're going to just change colors so that we know what we're doing. Go, and one more lines to the app, and you're going to be message number 3. Number 3, you can be blue. We're running out of colors, we only got two colors really. Let's go back to the blue. Awesome. We've got three of this and that's going to be my onboarding. What we might do next is do our prototyping because we want to actually check the co way you can view this on an app, so before we do that, we need to make these buttons a little easier to click, so like we did earlier. I'm going to select on this, I'm going to double-click it. That's why I'm no, I'm inside. It seems green bar on the outside. I know I'm inside my symbol. I'm going to grab the "Rectangle Tool" and I'm going to have a fill of white. What does it mean to say like, did I do that? Undo. Let's go inside I can see the green bar and I grab you, draw a spring nice big box. You can see I'm still in that because look what's when I drag it so that green bar on the outside gets bigger. Turn that off. I'm going to copy it and I'm going to send it to the back. Now, right-click, send it backwards back. I'm using a shortcut and you can see this, we'll get there, it's Command Shift and the square brackets, which is next to the peaky. I use that all the time because it's the same in InDesign Illustrator and Photoshop, which is nice. There's my big white box so it's going to be easy to click and I copy it. Over here, I'm going to double-click. I'm now inside the green thing and paste it and move it to the back. Grab this guy, double-click it, some phenomenon, so the green thing, paste it, move it up and send it to the back, maybe make this one doesn't touch smaller. Gained quite big. Copy him and hand him over there. Cool, so I'm going to click on the "Background", click it once I've got it selected. I got this whole group that I made and remember, update all symbols and hopefully now over here when I double-click it and there's that box also. Symbols are great because it's means when we go and now do prototyping, I've got nice big boxes to click. There's rig this up, we're going to grab the next box, and I'm going to say when you are clicked going there, and by default it's being going to dissolve. Now that we're in more like mobile centric world, and we're going to look at slide to the left. We'll have a look at this when we're preview and what we might do just to show you the difference is we're going to go to this version and we'll look at the other one which is push lift, okay, and just see the differences between them. Next and this one is got no way to go to. What I might do is actually just grab another board and will make this one the app. There's going to be the login screen. We want to actually build this the moment, and so we'll just delete everything on this page. Goodbye. This has got no where to go to now, grow the white box, you're going to go there. It's going to be the same for these skip buttons. I'm going to say you go there. I want you to go there. Skipping, we're going all the way to the login. That didn't connect and skip here is the same. Can't see it, that's why as easy just to go here and go login, twin naming and it's quite useful, I said at the beginning part, so that's then done. What I might do is I want to change these dots to move through, but I'm not going to bother I should because I want to, but because it's a wireframe, we're just going to go quick, and the back buttons need to work. I'm going to grab this guy, got a prototype and you, my friend, get back to you, and you go back to you. Little bit of a flaw in my symbol making, It means that these two work, but there's an error that doesn't go anyway here. I'm probably just going to ignore it or I can select on good my design. Click on this thing, which is C green around the outside here, I can ungroup the symbol, which is not great, but I need to in this case. So goodbye. I potentially have the same problem with these dots if I wanted to update them. A little bit carried away with my symbols. I was impressed when I set it. What we want to do now is some tasting on mobile. We're going to jump to the next video because it's a cool little app you can download more, look at that now.
15. How to use the XD App on iPhone & Android: It's time to download the app. There's both an Android and an iPhone version which is awesome. Go download that for your mobile phone. Now, there's two ways of actually getting it on there depending on if you have a Mac computer like a MacBook Pro or an iMac or if you have a PC. I'm going to launch the app, click on XD and now if you were using the Mac version fest member, it doesn't matter if you've got an Android or an Apple phone but it's to do with a computer. You can see here I've connected in with a USB cable, nothing fancy and what we can do is we can use Live View. The cool thing about Live View is that whatever you've got open on your screen will appear down here in your mobile phone. Now, it's showing you whatever has the house next to it. If I zoom here, this is my homepage, you can see there's little house here. Here we're jumping between screens and everything here, but you can see this little house here, it's showing me that on my phone. I want to change a little house to this so I can preview on here. So click on this guy, click in the little house and you can see there he is in all his glory. What's really nice about the live view is that, watch this as I start moving this thing around, it updates automatically. It's really nice to have this set up on a nice little screen here so when you're editing, my desk is all clean. It's never this clean, just for filming. Have it all set up and an iPad and everything up so you can see it as you're working on it and you can make adjustments. The cool thing about it as well as because we've kind of wireframe this thing, we should be able to click on this and go next. It's gone for the slide left to no man's land. Where does this thing go? Some reason I connected that to all the way over here, that was pretty good. I'm going to zoom in, forgot out what I did here. You go there but I think I clicked on the word 'Next.' How did we get all the way across there, I'm not even sure. Next, now it works, next and then next, the blank screen. When you are working on this app, there's a couple of things you can do to navigate it. You can click and hold it down for a while and you get a few options here. One of them is to browse the app boards and you can just see like the big version of everything that's in my XD file, which is a great way to jump back to here. Other things you can do while you're in here is hold it down and see this one, this is hotspot, hence you can turn that on because if you click somewhere, you can see it's for people that I want to say like my parents, who need a little bit of encouragement to be able to use this distinct thing. That should be okay because it's next I skipped, but if you've got something a little complicated and you need to add hence, it's probably a sign of a bad user experience but sometimes you just need to have these things that show. I've only enabled a few of the button's, not all of them. What else? So that is live view if you've got a Mac connected to either an iPhone or this old android phone with Paul patrol stickers on it for my son but correct on the screen. You can do it in another way and the way is you go into here and you'll have the option of, I'm going to click and hold, I want to go back to my document, XD documents. XD documents is stuff that is saved in your creative cloud. What you need to do here on the screen is you need to go to File and you need to go save as and on your computer, it doesn't matter if it's a Mac or PC, this will make this work. You need to find your creative cloud folder. I know where it is on my Mac. You'll have to double-check with Creative Cloud keeps their folders on your PC. I know on my Mac is at, where are we? I know it's around here, it's under all of this junk when you get to your word, your name as mine, Daniel Scott's. Here is with a Mac keeps them. On a PC you'll have to do a quick little look to see what they got. What I can do is click it in there and I can put it in its own special folder or I can just dump this thing in here. This is my iPhone at test and click save. What will happen is once it's all synced, you'll see this little icon at the top here starts sinking and it will eventually end up in your creative cloud library and that's the whole thing with the Creative Cloud. Magically this thing will see it. I'm going to update and check to see if it's in there. It's not there yet. Did I save it in the right place? I think it did. Creative Cloud files, yes. Well I'm going to open up. Sometime, you can give this thing, you can see it's sinking here and I'll show why, not sure how big it is, but let's pause and wait for it to sink and I'll jump back in. If that doesn't work, which mine isn't for some reason, mine stops sinking works every other day, it's not the moment, good excuse to show you another way. I've logged into my Adobe account so assets.adobe.com/files and you can just drag it into here. You can see it's uploading nicely and sweet here now and hopefully now my phone, if I go to update, it will go and search through all my Creative Cloud files and see if there's any XD document. There it is. This is a way that I can do it. I don't have to be connected to my phone, so I don't have to use this cable. I can have it on here now and does the same thing for testing. Next, I can skip along and the cool thing about it is once you've got onto your Creative Cloud files is great for user testing cause the live view is only when you've got it plugged in. What you can do is have this thing out in the field to show people, go and see a client pitch It or just showing people and colleagues at meetings and it's the same as before. I can click and hold it down and I can share as an image. I can take screenshots and same things as I had before. That is it for using the app. Live view will work on both Android and iPhone but only if it's plugged into a Mac. If you want to use it on a Windows system, or you don't want to actually plug in in it and use Live View on a Mac, you can use both of those systems. You need to save it into your Creative Cloud files, either through the web version or normally you can just dump it into this folder here, which is not working at the moment. That is it. I will see you in the next video. Bye now.
16. Production Video Sign up screen & Dashboard: Hey there. Welcome to this production video. Before you skip along, there's one thing you should check out in this video, and it's straight after my little introduction, and it's basically adding this sliding thing that you need to know. The rest of it though we're going to build out these pages here for our app. Nothing super exciting, so you can skip after you learn how to do this thing. Let's get in and do it. I want to go through and build my log in page. I'm going to steal most of it from one of these templates, there is the sign up up here, and I'm going to pick one of these and just come go Command 3 to zoom right in. Lets get close. Which one do I want? I'll use this one here. It's going to steal the whole actual page because it is an iPhone size, that's what all the templates are. I'm going to click the word "Sign Up", I'm going to I click "Copy. I'm going to jump back to main one, I'm going to paste it, and I'm actually just going to delete them. I'll take the name, and then you, goodbye, and I'll just use this one here. That's one of the nice things about keeping using the blue colors, rather than going off and picking custom colors, you have to go and update all the colors and stuff. There we go. For the thing you've hung around for, it is, when I preview this, I've got this guy here, I'm going go to prototype and I'm going to just make sure this is saved to home. It's not by default, so you can see any of these to the home. When you hit "Preview", it goes straight to this one. I'm going to hit "Play". I'm trying to scroll up and down, but it just won't let me. That's a bit of an issue. If I click on it, you can see there's actually lots of extra stuff in here. To sort all that stuff, I'm going to click on the name, I'm going to go to Design, I'm going to change scrolling to vertical. That's the first bit. The view port is set to 667, which is the exact height of this iPhone here, and click on him, he's 667 as well. What I also need to do is grab the app, I want to make it a bit longer. You save the view port, and then you make this as long as you need to. This can go as long as you like, and you can see that's the view port there, that dotted line. We had it automatically on our web version. Now we have that on our mobile vision. It just means if I preview, it's going to preview to this, but I can scroll down now. Allow vertical scrolling, pick the right height, and make sure your upward is long enough to see everything. Probably what you want to do is just keep using this one to duplicate when you are making another slide from now on, because if you duplicate this one again, you go back to having to do it over and over. Now you can skip along because I'm not going to do anything particularly exciting. I'm going to go through and change this to instructor. I can spell it, I can't. This takes, I don't actually want anymore. I'm going to yield, look good. The sign up page, this is all good, perfect, sign up page. I have a sign up page and a login page. I'm just going to duplicate this out. This one's going to be my sign up, and then here I'm just going go through and change this option in here. That little body is used to show where you are at so you can toggle between the two, and this one, all I'm going to need for login is e-mail address and password. The person who made this is still made of using our KO Repeat Grid, but I'm going to ungroup it so thus I can click on parts of it. I'm going to ungroup, and say you, I don't want, I want you. I don't need any personal information. So gone. But I do need this little box here, and I'll set that at the bottom. Actually what I'll do is I'll click the edge and I know it needs to be 77, what was it? I know. Seven, sorry, 667, it is there. I'm going to click on this guy and your height now is going to be 667. Perfect. Align you to the bottom. Nice. I got my login screen and my sign up screen. I'm going to have to rig these together now. Let's do that prototype. If you do select all, it selects everything on the document and shows you all the wires, so it works on what you haven't done yet. What I'm going to do is this next button down here. You're going to go to my sign up screen, and I'll do push rights. I got to double check these ones to remember which push left or push right, what it looks like. It gets to here, and then I want you to be able to click the login button. I should make this bigger. I got to go to the screen here. This one here, was going to go back this way. This one's going to push left, I'm pretty sure, we'll have to test it. Let's give it a test. I'm starting at the login screen, click on "Login", pushes that way, pushes the other way. Feels backwards, doesn't it? Actually what I'll do is this one now it's to be pushed left, and now that one needs to be pushed right. Let's give it a test. That feels better. Awesome. That's why you test while you are mocking up all the way through. We've got some scrolling going on. That one doesn't need any scrolling. Let's get on to the last bit, and that is going to be my screen. What I'm going do is I'm going to pre-grab this one. Why? Because it's long, because I know that my next one needs to be long, and its got all of view ports sorted out. Basically you want to select everything of this, and say goodbye. Yeah, nice. Doesn't clean back to design. Now we are going to be creating out teach dashboard and app version. That's instructor dashboard. Selected one of these coat, and I'm going to go off and grab my dashboard coat, and I'm going to use it down here. Paste them in. It's a bit big. The nice thing about this repeat all thing, I can you and just police guy's off, and yeah, I got my instructor dashboard ready to go, a conversion. I want to pretty it up so much. The last thing I might do is I'm going to do a settings page, so you can go through to give them an indication of what the app is going to do. I'm trying to find strappy lines. You see on the top left is where all the universal ones are, it's going to grip you guys. Copy, jump it over. I'll put you in here. They are hard to click. I do not disagree. When that's clicked, it's going to jump to instractor. Actually this's just going to be settings. Nothing exciting. I want them people to be able to do a couple of things. Let's just do, what can you do in the settings page? Why am I drawing a button? I shouldn't myself. In here, I'll do some central text, and this one is going to be, and you could be able to reorder these things, and repeat grid. I have some settings. You can reorder them. You can have a favorite. I think this might be breaking the rule in terms of adding too much details. Where are we getting these from? Yeah, I thought of this earlier. That's what my settings page needs to have. I'm going to grab you, double-click the edge. Actually my view ports doesn't need to be that big. What I'm going to do is, I'm going to click on you, and I'm going to make the height 667, and no scrolling. I'm going need a back button. This guy. Click on back button, copy, and over here paste. Choosing the right place, just the wrong color, and that guy there as well has a bit of a weak color. Set the rest of it. Cool. As rigged it up. I'm going to say when this button is clicked, you go to here, same with this button, and that is push right, and that's all correct. You are going to jump all the way over here as well. When you sign up or login, you end up at this page. When you click on the settings here, you can either click on them, you go to this page. Then when you want to go back, you go back to this page. Awesome. Let's give it a test. I've a testing on my phone, but you can't see that, I don't want to set all the camera up again. You sign up. Great, you're welcome to the dashboard. It's pushing the wrong way, and then you go to this one. We're going to have to play around with this push left, push right. Actually I want test that again. This one here, I click this one, and that one's wrong. The error should push the other way. You can leave that up there. I'm going to say, you my friend, you are going to push left, and same with you, push left. Let's give it a go. Over here, that feels better. Dashboard though, that pops out, that's good, and though this one needs to go the other way. It's just a bit weird, I can't do it. I need to see it being actually activated to know which is push left and push right, I don't know why. Now, back that way, that way. For the error's done. Awesome. Lovely, that is going to be it for this production video. It's a long run. What do we learn? Workflow, we call it workflow. That is it for the video. Let's skip on to the next one, we get into sending out for comments. We're going to send it to our client to check. See you in the next video.
17. Sharing Wireframes for comments in Adobe XD: Hi there. In this video we're going to look at sending out our wireframes to get some comments back. We're going to use this little option here and show you how to work this so that you can see that out to colleagues, or to the client, or to user testing. Let's go and do that now in this video. The first thing to get clear is that this is not going to be our user testing. What we're using our wireframes for is first of all to just one or two of my colleagues. For you can be anybody, a buddy who I guess has the vocabulary or the understanding to be able to test a wireframe, and give you some constructive feedback, see if that's one part of it. The other option is once I've gone to my colleague and I have come back with some remains and like, hey, I thought this would happen. I know this is a bit weird, just to wake the bugs out so I can set it to the client for client approval. Client approval is different from user testing as in the client is expecting a wireframe. What I want to do is I don't want to spend my time doing the high fidelity or the high res version of this app, I need to find out it's not what they wanted. It's easy to send the wireframes over. Wireframes they're easy to make they're easy to update. It's just working out that with the client, and once they approve that, then I go off and make the high fidelity and mock-ups. It's those mockups that I send out for user testing. That's when I get people in that a potential uses for my persona and actual test the app. Some people taste wireframes, that is totally fine. I don't find them that valuable giving tastes for wireframes. There's just I'm not sure. It's just I don't find value in the feedback from my colleagues, yes from the client, yes, but I think it needs to look all singing and old dancing for it to get a proper user feedback. The other reason is that I'm quite good with making high res. It takes me a long time, but not that long if you know what I mean. I can bang out a good-looking mockup with all the images and stuff pretty quickly. It's not something that I have to outsource to somebody else. Say if you are more of the UX researcher, okay, then totally you can get lots of value from wireframes because the next step in getting high resolution versions is a long job. But for me it's not. We've discussed were not doing particularly user testing, but some of the rules apply like if I get the chance, I'd rather do in-person over the shoulder testing case. I'd rather have a buddy meet me for lunch and go through it so I can watch their interactions. It's all those mannerisms that they don't really know that doing that a quite useful for me. In person is amazing even with a client, but I find for my smaller projects that I work on as a freelancer, there always I'm normally just ending these links over. Let's look at how to create these links, and then we get commenting feedback from our colleagues and our client. So to share a link, you click on the little icon, and just type a few thiings like the title, this is fine and start to HQ and it's going to be version 1. You can drag an image in here, just makes it look pretty when you're sending links to people of made in your exercise files here and images, I've made a stacked version of this HQ logo. Now you'll see I made it square. Originally I had it rectangular, but it ends up cropping it badly. If you're finding yours getting cropped really in the square, just make sure the actual outboard in and Illustrator or Photoshop is actually square, and just have your logo inside of there go. There is an IRF file. Seems to take anything nice. Other thing allow comments exactly what I want. This thing here is quite important. This little grayed out but this, start at. That's maybe the home icon. If I got a prototype earlier on when I was working, can you see down here, I said that to be home when I was previewing on the mobile. That's the initial view that the people I'm sending this link tool get, which is not what I want because I want them to go straight to the homepage. I prototyped view, click on little home icon, go back into here and it should say start at homepage. Nice. Click on create link and magic. It makes it link eventually. Now the two ways you can just email the link, that's what I tend to do. Don't click on it. I can copy that link and just email it to people, or you can click the embed. If you know how to work with an iframe, you want to embed it onto your own site for some reason, and you can do that. That if you want, just a normal old link, you can email. That's the one to go again, so you copy it. That's what it looks like when I'm logged in, I want to show you what it looks like when like say I send it to a colleague who doesn't have an Adobe ID. They get this. As you can see a little icon is the naming. What they can do is a couple of ways of working with it. They can just toggle through this, and they can just see everything as like that. But a nice way of doing it is to go full screen. Well that's not really full screen, just gets rid of the junk or on the outside and then they can start interacting with it rather than. I might have to go back actually, hit Escape to get out. What I'm going to do is I'm going to go back to the home and stop previewing from here. You might have to educate your friend on how to best use the wireframe. I find starting at the beginning and just clicking on the full screen gives them the basic experience because then it allows them to go through and start clicking stuff. If I click on this, I go to this next view. Now one of the things is that it's quite helpful. If you click anywhere else can you see everything just highlights, gets it blue box around it. It just helps people navigate a site, especially a wireframe that you might not have rigged up every button. I tied to click on something and it's just not working. This gives them a visual cue about what to click on. Go back to the homepage, go in again. We've previewed before, but that's what it looks like. Escape to get out. Now in terms of commenting, you can click on this. At the moment they're not signed in. So they can either click on the sign-in button here or sign-in here, or they can come in as a guest, which is beautiful. So it makes people know how to go through the whole drama of signing in. If they do though, there is a nice way that Adobe have done. You can either sign in with your Adobe ID, but say that your colleague doesn't remember it or doesn't know what it is, they can sign in with social logins here with Facebook or Google. Either way that'll allow them to add comments or you can do it by guess which I love. You get some initial feedback and you need to update that link, there are two things you can do. You can enhance a feedback from them and say, hey, this is not working or what do we think about doing this or didn't imagine this would work this way? What you can do is say you do make a change and you like, this button now is going to be, you change the tics in here. Go to design view. I'm not sure what I'm updating, but this just deletes some text. I've decided that's my update and I've done an update, I can do two things in here. I can click share again. There's two ways I can update the original link, so that nothing really changes the same link that had been email would work, but it will have this updated texts or you can create a new link, and give it a new title. Say it's a new link and you're like actually I want to do this new link because it's like you've done lots of changes and you want to call it like version 2 something completely different. You share a separate link. You either update the link your had or sharing a new one, then you can click on Manage Links if you're getting lost. It will load up with your Adobe ID. I'll do it somewhere else. Let's do it. Close those two down and click on manage links. It opens up in here and you can see there's my instructor HQ. These the two versions that I've made, I probably should have renamed it before I created a new link, like a two versions 1, it's going to confuse everybody. But those are the two versions you can delete the old one, say that you're finished with that one. You don't want people to work on it anymore, you can click and very big letters. It says Delete Permanently. I'm going to leave them on there for the moment. You want them to test on mobile, say you're building an app rather than a website, let's jump back into extinct. So to preview on a mobile, it's not like a 100 percent fluid. You've got two options. If I've got extinct really easy, you just shade in the file and they can preview like we showed previously on a device with the app or what I tend to do is I just give them this link, copy it, and send them an email and say, and paste it in and say, hey, open this link via your phone. Most people have their email access on their phone. They just click on the link and click on full screen and it works perfect or they can copy and paste it into their mobile browser. They can also type it in, but that thing is too long. You might use a URL shortener like Bitly or goo.gl. That's a nice one to shorten them down so its easy to type in. Now another way sharing is to not really share it anyway, just take your laptop with you and then just hit the play button and get them to work on it in here. The cool thing about that is that you can record what goes on. Can see here. Actually this is only for a Mac. You can click on this little record button and actually it will start recording what the user does. You can see me clicking on here. What they go on here. It'll record my voice as well. When you're finished, hit escape, and that will allow you to save this file like an mp4, okay, and I'm going to stick it onto our exercise files, and I'll just put it in Excel is just to go to my desktop because I'm going to Bennett. So instructor HQ test by Dan. Let's have a little look. He's my taste. I've recorded and thats everything that they've been doing. That can be a nice, easy way to go and get your buddies to help out or send it to the client for them to do some testing and you can record what they do. But remember that little record option is only available on Mac. The difference between PC and Mac are only slight. Well that's one of the nice ones that Mac has and same, the plugging straight into the device. If you're following along with a PC, you notice that menu system is construct a little different in the top to match more of a Window system. Last thing I want to show you is what comments look like on the other side. This is an actual working project. I have designed this wireframes and sends it out to both colleagues and clients for feedback. I'll show you a little example of what happens when they do comment. This is the homepage and you can see, I've got a few comments and you can see there's two ways of adding comments. These pins, which is nice because their actually connects to what the pointing at because there's a lot of things on this homepage. Over here what I can do, I can reply to it and explain something or ask questions or I can resolve this and say actually, this is done. I fix whatever that problem was and it's fine now. Other things we can do this is have a little look through a few more comments, more comments, more comments. Let's have a look at some of the general ones. This one here is a general comment for the whole page. They haven't pendant. Now I want to show you what you can do and what they can do when they appending, when they add a comment. Say I want to make a comment, they can decide on why do we have drop shadows.I went a bit too overboard with this wireframe. I edited it too much detail to it. I stripped it back like the one we're working on now. You can just leave that there, hit return and it becomes a generic one for the whole document or you could have added a pen. Another one there. I don't even know what that means, but you can drag it and leave it there. The cool thing about that is that it's pinned to that point. I know feedback where it goes, so that 's going to be a pretty wicked little system that [inaudible] has made and Adobe have made. I really loved that they can sign in by guessing, not forcing people to sign in. Because otherwise they end up just sending me comments back and emails and they're like on-page tin. The bottom right is got a green thing and you're like what are they talking about? This commenting is supercool. You already knew that because you've just watched it. I'll carry on. Let's get onto the next video where we start getting old high fidelity.
18. Mood Boards & resources for Hi fidelity UI design in Adobe UX: Hey, there. In this video we're going to look at getting started with our high-fidelity mock-up. We're also going to look at resources to help you get started. Like this one here is a Windows UI, there is some cool Apple ones we'll find. There's a great Google material one, and we'll look at where to get our kind of ideas for mood boards. We'll build a kind of a quick little mood board. Where is it, there he is, for our design ideas, and we'll put them all together in our XD document. All right. So resources and mood boards, let's get into it. So it's high-fidelity time which just means, remember, we're going to make ones with images, and colors, and fonts we like. First thing is, we're going to create a new document. We're not going to, it's up to you. Some people like to work from and just upgrade the wireframe. I often like to start again, I find the wireframe gets in my way. I use it, I go refer to it, and I jump back into it all the time to see what kind of ideas we've got, but I often just find it's easy to start again. So that's what we're going to do in this course. So I'm going to start with our kind of standardized site. I'm going to save it and give it a name. I'm giving mine weird names because it helps for you to be able to find this later on. You can go to video 19 and actually find the file that I'm working on. Regardless, this is going to be my instructor, like we did before, Instructor HQ. This one's going to be homepage. Actually, just needs to be homepage. Great. There's a couple of things we're going to do just before we started, and it's just around mood boards and resources. In terms of resources, we're kind of set them before. They are in a file, there are these kits here, we'll use wireframes only. If you download these three, if you click on any of them, they actually take you to the website from Apple, and it shows you where to download. You'll see in here there's an option for XD. So you can download that. I've downloaded them for you both for Apple, Windows and Google. They're on your exercise files under UI Templates. We've been using wireframes, these are these guys here. You can just open them in XD, and you can start pulling from these because the nice thing about them is let's say we use Google material, it's massive but it's really like our wireframes but they're a higher-fidelity. They are pretty. They have got all the trimmings added to them and often, working from some of these, especially if you're dealing with apps, there are just rules you need, if it's going to go on to Google, and you're using a lot of their pre-made icons, and symbols, and stuff. So you might as well use them in your mock-up. Now just so you know, it's probably more common to mock up the Apple, even if you're going after both, people like to see the Apple versions. So download the iOS sticker sheet and use that one for it. So that's one way to get started. Another way to get ideas and resources is in your market again. Under Assets, under Market in here, if you type in UI, you often can get lot of examples that are quite nice. Say you like this one here to get started, you can download it. This one's a PSD so it's not, I haven't found any XD options in here yet, but keep an eye on it. But you can just use this as a visual guide and pull stuff in from Photoshop. No problem. So Market's a nice place as well. Then you move on to mood boards and ideas. So it will depend on how you're working with your client. So, lets say, my client that I'm working for this project, the Instructor HQ, they're just like you go off and make it look nice. They don't have a particularly strong opinion on it, but I've worked with clients who will need to see a mood board first because they want or they'll send me a mood board. A mood board is just a group of images to kind of give a feel of where they're heading. So regardless though, I make a mood board for myself. It's the fun part, it's the sitting down and going "What is this thing going to look like?", "How do I want it to feel?" There's a couple of places I go to. I'll quickly show you just to help you. Okay. So Behance is one of the first ones, behance dot net, it's owned by Adobe, which is cool. I just did a search for web app. You can see it's just really nice stuff in here. Now I normally just find stuff that I like and then take a screenshot. I'll just do a screenshot of this and have a bunch of screenshots to build my mood board from. Same with Dribbble. I type in web app all the time. Just because there's a search here, gives me the kinds of things I'm looking for. You might type in UI or app design and just get kind of some ideas. Open them up, take screenshots. So Dribbble with three B's. Niice is another one with two I's. Here's another one I've done for web app. The cool thing about this is this is actually a mood board creator. I use this all the time. I'm not going to go through it all, but go to niice dot co and they'll sort you out there. There's a free option. Awwwards is a nice place. A www in the middle there. This is another great place. Often this is, I guess, a little bit more structured. There's some amazing things in here. The awards are won for different categories. So you might be looking in blogging which is quite nice, and it just gives you kind of a cut down version and gives you reasons why it's so great. Another kind of awards place is the Webbies. So Webby awards is an online awards. I think they started with websites. There seems to be everything in here now, but I go in, I searched for this year, and I went through, and I picked, I looked at web and then I looked at Best User Experience or User Interface, and you just get kind of nice, cool ideas and you can scroll through them, open them up, take screenshots of the stuff that you like. Last one, there is no last one, that is. Back to our app. So once you've got them all, I take lots of screenshots on my Mac. On your Mac it's Command Shift three. You can draw a little box, actually Command Shift three is the whole screen, Command Shift Four four will draw a little box and you'll end up on your desktop. What I've done just to show you, is I've created in your exercise files, here is a bunch of screenshots that I took. There's just loads of them. I just took lots of stuff. What I do is either use that niice to make a mood board. It creates cool little PDFs like this. Okay, generates them for you, which is great, or I just dump them on the page and XD most of the time. So I just select a chunk of them. How many have I got, six, I'll do five at a time and in XD, I'm going to jump to our new project. I'm going to zoom right out so I can see that pasteboard and I'm just going to drag them in. I've got those ones and I just start dragging in five at a time or six at a time. If you do them all in one big go they end up in one big line that heads off into no man's land. So if your photo end is on user, you could use [inaudible] that could work, Photoshop. There's a stack into Layers option under file and whatever you work. But I like to just build a little blob of awesome mood board, goodness. Okay. It's a bit big by default, the screenshots on this Mac. So I'm just going to make it a lot smaller. I'm going to stick it up here. I'm going to group it. What I do when I'm working and I'm looking, I'm just looking for, I pull my colors from here, I start searching for fonts. I get like layout ideas. These screenshots, like this is a reasonably big one, but often this can be huge. I love this part of the job getting ideas. You'll also start to notice that even though they're all different websites you can start to see the same kind of colors coming through very common at the moment, I guess those, I want to say tropical pastels, but that's where we're at the moment. Let's move onto the next video where we start looking at columns and grids, getting serious.
19. Why do you need a 12 column grid in Adobe XD: Hey, there. In this video, we're going to talk about why we're going to create a 12-column grid. If you already know why you need a 12-column grid, you can skip to the next video. For those who don't, let's get started. First up is, why we're using the 12-column grids? If you don't know and when you are coding the website on the other side, so when you think the front-end design side now, when it actually has to get turned it into a website? What will often be used as a framework that uses the 12-columns as structure? Why they're using 12-columns? It's just a handy number because, for responsive design, say this website here, I'm using, it's about 1200 pixels across, and I've got 12 columns as the underlying structure. This image here, this slider here, is actually spanning all 12 of them. But these guys down here are actually spending three each. So 3 plus 3 plus 3 plus 3 equals 12, I think. That's how often websites had done not all of them. So check with your developer, but most of the time it is. The reason it's useful, is that when I am at this desktop size, I've got this structure one and these four across. When I get down to tablet, you'll see that I've decided that these boxes now span, six of the columns. So 12 is just dividable quite easily. When we working with these different sizes like [inaudible] down mobile, these actually spent 12 now, and encoding is really easy to work that logic. Plus, a lot of the frameworks that people start with the building sites are based on these 12 columns. That's why we need to 12 columns. Do you need them in your XD project? No. We're going to do it to make it easier because mainly, I do the web design on the other side. So the more HTML, CSS site things. I want to do it because it's going to help me out. You could be annoying to your designer and developer, and just design anywhere, and for them to have to try and make it fit within 12 columns, which would be a pain. Hope that helps you understand why we're doing 12 columns. Let's jump to the next video where we actually make it.
20. How to create a 12 Column Grid in Adobe XD 2018: Hi there. In this tutorial, I'm going to show you how to make a 12-column grid basically with one little click. Turn it on, turn it off, it's got automatic feature that makes out column layout super easy, super quick. Let's go and do it now. First of all, I'm actually Dan from the Future. I've come back in time to this video to update it because the original video that I made, you actually had to grab the rectangle tool, you had to make a column, you had to divide it by 12, the width and workout gutters, and all sort of other drama. I've come back here to update it because it's a new feature that does it pretty much automatically. When you are going through the rest of this course though, I haven't gone through and reshaped the entire course because we only use columns a couple of times. When you do see it and I'm using a big clunky rectangle boxes, and locking, and unlocking columns, you can smile knowing that there's a sweet new way to do it. The sweet new way is black arrow, clicking the backgrounds, you got nothing selected. Actually, click on the name of your app board, and in here where it says grid, tick this on, make sure you're on layout, not square. We had square for awhile, we want layout. We want how many columns? Twelve columns. The gutter width that I used a much tutorials is 15. The column width gets to be automatic. We want to automatically make the columns fit with inside the boundary is my website. We use a navigation of 1,400 along the top and that's going to be my maximum width, 1,400 is what I want to use for my max width of the site. You might choose something different, common ones are 1,024, 1,200, but we're going to use our 1,400 for my navigation. We need to work out what the columns are and all we really need to do is click on the name and we need to work out the width to the edges here. I've got a site that's 1920, I got a navigation, that's 1,400, so I need to do some basic math. My 1,920 minus my navigation leaves me this for either side divided by two. That's the gap that I need, so 260 pixels. I click on the name here and I say, I want the width to the edges to 200 and just 16 pixels. That will now fit perfectly leaving a little bit of cut on either side of my navigation wholesome end. You can go ahead and start working on this project that's a lot easier. You can turn it on and off, you can set it as a default. Whenever you make a new one, it will go through and use your pre-made sittings. You might just choose to use the default, it's up to you, but I like a 1,400 pixel wide website. That's it, go forth and build an awesome website. I've already finished this course because I'm Future Dan and it is a good course. I love [inaudible]. Bye now.
21. Working with colors inside Adobe XD CC: Hey there, welcome to this video all about color. We're going to find out how to steal colors from say, an existing logo or brand and use those then we are going to convert them into our Essence panel. We're also going to turn them into this handy reusable option down the bottom here. We'll also jump and have a look at something like this with this inspiration for color and how to use those. Let's jump in there now and start making colors. There's a few ways of working with color in XD. First of all I was going to pull it from a logo, so we're go going to go File, Import, and we're going to try and bring it in under our Exercise files under images. You can see AI file. Currently, in this version, you can't actually just bring in AI files, which is a bit of a pain, so what I do is I just open them up in Illustrator, copy them and paste them in. You can paste really easily, really. I'm going to use this logo here. What I want to do is you can double-click it or ungroup it. I'm just going to double-click eventually I'll get the H and you can see there's the fill color. What I'd like to do is hit the plus button there. This is going to add it just to easily accessible colors. Also in your assets panel, which of these two little blobs here we can go to Colors, and because it's selected, it'll add it in here as well. It's good to have it in both those places where we're working. Now to get other colors, to get maybe color inspiration, a nice place is Adobe Color. It starts at Create. I like to jump to this one that says Explore, and it just gives you ideas of color groups. You just might use one of these to get started with a of range of them, as concepts. All you need to do is click Save. You need to log in your Adobe ID and pick RCC Library for it to go into. Then inside of XD you can go to File, Open up your CC library, and in our case it would be Instructor HQ, and they'll be the colors waiting there. It's another method I want to use for the moment. If you don't want to use that CC library option or you're working in a place where you just can't use it, you can just use this website. Click on them and say Edit, and you'll see down the bottom, see it's easiest to copy these hexadecimal numbers. You can copy them into XD. Draw a rectangle. Over here click on the icon and just paste that in there and you'll get your colors. It's a way of transferring them without CC libraries. Another way to get colors is to look at our mood boards. I'm going to zoom out a little bit and I want a peachy red color that I want to use. Maybe something like that, maybe not. Now I'm just looking around for a color. Maybe something like some way India is what I want. What I can do is I'm going to draw a rectangle, just random rectangle, and I'm going to use the eyedropper tool here. This, eye dropper tool allows me to go off and just pick a color from here, and you can see follow with a swatch. That's close to what I want. What you can also do though, is a nice little trick is, you can move this and see stuff underneath, eye dropper tool I actually go down and pick things underneath as well, so you don't actually have to pick it just from the XD panel like you do in lots of other Adobe products. I've got this color here, and that's it. I'm going to double-click it over here, and I'm probably going to go through and just drag this down a bit. Now I'm just missing about. That's where I want to be. With this, I'm going to copy it and then delete it, come down to here. What I like to do just in the pasteboard up here, is I like to build out my swatches. I'm going to draw a little square holding shift will give me a perfect height and width. I'm going to start with my green, and what I'll do is I'm going to have no border, and I'm going to have two of them. One of them is going to be that color, and I like to have a secondary color that's just a bit darker, so let's drag this down here. It's like darker version of it. Then I'm going to start with that peach color. I'll use you, use eye dropper tool, steal from that. You're done and dusted. Now I've got another swatch here and you're just going to be a little darker again. I probably want quiet a dark, probably somewhere out here is what I want. It's gray but there's still a little bit of red left in it. That was going to be my swatches for this course. I can select the four that I don't already have and have plus, the real part of that gang, and over here I need to do a little bit more individually and say you add, you add. They are handy to have it in both places, I promise. Two more things I want to do before we move on, I want to instruct IQ to be part of the symbol's library because this is like a working logo, I just made it quickly to give the company a brand, but we haven't really agreed on a logo yet. I'm going to add that to symbols so later on I can update this and it will update all the usages. I've got another version of that I want to bring in, this stacked version. I'm going to copy that, paste it into here, and I'll add it to that symbol. Great. Drop me a line if you've got any other questions about colors, we're using RGB because we're going out for digital displays, not CMYK colors. Yeah, anything else? Drop me a question and I'll answer it in the comments. Let's get on to the next video.
22. Use Web safe fonts or iOS or Andriod specific fonts in Adobe XD: Hi there. In this video we're going to look at how to bring in fonts from both Chrome and TypeKit and bring them into XD, and why we need to pick a couple of fonts and only a couple of weights, otherwise our website or app will explode. Let's go and check out why in this video. When it comes to picking fonts for your prototype, you need to pick a font that's going to be able to be used in either an app or a website. Not all fonts can be. If you've got fonts on your computer at the moment, you can't just go through and pick any of them. The easiest way to find a font that can work online is to use Adobe's TypeKit or Google fonts. I'm going look at both of these. TypeKit here, I'm going to go to Browse and what you'll find is pretty much everything on this side here, is able to have a Web version of it. Let's go through and pick any old font here, and what I'm looking for is when I click on it, I'm looking for both of these options. There's a sync option and then see this little brackets here, that indicates there's a Web version. That's totally fine. The other thing you can do in here is just to enable if it's turned off, include web-only fonts. There awesome fonts that are only allow to use online and not used in print. Now, if you're not sure what TypeKit is, TypeKit is part of your Creative Cloud license. You can login with your Adobe ID and all these fonts are allowed to be used commercially. There's just some really nice ones in here. Some of the things you might consider when you are downloading a font is over here on the right, you've got some filters. Just really helps work out. I want to look for a body could be fun, you can just cut it down to simple Sans Serif fonts and get rid of all the hand-drawn ones. Likewise, you can turn on Hand, and you will only get the hand-drawn fonts. The other things to look at, potentially this is probably my most important when I'm looking at a Web font, is the width. I like to try and find, it's not always necessary, but I like to finally turn Hand off. I want to find a width that is quite narrow just so that I have the potential, especially for a heading font, I just get the ability to add more characters to a heading. If you pick a really wide fonts, will only be able to have really short headings before they break into two lines. We'll go through all the features, but it's pretty cool down. You can see at the top here, I've gone and change the text. You can leave it as blank, but you can also edge your own name up here so that you can see what the characters look like before you download them. When you are ready to pick one, say you decide that this is the font for you, actually what's the one we're going to be using? I'm going to go up to Search at the top here, I'm going to use Fairplex. Before I do that, I need to turn off some of these filters so that I can find Fair. This Fairplex there. I've decide this is the font that I want, all you need to do is click this button that say sync. I've already synced mine and that's it. What will happen is, as long as you're logged into your creative cloud, you see up here I'm logged into mine, here's my little face. If you're on a PC, that's done the bottom right. What ends up happening is, it just magically appears in XD. So nothing else you have to do. With Google fonts, very similar. Google fonts in here you pick a font that got similar filtering down the side here. But say you pick a font, I'm going to use Roboto. Roboto is like a soup, is the new Ariel of that. Open Sans, if you go to all the websites that have been made in the last five years, a big shout, the body copy is one of these too, or Source Sans. I'm going to pick Roboto I like it, it's got some nice weights. But when you are using it, there's a little bit of extra stuff you need to do. Say you decides, Roboto for me, you click on the little plus icon and there's a thing that appears down on the bottom here. You click on it, and what you need to do, see this little download button here? This is showing you how to use on a website, you're not at that point, we're mocking it up locally on our computer. So what we need to do is click "Download." The cool thing about this is it's a font you can download. I'll stick this in the exercise files. I make a folder and I call fonts and you'll be able to use Roboto as well. All you need to do is open it up and install the fonts you need, always [inaudible] fonts. This is just a cool resource for any design project you're working on. There's loads of fonts. You just remember to click this obscure little button to say download to your computer. Then on a Mac, you just double-click this. I think on a PC is just as easy, you just double-click on them and they'll start installing. Now, our next consideration is weights. I'm going to jump into our XD project. I'm going to set up a couple of basic font structures to get started. I'm going to use Fairplex, that I'm going to use for my big calls to action. I'm going to zoom in a little bit as well. Now, when you are dealing with fonts and trying to pick sizes, make sure you're at 100 percent just so that you're aware of how big this is. This is how people are going to see it within the app and on a website. I'm going to pick Fairplex over here and spell it Fairplex Narrow, that's the one that I'm using. Now, I want three sizes. I'm going to have this big one, I'm going to have a smaller one that's going to be 36, and I want another one. It is about 24. Those are the sizes I'm going to start with. You don't have to pick font sizes, you can just start working and backtrack. But you want some consistent sizes of fonts for no technical reason other than more design theory where loads of different fonts and loads of different sizes pretty it's confusing for the user. That's a simple hierarchy of most important, next important, last important in terms of my headings. Now, in terms of weights, when I mean weight, I mean, light, medium, bold, black. I could decide I want to a book vision for this top one, and then I'd really like this one to be a bit more bold and I want this one here to be black. But the consideration here is load times websites and apps. Every time you pick a new font and a new size, the computer has to download that before the page renders. Why is that important? It's because load time is super important for lots of reasons. One of them is Google rank sites based on how fast they load, the more fonts you have, it really slows it down and of course, just general load time. When people come to your site, they don't want to be sitting around waiting for the site to load because you've picked 10 fonts with 10 different weights. So try to, if you can, keep your weights as small as you can, because already we're getting quite high. I'm going to use book for all of these, but I also plan to use Roboto. I've actually only at the moment, installed one font, one weight. Fairplex and book. Even though it's different sizes, that doesn't matter. Those are going to be my heading sizes. In terms of colors, I'm going to select them all and make them black for the moment, probably while I'm designing, I'll adjust things. Next thing I want to do is I would like to create another text box for Roboto. You can go up here and the larger size I'm going to use for Roboto is going to be 24 and that's going to be for most of my headings. I'll make him black. Twenty is going to be my subheadings and this one here, 16 will be my body copy probably through most of the document. Sixteen is a typical body copy size between about 13 and 16 on using a larger size because I'm not going to have a lot of blog posts like heavy chunks that takes most though mine is going to be marketing. So you might get a little lower for yours. Fourteen I'm going to use for my bottoms. It looks nice. Now in terms of the font sizes, I'm going to make the bottoms bold, I'm going to make my subheadings bold as well. I've tried to keep the font weights down to a minimal level. You might be doing yours a bit differently, you might be just designing and you might come back and tidy up and decide, "I just need to pick a few fonts in all of these ones throughout it." All right, two fonts and three weights. It's getting a little high on the download speed. What you can do in Google fonts here, there is a load time thing here. You can do in here. Say I've picked Roboto and added to my family, I can go to customize and say actually I'm using Roboto light and I'm going to use bold. You can see load time still fast, that's awesome. But then if I go and add another font, and do they have Fairplex in here? They don't. Fairplay looks very similar. So we're going to go into this one, we'll add it to our kit. You can see this two font families down the bottom here and you can see moderate. I'm going click on "Fair view" and I'm going to say actually I want the bold and the light version. It was starting to get into the orange zone if you keep adding them, eventually it's going to go red and say too slow. The Internet's going to hate your site. Hate's the strong word, it's going to dislike your site and not rank it very well, which is not good. So this long video, is really just pick a couple of fonts with only a couple of weights, otherwise, the world will end. All right, let's get onto the next video.
23. How to use Character Styles in Adobe XD: Hi, there. In this video, we're going to look at character styles. We're going to add them to our assets panel over here, and then show how awesome they are when you go and edit them, and they change color magically all connected to this character style. Totally essential when you've got lots of pages. You've mocked up and you need to control fonts over a big scale of pages. Let's go and check it out. Creating character style is super easy. Just down the bottom here, make sure you are on your assets panel. Actually, I'm just going to select all of them. One big goes in my black arrow and click this character styles. Boom. They're all added, nice, ready to go. Now what makes character style useful is that when I start typing, I can just select it all and then click on any of these guys. So that's, I guess, the nice thing about it. That's one nice thing, at least. The other nice thing is that, say later on I decide I've used this a bunch of different times throughout the site, and then later on I decide actually it's not what I wanted to do. The clients come back and say they don't like the font, so I can go through in here and pick Museo, and they all update and link. You can change everything in here; colors, font, sizes, anything you like, and it's all connected to this character style. Now if you are a person who comes from, say, something like InDesign or Illustrator, that character styles are pretty strict. What XD have done here, is they've done some pretty amazing stuff I think. This is a wire-frame for an app. Let's say, you can see over here, if I delete all the styles, there's no styles at all. You've gone through and design this whole thing, you're like, "Oh, man, if this is InDesign, I want to add the style," so I'm going to double-click in. Edit to my character style is great, but that size, this been used a hundred of times already in this app. So what a pain. But what if XD have done, they've been super clever. Watch this. If I go and update this, and I say actually I want this to be pink, you'll notice that not only has, [inaudible] is obvious. I've made it to green. You can see I've updated this and this one, updated, but look, all these other guys did as well. So what XD does, it goes, wow, you probably mean all of the fonts that are the right size, that are the right color, that are aerial, and it reaches through the document, and goes and changes those. It's just super helpful. You can say all of them have changed, so you don't have to be as strict with everything. Applying this character style, you can edit to it at the end and make little changes, and it spreads throughout the document. You can adjust these separately. I can decide to go in here and say, actually, I'd like everyone else to be green, but I want this to be my pink and you'll see it gets overridden. I feel it's a really clever way of introducing character styles. They're not a 100 percent strict, they're just really usable. Now if I make a change to this guy here and I make them all regular, you can see all the rest of them. I had to see font. You can see now all of these have changed. But because I made a slight little alteration to this one and it doesn't match his friends, he can stay like that. So I think character styles are pretty amazing and extinct. Thanks Adobe. Let's move on to the next video.
24. Creating realistic buttons in Adobe XD with paste properties: Hello. In this great video, we are going to look at how to make buttons. It seems simple, but I have a tendency of making squeeze with text in them and users don't know that their buttons. So there is a little bit more to it. I'll show you best practices by looking at something like material.io, where they have good examples in documentation, and we'll also learn a cool little trick that you can use for all things in XD. Where it's copy and paste properties. Let's go and make buttons. Now working with buttons, it seems like a simple job, but it can be little bit complicated. I think I draw them, make them, put them on the sides, and I get feedback from staff who were like, that doesn't really look like a button, and you like no way. So sometimes what you feel is a button just drawing a box and putting type in it is not enough. So probably one of the easy ways to get started is if you look at material.io, remember this is Google's style guide for online and apps. If you go to components, learn more. It's a bit where we are all going to find this web option and you go components and you will find there is a bunch of buttons. We've looked at this before. In here what you can do is this like some technical documentation. But if you actually just click on this button here that says raised, it gives you a bunch of different ways and styles of doing things. So you might just use this as a style guide. It does tell you the CSS and everything for these. Another nice way is Beckon XD. If you go to file open and now in our exercise files in the UI templates and the Google material, this stick sheet has buttons as well. Then here there is one that says buttons. Where are you there? He is there. It's just an easy way to find what? Looks like a button. It's only simple things. Like this one here just has a tiny rounded corners. Lets zoom right in. This tiny rounded corners, less little drop shadow. So a nice easy way to steal formatting from other XD files is this is the moment is a grouped object. It's actually a symbol so I'm going to ungroup it cause I don't want the ticks in this case. I just want this. I'm going to go to edit copy, where you can choose your shortcut. So just simple low copy then jump to your sheet. Rectangle tool, and I'm going to draw out a button over here. When you add drawing buttons and working on size, again, you need to be at a 100 percent. Otherwise, you end up with drawing enormous buttons, I do it all the time. Pick a a size for your button. That's going to be mine. Then what you can do is go to edit and there is paste appearance. You can right-click it and pick paste appearance as well, and it's just a really quick, easy way to steal formatting. I'm going to change the color. So I'm going to use the eyedropper tool and I'm actually I'm just going to use this, maybe this one, and that's it. You can obviously go and customize your buttons to be anything you'd like. But following standards that either Apple or Google create, is often good practice because they are the boss. They are teaching the world how to use the internet through the UI and you can borrow ideas from them. You can skip along now because what I'm going to do is just fill in my type. Just going to grab my type tool, click in here, and this one's going to be the sign-up. Sign-up even. I'm going to select all, pick my button style and I'm going to fill it with white. Actually to be honest, this one here, I'm going to actually change globally because I'm going to do these colored buttons all the way through. I'm going to drag it to the top here if that's going to be white. So now though I'll follow that style. I'm going to duplicate these, and you'll notice when you are dragging boxes around, you're like, oh no, I selected the column. It doesn't really matter when you start dragging it, it ignores it because it's locked, and this one here, its going to be a live demo. What we'll do for the other buttons is I want to draw some icons, which we'll do in the next video. You're going to be that. Last thing I need to do before I go is we'll put our logo down here now. Our logo is looking a little bit big at the moment. So I didn't take a lot of time earlier on showing you how to turn it into a symbol, but getting it the right size first. So one of the features that need to happen for XD, which doesn't have at the moment is that you can't resize your symbol. A little strange, but it's version one, and we have to live with some of the new version drawbacks. So what I'm actually going to do is I'm going to right-click it and ungroup it. Now I get to resize it, put it in the top here, and really I can convert it back into a symbol. There you go. But now I have two sizes of it. But really I do need this to be a symbol. So I'll just keep both versions because I've been working in the background and I'll show you actually, here it is. It's not quite done I feel like this is getting close. It's I, h q. I'm not sure cause it can be flipped upside down. I think I'm doing this cause I'm reading Dan Brown book's at the moment. Everything needs to be super secret, code flipped upside down, stuff like that. Awesome Illuminati icon. You read the book, you know the one anyway, and I want it to be simple cause I want to go and update it. That is creating buttons, making them look like actual buttons rather than boxes with type in it that I seem to create too often. One other thing before we go is a little bonus track if you watch the whole video, is under here. [inaudible] In here search. If you do UI kit, you will find some more styles of buttons that are going to be pretty similar, but you'll find in here there's just things you can download, and although I can't zoom in, there are lots of good examples for buttons in here that might be slightly different from this. If you're not happy with the drop shadow/rounded corners and want to see some different examples. All right, that is it. Nicks video, pleased in. Know that's me.
25. How to draw your own custom icons in Adobe XD: In this video I'll show you how to make a little, these little short and squat, but we're going to make this little login icon, but also bring this one in here and as a bonus, I'll show you how to turn easily the columns on and off, so that you can just see what you're working on easily using a cool little shortcut. Let's go and do that now in exciting. I'm drawing icons mainly because remember now wire frame, I've got my wire frame actually printed off next to me on my disk, makes it a good resource because that's what I'm copying for a rough layout. But what we've decided with the client is we've really pushing towards this on-boarding being the most important, getting people to sign up and taste it. What we've done is we've decided that sign up, and examples are really important, getting people to sign up. The example as a flow where people who have to kind of add details as I go along. These two here we're going to tune into little icons. Drawing icons in each day you can draw a simple stuff, super easy. If it's going to get in any way complicated, it's best to probably jumped to something like Adobe Illustrator. Adobe Illustrator is one job in the world is to draw icons, amongst a couple of other ones, but it really has all the tools to do it. In XD it has enough. Let's draw a little icon. We want to draw that account login and I had to little look online for images and icons for login. It's a really tough one because there's no super universal login option yet. I think that little man is appropriately the best. What we're going to do is we're going to draw, I'm going to zoom in a little bit. It's going to get it roughly the right size to the size I need it to be. Something like that. Cokoto and if you're drawing out a circle with a Cokoto, hold down shift okay while you're dragging, and that'll give you a perfect circle, and so I want this first circle and one another one that's going to be his buddy. How big is this person going to be at that? I'm going to select both of them, make sure that lined up using the horizontal alignment tool, and yeah, that's going to be the basics for it. The cool thing about a is once you've drawn to shapes like this, we want to manage them with them selected. These over here are called Boolean operators. But really, if you know from other design programs, you probably know it from illustrated cooled the Pathfinder tool and if you're like me, you end up just clicking all of these to figure out which one you want. You can never remember exactly. This first one is actually going to work now because I've been practicing. But if that's not what you want, Casey, the second tool here, the top one most, the bottom one out. You could bring this one to the front, and do the exact same thing but get a different result. You're going to have to work through what you want to do with all of these game. There's all weird options in there, but I want this first one where it joins the two. Then I'm going to grab a rectangle two and just draw a box. Some just using this like a cookie cutter. I'm going use this guy to the Sigma and n here minus front and now I have quite a short squat pin. Probably not best. I probably need to go in and adjust him a little bit. But with them selected, I'm going to pick a fill color of how dark green, light green. Probably the light green and a fill of stroke width of this, I'm going to a 100 percent before you make choices. Member. A 100 percent, he's probably a little bit, I'm going to go to pixels. That feels right. My little short squat guy, there is going be this. There's one of the icon and these columns here getting in my way visually because I want to visually place him. These columns are going to come in super handy when we do some more of the cards that we need with a blocks of content. But for the moment that just in the way, so a couple of little shortcuts before we go, I'm going to zoom out a little bit. I'm going to select all of these guys and then command semicolon. On my keyboard it's next to the L key. Yours might be somewhere else. I was teaching XD and the line yesterday. Yes, I'm name dropping. Just fly back this morning. But they're semicolon key was in some crazy place where you needed to hold down shift. Look the semicolon, and I'm going to hold command click that. If you're on a PC, it's control and semicolon and that just turns it off. To turn them back on, you need to go back into a Layers panel. I can select all of them here and then use the same shortcut. They will come back to life and to them off for the moment because I'm just going look to see how this all works and the spacing, so just missing about. The last thing I want to do though, is a wand to find an icon for the money. Instead of using shapes, I could use the Pinto. Now the pinto he, I'm not going to go into a full pinto exercise because it's a tough one like, what's been probably an hour getting to grips with the Pinto and you will find that if you're learning the Pinto, go off and learn in something like Adobe Illustrator, it's got a lot more helpful guides and useful things. This just as a really simple pinto. If you already our Pinto user, you can go in there and obviously stout drawing, I'm going start drawing like a $ note type thing. Clicking ones for corner point, click and drag for a curve. That's the basics, but I'm not going go through it and you put a $ sign on it. What I might do is actually just find one using we looked at this earlier member assets, credit cloud, assets market, and in here I'm going to put in money or pricing nacho watch. Now it's a decision. Does that feel like pricing or does this feel like pricing? Little tag, I think it's probably money rather than pricing. Soon you are looking for icons. Sometimes you need to work with a thesaurus and work on different ways of saying the same thing because I feel like this probably is going to work better for me. I'm going to download this to my instructor HQ library. One thing you also should note, member SVG is good because it's scalable vector graphics and I get to change the colors easily. I'm going to open up my CZ libraries and, from library and strict HQ, you can see it enhances, You have to unsupported elements. This version of IQ stage 2019, it doesn't let you have SVGs yet and you should be able to just drag it out. We're going go via illustrated. Here in illustrated his my instructor HQ. I'm just going to drag this out. It's probably SVG, but big. Copy it and paste it in. It's a little bit of a workaround. I'm going to get the right size remember working at a 100 percent. Tap it around using your arrow keys if you want it to get it to jump big chunks where you're winking hold down shift while you're using your arrow keys on your keyboard, and zoom in and I can double-click on it. The nice thing about this is if I go inside of this, keep double-clicking key, double-clicking until you see the fill and I can say, I actually want you to be to fill this one. Double-click, Double-click. He might have just ungroup. It could work just as easily. This one here, they're about the same sort of stroke white. What you might have to do for this thing here, as you could add a really small border on the outside to fen-ton it up if you needed to match this, mine was fine. One thing I want to show you before I go and I forget, is that this guy here, he has like I created shape and the cool thing about it in the sixties that it's non-destructive. What I mean by that is if you keep double-clicking on it, you can see the actual shapes is still there. If I double-click this again, is my circle, so I can adjust this, come back out and it's still editable, so all these pods are working towards winking together, but they are totally editable so you can go through and delete pots and bring it back. I'm going to undo and fix my little guy because he was probably just a little bit. I'm going grab the corner hand hold shift and just shrink them down a little bit. grab these guys, line them up horizontally. I feel like that's better. He's home over proportionate size now. Yeah, so everything is non-destructive, which is awesome. One last thing I'm going to do before I go is, I'm going to create a wave to break this top column here. I'm going to grab the Pinto and click once over here. Pick ones in that corner, I click ones in that corner and about here. Clicking ones gives you corners with this Pinto. Remember? But then I'm going to click hold and drag, because I want this like paint drips style thing down here. Why? Just, I sort kind of with my mood boards. I like these connect non-square transitions. This is the one here. I liked this paint drop. I don't want mine to be as extremes. I'm going to play around with something like this. Double-click on it to adjust it and I'm going to say you got there, you got there, and you can adjust these little handles as well. Some wavy thing and we'll give it a fill color for the moment, not white. I'll give it a big red color and I'm going to show you in the next tutorial how to do the gradient. Let's do that now.
26. How to make a gradient & blur in Adobe XD: Hey there. In this video, I'm going to show you how to work with gradients, move it around, pick colors, that awesome thing. Let's go and make some gradients. In the last video, we drew this shape with a squiggly line on the bottom, I'd like to add a gradient to it. They hide gradients a little bit. If you click on Fill, where it is this solid color at the top, this is where you get to gradient, and it's got a lot of the typical gradient options. You can grab one end and play with the rotation and this first end of the other side. You can just play with the different sides obviously, I'm going to undo mine so that its back to its normal fill. You need to work on the line by clicking this little icon and then setting the color, or you can click on it up here in this little option at the top here. I'm going to have this color, in color just so not white, just a bit darker and probably just a little bit warmer. I'm going to go to the yellows and I'm going to go across just other little tiny bit. I want it to be quite a warm, maybe even not that much. It's hard to pick with a small little tile. You can play with your hue and saturation and brightness. Even those are little hot at the moment. This first option here is just going to be plain old white. I'm going to click on New, drag into the corner and that's what I'm looking for. It might be hard to see on your screen. Just a really subtle light gradient. I like doing these, it adds a little bit of richness, I think, to the background and it's just trendy at the moment. I'm going to get rid of the border. Next thing I want do is I want to have it to have a bit of drop shadow because I want it to cover the things underneath, just look like it's like raised off the ground. I'm going to use shadow. You can play around with these settings. I'm using 0,13 and 50 for the blur. X and Y just means that X is not going to the left. Y means it's only going down and it's going down quite a bit. In terms of the B, that's blur, how blurry it is. If you turn up to 150, watch it, it gets really blurry. It's up to you to see [inaudible] up to 99 turns out. I'm going to go down to maybe 50. If you're not happy with the strength, you can just click on this little icon here and crank it up to full black. I'm going to put an image underneath and probably adjust it as I need it. That's it for gradients and a little bit of drop shadow blur.
27. The pros & cons for working with images inside Adobe XD: All right. In this video, we're going to look at importing images, the pros and cons and why you need to have very, very big images to support all sorts of devices later on when we're exporting. All right. Let's go and look at images now. One of the cons is you can't bring in PSDs or AI files which are the native files for Photoshop and Illustrator. You need to save Illustrator files as SVGs, and Photoshop files need to be saved as jpegs or PNGs. Then they come in fine. Bringing them in is easy, you can use File Import or often what I do is just find them and just drag them in, from either the Finder window on a Mac or on a PC, you can just do the same thing with the window. So that's my files in here. Another way of working is, I'm going to delete hen. It's connecting to the Creative Cloud Libraries. Let's save that in Photoshop. I've got this image, I drag it into my instructor HQ library. In here in XD, I'll open up my libraries and I can drag it in. The cool thing about it is that there's a connection between the two, and that means when I drag this out, it is this John size. I'm going to shrink it down and I want it in the end. I'm going to send it to the back. But his head, I want to flip it over. Because you can see over here it's linked, and if I make changes to it in Photoshop, so I drag this into here, it's not this guy anymore. He's a lone ranger. If I go to window and go to libraries and I open up this guy, I can right-click him and say edit. If I say select all and I go to edits, and I go to transform and flip horizontally, and I hit save, look what happens over in XD? You can see it flips over in here as well. So that's handy, especially if you're using assets across like say InDesign and Illustrator and After Effects. Or using that shade library, you can start using an XD so they're all connected. So when you make changes to one, they all go and change. The other thing to consider when you're working with images inside XD is the size they need to be. We're working with a rough size, remember. I'm going to send this guy to the back and this guy even further back. I'm using my shortcut command Shift Square Bracket or Control shift Square Bracket to do the arranging. Remember, across here was about 1400 pixels. When you are picking images in Photoshop, you need to make sure that there are about double the size you need them. Let's jump to Photoshop. So in here, I can go to image and I can go to image size. You can see there it's not quite double what I needed, but close enough for me, that's as big as I can get it at the moment. Why are we trying to do double sizes? Is because most computers will show just the 1400 version. But if you're dealing with retina screens. So a regular screen is at 72 dots per inch. But say my MacBook Pro that I'm recording on right now, it's actually at 144. It is double resolution. You just need to make sure that your images for a website are double the size you need it. Because when we export this at the end of the course, we're going to have an option that says, would you like to save a double resolution version? We can say yes. If you start with really small images, it will double the size of them, but they will pixelate and not look very nice. So start with good quality images. When it comes to mobile phones, it's even bigger. Some Android phones get up to four times the size they need to be. So if you want to support those super big high res phones, which you'll need to talk to you as a developer, will you going to support that or just two or three times. You might have to start with some really big images first, and you can scale them down in XD fine, and XD will do all the hard work when you export them at the end for all the different sizes. We'll talk about that in another video. So the rule of thumb is, double the size you need them, mainly for web. All right, onto the next video.
28. Working with Illustrator, Photoshop & InDesign in Adobe XD: Hi there. In this video, we're going to look at how to use Illustrator, InDesign, and Photoshop altogether nicely with XT plus we'll do some cool Photoshop stuff where we turn him into super long version and same with her. She becomes super long version. I promise, it's Photoshop magic. Let's get in and do it now. Working with Illustrator, InDesign and Photoshop are all easy. Photoshop is going to have some special treats at the ends, hang around for that, but working with Illustrator, we've seen it before. We just draw anything we like in Illustrator, copy it and jump into Xd and edit, paste. I'm using edit, copy and then edit, paste. The cool thing about them is that from Illustrator it's vector, I can double-click on it, start breaking things apart, start playing with it. That's some of the nice packs with Illustrator. Looks exact same way with InDesign. Let's say I want to draw, I know how to draw a starburst in InDesign a lot better than I can draw in a new program. I'm going to use the polygon to give it a heightened width sides of 50 and percentage of 10. I'm going to fill it with a color, you get this starburst shape. All you have to do is select it with the black arrow, edit, copy and then in here go paste. Same principle is, it comes through as vector, so depending on your skills, you might be using either of these programs or you might not be using them at all and that's fine. But if you do know that you can copy and paste from these programs super easy. Now, working with Photoshop, you can still copy and paste. So in here, I can open up a couple of files and open up both hero one and hero image two and I can stick that old copy in an Xd just paste it and it comes through. That's an easy way. One little bonus thing I want to show you is that this graphic here often when you're dealing with websites, you want to long thin because I wanted it to be about that wide but I need to shrink him down and the problem is, if I shrink him down to fit that height that I want because I want his whole body in there, problem is, I'm left with white spaces either side, so I want it to be even smaller. Unfortunately, you left with what to do with this area here. Cool little tricks in Photoshop. The first one is we'll deal with this guy and the first thing I want to do is do a select all, and then go edit, copy, edit, paste. You can totally use your shortcuts here. I've got him on his own lap. I'm not worried about this layer underneath. What I want to do is I'm going to zoom out a little bit. I'm using Command minus on my keyboard or Control minus on a PC. Then I want this tool here, it's called a crop tool. It's about the fifth tool down, in a toolbar. What I want you to do is holding down the Option key on the Mac or the Alt key on a PC, grab one of these sides. Holding that Option key just means it doesn't do one side. Holding down optional Alt means it does both sides at the same time. I want about that size and hit return, just giving myself a bit of extra room. Now, filling this space here, there is a magical trick. What you can do is you can go to Image and go to Edit, Content-Aware Scale. Click on this. You get this little bounding box and you're ready for the magic. We going to click Hold and Drag this way and you're like, no way and I'm like, yes way. I love continuous scale. You see I made the piles bigger, but it left him intact. Hit Return when you finish, that is content-aware scale. Now, content-aware scale doesn't work on every image, it works particularly good with this one. Let's look at another image. Let's look at this guy here and I am going to do this exact same thing. I'm going to go to select all and then copy and paste, so it's on its own layer, zoom out a little bit, grab my crop tool, seize the shortcut, hold down Option. Get it to be the right size. You can see here is like a slight gradient in the background. So if I grab to say the eyedropper tool. Grab that and I try to fill the background, you'll notice that, it's too high because the gradients are so weird and it's not a solid color in the background there. I'm working on the top layer here, I'm grabbing my Magic Wand Tool, which is the fourth tool down, I can hold down the Quick Selection Tool until you find that Magic Wand Tool. Click once on the side, hold Shift, click on this side. So you got both sides selected, then go to Edit and go to Fill. It'll default to this one here. This is our secret weapon Content-Aware Fill. It's like Content-Aware Scale. Let's click Okay. Hold on to your hats. Click Okay. I'm going to de-select. Select de-select and look at that magic. Look at those blends. So good. Those are the two magic like potions when you want these elongated images. So Edit Fill. We'll default a Content-Aware Fill or a Content-Aware Scale. Doesn't work every time, but it's definitely the first thing to try. I'm going to save both of these and import them in. Remember, we can't use PSD, so I need to do a File Save As, and I'm going to do JPEGs for both of these. I'm going to change this to be extended image two. Save it, super high quality. Remember we talked about before, image size, this things ginormous now, way bigger than we need it, which is good. I'm going to close this one down and same for this guy. I'm going to save him as a JPEG and this guy is going to be called Extended image. Let's close him down. I'm not going to save him and in Xd, I'm going to say goodbye buddy. You are gone. I'm going to bring in my two images just by dragging them. Extended image one and two and we go. Awesome, so you are there. You're probably bigger than I need you now. Maybe you made too many panels. I might go back and redo that. Can I don't what I want to? No. He'll be fine. Do that. Send him to the back. I should have flip them over as well while I was here, which I'll do now. Edit, transform, you can see I can't do it. So I got to go select first. Edit, transform for the horizontal, save, close it down and back into Xd. Delete this guy. If you're not using libraries, they don't update. So you got to re-drag them in every time. That's why libraries are handy. He's about, well, I'm looking to do it now. The girl, she's out here, one thing you'll notice is that, watch this. If I put this just on the edge here, and I click Off, it disappears but if I put it all the way out, click on it, come here and go all the way out. It stays full. It's because it's not part of this outboard anymore. You can see over here, if I click on the background, I got nothing selected, I have a homepage up board, and then I have a paste board, which is all of this stuff. It's almost like separate up-board. So there you go, and you're going to go about there for this one. Last thing I want to show you before we finish. It's not really a super-duper tricking and delete these. Often what I want to do is I want to have, the sky here, I want to have text over the top, so I need to wash him out. So I'm grabbing the Rectangle Tool and I'm going to draw a rectangle that goes like here. Make sure it snaps to the bottom. It might even get it snapped at this side. I'm going to fill it with black. I'm going to give it a border of none by obtaining the tick off. What I want to do is, I'm going to move it backwards until it's underneath this thing, but not behind the image. The easiest way to do it is you can right-click and say Send Backwards over and over again until it gets in the right place. But you see the showcase here on a Mac, it's Command open square brackets, on PC it's Control open square brackets. I save my time just tapping away at the keyboard. You probably hear me tapping. You can also see it in your layers panel here. I'm just above that image, but below this. What we are going to do is lower the opacity. It's a nice way of dumming it down so that you can add text, or in my case, a couple of icons. That's working with Illustrator, InDesign, and some super awesome stuff in Photoshop. Yes, so I'd note I have courses on all specifically on InDesign and Illustrator and Photoshop. You can check those out as well if you want to get more up to speed about those. On to the next video.
29. How to mask in Adobe XD: Hi there. In this video we're going to look to make masks, how to create them, and then how to edit them afterwards, like Dragon round, come back out the fully editable lovely old masks. Let's go and make those now. There's two ways of masking and it's pretty easy. I've got an image that I've imported earlier, grabbed the circle tool, I'm going to drag out perfect circle holding Shift and drag it across. Select both of them, I'm holding Shift and clicking both and then go to Object and go to take Mask With Shape. There's the shortcut Command Shift M or Control Shift M and their masked. The nice thing about it is that you can double-click it, and you can see I can move my image separate from my mask. If I need to click out and the mask retains. I undo, that's how I wanted it there. The other way of doing it is say that I have a circle to start with, and if I drag that graphic into it, so there's my extended image, actually, I can just use my hero image 1. If I drag that straight into XD, you can see it becomes in the center there. Now the difference is this one is now using a cover option where it will expand and contract to fill inside of this with this original one down here is I can separate the mask into different things with the image from the mask shape. Whereas this one here that kind of fuse together that to do with the fill. You can't adjust it inside of here and drag it around, you need to use this method. You can delete it from there by just going to fill and just picking a fill color and it'll override it. Two shapes make or just drag it inside of one and they have different properties. I'm going to delete this guy here and that's if a mask. I'm just going to finish off a little project here and I am going to draw something that covers there. I'll fill it with my color, I'll send it to the back given our border, and I'm going to grab here and just move it across a little bit of actual image and drag it across and we go up a little bit. I'm going to bring in a bunch of images and draw some arrows so you can skip along now because this is going to get boring. Import all of the, unless you're following along and you want to see what it looks like. I'm going to get exercise files, we've got Images, and I'm going to bring in all these logos here. They're all paired of different sizes, fun. I'll just drag them down so they're all on the pasteboard and drag them all in as I need them. The cool thing about them being vector, is that their scalable, and I can double-click to get inside of them, so as it's easy to zoom in, double-click. We're only selected on one bit there, so I've got them all selected now and I'm going to go. Good that's going to be my fist one. Twitter, I'm afraid you're going to have to be white as well. Holding Shift to make sure they scale proportionately. Udemy, what I might do for them is ungroup it. Keep ungrouping it, sometimes you need to do it a couple of times and so I can delete this one. I just want the icon and I'm not a fan of your new red Udemy. I like the U, not that red color, maybe it's me. Same with this fellow. I'm going to ungroup a lot of times, I'm going to grab you and make him white. You'll see that these two pots here I want that to actually be a hole in the middle. We did this before. I'm going to hold Shift, click both of them, and I'll use this one here, the second one minus front to cut a hole in it and we make an icons. It got to a 100 percent to make sure I'm getting them a nice size and I'm not everything's a bit big at the moment. You continue lies panel off just to make sure you've got enough room, and what I'm gonna do is I'm going to grab all of this and I'm going to shrink it down considerably because I've been waking way too big, zooming out too far. Now at a 100 percent, and that's what I'm looking to do. Awesome. You can get there, make sure you align, scale this way. I'm going to find all my icons and here they are all. I get in the right sizes. Try and work out some layout for them to look like that zoom in across. Skillshare's the only one that doesn't have an icon. They do you that it's really unrecognizable. You might have to go that side. Why? Because I want to draw some arrows. I'm going to use just the line tools easiest In this case. It's going to have a white line. Maybe three. If you wanted a really nice area, you might have to actually jump out and find an icon version. Here's eyedropper tool, still that one, doesn't steal the stroke way. Actually what I might do instead of doing a little pointy one, I'm going to do a proper little triangle. I'll fill it with white's turn the motor off, pick off to click quick on, get the whole thing. The big actually remember we're at a 100 percent. Now one of the shortcuts to get a 100 percent is Command 1 or Control 1. That'll jump out to a 100 percent perfectly. You hold Shift, curve you down and then across. You now Shift grab U. I want to come with these guys. I want you actually they can all go around that circle there. I have to play with around with this a little later on because you don't want to watch me tap on this thing. What I want to do is something like this. I had my hidden released. You've totally skipped on now to the next video having a damn thing with lines. All right, that's what I was going for. It's probably not quite right and especially this one's joined almost. The little thing I'll do before I go is I want in here a circle 100 percent. I want to have a border of whites, maybe two. There're some icons that you can bring in, so File Import and in you're icon's folder, there is one called Mute, Volume off is the one I want. I want this in here to indicate that like there's video playing and you can unmute it. We had the video camera earlier on but I'm going to double-click it to go inside, change the color to white. I'm going to add a little bit of text and a black box for it to sit on. Fill, border none, opacity down. You can type in with this one. Type 2, this is going to [inaudible] this is going to be explanation. Show video, auto playing with new enabled. So that the user knows the thing that's happening. Often I'll put it in square brackets so that you know it is not marketing speak that it' more just the to help the user testing go. Fill's going to be white. I'm going to leave it half Veda cat, because I want it to not look like it's part of the actual design. I want it to be like a little info piece there. At the moment you can do videos inside of XD. That's going to be it. There was a big obit of production at the end of that. We learned a little bit of stuff about how to do mask at the beginning. Remember way back then, it's probably 15 minutes ago. You get a gold star for watching to the end. All right, onto the next video.
30. Production Video Adding text fields & buttons in Adobe XD: Hey there. In this video, it's going to be a production video. We're just going to go through and do some stuff and what I'm going to do is the stuff at the top here where we add some text fields, some buttons and we drag this up a little bit, do some amends, we add some placeholders and we look at this, which is really cool. It is the feature requests for XD or bugs. It's a way for you to go through as a user and say, we really need underlining and upvote it. Look at the other ones and upvote what you think because whatever gets to the top of the voting pile, Adobe XD will do next. A handy little thing to go in and say, yes, we need these features quick, smart. All right, let's go in and do it. Up here, I'm going to add our marketing call-to-action and probably just use Fairplex, still him. This one is, Quick test drive. Now, easy onboarding. It's going to be somewhere in the middle of the page, you can see if you drag it around and you get close to the middle. XD is pretty clever. Making sure I'm looking at a 100 percent as well, just so I get a sense of how big this thing is. To move around within the document, you hold down Spacebar and you can click hold and drag. I'm going to build a text field. You might jump out to something like the materials or Microsoft or some of the wireframes to get ideas of how text frame should look, but actually the default box ends up looking quite good. It's got the right liner on the outside. What I'm going to do is just change the radius to be two pixels to match the rest of the style of this. Go in and add a simple drop shadow, I'm happy with how that looks and I'm going to grab my type tool, click once and this is going to say, "Name your course?" With it selected, I'm going to open up my Assets panel and you need it to be minus 16 yes. What I might do is because it's an input field, it looks a little bit nicer if we either change it to gray or just lower the opacity, so it's like faint in there so you know you can type over the top. What I might do is bar some of the stuff from the wireframe. It was the wireframe we made and I'm going to copy you, I want you and there's bits in here that I want. I'll copy it and bring those bits over. Mainly I just want you too. You're going to go there and you're going to go somewhere over him. Plus, and what is it going to plus? I'm going to bar these keys along the top here, I should bar both of them. Come here boys. For some reason, this one here's going to say, just "UPLOAD VIDEO". I might have to get these lined up, yes, looks good. This one here is going to line up with that guy. I'm just selecting these with the black arrow and just using my cursor to move them across and this one here is going to say, "PREVIEW". [inaudible] a little bit. We're going to have a little checkbox so you can tick your own version. It's just going to be this. If you hold Shift while you're drawing a rectangle, it is a perfect square, so hold down Shift while you're dragging it out. I change this to say, "USE SAMPLE". It's going to bring us to a point where there's no underline. It's got some pretty basic text options. It's missing a bit. There's no underlines, I'm just drawing with a line tool now. When it comes to these features, there's some that are super essential that you really want and you can't believe it doesn't have. What you need to do is you need to jump out to, I'll show you. It is this site here. It's adobexd.uservoice.com. Jump out to there and it's a way of you going in and ranking stuff, so in here, if you click on "Search" and you type in underline and do a search, you'll find that dotted underline text, underline text. This is something we need to be able to do this. You can upvote it, so that the developers at XD, they can get a sense of what needs to get done first by the votes. You can see this feature is being started, which is nice. It's being started a little while ago, so it should be done soon. You can add your comments on here and abuse them for not doing it, that's what this seems to be for. So be nice. The XD guys are nice. I've met some of the XD developers and they are really nice guys. They just have a lot to do, it's a new product. The other thing you might do is just spend a little bit of time looking through and just upvoting the stuff. Like in here, this I really want, you just click on "Vote", add your e-mail address or sign in social media. I voted for loads of these so far, but this one here I really want, so you can have things like a navigation stuck to the top. So when you're swiping, it doesn't move, it's really good to apps. We're mocking up an app. Back to XD. A Couple of things I want to tidy up, I'm going to zoom out, is I want this actually to be part of this and I'm probably going to just adjust this. Maybe we can adjust our mask, so I'm going to make this bigger. I just double-clicked on the girl there and I'm going to make sure she's big enough for my new square and she's going to be actually in this square. Nice. A little trick when I'm selecting something is I drag a box around everything and then unselect the two that I don't want, which are these two, by holding down Shift. It's just an easy way to grab all of them. Select them all and then hold "Shift" and click both of these, then you've got the selected. If you grab right in the middle of there, let's see if we're grabbing lots of things at one time. Next thing I want is there's going to be an up box here that has two lists that we're using in the product the client wants. I'm not going to do those just yet. I'm going to add a little placeholder, so the instructor list will go here. Nothing special, just a little bit of a placeholder so I can carry on with my design. Now, the thing I'm going to do is grab the edge of it, double-click it and just make this a lot longer. It's a nice easy one, let's get on with building up our instructor dashboard next.
31. 31b How to make a popup model in Adobe XD with a blurred background: Hey, there. In this video we're going to make this page, where the background is faded out and dark, and this little pop-up model appears. Let's go and learn how to do that now in Adobe XD. The first thing is I'm going to duplicate this page here, there's loads of ways of doing this. You can select the word homepage, copy and paste, and put another one next to it. You can hold Alt and drag it across. You can go to your layers panel and right-click homepage and say duplicate, everything leads to a new page. Thank you, XD. I'm going to separate mine out just because I like a bit of gap in there and I'm going to rename this one here. This is going to be my pop-up decision. What I want to do is, I want people to click on this preview button and then have their options to say, would you like to see it as a student or as an instructor? Cool. What I would like to do at the beginning there, I want to select all of this and do nothing. Actually, what I want to do is grab the rectangle tool and draw a box over it all. I'm going to draw it over the whole thing all the way down to the bottom. I'm going to have no border, give it a black film. I am going to go to background blur, this cool option. Background blur, the tick on just blows everything behind that box we made. Now, was black and obviously it's disappeared now. What you can do you is see it's opacity you can just come out the moment it's completely see-through, you can make it a bit more opaque and decide how dark you want that to be and blurring the background. It's a really quick way of this little popups going to just fade the background out. Then it like an Ajax pop up. What I'm going to do is zoom out a little bit, I'm going to select it all now. Okay? I'm going to lock it, so Command L is the shortcut. Everything is locked so that when I'm working on my little pop-up model, it's not going to have trouble. I'm going to do a little pop-up modally thing. It's going to be this, it's going to have a drop shadow, it's probably going to have a larger drop shadow than normal. I'm going to do six by six and a blur of maybe 16. You see it's just a bigger drop shadow, and to make it really obvious and stand out and change the cross, I can either pull it from my wire-frame or remember the sticker sheet from Google material. There's some really nice stuff in this top-left part here. I'm just going to grab him, copy him, move him across, not to this one, to this one, paste him, here he goes there, and make sure I'm working at a 100 percent. You realize that is a big model then, but big. I'm going to pull some ticks from here, from what students sees, what you see. I might grab all of this, copy it, just move it across and stylize it. Our text is going to be our 16. Back to assets, and we're going to go to 16. These buttons here, are going to be from, steal them from here, maybe you can do it at Copy then select this file and go edit, paste appearance. Now, that didn't work because this is actually grouped together so got to ungroup it and just select the blue box, because I had both the text and they didn't know what to do. Paste appearance, under the same with this one. This is already separated apart, paste appearance and I'll change this one to our green. Now, I'm just messing around lining these up trying to make them look pretty. They looks okay, maybe a bit higher, but smaller, and you go up in the corner here. All right, and that's all I want. Played the background, made a little pop-up thing that's not quite in the center. The cool thing about it is, even though these are all locked and I selected them, looks like they've got everything selected by just dragging this, you can see they just stay locked. Okay. So I'm going to group this thing. If I group it, it gives me like the options you see that purple line that appeared so I know it's in the center. All right. That it's going to be this video, let's go and make the dashboard for the instructor page.
32. Creating 12 column card dashboard using the repeat grid tool in Adobe XD: Hey there. In this video, we're going to look at creating this instructor dashboard based on a 12-column grid, we're going to turn it off, so it looks pretty, we'll make all of this, then we'll transfer it over to our homepage, and do some fun stuff where we blur out the background, and add buttons, and do cool stuff with symbols. Lots of things to cover in this video. Let's go ahead now and do it. This is what I'm building here, you can click on this button, it shows you the student view, which we're not building, because the client has asked us not to, they've already got that made, it's this instructive they want us to build out. What we'll do is we can make a new page, but because we already made the 12-column grid, in this first one we want to make sure we're duplicating that, so it doesn't really matter if we duplicate a pop-up decision, because it has all the homepage bits and pieces, and so what I'm going to do is click on this Copy Paste. Now, I want them to be separated and perfectly still separated in the right order, and what happens is if I grab the title here, and watch this, if you drag it across, you'll get this nice big magenta box aligning it up, that won't appear, if I can't see that gap, and I drag it out, it doesn't know what I mean, so you need to be able to see the gap. This gap over here for this to actually do its magic, so if you find it's not working, you might have to zoom out a little bit. We named this one here, this is going to be Instructor-Dashboard. Cool. What I'm going to do is I'm going to select everything, delete what was there, which is just my modal, I'm going to select everything and go command L, unlock it, delete it. Now, I want to go to my assets panel and you'll see that because they weren't seen, I can turn all these guys on. Actually, it's easier just to select the top one, hold Shift click the Bottom one, just one hold Shift click the Bottom one, and then hit Command semicolon on your keyboard. I now got my grid back, so I can start using that to build out my dashboard. The other thing I want to do is I want my navigation on the top to be a symbol, so I need this. Because I want to reuse it and I want as a symbol, I want it to be able to be adjusted once through the symbol and they all update on the other pages. I've selected them all, hold Shift click this guy, so I've got all of this selected, I'm going to go to my assets panel and I'm going to say, I want you my friend to be a symbol, there is there. Now, it doesn't matter if I drag this out, and line it up or just copy this guy, now, because he is a symbol, and I click on this page, I paste them, it goes into the exact spot, that I need it, which is great. I'm going to break this up, I'm going to break this 12-column breaks into four sections quite easily. We're going to do three, that's going to be the left navigation for the instructor, and then I'll use the following nine for my cards, so I'm going to build out my cards, so I'm going to ignore the first three, because that's going to be my navigation, I'm going to grab my rectangle tool, and I'm going to stop building this out. Going Course 3, now make sure 100 percent. How big did these cards need to be? That's about right. I'm going to have a drop shadow, no border, just course, I'm going to grab the Type Tool, click once, hit Plus, I'm going to make it the green, I'm going to put a little circle around it, and zoom in, hold Shift, you get a perfect circle, no fill, green border, Enter, nothing's working, if it's not working, it's because I didn't have it selected, square the black arrow, and click on this guy, then have no fill, and have a green border, and how why? I want to try and match the plus, so maybe two. Go tappy, tap, tap, tap, click both of them holding Shift, then group them, Command G, or Control G on a PC, go back to 100 percent, which is Command 1, and it's all of it big, so you go down, a bit smaller. Double click it to go inside the group, I'm going to click on him and ju3st line them up in the middle, and this, I decided to change my mind and make it one. All right. This is my little plus button, which is not quite lined up, so I'm going click on you, and you, and go both them selected, I'm going to make sure you're aligned and you're aligned, the up and downs is not working that well, because it's actually a font, so there's a bit of extra at the top, but definitely horizontal work nicely. Back to 100 percent, I'm going to grab my Type Tool, I'm going to make sure it's centered, because if I don't and I do it left aligned, that's going to be fine, but when I start adjusting this, when I repeat it, I'm going to have to keep moving this around because I want this to be centered, so when I click once I'm going to make sure it is centered, this one's going to be the monthly recurring revenue. Select it all, click on our Roboto, that will work, down the center of this, is going to be my bigger option, it's still centered which is good, and this one's going to show what my current recurring revenue is, and what we'll do is we'll stop playing around with this. It's going to be different from all these other ones, so it's going to start with the effects large, but I want this one to be bold. Not bold, it's going to have to be book actually, because I don't want to blow out my fonts, so he's going to be this, he's going to be my lovely color. Great. There's going to be a little bit of explanatory ticks down the bottom here, or this one's going to say up nine percent versus last month, what I might do for that just to play around with the hierarchy of information, as I just might make that lighter color. What I want to do is just move a little bit to the left, because actually what I want to do is put a little up arrow or down arrow, and actually I want this, instead of being a gray, I want it to be green if it's going well, and maybe red for it's going badly, it's always going to go well. I'm going to grab the arrow from maybe, the sticker sheet, from Google, there's only right arrow, but we can fix that, paste that in here and rotate it around. Holding Shift when you're rotating it will make sure that it rotates in a 90-degree angles or 45-degree angles. I'm using my arrow keys just to push this around, and what I might do is this has come through as a K. When it's selected and you can't see any of the insides of it, it means it's probably grouped or it's a symbol, so all I'm going to do is go to Object and go to Ungroup. Now, it's a couple of bits, so it's that, plus there's a liner around the outside, I don't want the liner on the outside, I just want you and I want you to show green for good, maybe the darker green, and I want to crank the percentage up, I decide again, lighter green. All right. You spent ages designing one of them, and you know it's three columns, so what we're going to do now, is multiply this thing out. I'm going to zoom out, you can see all of the columns, I'm going to select all of this, I'm going to to repeat grid, and I'm going to drag it across, and I just want three of them, and how many down, I want about four of them. Great. I'm going to play with a spacing and I zoom in and try and get this spacing to match the background close enough. I'm going to adjust in a second, it doesn't snap to the things in the background, so we'll have to manually do it. But to be honest, it needs to be 12-columns, but not absolute pixel perfect because this is something that's going to be recreated in code later on, so I'm going to make them even. All right. You get to a point where you like, you could now go through and say actually I want to adjust this one, double-click this one and go to user churn, and the churn at the moment is 15 percent, and it's for my stuff anyway, my user churns go high. We're going to get to a point now where I say I want to change this to be red because user churn is going to be up by some last month, so it's going to be up three percent up based on last month, but that's bad, user churn up is bad, monthly revenue up is awesome. What I want to do is go through the him and I run to our problem, where I have this selected and I want to go and change this to say big bright red, you'll notice they all change, so there are things like text, you can change, like we change, use churn and that didn't update, but you'll find quickly that you eventually need to ungroup them or outline them, the bad thing is that they'll never be able to be that nice little repeated grid, you might be able to drag out more of them, but now with the selected, I can go through and they're all individual pots and that's what I need now. I need you, if I can even select on him, he is grouped, that's why I can't select on just this bits, they are all grouped, so what I'm going to do is either double-click on it or you can ungroup it, and I'm going to go to big bright red, and same for the fill of this, what I might do is add that red to my reusable colors, big bright red, I'm not going to go through and fill those all in, I'll do that in, then speed it through, what I want to do is work on the left-hand nav. Often when you get into admin side of things, you'll have a top nav, nice, simple, easy one for everybody, and then on the left-hand side is where you potentially have a secondary nav and that's what we're going to have. I'm going to grab my type tool, we can get 100 percent, and like our spacebar, drag across, click once, and I'm going to have at the top here, the dashboard. I'll use one of these, that'll do, one at the top of this, and now, I'm going to go through and add the different options for this dashboard and there's no bullet points, so what you can do is go out to use a voice that I showed you and upgrade it as a feature or just hold down the Option key and type on a Mac or Alt key on a PC and type eight, the Number 8 on the top of your keyboard, that'll give you a fake bullet, and I'm going to go users, and I'm going to click this and pick my 16 for my body copy. Instead of putting number tens and putting in the next one, what you want to do is have separate boxes because if I do this and have loads of tens, I can't have this when I got a prototype is more than just one button to go to another page, so all of the nav will end up in one page, what I want to do is have lots of them, so back to design, I want to duplicate This, and now I'm going to go to prototype I could say this button goes somewhere else different from this page, so if that one takes both that's not allowed. In here, I'm going to go through and add this. I'll get Jason to speed this up. Thank you, Jason. You're back, and what I want to do is, if you didn't know, if you hold the back arrow, click hold and start dragging, and after you start dragging hold down the Alt key on a PC or Option key on the Mac, you'll get a duplicate and if you drag it close enough, you'll see those lovely magenta boxes pick up and say, "Do you mean 16 or 17 pixels?" and you say, "Yes please." nice and easy. There is a duplicate, like in Illustrator, you can go to Edit, Duplicate Command D, so that's probably actually a quicker option. Drag this out, Command D, and it just duplicates the thing. You have to drag it, it doesn't do exactly like Illustrator and where it steps it out as well, but you can duplicate, or copy paste, or Alt drag like I just did. I know this instructed navigation is going to appear in lots of pages, so what I want to do is select it all and make sure it's a symbol over here, symbols, so that when I update it once it updates on all the pages. If you've forgotten how to update, while we're here, I've got two of these now or even three of them. It means that if I go into this first one and say, actually we're not going to call it Users, we're going to call it People. Nothing changes, that's quite unique. But if I click off, click back on, right-click it and say update all symbols, can you see these come along for the ride so that's why I'm undoing this now. That's why symbols are useful for the top Nav, this thing here. There's a couple of things I want to do before I leave. It's called the main guts of it done. I'm going to go through and adjust these boxes a little bit, and I'm going to turn these off. I'm going to select them all because I've used them to get our lovely column grids so we know it can be developed later on easily. But I'll stick to all these and get Command semicolon. Those are off now so I can see what it looks like. What I want to do for this page is I want to change the background color completely because I like this white boxes, but I need to have a little bit of contrast in the background. All you do is, if you click on the edge, you get Page Properties. Double-click the edge, you see appearance "fill" means that the background color fill. I'm going click on this and just pick like a really light off-white. I might even add it to my swatches down here so that I can reuse it later on, just to pull those off the background. There's a couple of things I want to do before I go, it's these two boxes, I want to combine into one. I'm going to turn that one off, I'm going to ungroup this one, it's going to be double height, and this one here is going to be a list of recent subscribers, so if you're a trainer, you can see the people that have just signed up. Recent subscribers, and you see now how useful it is to make sure it was centered before I started working because it's always going to go from center, otherwise, if it left the line being bummed. I want you gone, and I want you gone, and I want you gone and now I need to create some recent subscribers. A really good trick for that is, if you jump to a website, there's lots of them, if you type in random name generator, you will find lots of them. This is the one that I always end up at and you say, "I want 10 names. I want male and female." Names style, "I just want really common names and generate random names," and I use this to populate datasets for my mockups, makes life really easy. I'm going to grab all of these, dump them in here and I'm going to make them actually just one big textbooks because I don't plan on being these clickable in this mock-up. I'm going to grab all of these, I'm going to make sure I'm not a 100 percent, make sure I'm designing these right and what I might do is make them all left to the line. There's tabs in here, it's not what I want, space it. Now you can fast forward little bit Just into the end of this design thing. Just hang around for afterwards, there's more interesting stuff coming but let's speed this up, go. I'm back. What I want to do is, these last two are going to be download the app, and we'll do that in a sec and then this one here I would like it to be like a little, because it's a new product, I want to have a little option that says, "If you have a great ideas, email us." I'm going to get rid of you, get rid of you, get rid of you, don't need this. A little extra button for this one, I'm going to put in a big button and I'm just going to steal it from this page. It's all grouped, ungroup, copy and you're in the center, nice. This one's going to be feature requests. Feature requests go, hold in Alt, if you drag it from one side it goes both sides or option on the Mac. That's going to be my little feature request button. Now I'm going to update the rest of these so Jason can fast forward these and I'll see you just afterwards for a tiny bit more before we move on. I've filled in the details and what I also want for this is, I need all of you guys just come down a bit because I need another button at the top here, so I'll borrow you. That allows people when they're in their preview to be able to save where they're up to. I will start making their own because this would be one, so we'll do something like create your own, and a little plus at the end, Sometimes I get a bit long with these buttons. This is probably not going to make it through user testing and I can't, for the life of me, think of a better way of writing this right now. Same colors, actually I might pick something slightly different to be a little bit obvious. This actually should be Roboto. That means if that's Roboto, and that means that's not either, all of the buttons are like that. You too, because I copied and pasted them from the wire frame. You probably saw that and went, "Oh" and I ignored it the whole time. It's okay, I've got that up. We've got that, I added a little bit of text. You can go on now, I'm just going to add a little bit of text here. This is actual live data and I want it to be colloquial. For some reason italics makes everything feel like it's the spoken word, in my head it does at least. It's going to be quite small and this is going to break my rules here because it's going to be something a little different. Yes, these are actual live data that's what I want everybody to know. What I want to do is, now that I've got this like how I want to use this on the homepage. What I'm going to do is, I'm going to grab, I don't want them all, but that is going to be enough of what I need. I'm going copy them and I'm going to show you what I'm going to do. On my homepage, I want there to be an example and it's going to go just here. I'm going to put it in a big box that stretches the whole width, and I'm going to make this box this color, and I have no fill. Actually, I'm not sure how long it's going to be, I'm I have to adjust in a second. I want it to line up to our 12-column grid. Remember, if I'm on this page here, click inside of it and I go to layers, I should be able to see that the columns here, and I want to turn them on. Again, Command Semicolon and I might have to unlock them because they're not quite long enough anymore, so I'm going to go to Command L for locking and then just drag them down and then lock them again. Here you go, Command L again so that we're locked. I'm going to paste this and I want it to line up with those columns there. I'm going to come down here, put that there. Actually I want it to be this column here in this case. I'm going to add a cool little app download logo, we'll do it in the next video, and show you something like that. What I want to do is, I want to show you how to make it look like, because I want this big box and here to go from the 12 columns. I want it to be the same as these so you copy. You can still use your the shortcut, so I'm showing you the long way just so I remind you but Command Alt V. I copy, Command Alt V, it's just a really easy way to grab the exact same colors off these guys. That totally didn't work because it's not ungrouped. What you need to is ungroup them and then select that part. Hit it, so I'm going to use my shortcuts, Command C or Control V on a PC and then Command Alt V, we'll paste through the drop shadow, the fill gets rid of the border, happy days. Next, what I want to do is, I want to get this to look like it's fading out. We're going to look at blurring a little bit. First of all, I don't need that, and what I'll do is I'll just trim this guys off, just leaving them actually, all of these, goodbye. What I want to do is I'm going to grab the Rectangle Tool and I'm going to draw something across the bottom here. I don't want it to fade this out, I just want to look like it's disappearing into the bottom there, like I showed you in the intro. What we'll do is you fill, hold on a bit, no border and background blur reduced but we can just use object blur and you can see I get a faded edge there. I probably want it to be more, not much, something like that. I'm just moving it across. Now, fading does it for all the corners at the moment, maybe just drag this across and then flick on him and bring him to the front. Command Shift closed square bracket will just bring it to the front or you can right-click at it and to bring to front. Because I've got this like disappearing so it looks like there's more to use. Now I'll go and grab this button. What I should do is have this and both of these guys drag it into my symbols library so I've got my buttons easily accessible. I'll just move them across there, just hit the plus button on symbols, so I've got my buttons. I don't want to update one and then update them all. But I can use them this way, watch this. I'll just use it as I'm getting started. I can drag them out, and here's part of the symbols. But if ungroup them, Command Shift G or Control shift G on a PC, that means I can just go through and just spin them rather than going finding a page that has them already, so now he's disconnected, if you ungroup them, they're disconnected from the symbols. This is going to be like a see more. I'll make it a bit bigger so that there's more to go and you can check it out. When you click on that, you'll end up over at this page nowhere, this page here, the dashboard. A cool little shortcut is, if I click on this box here and I go Command three or Control three on a PC, it'll zoom in just to that specific area. It's a good way of moving around. If you're finding it a little bit hard to get from page to page, it is at the moment in XD. They needed some sort of easy navigation, pages, panel or Command J, like InDesign, some way of jumping back and forth really quickly. Last thing I want to do before we go on to the next video, this is a long, Long, long, long one. This is going to be keep track of your earnings, and this is going to be a large Roboto and I'll make it, I have seen some, dealing with the font size correctly and so that's going to be him, he lines up there. What I might actually do is, I want to use that and use it white. The next video, we're going to build the click here for the app thing and this is going to be pretty cool because we're going to look at CC markets and how to use PSDs and fold some designs into a working PSD for the market. It sounds confusing, it's not, let's do it in the next video.
33. How to make a mobile phone mockup with Adobe XD & Photoshop: Hi there. In this video we're going to mock up our dashboard on a mobile phone. We're going to use the Adobe Market that allows us to get editable PSDs from it, and also use Smart Object, so that we can do cool stuff when we update things like the logo that we made, we're actually just going to destroy it. Hit "Save". It means that Photoshop mock-up updates automatically. If I go to XD, go to second, and XD Updates as well. Makes it super useful when you are halfway through things like designing logos, like IM for this product, CC Libraries rove. Let's go learn how to use that now in both XD, Photoshop, and Illustrator. The first thing we want to do is find a phone to use. We could draw one with spin forever, and so we're going to use the Creative Cloud App and either you can go to stock and find an iPhone in there, but those are ones that you are charged for. "Assets" though has some good ones in here. "Assets", "Market" go to "Search". I searched for iPhone, I searched for iPhone6 and seven, and six seems to have the most variety of options, but I would actually be looking for an iPhone6 , or X whatever the version it is for you now. Then you just pick the ones that you think might work. We'll do two in this case. I'm going to download this one to my "Instructor HQ library", and there was another one that I like down here, this one here. We'll look at both of these. When you click on them, you're looking for PSD. You want something either AI file or a PSD. We don't really want JPGs, mainly because we want them all to be clear cut already. I've downloaded both of these. If you don't have access to this "Asset's Market", they're actually already in your "Exercise" files, and there I do "Images" folder, and they are called iPhone mock-up one and two. You can open these up. Why I've called this one PSD PSD, I'm not sure. Open both of these up in Photoshop. Or if you are using the and Creative Cloud Libraries in Photoshop, you can get a "Window", open up "Libraries", make sure you're on your "Instructor HQ" and they should be in here. You can just double click on them. We'll do this one first, because it's simple. As first thing I want to do is I want to go through and make sure there's lots of parts to it. This is the nice thing. Everything can be turned on and off and adjusted. I want to turn the background off, because I don't need him, and what I would like to do is bring in some graphics from XD. Bringing in graphics is two ways. There's the caveman way and the proper way. I want these three to be part of my dashboard. What it can do, if I just copy it, so "Command C", or "Control C" on a PC, and just paste it in, it just brings it through, but it's pixels. It's not in like lovely Victor stuff, and you can see it's too small. To get around that, all I do is, because I'm a quick, cheap and cheerful. I'm going to just make them bigger. Copy them, paste them in. Now they are of a big enough size, I can convert them to a "Smart Object". If I'm one to be super serious, use "Edit", "Transform". To get it down to the right size. Okay, so that's the caveman way. It's raster. What you could do if you wanted to be super official is, and keep all the vectorness, is that with these guys selected, you group them first, a "Command J "on a Mac or "Control J" on a PC. As long as they are one group, you can right-click them and click "Export". We'll look at exporting later on properly, but this is the basics. In here, I can either pick SVG or PDF that will retain the vector. Then you can bring those into Photoshop and those will be lovely vector goodness. If you have no idea what vector goodness means, just make them big and copy and paste them across. What I want to do is two things. We are going to line it up with the screen, and I want to get it, so you can see this is the thing that I want, this is the screen, and what I want to do is have it just above the screen and there's an easy way in Photoshop to mask these two together. Just make sure that the graphic that you've brought in, this guy here, I'm going to rename him just to be official, it's going to be my XD mock-up. Make sure he's above the screen. Then if you hold "Down" option on your keyboard or if you're on a PC, hold down the "Alt" key, and you'll see if I hover my mouse just between these two fellows. I'm looking for this icon, and if you click on that, the top one gets masked by the one underneath. You'll see he's nice and easy there. You can move around separately, it's just a nice, easy way of doing masks in Photoshop. With this screen, that lovely person who built this lifted his vector. I can double-click that icon and I can go and change the color. Actually I want to use the color that I used in XD, which I know is "F two", "F two", "F two", in that gray color. While I've been working as well for the client, I've been building them a logo. You saw probably at the beginning we had this just typed logo. That's called a logo type. It's just a bit of texts stylize texts, but they wanted a logo, and this is where we're at now. We're adjusting this little bit. A nice easy way for this to work, just to show you the workflow that I'm using, is let's say that's where we're up to now, is going to drag it into my "Instructor HQ". I'm an Illustrator, which is often where you build logos. I'm going to illustrate it. Of course check that out if you want to know more about Illustrator. It's in there, its vector, it's awesome. In Photoshop, you'll see he's appeared over here as well. That's the nice thing about libraries. Drag it in one and you can drag it out here. Mine's just going to be at the top there. Click "Return", zoom-in a little bit, and I've broken it. Header to break. Remember, I said this, our XD mock-up needs to be right at the top of the screen, and I ended up bringing in an artwork in between them. I'm going to go up there, and make sure that these two are right above each other, and this guy here, my logo, is not interfering with that little structure we built. Awesome. The cool thing about this, is if I hit "Save" now it's clear cuts. If I hit "save", can you see because our brought it through my libraries, it updates over here as well. You could just save this is a PSD or a PNG because you want transparent background, up to you, and then you can jump into XD and either import it or use your library. Shortcut time "Command Shift L" for the libraries, or you can go up to "File" and they're in there. I'm in "Instructor HQ", now you see the benefits of these libraries. I can drag him in and close that down. I've got this little guy now that I want to go through. I need to shrink him down, to be in this little app thing you saw at the beginning. Can you also see the little green tick? That means that it's linked to the library. You can unlink it, say that you don't want to connect it to the library open, you can just click on that and it disconnects. I like that connection, so I'm going to bring him in here, put him kind of somewhere there. Now grab this option, and you my friend are going to ungroup it so I can see the "Fill", bring this color. Slick both of these holding "Shift", and then we're going to go to "Object" and we could go "Mask with Shape", not "Command Seven", if you're from Illustrator. Actually what I want to do, is I'd like to copy this, "Copy", "Paste", and I want it to be in front. I want you, I've got two versions of it now. Actually what I want to do is copy this guy, "Copy" and "Paste" them. There's two versions of them now, and I want to select the phone and him. Then go to "Command Shift" him. We'll "Control Shift" him. Because now it's used to that rectangle, that peach rectangle two mascot and I'm left with a background as well. Why continued using libraries? This is where the magic happens when you've strung together a logo that's half and development with a mock-up and Photoshop and that's been brought in to Xd. If I'm going to illustrate it here, I can double-click that logo in my library and open it up and decide that actually this thing gets changed. I don't know why. It's going to change. I know it's just a work in progress. This thing here. You change the fonts, you change the colors, and everything goes and changes and watch what happens if I hit "File Save" it updates the logo in the library and because Photoshop is using that same library item, you can see it updated over here. If I save this document and go into Xd, you'll notice sometimes it takes a little bit of time for Xd to re-link it. If that happens, you can open up your library and just click this little icon,it's done it for me already. But if it didn't, you can just hit this button that refreshes it. You can see, well it's work in progress. You can set up these chains and that would update if I was using the logo up here in my top PODD as well, which I will do in a second. I'm going to go back undo this before I broke it. Save it, photoshop updates, save that and Xd go to second and it will update. That's one of the versions. Let's have a little look at how this option works. I found the mock-up tool. I want to show you this because some of them come at it like a slightly different style. That other one we did, we just use their simple mass to make this happen. What they've done in this option, castle.com, given as a free resource, they've got two phones. A white one and black one. I just want the white one, but we'll cover them both on for the moment CC place your image here. What they mean by that is if you double-click this option, here it's called a smart object, you go inside this. We're going to double-click go inside. What ends up happening is that was the far that were at. We've opened up this extra thing called Screen1.psb. These are all smart objects. It's going to ask us about fonts. I don't mind, I don't want those fonts. What I want to do is I'm going to select everything in here except for the background and hit "Delete." With a background, I'm going to use fill. Which color we want to use? We use the f2, f2, f2 again. Got that off gray, I'll paste that thing in again from Xd. Copy, paste in here. Big, transform them down. Something like that and the logo trying to complete it. Now I'm in this separate document. I've got to hit "Save", and then I can close it down and watch what happens. Magic, it lays it out for you. If you're finding stuff through the Adobe market, often though we separated this way and things like the screens or mock-ups for a book or a bag or T-shaped will have this thing where it says, place your image in when you're looking at that icon there, double-click on them, go inside, make changes. Save it. You don't have to close it, but go back to this original and you can see it's updated in here and undo that. Save it again, close it down, nice little mock-up. What I'll do is I'll tend to background off I'll turn the black thing phone off, hit "Save." You'll notice up here in my mock-ups, it's that. I can decide now which of these I want to use. I might try just a different option here. Yeah [inaudible] options. I'm going to bring it in command shift L
Daniel Scott, Adobe Certified Trainer
